How I Built an Open-Source Restaurant Storefront with React 19, Tailwind v4 & Direct WhatsApp Checkout (LCP < 0.8s)

Lautaro Cheppi — Thu, 17 Sep 2026 14:28:52 +0000

Local restaurants—like dark kitchens, pizzerias, and artisan bakeries—are losing up to 30% of their revenue to delivery aggregator commissions. Most of these businesses don't need a heavy, subscription-based backend server or complex database just to receive orders.

To solve this, I built and open-sourced FoodFlow: a zero-backend, ultra-fast food ordering storefront built with React 19 and Tailwind CSS v4.

Live Demo: foodflow-core.pages.dev
GitHub Repository: github.com/soycheppi/foodflow-demo

⚡ Technical Highlights

1. Zero-Backend Autonomy

The entire order validation, item modifiers, catalog sync, and cart state run client-side. The app includes an autonomous mock layer that boots instantly with zero configuration:

git clone https://github.com/soycheppi/foodflow-demo.git
cd foodflow-demo
npm install
npm run dev

No .env file or remote database is required for local development or testing.

2. WhatsApp Dispatch Engine

Instead of setting up payment gateways and complex user sessions, the app formats the order into a clean, human-readable WhatsApp payload. It handles:

Delivery vs. Pickup calculations.
Item variants and mandatory modifier groups.
Coupon/discount rules and clear itemized pricing.

3. Core Web Vitals & Performance

Sub-0.8s LCP on mid-tier mobile networks.
100/100 Lighthouse scores across Performance, Accessibility, Best Practices, and SEO.
Native inline SVGs (zero heavy icon package dependencies).
Tailwind CSS v4 with full tokenized dark/light theme support.

4. Architecture & State Management

React 19 & TypeScript 5.9 in strict mode (zero any policy).
TanStack Query + React Context: TanStack manages catalog fetching and caching, while lightweight Context handles localized cart operations without prop drilling or external state libraries like Redux/Zustand.

💬 Community Feedback

The code is MIT licensed and completely open.

I’d love to hear your feedback on:

The state split between TanStack Query and Context.
The zero-backend WhatsApp dispatch approach for micro-merchants.
How you are handling Tailwind CSS v4 in production applications.

Feel free to check out the GitHub repo and drop a ⭐ if you find it helpful!