Скачать или смотреть Flavour Fiesta — React 19 + Redux Toolkit + Tailwind | Swiggy Proxy (Render) + Mock Fallback

Flavour Fiesta is a production-style food ordering app built with React 19, Redux Toolkit, React Router 6, TailwindCSS, and a minimal Express proxy for the Swiggy API. It gracefully falls back to mock data so the demo never breaks—even if the upstream API sleeps or rate-limits.

⚠️ Important (Render Proxy):
The Swiggy requests go through an Express proxy hosted on Render. On the free tier, the server can sleep, so the first API call may take ~30–50s (cold start). After that, responses are fast. If the proxy or API fails, the app auto-switches to mock data and shows a source badge (🌐 API / 📦 Mock / 🛟 Auto Fallback).

Live Demo: https://urstrulybhavana-flavour-fiesta-app...

GitHub Repo: https://github.com/UrstrulyBhavana/Flavour...

✨ Highlights

🔎 Search restaurants + Top Rated (≥ 4.4) smart filter

⚡ Shimmer / Skeleton loaders for smooth UX

🛒 Robust Cart (add / remove / clear) with correct ₹ pricing

📱 Responsive UI + semantic & accessible controls

🧭 Pages: Home, Menu, Cart, About, Contact, FAQ

🧩 Auto mock fallback if API/proxy is down


🧰 Tech Stack

React 19 • Redux Toolkit • React Router 6 • TailwindCSS • Express proxy (Render) • node-fetch • Parcel

▶️ Chapters

00:00 Intro & Tech Stack
00:38 Home page walkthrough
01:30 Search & Top Rated filter
02:15 Restaurant menu + categories
03:10 Add to Cart / Remove / Clear
04:05 Mock fallback demo
05:00 About, Contact, FAQ
05:40 Wrap-up & links
(Adjust timestamps if your cut differs.)

💻 Run Locally
1) Install
npm install

2) Start the proxy (Express)
npm run proxy # or: node server.js
- http://localhost:5174

3) Start the client (Parcel)
npm run dev # - http://localhost:1234


Switch data source: Home has a “Use Mock Data” checkbox. Menu also supports ?mock=1.
Proxy (production): https://flavorfiesta-proxy.onrender.com
(may cold-start on first hit).

📁 Key Files (high level)

server.js — Express proxy (/api/restaurants, /api/menu)

components/Body.jsx — search, top-rated filter, source badge

components/RestaurantMenu.jsx + useRestaurantMenu.js — menu fetch, categories, fallback

components/ItemList.jsx — add/remove logic

utils/cartSlice.js — Redux Toolkit cart (addItem, removeOne, clearCart)

🙌 Credits & Contact

Built by Linga Bhavana — Frontend Developer (React, Redux, Tailwind).
Email: [email protected]
Location: Hyderabad, Telangana, India
LinkedIn: https://www.linkedin.com/in/bhavana-bm/

#React #ReduxToolkit #TailwindCSS #SwiggyAPI