A real-time analytics dashboard that visualizes live metrics — revenue, active users, requests/sec, and error rates — updating continuously with smooth, animated charts.
- Live metric tiles — active users, requests/sec, error rate, average response time, refreshing every 2 seconds
- Revenue area chart (24h) — gradient-filled trend visualization
- Active users line chart (24h)
- API requests vs errors bar chart (24h)
- Dark analytics UI styled with Tailwind CSS and Recharts
| Layer | Technology |
|---|---|
| Framework | React 19 |
| Language | TypeScript |
| Build tool | Vite 8 |
| Charts | Recharts |
| Data fetching | TanStack Query |
| Real-time (planned) | Socket.IO client |
| Styling | Tailwind CSS |
DataPulse currently generates simulated data client-side — 24 hourly data points are randomly generated on load, and the live metric tiles tick with small random deltas every 2 seconds via setInterval. This means you can run and demo the full UI with no backend at all.
The socket.io-client dependency is included for a planned next step: replacing the simulated data with a real-time feed from a backend metrics service.
- Node.js 20+
git clone https://github.com/phiwakonkem/DataPulse.git
cd DataPulsenpm installnpm run devVisit the URL Vite prints (typically http://localhost:5173). No backend setup needed — it works out of the box with simulated data.
| Command | Description |
|---|---|
npm run dev |
Start the Vite dev server |
npm run build |
Type-check and build for production |
npm run lint |
Run ESLint |
npm run preview |
Preview the production build locally |
- Replace simulated data with a real Socket.IO backend feed
- Add date-range selection for historical charts
- Add export (CSV/PNG) for charts
Phiwakonke Mthethwa Full-Stack Developer, Centurion, South Africa
- GitHub: @phiwakonkem
- LinkedIn: phiwakonke-mthethwa
- Email: phiwakonkem@gmail.com