Fooder

Overview

Fooder is a Swiggy-style food ordering webapp that consumes live Swiggy API data — real restaurants, real menus — with a working cart on top.

What it does

• Pulls restaurant and menu data from the Swiggy API and renders it in a Swiggy-like interface.
• Shimmer UI placeholders while data loads, so the layout never jumps.
• A fully working cart with add/remove/quantity logic held in global state.
• Client-side navigation between restaurant list, menu, and cart via React Router.

How it's built

The frontend is React with Redux for global state (cart, restaurant data) and Tailwind CSS for styling. A small Express JS backend hosted on Azure proxies the Swiggy API, which solves CORS and keeps API handling off the client.

Key decisions:

• Cart state lives in a Redux slice so any component — header badge, menu buttons, cart page — reads the same source of truth.
• The shimmer skeletons match the real card dimensions, which makes the load feel faster than a spinner would.

What I learned

Working against an unofficial third-party API teaches defensive coding fast: response shapes change, fields go missing, and the UI has to degrade gracefully rather than crash.