Scope: Web app only Frontend: Vercel Backend: Render Database: PostgreSQL Language choice: JavaScript (frontend + backend)
React
JavaScript
Tailwind CSS
Recharts
Node.js
Express.js
JWT Authentication
PostgreSQL
Orders (Postgres)
↓
Analytics SQL Queries
↓
Backend Analytics Endpoints
↓
Manager Dashboards (React)
- Analytics logic = SQL
- Backend exposes
/api/analytics/* - Frontend only visualizes results
GET /api/analytics/overview
GET /api/analytics/products
GET /api/analytics/customers
GET /api/analytics/peak-hours
Each endpoint:
- Runs SQL queries
- Aggregates KPIs
- Returns clean JSON
- Revenue
- AOV
- MoM growth
- Retention cohorts
- Product ranking
ML runs as Python scripts / notebooks, not in production APIs.
Postgres Data
↓
Python (Pandas + sklearn)
↓
Predictions / Scores
↓
Saved back to Postgres
↓
Dashboard reads results
- Sales forecast (next 7 days)
- Product demand score
Backend & frontend do not run ML — they consume results.
Three security layers.
- Login → issue JWT
- JWT stored in HTTP-only cookie or memory
- Token verified on every API call
customer
cashier
manager
admin
| Endpoint | Who |
|---|---|
| /orders | cashier |
| /analytics | manager |
| /users | admin |
Backend enforces this:
authorize(['manager'])- SQL parameterized queries (no SQL injection)
- Input validation (Zod / Joi / custom)
- Password hashing (bcrypt)
- HTTPS (Render + Vercel)
- No direct DB access from frontend
[ React Web App ] ← Vercel
|
| JWT
v
[ Express API ] ← Render
| |
| ├─ Analytics SQL
| ├─ RBAC Security
| └─ ML Results (read-only)
v
[ PostgreSQL ]
| Role | Purpose |
|---|---|
| Customer | Place orders |
| Cashier | Process & manage orders |
| Manager | Monitor performance & make decisions |
| Admin | Govern the system |
Order food efficiently and track purchases.
- View drinks & food
- Filter by category
- View prices & customization options
Flow
Login / Guest
→ View Menu
→ Select Item
→ Customize
- Select quantity
- Customize items
- Submit order
Flow
Add to Cart
→ Review Order
→ Confirm Order
→ Order Sent to System
Order status = pending
- View order status
- View order history
Flow
Orders Page
→ Current Order Status
→ Completed Orders
- See analytics
- Edit menu
- Manage users
Handle daily order operations quickly and accurately.
- See new orders
- View order details
Flow
Login
→ Orders Dashboard
→ New Orders List
- Mark as
paid - Mark as
preparing - Mark as
completed - Cancel order (with reason)
Flow
Select Order
→ Update Status
→ System Saves Timestamp
- Create order manually
- Mark as paid immediately
Flow
New Order
→ Select Items
→ Mark Paid
→ Complete
- View analytics dashboards
- Edit pricing
- Create users
Make data-driven operational and business decisions.
KPIs
- Revenue
- Orders
- AOV
- Growth %
Flow
Login
→ Analytics Dashboard
→ Select Time Range
→ View KPIs
- Top-selling items
- Low-performing items
- Category contribution
Flow
Analytics
→ Products
→ Filter by Date / Category
→ Identify Trends
- New vs returning customers
- Retention cohorts
- High-value customers
Flow
Analytics
→ Customers
→ Cohort View
→ Retention Insights
- Peak hours
- Daily / weekly patterns
Flow
Analytics
→ Time Analysis
→ Identify Peak Periods
- Short-term sales forecast
- Declining product alerts
Flow
Analytics
→ Forecasts
→ Review Recommendations
Manager does NOT directly modify data — they decide, not execute.
- Create or delete users
- Change system roles
- Access system logs
Ensure system integrity, security, and configuration.
- Create cashier / manager accounts
- Assign roles
- Disable users
Flow
Login
→ User Management
→ Create / Update User
- Business hours
- Tax rates
- Service settings
Flow
Settings
→ Update Configuration
→ Save
- View logs
- Monitor errors
- Check API uptime
Flow
System Logs
→ Review Events
→ Take Action
- Archive old data
- Trigger re-analytics
- Backup database
Admin never analyzes revenue.
Customer places order
↓
Cashier processes order
↓
Order data stored (PostgreSQL)
↓
Analytics queries aggregate data
↓
Manager reviews dashboards
↓
Manager makes decisions
Purpose: Daily/weekly decision check
KPIs
- Total Revenue
- Total Orders
- Average Order Value (AOV)
- Growth vs previous period
- Peak hour indicator
Visuals
- KPI cards
- Revenue trend line
- Orders by hour bar chart
This is the default landing page for managers.
Purpose: Menu & pricing decisions
Insights
- Top-selling items
- Revenue by category
- Low-performing items
- Product trend (up / down)
Visuals
- Bar chart (Top 10 products)
- Pie / stacked bar (category contribution)
- Trend sparkline per product
Manager Decisions
- Remove low performers
- Promote high-margin items
Purpose: Retention & loyalty
Insights
- New vs returning customers
- Repeat purchase rate
- Cohort retention (weekly/monthly)
- High-value customers
Visuals
- Cohort table
- Donut chart
- Histogram of spend
Purpose: Staffing & operations
Insights
- Peak hours
- Busiest days
- Order volume trends
Visuals
- Heatmap (hour vs day)
- Line chart
Purpose: Planning
Insights
- Next 7-day sales forecast
- Declining product alerts
Visuals
- Forecast line
- Alert cards
This is critical. Real systems feel different per role.
Home / Landing
Menu
Cart
Orders
Profile
- Friendly
- Visual
- Product-focused
- Minimal data
- Hero section
- Featured drinks
- Promotions
- CTA: “Order Now”
Orders (Live)
POS / New Order
Order History
- Functional
- Dense
- Fast
- No charts
Live Orders Queue
- Order ID
- Status
- Time
- Action buttons
Dashboard (Overview)
Analytics
├── Products
├── Customers
├── Time & Operations
├── Forecasts
Reports (Optional)
- Calm
- Professional
- Data-first
- Clear trends
Executive Overview Dashboard
User Management
System Settings
Audit Logs
- Minimal
- Technical
- No charts
- No KPIs
Two landing pages.
Audience: Customers
-
Hero
-
Featured menu items
-
How it works
-
CTA buttons:
- Register
- Login
This sells the product.
| Role | Landing Page |
|---|---|
| Customer | Menu |
| Cashier | Live Orders |
| Manager | Dashboard |
| Admin | User Management |
This is real SaaS behavior.
PostgreSQL
↓
SQL Analytics Queries
↓
Express API (/analytics)
↓
React Charts