Chattogram, Bangladesh

Hungry Panda

Type

Full-Stack App

Status

Live

Stack

Next.js, React, TypeScript, Supabase, Firebase, Redis, n8n, Cloudflare R2, Google Maps API, Tailwind CSS

Live

hungry-panda.com

Description

Hungry Panda is a full-stack restaurant ordering Progressive Web App built for a single cloud kitchen in Chattogram. Customers browse a categorized menu, customize items with dynamic addon groups, and check out through a 4-step modal — phone OTP auth, name, interactive Leaflet map address picker, and delivery note. Orders appear live on the kitchen side via Supabase Postgres Change subscriptions with a 3-minute polling fallback. The app is installable on iOS and Android, supports background FCM push notifications, and has a full offline fallback via service workers. On the backend: Firebase handles auth (phone OTP, Google OAuth, email/password) synced to Supabase PostgreSQL; Redis sits in front of all read-heavy routes; Cloudflare R2 stores all media; n8n drives a Messenger chatbot and vector store sync. A complete admin dashboard covers orders, menu CRUD, carousel, customer directory, push broadcasts, CMS pages, and site settings — all behind role-based access.

Ordering Experience

Menu · Cart · Checkout · Live Tracking

Customers browse a sticky-tabbed menu with a full-text search overlay and paginated item grid. Each item opens a customization sheet with dynamic addon groups — the same dish with different addons registers as separate cart line items with independent quantities and live BDT price updates. Checkout is a 4-step full-screen modal: phone OTP verification, name entry, interactive Leaflet map picker (with Google Places autocomplete and geocoding), and delivery note. Customers can also schedule future delivery times via a calendar picker.

Real-Time Order Tracking

Supabase Postgres Change subscriptions + polling fallback

Order status updates — pending → accepted → cooking → out for delivery → delivered — are pushed live to the customer via Supabase real-time subscriptions on the orders table. A 3-minute polling fallback ensures nothing is missed on flaky connections. The same subscription pipeline drives the kitchen-side view, keeping staff and customers in sync without any custom WebSocket infrastructure.

PWA & Push Notifications

Installable on iOS and Android · Background FCM · Offline fallback

The service worker precaches key routes, implements network-first with an offline fallback page, and handles background FCM messages — showing push notifications with vibration and action buttons even when the browser is closed. A custom PWA Context hook detects iOS vs Android and surfaces the correct install prompt. Device tokens are stored per-user in fcm_tokens, enabling the admin to broadcast to all users or push to a single customer from the dashboard.

Admin Dashboard

Orders · Menu · Customers · CMS · Settings

A full management interface at /admin with two roles (admin / superadmin). Covers: paginated order list with status filters and bulk changes; menu CRUD with Cloudflare R2 image uploads, addon group assignment, offer pricing, and content tags (popular, new, spicy); hero carousel management; addon group and addon CRUD; searchable customer directory with individual profiles; push notification broadcasts; contact message inbox; and superadmin-only site settings — brand name, delivery fees, store hours, SEO metadata, and CMS pages (About / Contact / Terms / Privacy).

Architecture

Dual-layer cache · Firebase ↔ Supabase sync · Config-driven · n8n bots

A stale-while-revalidate client cache (memory + localStorage, 2–5 min TTLs) returns data instantly while fetching fresh data behind the scenes. A Redis server-side cache fronts all read-heavy API routes; both layers invalidate on write. Firebase is the auth source of truth — every sign-in calls /api/auth/sync to upsert the user into Supabase (phone-only users get synthetic emails). src/config/site.ts is the single source of truth for brand, currency, delivery fees, and theme colors. n8n webhooks sync menu changes to a vector store powering a Messenger chatbot, and separate API routes serve the bot's browse-and-order flow.

Next Project

Figgr

SaaS Tool

E-mailbipuldey19@gmail.com

GitHub/bipuldey19