Project Pulse
A fully front-end, interactive analytics dashboard designed to visualize project performance, team efficiency, and operational health — powered entirely by React, TypeScript, and a mock API layer.
Overview
Project Pulse is a complete front-end demo application showcasing how teams can visualize project performance in a clean, real-time analytics dashboard.
Built with React + TypeScript, it simulates a full product experience by combining dynamic charts, advanced tables, notifications, and internationalization — all powered by a fully mocked API using MSW.
This project demonstrates how a modern, reactive UI can deliver operational clarity without relying on a real backend.
The Challenge
Teams need clear visibility into their project health, performance, and trends — but most analytics tools are either too complex or locked behind real backend infrastructure.
For portfolio and demo purposes, we needed a solution that:
- Looked and behaved like a real product
- Supported CRUD operations, metrics, alerts, and tables
- Delivered realistic, data-rich dashboards
- Worked entirely on the front end, without external services
The Solution
We built a fully interactive analytics dashboard that simulates a production-ready experience using only front-end technologies:
- Real-time KPIs with trend indicators (↑↓) and dynamic value generation
- Six interactive charts powered by Recharts (velocity, backlog growth, distribution, trends, workload, completion rate)
- Project management table with advanced filters, sorting, search, and full CRUD
- Team performance module with comparative metrics and individual profiles
- Notification system with real-time alerts, categories, and relative timestamps
- Dark/Light mode with smooth transitions
- CSV export for projects, members, alerts, and KPIs
- i18n support (EN/ES) with instant language switching
- Mock API (MSW) that simulates realistic endpoints, delays, and data lifecycles
Key Technical Features
Frontend Architecture
- React 18 + TypeScript: Strongly typed, modular, and maintainable codebase
- Vite: Ultra-fast development environment with HMR
- TailwindCSS: Fully responsive UI with theme switching and clean utility-first styling
- Zustand: Lightweight state management for projects, members, alerts, and app settings
- MSW (Mock Service Worker): Fake API layer with realistic endpoints and in-memory CRUD
- Recharts: Interactive, responsive chart components for KPIs and performance insights
- TanStack Table: High-performance tables with sorting, filtering, pagination, and row actions
- React Hook Form + Zod: Type-safe, validated forms for all CRUD operations
- Lucide Icons: Clean, modern iconography throughout the interface
UX & Product Features
- Real-time dashboard with automatically refreshed KPIs
- Advanced table filtering by date, priority, status, and team member
- Dynamic alerts system with warnings, errors, and info messages
- Fully responsive layout with Desktop / Tablet / Mobile variants
- Dark Mode with smooth transitions and persisted preference
- Interactive drill-down available in multiple charts
- CSV export for all main modules
- Multi-language support with instant switching (EN/ES)
- Loading and error states with retry options
- Reusable modals and confirmation dialogs across the app
Impact
Project Pulse demonstrates how a fully front-end application can simulate a professional analytics platform:
- Real-time insights without a backend
- Full CRUD operations using only in-memory data
- High-performance rendering even with large tables and charts
- Showcases modern front-end architecture suitable for dashboards, BI tools, and admin systems
- Perfect for portfolio/demo use without requiring servers, databases, or deployments
All data is mock-generated and resets on page reload, preserving a consistent demo experience.
Demo & Access
Try the demo and explore the structure:
- 🔗 Live Demo — https://project-pulse-app.netlify.app/ — Explore dashboards, metrics, CRUD, tables, and alerts.
- 🧩 GitHub Repository — https://github.com/davidmrtz-dev/project-pulse — Source code, folder structure, and instructions included.
No backend required — everything runs client-side with Vite and MSW.
Takeaway
Project Pulse proves how efficient, dynamic, and feature-rich a modern front-end application can be — even without a backend.
By combining React, TypeScript, Zustand, Tailwind, and MSW, the platform delivers a polished, real-time analytics experience ideal for demonstrations, prototypes, and portfolio showcases.