DEV Community

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

Posted on

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

#react #webdev #javascript #opensource

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.

FoodFlow Demo Flow

⚡ 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
Enter fullscreen mode Exit fullscreen mode

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

Lighthouse 100/100 Score

  • 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:

  1. The state split between TanStack Query and Context.
  2. The zero-backend WhatsApp dispatch approach for micro-merchants.
  3. 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!

Top comments (0)