Food Order App

A responsive React ordering experience that demonstrates production-oriented state management, API caching, validation, progressive loading, and a complete cart-to-checkout flow.

Live demo

Highlights

• Category-based recipe browsing with progressive loading via IntersectionObserver
• RTK Query data fetching with a 24-hour local cache
• Persistent cart, location, and category state
• Validated checkout and international phone-number handling
• Simulated order creation and status polling
• Responsive Tailwind CSS interface
• No client-side API secrets or account setup required

Stack

• React 19
• Redux Toolkit and RTK Query
• Tailwind CSS 4
• Vite 8
• Vitest and ESLint
• DummyJSON Recipes API

Architecture

src/
  components/   Reusable ordering and cart UI
  layout/       Application shell
  modals/       Category, checkout, and location flows
  redux/        Store and feature state
  services/     API normalization and local caching

Remote responses are normalized at the service boundary, so UI components operate on a stable product shape. Server data remains in RTK Query while user-owned state such as the cart and location stays in focused Redux slices.

Run Locally

Requires Node.js 20.19+ or 22.12+.

npm ci
npm run dev

No environment variables are required.

Quality Checks

npm run lint
npm test
npm run build

The same checks run automatically in GitHub Actions for every push and pull request.