BurnOut Radar is a full-stack web application built with React.js and Supabase to help developers monitor their mental well-being, coding habits, and burnout risk. It provides daily activity tracking, interactive dashboards, analytical charts, and a responsive interface designed to visualize productivity trends over time.
BurnOut Radar follows a Multi-Tier Client–Server Architecture, separating the frontend, backend services, and database layer for scalability, maintainability, and future expansion.
| Layer | Responsibility |
|---|---|
| Frontend | React application, dashboards, charts, and user interface |
| Backend | Future Supabase integration and business logic |
| Database | User activity, daily logs, and profile information |
| Analytics | Burnout tracking and productivity visualization |
BurnOut Radar is designed as a Software as a Service (SaaS) platform, allowing developers to securely track their productivity, coding habits, and burnout indicators through authenticated accounts from any modern web browser.
| Feature | Description |
|---|---|
| Authentication | Login and signup pages (UI ready) |
| Daily Tracker | Record energy, focus, frustration, coding hours, and personal notes |
| Dashboard | Weekly summaries, burnout indicators, and daily statistics |
| Analytics | Interactive charts for productivity and mental state trends |
| Profile & Settings | User profile with light and dark mode support |
| Navigation | Responsive navigation with smooth transitions |
| Responsive UI | Optimized for desktop, tablet, and mobile devices |
| Feature | Description |
|---|---|
| Supabase Ready | Frontend prepared for backend integration |
| Form Validation | Built-in validation for user inputs |
| Placeholder Data | Static and dummy data for development and testing |
| Modular Structure | Easy integration with database services |
| Capability | Description |
|---|---|
| Daily Logging | Track mental state and coding activity |
| Burnout Analysis | Monitor productivity and burnout trends |
| Interactive Charts | Visualize data using multiple chart types |
| Theme Support | Toggle between light and dark modes |
| Responsive Design | Consistent experience across all devices |
| Reusable Components | Modular React components for future scalability |
Daily Activity Log
↓
Store User Data
↓
Generate Analytics
↓
Visualize Trends
↓
Monitor Burnout Risk
| Layer | Technology |
|---|---|
| Frontend | React.js, Tailwind CSS |
| Charts | Chart.js, react-chartjs-2 |
| Backend (Planned) | Supabase |
| Routing | React Router |
| Components | Modular React Components |
https://burnout-radar-rho.vercel.app/
Muhammad Ashhadullah Zaheer
LinkedIn: https://www.linkedin.com/in/muhammad-ashhadullah-zaheer-41194a340/