A real-time analytics dashboard for hospitality venues — track revenue, orders, customer insights, and deal performance. Built with React, TypeScript, Firebase, and Recharts.
Tech Stack
- Framework - React 18 + TypeScript
- Build - Vite
- Styling - Tailwind CSS v4 + CSS custom properties
- Charts - Recharts
- Backend - Firebase (Firestore + Auth + Hosting)
- State - React hooks + Firestore onSnapshot
- Routing - React Router v6
- Deployment - Firebase Hosting
Features
-
Real-time KPIs - Revenue, orders, covers, and average spend with week-over-week comparison
-
Revenue & Orders charts — Interactive area and bar charts with time range filtering (7D/30D/90D)
-
Peak Hours heatmap — Visual grid showing order intensity by day and hour
-
Customer Insights — New vs returning breakdown, spend distribution, top customers table
-
Deals management — Track active/past deals, create new deals with Firestore write
-
Firebase Auth — Email/password, Google OAuth, and anonymous demo mode
-
Dark/Light mode — Theme toggle with CSS custom properties
-
Mobile responsive — Fully usable on phone, tablet, and desktop
Architecture
-
Firestore onSnapshot - Real-time data subscription instead of polling. Dashboard updates instantly when data changes in Firestore
-
Token-based design system - CSS custom properties for colors, spacing, and shadows enable dark/light theming with a single attribute toggle
-
Component-driven - Reusable UI primitives (Card, Button, Badge, Skeleton) separated from feature components
-
Custom hooks per domain - useVenueData, useCustomerData, useDealsData each manage their own Firestore subscription and derived state
-
Data seeder — Node.js script generates 90 days of realistic Australian restaurant data with day-of-week and time-of-day patterns.
Data Model
venues/{venueId}
- orders/{orderId} — timestamp, items, total, covers, customerId, dealId
- customers/{id} — name, email, visits, totalSpend, firstVisit, lastVisit
- deals/{dealId} — name, discount%, dates, redemptions, isActive
AI Usage
This project was built with AI assistance:
-
Claude - PRD drafting, architecture planning, step-by-step implementation guide, debugging
-
Cursor - Code autocompletion, refactoring, inline suggestions
-
Design decisions, UX flows, data modeling, and architectural choices were made by me. AI accelerated implementation without compromising understanding.