Foody is a modern restaurant web application built with React, Vite, and TypeScript.
It enables users to explore menus, apply filters, search dishes, manage their cart, and complete simple checkouts.
Styled with Tailwind CSS and shadcn/ui, it leverages Redux Toolkit for UI state and TanStack Query for server data, ensuring fast, responsive, and structured user experiences.
👉 Try the application here: Foody Restaurant App
Use the following dummy account to log in and explore the features:
- Email:
johndoe@example.com - Password:
johndoe123
- UI: React 19, React Router DOM 7, Tailwind CSS 4 (with
@tailwindcss/vite), Radix UI (Dialog, Select, Tabs, Tooltip) - State & Data: Redux Toolkit, React Redux,
@tanstack/react-queryv5, Axios - Types & Validation: TypeScript 5.9, Zod
- Icons & Styling:
@iconify/react,lucide-react, Class Variance Authority (CVA),tailwind-merge - Utilities: Day.js for dates, currency & formatting helpers
- Tooling: Vite 7 (dev/build), ESLint 9 (+ react-hooks, react-refresh),
@vitejs/plugin-react - API / Backend: Data powered by Swagger REST API (documented endpoints for authentication, restaurants, menus, orders, reviews, and cart)
- Login/logout flow with token persistence
- Guarded redirects on unauthorized routes
- Session clear and cache reset on logout
- Sticky Navbar with cart badge & profile drawer (
SidebarProfile) - Route-aware active state highlighting (text + icon switch to
text-primary-100) - Consistent page containers with breakpoint-aware
max-wand centeredmd+layouts
- View & update profile details (name, phone) with client-side validation
- Dialog-based form with error messaging & success feedback
- Address card showing phone & address with “Change” action
- Responsive card layout (
md:max-w-[1000px])
- Cart summary & item counts from server cache
- Checkout page + Success page (Navbar/Footer hidden per design)
- Orders grouped by restaurant with transaction status & IDs
- Search via
SearchBar, loading skeletons, optimistic placeholders - Status filter via
SegmentedControl(mobile scrollable, desktop horizontal wrapping) - “Give Review” action per order
- List user reviews with edit/delete actions (Dialog for edits)
- Pagination & load-more behavior with error/empty states
- Restaurant information & menu sections aligned with design system components
Reusable components:
Card, Button, IconButton, Dialog, Input, Badge, Skeleton, Alert, EmptyState,
QuantityStepper, OrderSummary, AddressSummaryRow, MapPinChip, SegmentedControl, SidebarProfile
- CVA-based variants
- Tailwind tokens with consistent spacing & typography
- Mobile styling preserved
md+layouts follow Figma with two-column grids & centered wrappers (max-w 1000–1200px)- Accessible focus states, rounded controls, clear affordances, sane defaults
- Home (via Navbar)
- Restaurant Detail
- Login / Signup
- Profile
- Delivery Address
- My Orders
- My Reviews
- Cart
- Checkout
- Success
-
Scripts:
npm run dev→ Development servernpm run build→ Production buildnpm run preview→ Preview buildnpm run lint→ ESLint checks
-
Build: Vite production build with
tsc -btype checking -
Linting: ESLint 9 with React hooks & refresh plugins
Foody demonstrates how a scalable, audit-ready frontend architecture can deliver delightful restaurant experiences:
- Clean separation of concerns (UI, State, Data, Utilities)
- Strong type safety with TypeScript + Zod
- Optimistic UI patterns for smooth UX
- Reusable design system components for consistency
All screenshots are stored in
public/folder and rendered below.
If you enjoyed this project, feel free to ⭐ the repo and share it!
Perfect for showcasing modern React + TypeScript workflows with professional UI/UX design.