FoodFleet Documentation

A complete, production-ready food delivery SaaS platform with multi-vendor support, real-time tracking, PWA customer app, and more.

What is FoodFleet?

FoodFleet is a complete Food Delivery SaaS Platform that lets you launch your own food delivery marketplace — similar to Zomato or Swiggy — with full control over branding, pricing, and operations.

The platform includes four separate applications:

System Requirements

Installation

# Extract to XAMPP htdocs (Windows)
unzip foodfleet-saas.zip -d C:/xampp/htdocs/
cd C:/xampp/htdocs/foodfleet-saas

# Open MySQL (or use phpMyAdmin)
mysql -u root -p

# Create database
CREATE DATABASE foodfleet_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
EXIT;

# Import schema + seed data
mysql -u root -p foodfleet_db < database/foodfleet_seed.sql

cd backend
cp .env.example .env
# Edit .env with your DB credentials, API keys, etc.

cd backend
npm install

# Install all at once
cd ../customer-app && npm install
cd ../admin-panel && npm install
cd ../vendor-panel && npm install
cd ../delivery-app && npm install

# Option A: Start all with script
npm run start:all

# Option B: Start individually
# Terminal 1 - Backend API
cd backend && npm start       # Port 5000

# Terminal 2 - Customer App
cd customer-app && npm start  # Port 3000

# Terminal 3 - Admin Panel
cd admin-panel && npm start   # Port 3001

# Terminal 4 - Vendor Panel
cd vendor-panel && npm start  # Port 3002

# Terminal 5 - Delivery App
cd delivery-app && npm start  # Port 3003

First Run Guide

After all services are started, open your browser and navigate to http://localhost:3001 to access the Admin Panel.

Demo Accounts

All four demo accounts are pre-seeded in the database. Use them to explore each module.

System Architecture Overview

FoodFleet follows a microservice-inspired monorepo architecture with a single Node.js backend serving all four frontend applications via REST API and Socket.io.

Real-time Event Flow

Order lifecycle events are propagated via Socket.io rooms. Each order has a unique room that the customer, vendor, admin, and delivery partner all subscribe to.

Module Descriptions

Tech Stack

API Authentication

All protected API endpoints require a Bearer JWT token in the Authorization header.

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Authentication Endpoints

Login Request Example

{
  "email": "[email protected]",
  "password": "Customer@123",
  "role": "customer"
}

{
  "success": true,
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "user": {
      "id": 1,
      "name": "Demo Customer",
      "email": "[email protected]",
      "role": "customer",
      "wallet_balance": 250.00
    }
  }
}

Customer API Endpoints

Vendor API Endpoints

Admin API Endpoints

Delivery API Endpoints

Customer PWA Guide

The Customer App is a React-based PWA that customers can install on iOS and Android directly from the browser. It supports offline menu browsing via service workers.

Key Files

customer-app/
├── public/
│   ├── manifest.json      # PWA manifest
│   └── sw.js              # Service worker
├── src/
│   ├── pages/             # Route pages
│   ├── components/        # Shared UI components
│   ├── redux/             # State management
│   ├── hooks/             # Custom React hooks
│   └── utils/             # Helpers, axios config
└── .env                   # API URL, Google Maps key

PWA Installation

The customer app includes a built-in install prompt. When users open the app in Chrome or Safari, a banner prompts them to "Add to Home Screen" for a native app-like experience.

Vendor Panel Guide

The Vendor Panel gives restaurant owners full control over their business on the platform.

Key Features Walkthrough

Admin Panel Guide

The Admin Panel is the nerve center of the platform. All operational, financial, and configuration controls are here.

Commission Management

Go to Finance → Commissions. Set platform-wide default commission rate or override per-vendor. Commission is automatically deducted from vendor earnings on each order.

Multi-City Setup

Navigate to Zones → Cities → Add City. Define the city polygon on the map, set default delivery fee formula, and assign an admin manager if needed.

Delivery App Guide

The Delivery App is optimized for mobile browsers. Delivery partners work entirely from the PWA — no native app needed.

Order Flow

Environment Variables

Copy backend/.env.example to backend/.env and fill in your values.

Payment Gateway Setup

Razorpay (Recommended for India)

Platform Settings

Access via Admin Panel → Settings. Key configurable options:

Branding & Customization

Update the following files to rebrand the platform:

# Logo files
customer-app/public/logo.png          # Customer app favicon/logo
admin-panel/public/logo.png           # Admin panel logo
vendor-panel/public/logo.png          # Vendor panel logo

# App name (update in each app)
customer-app/public/manifest.json     # PWA manifest name
customer-app/src/constants/config.js  # APP_NAME constant

# Theme colors (CSS variables)
customer-app/src/styles/theme.css     # --primary-color: #FF6B35;
admin-panel/src/styles/theme.css
vendor-panel/src/styles/theme.css

Alternatively, use the Admin Panel → Settings → Branding section to upload logos and change the color scheme without touching code.

White-label Setup

For complete white-labeling with a custom domain:

server {
    listen 80;
    server_name app.yourdomain.com;
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
    }
}

FAQ & Troubleshooting

Backend fails to start — "ER_ACCESS_DENIED_ERROR"

Your MySQL credentials in .env are incorrect. Verify DB_USER and DB_PASSWORD match your MySQL setup. On fresh XAMPP installs, the default is root with no password.

Socket.io connection refused on delivery tracking

Ensure CLIENT_URL in .env matches the exact origin of your customer app including the port. CORS blocks socket connections if origins don't match exactly.

Google Maps not loading

Verify your Google Maps API key has the following APIs enabled: Maps JavaScript API, Geocoding API, Directions API, and Places API. Also ensure the key is not restricted to specific domains during local testing.

PWA install prompt not appearing

The install prompt requires HTTPS in production. Locally, it works on localhost but not on 192.168.x.x IP addresses. Ensure the manifest.json has all required fields and a valid 512x512 icon.

Common Error Reference