Skip to content

PRODUCT_REVIEW.md

Latest commit

 

History

History
182 lines (151 loc) · 8.96 KB

PRODUCT_REVIEW.md

File metadata and controls

182 lines (151 loc) · 8.96 KB

Amogha Cafe Platform — Comprehensive Product & Engineering Review

Phase 1: Architecture Overview

System Architecture

Multi-surface restaurant platform built on Firebase (Firestore, Hosting, Cloud Functions) with Vite for frontend bundling and Capacitor for native mobile apps.

System Component Map

Surface Path Purpose
Customer Web /index.html + script.js Online ordering, loyalty, reservations
Admin Dashboard /admin/ Order management, menu admin, analytics, CRM
Kitchen Display /kitchen/ Real-time KDS for kitchen staff
Self-Service Kiosk /kiosk/ Touchscreen ordering for physical locations
POS System /pos/ Point-of-sale for counter transactions
Delivery App /delivery/ Delivery partner tracking & order management
Order Display /display/ Public monitor showing live orders
QR Table Ordering /qr/ Dine-in ordering via QR codes
Order Tracker /track/ Customer order status & delivery tracking
Loyalty Portal /loyalty/ Points lookup and rewards

Tech Stack

  • Frontend: Vanilla JS (ES6 modules), Vite bundler, CSS (no framework)
  • Backend: Firebase Cloud Functions (Express.js), Firestore
  • AI: Google Vertex AI (Gemini 2.0 Flash) for chat, menu insights, bill parsing
  • Payments: Razorpay (India), Cash on Delivery, UPI
  • Mobile: Capacitor (iOS + Android), PWA with Service Workers
  • CI/CD: GitHub Actions for deploy, APK builds, iOS releases

Data Flow

Customer → Web/Kiosk/QR → Firestore (orders collection) → Kitchen Display (real-time listener)
                                                         → Admin Dashboard (management)
                                                         → Delivery App (dispatch)
                                                         → Order Tracker (customer tracking)

API Requests → Cloud Functions (Express) → Firestore + Gemini AI → Response

Module Architecture (39 modules)

  • Core: auth, cart, menu, payment, ui, hero, notifications, reservations, loyalty, features
  • Engagement: challenges, spinwheel, secretmenu, feedback, socialshare, polls, milestones, ordertracker, streaks, badges
  • Premium: stories, moodorder, livequeue, giftcards, referral, musicplayer, arpreview, voiceorder, geofence
  • Social: group ordering, splitbill, chatbot, subscriptions
  • Enhancement: enhancements, premium, worldclass2, seasonal, weather, personalize, profile

Key Strengths

  1. Comprehensive multi-surface coverage — 10 specialized interfaces
  2. Smart module loading — IntersectionObserver + tiered lazy loading reduces initial bundle
  3. Server-side price validation — prevents client-side price manipulation
  4. AI integration — Gemini-powered chat, recommendations, bill OCR, forecasting
  5. Security basics present — CSP headers, XSS sanitization, rate limiting, brute-force protection
  6. i18n support — English, Hindi, Telugu translations
  7. PWA + native — Service workers, Capacitor for iOS/Android
  8. Performance monitoring — Core Web Vitals tracking (LCP, CLS)
  9. Code splitting — 30+ dynamic imports reduce initial load
  10. Accessibility foundations — ARIA attributes, keyboard nav, focus management

Key Weaknesses

  1. Monolithic HTML files — Each surface (admin, kitchen, kiosk, pos) has massive inline JS
  2. Window globals — Heavy reliance on window.* for cross-module communication
  3. No TypeScript — Zero type safety across 10,000+ lines of JS
  4. No framework — Vanilla DOM manipulation leads to inconsistent patterns
  5. Hardcoded prices — ITEM_PRICES in constants.js duplicates Firestore data
  6. Client-side auth — PIN-based auth stored in localStorage (not Firebase Auth)
  7. No automated E2E testing — Playwright tests exist but limited coverage
  8. Mixed code quality — Core modules are solid, engagement modules are thinner

Phase 2: Product Understanding

Product Purpose

Amogha Cafe is a real restaurant in Kukatpally, Hyderabad with a fully digital platform for ordering, kitchen management, and customer engagement. It serves both dine-in and delivery customers.

Target User Segments

  1. Customers — Local diners ordering food online or dining in
  2. Kitchen Staff — Cooks managing incoming orders via KDS
  3. Counter Staff — POS operators processing walk-in orders
  4. Delivery Partners — Drivers managing deliveries
  5. Restaurant Owner/Manager — Admin dashboard for business operations

Primary Workflows

  1. Browse menu → Add to cart → Checkout → Pay (Razorpay/COD) → Track order
  2. Scan QR → Table order → Kitchen display → Serve
  3. Kiosk self-service → Order → Kitchen → Pickup
  4. Admin: Manage menu → Monitor orders → View analytics → Handle CRM

Current Value Delivered

  • Full online ordering with real-time kitchen integration
  • Multi-payment support (Razorpay, UPI, COD)
  • Loyalty program with tiers and rewards
  • AI-powered recommendations and chatbot
  • Comprehensive admin analytics

Missing Value / Friction Points

  • No real-time order status push notifications (SMS/WhatsApp)
  • No inventory management / stock tracking
  • No table management / floor plan
  • No staff scheduling
  • No multi-location support (configured but not active)
  • No customer reviews integration with Google/Zomato

Phase 3-4: Competitive Feature Matrix

Feature Amogha Cafe Toast Square TastyIgniter Opportunity
Online Ordering Yes Yes Yes Yes Equal
POS System Yes Yes Yes Yes Equal
Kitchen Display Yes Yes Paid addon Plugin Stronger
Self-Service Kiosk Yes Paid addon No No Leapfrog
QR Table Ordering Yes Paid addon No Plugin Leapfrog
Delivery Management Yes Yes Yes Plugin Equal
AI Chatbot Yes No No No Leapfrog
AI Recommendations Yes No No No Leapfrog
Bill OCR Parsing Yes No No No Leapfrog
Loyalty Program Yes Paid addon Paid addon Plugin Stronger
Multi-language 3 langs Limited Limited Plugin Stronger
PWA + Native Apps Both Native only Both Web only Equal
Offline Mode Partial Yes Partial No Weaker
Inventory Management No Yes Yes Yes Gap
Table Management No Yes Yes Plugin Gap
Staff Management No Yes Yes No Gap
Multi-location Configured Yes Yes Yes Weaker
Real-time Analytics Basic Advanced Advanced Basic Weaker
Payment Processing Razorpay Toast Pay Square Pay Multiple Equal (regional)
Accessibility Basic Good Good Basic Weaker

Phase 5: Product Transformation Strategy

1. Critical Fixes

  • Fix innerHTML XSS vectors in engagement modules that build HTML from user data
  • Add Firestore security rules validation for all collections
  • Fix service worker cache invalidation to prevent stale content

2. Missing Table-Stakes Features

  • Inventory/stock tracking — Mark items out-of-stock, low-stock alerts
  • Order status notifications — WhatsApp/SMS notifications on status changes
  • Customer order history — Accessible from profile, not just localStorage

3. High-Impact Improvements

  • Image lazy loading with blur-up placeholders for menu items
  • Skeleton loading states for menu, cart, checkout
  • Better error states — User-friendly error messages with retry actions
  • Form validation feedback — Real-time validation with accessible error messages

4. Premium Differentiators

  • AI meal planning — Weekly meal subscriptions based on dietary preferences
  • Voice ordering — Already built, needs polish and promotion
  • AR food preview — Already built, needs WebXR integration
  • Mood-based ordering — Already built, needs ML refinement

5. Security Hardening Priority List

  • Migrate from custom PIN auth to Firebase Authentication
  • Add CSRF protection to API endpoints
  • Implement request signing for sensitive operations
  • Add Content-Security-Policy report-uri for monitoring
  • Sanitize all innerHTML assignments in engagement modules

6. Performance Priority List

  • Compress and serve WebP images
  • Implement service worker precaching strategy
  • Add resource hints (preload, prefetch) for critical assets
  • Reduce CSS file count (4 CSS files → 1 bundled)
  • Tree-shake unused module code

Phase 6-9: Implementation Priorities

Immediate Implementations (This Session)

  1. Security: Fix XSS vulnerabilities in modules using innerHTML with user data
  2. Security: Strengthen input validation in Cloud Functions
  3. Performance: Optimize CSS loading and reduce render-blocking resources
  4. UX: Add proper loading states and error boundaries
  5. Architecture: Improve module communication patterns
  6. Accessibility: Fix missing ARIA labels and keyboard navigation gaps
⚡