A comprehensive analytics dashboard built with Next.js, React, and Mantine UI. Features 13 dashboard variants, built-in app modules, real-time data visualization, and a fully customizable theme system with Swiss Precision design language as the default.
- 13 Dashboard Variants — Analytics, SaaS, eCommerce, CRM, Finance, Marketing, Healthcare, Education, Logistics, HR, Real Estate, LLM/AI, and Default
- Built-in Apps — Email, Chat, Calendar, Invoices, Projects, Orders, Products, Customers, Tasks (Kanban), File Manager, Notifications, Profile, Settings
- Data Visualization — Interactive charts with Recharts (area, bar, line, pie, radar, composed)
- Theme Customizer — Live preview editor for colors, radius, layout, and color scheme
- Swiss Precision Design — Space Grotesk + JetBrains Mono fonts, #0055FF accent, sharp corners, 1px borders, dark mode default
- Authentication — Sign in, sign up, password reset flows with mock credentials
- Mock API System — 30+ REST endpoints backed by 76 JSON data files
- Responsive Design — Optimized for desktop, tablet, and mobile
- Dark Mode — Full light/dark theme support
git clone https://github.com/mrwick1/pulse-analytics.git
cd pulse-analytics
pnpm install
pnpm devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm prettier |
Format all files |
| Module | Description |
|---|---|
| Default | Overview with key metrics and activity |
| Analytics | Traffic, conversion, and engagement metrics |
| SaaS | Subscription, MRR, and churn analytics |
| eCommerce | Sales, orders, and product performance |
| CRM | Leads, deals, and customer pipeline |
| Finance | Cash flow, expenses, and invoice tracking |
| Marketing | Campaign performance and traffic sources |
| Healthcare | Patient metrics and department performance |
| Education | Enrollment, grades, and course completion |
| Logistics | Shipments, fleet status, and delivery metrics |
| HR | Attendance, recruitment, and employee distribution |
| Real Estate | Property listings, pricing, and sales trends |
| LLM/AI | Model usage, token trends, and cost analysis |
- Next.js 16 — App Router with React Server Components and React Compiler
- React 19 — Latest React with concurrent features
- Mantine 7 — 100+ accessible UI components
- Recharts — Composable charting library
- FullCalendar — Interactive calendar component
- Tiptap — Rich text editor
- Tabler Icons — Icon library
src/
├── app/
│ ├── api/ # 30+ mock data API routes
│ ├── auth/ # Authentication pages
│ ├── dashboard/ # 13 dashboard variants
│ └── apps/ # Built-in app modules
├── components/ # 48 reusable component directories
├── contexts/ # Theme customizer and notification contexts
├── layouts/ # Guest and Main layout components
├── constants/ # Sidebar links, features, tech stack
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
├── theme/ # Mantine theme configuration
├── providers/ # React context providers
├── routes/ # Centralized route definitions
└── utils/ # Utility functions
public/
└── mocks/ # 76 JSON mock data files
Built on Next.js App Router with a modular page structure. The theme system uses Mantine's theming engine with CSS custom properties managed through a ThemeCustomizerContext for runtime customization. Data is served through mock API routes that read from public/mocks/*.json, mirroring real REST endpoints for easy migration to a real backend.
Key architectural decisions:
- App Router — File-based routing with layouts and loading states
- Mock API layer — All data flows through
/api/*routes for easy backend swapping - Context-based theming — Runtime theme customization persisted to localStorage
- Component co-location — Dashboard-specific components grouped by module
Email: demo@example.com
Password: demo123