RealTaste

The problem

Every order required a phone call. Staff wrote tickets by hand. Totals were calculated manually with frequent arithmetic errors. There was no order history, no customer records, and no way to manage delivery fees consistently. Each mistake meant lost revenue or dissatisfied customers.

Why existing tools failed

Phone-based ordering is inherently unscalable. Each call occupies staff time, creates no digital record, and is prone to miscommunication. Handwritten tickets get lost, and manual calculations introduce errors. Without customer records, the restaurant couldn't build repeat business or analyze ordering patterns.

Constraints

The solution had to work entirely in the browser — no app store installation. Customers needed to be able to order from any device. Payment integration required working with PayHere, the dominant Sri Lankan payment gateway. Delivery fee calculation needed to account for distance-based surcharges.

Solution

A Progressive Web App with a React frontend and Express API backed by Supabase. Customers browse menu items grouped by category, with variant and addon pricing, build a persistent cart, and checkout with pickup or delivery. Delivery addresses are captured via Mapbox GL with automatic distance-based fee calculation. PayHere handles card payments alongside COD. The operator dashboard shows a real-time order queue fed by Supabase Realtime channels, revenue analytics with trend charts, and delivery configuration controls.

Architecture

The React PWA is served from Cloudflare Pages. The Express API runs on Fly.io. Supabase provides the PostgreSQL database, authentication, and realtime change feeds. PayHere webhooks flow back into the API to finalize payment statuses. The PWA uses Vite's proxy in development and direct API calls in production.

Key design decisions

• PWA architecture eliminates the app-store barrier — customers add to home screen on any device.
• Zustand for cart state with variant/addon awareness survives page refreshes via persisted storage.
• Supabase Realtime channels push order mutations to the admin dashboard without polling.
• Mapbox GL for delivery address capture with automatic coordinate-to-fee calculation.
• Separate admin routes protected by Supabase JWT middleware keep operator tools secure.

Tech stack

Screenshots

Result

Phone orders replaced with self-service digital ordering. Delivery fees calculated automatically based on distance — no more manual calculation errors. The restaurant gained order history, customer records, and revenue analytics for the first time. The admin dashboard provides real-time visibility into every active order.

Lessons learned

• PWA install prompts are still poorly understood by Sri Lankan customers. Most access the site directly from the browser without installing — the experience needs to be fully functional without PWA features.

• Mapbox GL geocoding accuracy varies significantly for Sri Lankan addresses. Had to implement OpenCage as a fallback geocoder.

• PayHere sandbox vs production environment differences caused subtle bugs. Always test the full payment flow in production sandbox before going live.