🍜 FoodDash — Full-Stack Food Delivery Platform

A complete food delivery system built as a full-stack monorepo. Covers the customer ordering journey, admin back-office, cashier operations, inventory management, delivery tracking, and reporting — all powered by a Node.js REST API and a React frontend.

🌐 Live Demo: food-delivery-nine-inky.vercel.app 📦 Repository: github.com/DangHuuLong/Food-Delivery

📖 Overview

FoodDash is a full-stack food delivery platform designed to handle real-world operational complexity. It is structured as a monorepo containing the backend API, the frontend application, project documentation, and API testing collections.

The system supports four distinct user roles — customer, admin, cashier, and driver — each with their own application surface and access scope. The backend exposes a versioned REST API, and the frontend delivers a role-segmented multi-surface experience built for both desktop and mobile usage.

🚀 What This Platform Covers

Domain	Capability
🔐 Authentication	Register, login, JWT auth, role-based access control
🛍️ Customer Storefront	Browse menu, view products, manage cart, place orders
💳 Checkout & Payment	Address selection, order placement, mock payment flow
🚚 Delivery Tracking	Delivery assignment, GPS location, status transitions
🖥️ Admin Dashboard	KPIs, orders, products, users, inventory, reports
🧾 Cashier Workspace	POS, today's orders, order history, shift reports
🧂 Inventory Management	Ingredients, stock entries, goods receipts, suppliers
🎟️ Promotions	Scheduled discounts with clone, pause, and cancel flows
🗓️ Staff Scheduling	Shift templates, weekly assignment schedule
📊 Reporting	Revenue timeseries, top items, order statistics

✨ Key Features

Backend

Production-ready REST API versioned under /api/v1
JWT authentication with per-request token verification
Role-based access control across all protected routes
Cart lifecycle with product price snapshots
Order status state machine with validated transitions
Delivery assignment and GPS tracking
Inventory normalization with stock lot management
Promotion scheduling with clone and pause support
Cloudinary image uploads for products, categories, and promotions
Strong input validation and business rule enforcement throughout

Frontend

Mobile-first customer storefront (responsive down to small phones)
Role-segmented routing with RequireAuth guard
Redux Toolkit for cart, order, and toast state
TanStack React Query for server-state fetching and caching
Centralized popup orchestration system for ordering UX
Dynamic Vietnamese province/district/ward address selector
Data-driven admin interface with search, filters, and pagination
Vercel SPA deployment with client-side routing support

🛠 Tech Stack

Backend

Layer	Technology
Runtime	Node.js (ES Modules)
Framework	Express.js
Database	MongoDB via Mongoose
Authentication	JSON Web Tokens (JWT)
Password Hashing	bcryptjs
File Uploads	Multer + Cloudinary
Dev Server	Nodemon

Frontend

Concern	Technology
Framework	React
Build Tool	Vite
Routing	React Router
Server State	TanStack React Query
Client State	Redux Toolkit + React Redux
UI State	React Context
Styling	Tailwind CSS + CSS Modules
Icons	Lucide React

Deployment & Tooling

Tool	Purpose
Vercel	Frontend hosting with SPA rewrite
Cloudinary	Media asset storage and delivery
MongoDB Atlas	Managed cloud database
Postman	API testing collections (in-repo)
ESLint	Linting for React Hooks and Refresh

🏗 Architecture Overview

┌──────────────────────────────────────────┐
│              React Frontend              │
│  (Vite · React Router · Redux · Query)   │
│                                          │
│  Customer │ Admin │ Cashier │ Auth       │
└──────────────────┬───────────────────────┘
                   │ HTTPS · Bearer Token
                   │ fetch() → http() wrapper
                   ▼
┌──────────────────────────────────────────┐
│           Node.js / Express API          │
│         REST  ·  /api/v1  ·  CORS        │
│                                          │
│  Route → Middleware → Controller         │
│       → Service → Model → MongoDB        │
└───────────────┬──────────────────────────┘
                │
       ┌────────┴────────┐
       ▼                 ▼
   MongoDB          Cloudinary
  (Atlas)         (Media Storage)

How Frontend and Backend Connect

The frontend uses a shared http() wrapper around the native fetch API. It automatically attaches the Bearer token from local storage, handles 401 responses by clearing auth, and normalizes error payloads. Each backend domain has a corresponding API module in src/api/, keeping integration concerns cleanly separated from UI logic.

Role-Based System

All protected routes on the backend require a valid JWT. The middleware re-queries the user from the database on each request, verifying active status before granting access. On the frontend, a RequireAuth guard handles unauthenticated redirects and role-mismatch redirects. After login, users are routed to their role-appropriate area:

Role	Default Route
`ADMIN`	`/admin/dashboard`
`CASHIER`	`/cashier`
`DRIVER`	`/home`
`CUSTOMER`	`/home`

🗂 Application Areas

🛍️ Customer

The customer-facing storefront is designed mobile-first. It supports browsing the menu with category filters, viewing product details, managing a cart (with real-time price snapshots), completing checkout with a dynamic address picker, and tracking orders post-placement. Promotions and special offers are surfaced on dedicated pages.

🖥️ Admin

A comprehensive back-office dashboard under /admin. Sections include:

Dashboard — KPIs, revenue timeseries, top-selling items, order status overview
Products & Categories — full CRUD with image uploads
Orders — filterable order management with status transitions
Inventory — ingredient stock table with lot-level visibility
Goods Receipts — supplier-linked inbound stock with auto stock entry creation
Users — employee management with lock/unlock and password reset
Promotions — grouped by status with clone, pause, and cancel schedule actions
Shifts — shift templates and weekly assignment schedule
Reports — revenue and order charts with tabular summaries

🧾 Cashier

An operational workspace under /cashier for POS-style order creation, viewing today's orders, browsing order history, and accessing shift reports.

🚗 Driver

Drivers access delivery-task views showing assigned jobs, individual job details, and a daily summary of completed deliveries.

📁 Repository Structure

Food-Delivery/
├── backend/                  # Node.js / Express REST API
│   ├── src/
│   │   ├── constants/        # Domain enums (roles, statuses, types)
│   │   ├── controllers/      # Request/response handlers
│   │   ├── middlewares/      # Auth, role checks, file uploads
│   │   ├── models/           # Mongoose schemas
│   │   ├── routes/           # Express route definitions
│   │   ├── services/         # Business logic
│   │   ├── utils/            # Shared helpers
│   │   └── validators/       # Input validation
│   ├── .env.example
│   ├── package.json
│   └── server.js
│
├── frontend/                 # React / Vite application
│   ├── src/
│   │   ├── api/              # Domain-based API client modules
│   │   ├── app/              # Router and route guards
│   │   ├── components/       # Shared UI components
│   │   ├── context/          # Popup, MenuFilter, Cart contexts
│   │   ├── layouts/          # Role-based layout shells
│   │   ├── pages/            # Page components by area
│   │   │   ├── admin/
│   │   │   ├── auth/
│   │   │   ├── cashier/
│   │   │   └── customer/
│   │   ├── redux/            # Store, slices (cart / order / toast)
│   │   └── utils/            # Auth storage, formatters, helpers
│   ├── index.html
│   ├── vite.config.js
│   ├── package.json
│   └── vercel.json
│
├── docs/                     # Project documentation and reports
├── .postman/                 # Postman environment files
├── postman/globals/          # Postman global variables
├── .gitignore
├── package.json              # Root workspace scripts
└── README.md

⚡ Getting Started

Prerequisites

Node.js v18 or higher
MongoDB Atlas cluster (or local MongoDB)
Cloudinary account
npm

1. Clone the Repository

git clone https://github.com/DangHuuLong/Food-Delivery.git
cd Food-Delivery

⚙️ Environment Variables

Backend — `backend/.env`

# Server
PORT=5000

# Database
MONGO_URI=mongodb+srv://<user>:<password>@cluster.mongodb.net
DB_NAME=fooddash

# JWT
JWT_SECRET=your_jwt_secret_here
JWT_EXPIRES_IN=7d

# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

CORS is pre-configured to allow http://localhost:5173 and the deployed Vercel frontend domain. Adjust as needed for your environment.

Frontend — `frontend/.env`

VITE_API_URL=http://localhost:5000

If VITE_API_URL is not set, the frontend falls back to http://localhost:3000.

🚀 Running the Project Locally

Backend

cd backend

# Install dependencies
npm install

# Copy and configure environment variables
cp .env.example .env

# (Optional) Seed the admin account
npm run seed:admin

# Start development server with hot reload
npm run dev

The API will be available at http://localhost:5000. Health check: GET http://localhost:5000/api/v1/health

Frontend

cd frontend

# Install dependencies
npm install

# Copy and configure environment variables
cp .env.example .env

# Start development server
npm run dev

The app will be available at http://localhost:5173.

📜 Available Scripts

Backend

Script	Description
`npm run dev`	Start development server (Nodemon)
`npm start`	Start production server
`npm run seed:admin`	Seed the initial admin account

Frontend

Script	Description
`npm run dev`	Start Vite development server
`npm run build`	Build for production
`npm run preview`	Preview the production build locally
`npm run lint`	Run ESLint

🔗 API and App Relationship

The frontend and backend are fully decoupled. The frontend communicates exclusively through the versioned REST API:

Frontend (React/Vite) ──► http://localhost:5000/api/v1/...

All API modules in frontend/src/api/ correspond directly to backend domain modules:

auth · cart · category · delivery · driver · goodsReceipt · goodsReceiptItem · ingredient · order · orderStats · payment · product · promotion · shift · shiftAssignment · stockEntry · supplier · user

🌍 Deployment

Frontend — Vercel

The frontend is deployed on Vercel with an SPA rewrite rule:

// frontend/vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Set VITE_API_URL in your Vercel project environment settings to point to the deployed backend.

🌐 Live: food-delivery-nine-inky.vercel.app

Backend

The backend can be deployed to any Node.js-compatible hosting provider (Railway, Render, Fly.io, etc.). Ensure all required environment variables are set in the deployment environment.

🗺️ API Testing

Postman collections and environment files are included in the repository:

.postman/         # Postman environment configurations
postman/globals/  # Postman global variable definitions

Import these into Postman to explore and test all API endpoints locally or against the deployed backend.

📝 Notes & Future Improvements

Integrate a real payment gateway (e.g. VNPay, Stripe)
Add WebSocket / SSE support for real-time order and delivery status updates
Complete the frontend password recovery flow with full backend integration
Add refresh token support for longer-lived sessions
Consolidate cart state into a single Redux-first approach
Add rate limiting and structured request logging to the backend
Extend test coverage — unit and integration tests for both layers
Add i18n support for a multi-language customer storefront
Introduce loading skeletons for improved perceived performance

📄 License

This project is licensed under the MIT License.

Built with ❤️ by DangHuuLong using Node.js, Express, React, and MongoDB
Live Demo · Repository

Name		Name	Last commit message	Last commit date
Latest commit History 231 Commits
.postman		.postman
backend		backend
docs		docs
frontend		frontend
postman/globals		postman/globals
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

🍜 FoodDash — Full-Stack Food Delivery Platform

📖 Overview

🚀 What This Platform Covers

✨ Key Features

🛠 Tech Stack

Backend

Frontend

Deployment & Tooling

🏗 Architecture Overview

How Frontend and Backend Connect

Role-Based System

🗂 Application Areas

🛍️ Customer

🖥️ Admin

🧾 Cashier

🚗 Driver

📁 Repository Structure

⚡ Getting Started

Prerequisites

1. Clone the Repository

⚙️ Environment Variables

Backend — backend/.env

Frontend — frontend/.env

🚀 Running the Project Locally

Backend

Frontend

📜 Available Scripts

Backend

Frontend

🔗 API and App Relationship

🌍 Deployment

Frontend — Vercel

Backend

🗺️ API Testing

📝 Notes & Future Improvements

📄 License

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Backend — `backend/.env`

Frontend — `frontend/.env`

Packages