Full-stack meal ordering platform focused on performance, scalability, and conversion-driven UX.
- Frontend (Web App): FoodHub Live
- Backend (API): FoodHub API
| Home Page | Meals Listing |
|---|---|
 |
 |
| Checkout Flow | Dashboard |
|---|---|
 |
 |
- Next.js (App Router)
- React + TypeScript
- Tailwind CSS
- ShadCN UI
- TanStack Form
- Node.js
- Express.js
- Prisma ORM
- PostgreSQL
- Frontend: Vercel
- Backend: Render / other Node-compatible cloud platform
- Role-based authentication and authorization for
Customer,Provider, andAdmin. - Smart cart with sticky order summary for faster and clearer checkout decisions.
- One-page checkout flow combining delivery address, schedule, payment method, and order note.
- Real-time-oriented order tracking with status-driven UI updates.
- Multi-role dashboard for operational visibility, order management, and business insights.
- Fully responsive interface across mobile, tablet, and desktop breakpoints.
- SEO-focused implementation using App Router metadata and crawl-friendly routing.
- Toast-driven user feedback for async actions, validation states, and API responses.
FoodHub uses a layered architecture to keep the codebase scalable and maintainable:
- Presentation layer: Next.js route segments and reusable UI components.
- Data access layer: service modules and typed API clients for backend communication.
- State and async layer: typed service modules and API helpers for backend communication.
- Form and validation layer: TanStack Form for predictable, type-safe form handling.
- Backend service layer: Express controllers and domain logic backed by Prisma.
- Persistence layer: PostgreSQL relational schema managed through Prisma migrations.
git clone https://github.com/your-username/foodhub-client.git
cd foodhub-clientnpm installCreate a .env.local file in the project root using the example below.
npm run devApplication runs at http://localhost:3000.
# Frontend
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_API_BASE_URL=http://localhost:5000
# Payments (example placeholders)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxx
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxx- In Google Cloud Console, add
http://localhost:3000toAuthorized JavaScript origins. - Add
http://localhost:5000/api/v1/auth/callback/googletoAuthorized redirect URIs. - The frontend route
http://localhost:3000/auth/callbackis the final in-app page after backend login succeeds. - For production, also add your live frontend origin and your live backend callback URL, such as
https://your-frontend-domain.comandhttps://your-api-domain.com/api/v1/auth/callback/google.
- Uses role-based access control to restrict privileged routes and operations.
- Keeps secrets in environment variables and excludes sensitive files from source control.
- Enforces server-side validation for critical write operations.
- Uses Prisma to reduce raw-query risk and enforce typed database access patterns.
- Recommends HTTPS-only deployment and secure cookie/session policies in production.
- Production hardening still required before public launch (payment webhooks, idempotency, E2E tests, and secure session handling).
- WebSocket or SSE-based live order tracking for lower-latency updates.
- Background jobs for notifications, receipts, and provider-side automation.
- Advanced analytics dashboard for conversion, retention, and provider performance.
- End-to-end automated testing (Playwright + integration tests).
- Multi-language and multi-currency support for international rollout.
- Watch on Google Drive: Open Demo Video
Note: GitHub README blocks iframe embeds, so the video is linked via a clickable thumbnail.
Name: Dhananjoy Chandra Das Role: Full-Stack Developer LinkedIn: https://www.linkedin.com/in/dhananjoycd/