Restaurant E-Commerce Platform
A small restaurant ordering web app — landing page, browsable menu, search and filter, login / signup — built as a Devcom team project in React on top of a Vite dev pipeline. Frontend in this repo; backend lived in a separate, never-finalised stream.
- Timeline
- Jan – Feb 2025 · Devcom, IIT Bombay
- Stack
- React 18.3.1 · Vite 6.0.5 · React Router DOM 7 · Framer Motion 11 · FontAwesome · ESLint 9
- Structure
- 13 components · ~613 JSX LOC + ~1,700 CSS LOC · 4 routes —
/·/itempage·/login·/signup - Domain
- Menu (Shawarma · Sandwich · Biryani) · category browsing (Indian · Fast Food) · promo codes (
ILUVSHWRMA= 40%) · marquee promo banner - Build
npm run dev(Vite HMR) ·npm run build·npm run lint- Repo
- github.com/8787233419/e-commerce-dashboard (team repo)
What it does
The user-facing flow is the standard food-ordering loop: land on the homepage, scroll through featured items and category strips, jump to the dedicated item page, filter and search, sign in. The visual register is the part that took the most time — animated transitions via Framer Motion, a marquee promo banner, and a category-led layout that nudges the visitor toward the highlight items (Shawarma, Sandwich, Biryani).
Structure
A four-route Vite SPA mounted under BrowserRouter:
/ (home), /itempage (browse / filter), and
/login / /signup for auth. Behind those routes sit ~13
small components — a NavBar, a SearchBar, a
FoodItem card, a Category strip, the auth forms, plus
the homepage composition. Roughly three quarters of the line count is CSS — the
identity of a restaurant site lives in the styling more than the structure.
Honest scope
This is a frontend-only repo. The backend was meant to live in a separate Node.js stream but didn't reach the workspace, which means there's no persistence layer, no real auth, and no order state surviving a reload. Treat it as a UI / componentisation exercise, not a production e-commerce stack.
What I'd carry forward
The lesson was about state ownership. Once a cart needs to outlive a
page navigation, ad-hoc localStorage reads from individual components
turn into bugs fast. A rebuild today would start with one clear source of truth
for cart state (Context + reducer, or Zustand) and treat each component as a
derived view of it — not as the place where state lives. The promo-code logic,
which currently sits inside the cart component, is the obvious first thing to
lift out.