React Web App for a 24/7 Food-Delivery Platform

Overview

The customer-facing web client for a 24/7 food-delivery platform, built as a React single-page app. It consumes the platform’s AdonisJS API and uses a reactive Redux + redux-observable architecture for data flow, with JWT-protected routes.

Why It Exists

The platform needed a browser ordering experience to complement its mobile app, letting customers authenticate, browse and place orders on the same backend, with a maintainable, predictable client architecture.

What We Built

A React SPA (CRA-based) structured into src/screens, src/services, src/helpers, src/styles with a PrivateRoute for auth-gated navigation, rootReducer, store and an action-patterns convention. State management uses redux with redux-observable (RxJS epics) for async side effects, redux-persist (with redux-persist-transform-filter) for session persistence, and redux-devtools-extension for debugging. API access is via axios with jwt-decode for token handling and universal-cookie for storage; the UI uses react-router-dom/react-router-redux, react-paginate and react-number-format. Styling is compiled from Sass/Less via node-sass-chokidar/node-less-chokidar with npm-run-all, and the project includes a deploy script.

Technologies & Approach

A standard-for-its-time React + Redux SPA, distinguished by redux-observable epics for handling asynchronous, stream-based flows cleanly. JWT decoding plus a PrivateRoute guard secured the app, and redux-persist kept users logged in across reloads.

Outcome / Impact

Delivered the web ordering surface of the delivery platform, sharing the AdonisJS backend with the React Native app, completing a three-repo product (API, mobile, web) for a 24/7 service.

Capabilities Demonstrated

• React SPA development with secured, persisted sessions
• Reactive async state with redux-observable (RxJS)
• JWT-authenticated client-side routing
• Sass/Less build tooling and deployment scripting