acasarsa / alert-system

Real-Time Alert Dashboard Simulator

Emulate a live alert dashboard with this React-based web application. Built for developers who want to explore real-time communication, state management, and accessible UI design.

Key Features

Instant Alerts: Leverages WebSockets (via socket.io) for seamless alert delivery and real-time updates.

Modern Tech Stack: React 18, TypeScript, Chakra UI provide a foundation for a robust and maintainable codebase.

Efficient State Management: Currently uses a context-based approach, with plans for further optimization.

Accessible Design: Chakra UI ensures your dashboard is usable by everyone.

Developer-Friendly: Includes clear documentation to help you understand and customize the project.

TODOs:

• React Router integration for smoother navigation and a more organized codebase.
• Component Reusability: Centralized select options and a custom styled-component layer to improve maintainability.
• User Experience Polish: Unread alert indicators, icon animations, tooltips, and toast notifications for a more refined interface.

Getting Started

Clone: git clone the repo

Install: npm install

Run: npm start

Open in Two Windows: To see the real-time updates, launch the app in two separate browser windows or tabs.

Trigger and Observe: In one window, create a new alert. Watch as it instantly appears in the other window's dashboard!

Exploring the Codebase

/components: Contains reusable UI elements. /context: Manages the application's state. /utils: Helper functions for shared logic.

Contributing

Contributions welcome! Please open an issue to discuss any bugs, features, or improvements.

License

This project is licensed under the MIT License – see the LICENSE.md file for details.