SCCSMARTCODE/xmonitor-ui
Creator:
SCC
Host:
XMonitor is a unified, AI-powered safety monitoring platform designed to revolutionize emergency response in Nigeria through real-time detection and intelligent alerts.
# XMonitor - Real-Time AI Safety Platform
XMonitor is a unified, AI-powered safety monitoring platform designed to revolutionize emergency response in Nigeria through real-time detection and intelligent alerts.
## 🎯 Features
- **Real-time Monitoring Dashboard** - Live system status with heartbeat animations
- **Live Feed** - Camera/sensor monitoring with AI detection overlays
- **Smart Alerts** - Expandable alert cards with action tracking
- **System Logs** - Timeline view with performance metrics
- **Mobile-First Design** - Optimized for mobile with bottom navigation
- **Dark Theme** - Professional monitoring interface
## 🚀 Getting Started
### Prerequisites
- Node.js (v16+)
- npm or yarn
### Installation
```bash
# Install dependencies
npm install
# Start development server
npm run dev
```
Open localhost
## 📁 Project Structure
```
xmonitor-ui/
├── src/
│ ├── components/
│ │ ├── MonitorLayout.jsx # Main layout with navigation
│ │ └── MonitorLayout.css
│ ├── pages/monitor/
│ │ ├── MonitorDashboard.jsx # System overview
│ │ ├── LiveMonitor.jsx # Live feed
│ │ ├── Alerts.jsx # Alert management
│ │ └── Logs.jsx # System logs
│ ├── data/
│ │ └── monitorData.js # Mock data
│ ├── styles/
│ │ └── global.css # Global styles
│ ├── App.jsx
│ └── main.jsx
├── PROBLEM_STATEMENT.md
└── package.json
```
## 🎨 Design System
**Brand Colors:**
- Primary: `#4CAF50` (XMonitor Green)
- Dark BG: `#0A0E1A`
- Accent: `#66BB6A`
**Features:**
- Mobile-first responsive design
- Smooth animations and transitions
- Accessible with ARIA labels
- Dark theme optimized for monitoring
## 📱 Navigation
- **Dashboard** - System status and quick stats
- **Live** - Real-time monitoring feed
- **Alerts** - Active and resolved incidents
- **Logs** - Event timeline and metrics
## 🛠️ Technologies
- React 18
- React Router v6
- Lucide React (icons)
- date-fns
- Vite
## 📄 License …