A professional-grade real-time monitoring dashboard built as a single-page application using Next.js, TypeScript, and Tailwind CSS. This application provides comprehensive system monitoring with dynamic updates, interactive visualizations, and customizable alerts.
You can access the deployed version of the MonitorPro here: Live on Vercel
- ⚡️ Real-time metric simulation with visual alerts
- 📈 Interactive charts with Recharts (line, bar, area)
- 🎛️ Status indicators (Green: Normal, Yellow: Warning, Red: Critical)
- 🔔 Alert notifications with timestamps, priority levels, and actions
- 🎨 Light/Dark mode theming with smooth transitions (via framer-motion)
- 📂 Modular widgets with expand, customize, and threshold settings
- 🧭 Intuitive top navbar with branding, user profile, and global controls
- 📑 Sidebar for seamless single-page navigation
- 🧰 Settings modal for user preferences and layout configurations
- 💡 Tooltips, contextual menus, and smooth interactions
- 📱 Fully responsive for all devices
- Framework: Next.js
- Language: TypeScript
- Styling: Tailwind CSS (exclusively)
- Charts: Recharts
- Animations: Framer Motion
- Avatars: randomuser.me
- Images: Unsplash
All code is contained within a single .tsx file as per constraints. Key sections include:
Navbar: Branding, profile, global actionsSidebar: SPA navigationMain: Grid layout of interactive widgetsModals: Settings, customization, and alertsCharts: Line/Bar/Area visualizationsTheming: Light/Dark toggle and persistenceAnimations: Subtle transitions using Framer Motion
- SPA Design: No page reloads, all interactions are modal or dynamic
- Threshold Controls: Customize alert triggers
- Time Filters: Change data visualization time ranges
- Notification Panel: Acknowledge or dismiss alerts
- Fully Responsive: Optimized layouts for mobile, tablet, and desktop
git clone https://github.com/Harsh1260/MonitorPro.git
cd MonitorPro
npm install
npm run dev