A high-performance, serverless productivity dashboard built with React for the modern developer.
The Developer Dashboard is a sophisticated client-side application built specifically for developers to manage tasks, notes, and track productivity. It designed to centralize a developer's daily workflow by combining a Kanban board, Markdown notes, and real-time analytics into a single interface.
Privacy-First: Your data stays exactly where it belongs—on your machine. This project uses
localStoragefor persistence, meaning your tasks and notes are saved locally in your browser.
- Real-time productivity metrics and statistics
- Weekly completion trends with interactive charts
- Quick actions for common tasks
- Activity feed showing recent actions
- Drag-and-drop task management
- Three-column workflow (To Do, In Progress, Done)
- Priority levels (High, Medium, Low)
- Due date tracking with overdue indicators
- Search and filter functionality
- Full markdown support with live preview
- Syntax highlighting for code blocks
- Category organization (Ideas, Meetings, Code, Personal)
- Search across all notes
- Auto-save functionality
- Completion rate tracking
- Priority distribution charts
- Category performance metrics
- Weekly productivity trends
- Key insights and statistics
- Dark/Light theme toggle
- Account management
- Notification preferences
- Data export/import (JSON)
- Keyboard shortcuts
- User information management
- Avatar customization (8 styles)
- Activity statistics
- Bio and preferences
- Framework: React 18 with Vite
- Routing: React Router v6
- State Management: Zustand (lightweight, no boilerplate)
- Styling: Tailwind CSS v4 (utility-first)
- Animations: Framer Motion (smooth, performant)
- Charts: Recharts (responsive, customizable)
- Markdown: React Markdown + remark-gfm
- Syntax Highlighting: rehype-highlight
- Icons: Lucide React (tree-shakeable)
- Drag & Drop: Native HTML5 DnD API (no dependencies)
- Build Tool: Vite (fast HMR, optimized builds)
- Package Manager: npm
- Deployment: Vercel (auto-deploy from GitHub)
- Node.js 18+ and npm
- Clone the repository
git clone https://github.com/swati048/dev-dashboard.git
cd dev-dashboard- Install dependencies
npm install- Start development server
npm run dev- Open in browser
http://localhost:5173
npm run build
npm run previewNo signup required! Click the "Try Demo Account" button on the login page to explore all features with pre-populated data.
Demo Features:
- ✅ Pre-loaded tasks and notes
- ✅ Interactive Kanban board
- ✅ Full analytics dashboard
- ✅ All features unlocked
- Fully functional dark/light mode
- Persistent theme selection
- Smooth transitions
- All data stored in browser's localStorage
- Export/Import functionality
- No backend required
- Privacy-focused (data never leaves your device)
Ctrl + K- Open command paletteEsc- Close modals
- Primarily for Desktops
- Works on all screen sizes
- Touch-friendly interface
- Optimized for tablets
src/
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (Button, Input, Card, Modal)
│ └── ... # Feature components
├── layouts/ # Layout components (AppLayout, Sidebar, Topbar)
├── pages/ # Route pages
│ ├── Dashboard.jsx
│ ├── Kanban.jsx
│ ├── Notes.jsx
│ ├── Analytics.jsx
│ ├── Profile.jsx
│ └── Settings.jsx
├── store/ # Zustand stores
│ ├── useAuthStore.js
│ ├── useTaskStore.js
│ ├── useNotesStore.js
│ ├── useActivityStore.js
│ └── useProductivityStore.js
├── utils/ # Utility functions
│ ├── cn.js # Class name utility
│ └── toast.js # Toast notifications
├── router.jsx # Route configuration
└── main.jsx # App entry point
This project demonstrates:
- ✅ Modern React Patterns - Hooks, context, custom hooks
- ✅ State Management - Zustand for global state
- ✅ Component Architecture - Reusable, composable components
- ✅ Performance Optimization - Code splitting, lazy loading
- ✅ User Experience - Smooth animations, loading states, error handling
- ✅ Responsive Design - Mobile-first, works on all devices
- ✅ Accessibility - Keyboard navigation, ARIA labels
- ✅ Clean Code - Consistent formatting, readable structure
- No Backend Required - Fully client-side application
- Local-First - All data stored locally
- Privacy-Focused - Your data never leaves your device
- Modern Stack - Latest React patterns and best practices
- Production Ready - Optimized build with code splitting
- Accessible - ARIA labels and keyboard navigation
- Fast - Vite for lightning-fast HMR
This is a portfolio project, but suggestions and feedback are welcome!
MIT License - feel free to use this project for learning and inspiration.
Swati Thakur
- GitHub: @swati048
- LinkedIn: Swati Thakur
- Email: thakurswati048@gmail.com
- Icons by Lucide
- Avatars by DiceBear
- Charts by Recharts
- Animations by Framer Motion
⭐ If you found this project helpful, please give it a star! ⭐
Made with ❤️ and ⚛️ React