React Food Delivery

web

Full-featured food delivery platform with restaurant discovery, dynamic menu rendering, Redux-managed cart with quantity controls, and order tracking. Styled with Tailwind CSS for a modern, mobile-first UI.

React.jsJavaScriptCSS

Restaurant → menu → cart → order, end to end with proper state management.

The problem

Most React-cart tutorials end at 'add to cart' and stop. I wanted to model the actual flow — restaurant browsing, dynamic menu loading, quantity controls, order tracking — and learn where Redux earns its keep vs. where useReducer is enough.

The approach

Built the catalog and menus as data-driven components so adding a restaurant is a JSON edit, not a code change. Cart lives in Redux because quantity ops touch multiple slices (line items, totals, restaurant lock-in). Order tracking simulates a server-pushed status pipeline. Tailwind + a mobile-first layout because food apps are mostly used on phones.

Tech decisions

Redux Toolkit

Cart + order state cross multiple components; centralized store keeps it sane

Tailwind CSS

Mobile-first utilities speed up responsive iteration

Data-driven menus

Adding a restaurant is a JSON edit, not a refactor

Simulated order pipeline

Demonstrates the UX without standing up a backend

Outcomes

Full flow from discovery → menu → cart → checkout → tracking
Quantity controls + per-restaurant cart lock-in
Mobile-first responsive layout
Clean separation of cart state vs. UI components

What I learned

Redux pays for itself the moment cart actions need to touch totals + restaurant-context + persistence simultaneously. For simpler carts, useReducer + context is plenty.