FoodNest - Full-Stack Food Ordering Platform

FoodNest is a full-stack food ordering platform built around a realistic three-role workflow: customers place orders, restaurants prepare and hand them off, and delivery partners accept, deny, and complete deliveries.

The application demonstrates end-to-end product thinking across authentication, role-based routing, MongoDB data modeling, realtime status updates, restaurant operations, delivery assignment, customer feedback, analytics, and a mock payment flow.

Highlights

• Role-based dashboards for customers, restaurants, and delivery partners.
• JWT authentication with protected backend routes and frontend route guards.
• MongoDB/Mongoose schemas for users, restaurants, menus, and orders.
• Multi-step order lifecycle with backend transition validation.
• Delivery accept/deny workflow where denied orders remain available to other partners.
• Realtime order updates using Socket.IO.
• Restaurant menu management, order processing, analytics, and feedback views.
• Customer cart, coupons, mock checkout, order history, and delivery partner details.
• OpenStreetMap embeds for tracking and delivery map views.
• Seeded Indian restaurant catalog for quick local demos.

Tech Stack

Area	Technologies
Frontend	React 19, Vite 8, React Router DOM 7, Tailwind CSS
Frontend Libraries	Axios, Framer Motion, Swiper, Lucide React, React Hot Toast, Socket.IO Client
Backend	Node.js, Express 5, JWT, bcryptjs, Socket.IO
Database	MongoDB, Mongoose
Tooling	ESLint, Nodemon, Docker Compose
Integrations	Mock Razorpay-style payment endpoints, OpenStreetMap embeds

Core Features

Customer

• Browse restaurants and search/filter dishes.
• View restaurant menus and manage cart quantities.
• Apply local demo coupons and offers.
• Place orders through a mock payment flow.
• Track order status from placement to delivery.
• View delivery partner details after acceptance.
• Submit restaurant feedback and ratings.

Restaurant

• Manage menu items and availability.
• Create local promotional offers.
• Accept or reject incoming orders.
• Move orders through preparation and pickup readiness.
• View delivery partner details after a partner accepts.
• Hand orders to delivery partners with Delivered to agent.
• Track order history, revenue, top items, and customer feedback.

Delivery Partner

• View available pickups once restaurants mark orders ready.
• Accept or deny delivery requests.
• See restaurant and customer contact details.
• Track assigned deliveries.
• Complete delivery after restaurant handoff.

Order Lifecycle

The main workflow is validated on the backend:

PLACED
  -> RESTAURANT_ACCEPTED
  -> PREPARING
  -> READY_FOR_PICKUP
  -> DELIVERY_ASSIGNED
  -> DELIVERED_TO_AGENT
  -> DELIVERED

Terminal alternatives:

CANCELLED
RESTAURANT_REJECTED

Handoff Flow

1. Customer places an order.
2. Restaurant accepts and prepares the order.
3. Restaurant marks it Ready for pickup.
4. Delivery partners see it under available pickups.
5. A delivery partner accepts or denies it.
6. If denied, the order is hidden from that partner but remains available to others.
7. If accepted, customer and restaurant can see delivery partner details.
8. Restaurant clicks Delivered to agent.
9. Customer sees the order as on the way.
10. Delivery partner clicks Delivered.
11. The order is completed for every role.

Architecture

React + Vite Client
  |
  | REST API calls with Axios
  | Socket.IO realtime events
  v
Express API Server
  |
  | Mongoose models/controllers
  v
MongoDB

Frontend Organization

client/src/
  App.jsx                     # Role guarded routes
  main.jsx                    # React entry point
  index.css                   # Tailwind and shared styling
  hooks/useFoodNest.js        # Central app state, API calls, realtime updates
  components/TopNavbar.jsx    # Shared navigation and auth UI
  components/ProfilePanel.jsx # Profile and summary panel
  pages/UserPages.jsx         # Customer screens
  pages/RestaurantPages.jsx   # Restaurant screens
  pages/DeliveryPages.jsx     # Delivery partner screens
  data/fallbackRestaurants.js # Offline fallback restaurant data

Backend Organization

server/src/
  server.js                   # Server startup, DB connection, Socket.IO
  app.js                      # Express app and route mounting
  config/db.js                # MongoDB connection
  config/seedData.js          # Initial restaurant/menu seed data
  middleware/auth.js          # JWT auth and role checks
  models/                     # Mongoose schemas
  routes/                     # Express routes
  controllers/                # Business logic

Project Structure

foody/
  README.md
  docker-compose.mongo.yml
  client/
    package.json
    vite.config.js
    tailwind.config.js
    src/
  server/
    package.json
    src/

Getting Started

Prerequisites

• Node.js
• npm
• MongoDB or Docker Desktop

1. Start MongoDB

Using Docker:

docker compose -f docker-compose.mongo.yml up -d

MongoDB runs at:

mongodb://127.0.0.1:27017

2. Backend Setup

Create server/.env:

PORT=5000
MONGODB_URI=mongodb://127.0.0.1:27017/foodnest
JWT_SECRET=replace_with_a_strong_secret
CLIENT_URL=http://localhost:5173

Run the API:

cd server
npm install
npm run dev

Backend:

http://localhost:5000

Health check:

GET http://localhost:5000/api/health

3. Frontend Setup

Create client/.env:

VITE_API_URL=http://localhost:5000/api

Run the client:

cd client
npm install
npm run dev

Frontend:

http://localhost:5173

Demo Data

On first backend startup, the app seeds:

• 15 Indian restaurants
• menu items for each restaurant
• a default restaurant owner

Default seeded restaurant owner:

Email: owner@foody.local
Password: password123
Role: restaurant

You can also register through the UI as:

• user
• restaurant
• delivery

Navigation Map

Customer Routes

Route	Description
/user	Customer home
/restaurants	Restaurant search and filters
/restaurant/:id	Restaurant menu
/user/cart	Cart and checkout
/user/orders	Order history
/user/orders/:id	Order details, delivery details, feedback
/user/tracking	Latest order tracking
/profile	Profile summary

Restaurant Routes

Route	Description
/restaurant/menu	Menu management and offers
/restaurant/current-orders	Active order workflow
/restaurant/orders	Order history
/restaurant/orders/:id	Order detail
/restaurant/analytics	Analytics and feedback
/profile	Profile summary

Delivery Routes

Route	Description
/delivery/orders	Available pickups and assigned deliveries
/delivery/maps	Delivery map view
/profile	Profile summary

API Overview

Base URL:

http://localhost:5000/api

Module	Endpoints
Auth	POST /auth/register, POST /auth/login
Restaurants	GET /restaurants, GET /restaurants/:id, POST /restaurants, GET /restaurants/owner/me, GET /restaurants/owner/analytics
Menu	GET /menu/restaurant/:restaurantId, POST /menu, PATCH /menu/:id, DELETE /menu/:id
Orders	POST /orders, GET /orders/me, PATCH /orders/:id/status
Delivery	GET /delivery/available-orders, POST /delivery/orders/:id/accept, POST /delivery/orders/:id/decline
Payment	POST /payment/create-order, POST /payment/verify

Data Model Summary

Model	Purpose
User	Stores customer, restaurant owner, and delivery partner accounts
Restaurant	Stores restaurant profile, owner, cuisine, rating, and location data
MenuItem	Stores restaurant menu items, pricing, availability, and category
Order	Stores order items, amount, customer, restaurant, delivery partner, status, payment state, and delivery denial state

Data Storage

Persistent data is stored in MongoDB:

• users
• restaurants
• menu items
• orders
• delivery accept/deny state

Some UI/demo state is currently stored in browser localStorage:

Key	Purpose
foodnest-theme	Selected theme
foodnest-location	Selected delivery city
foodnest-restaurant-offers	Local offer data
foodnest-order-coupons	Local coupon records
foodnest-feedback	Local customer feedback

Realtime Updates

Socket.IO is used to broadcast order changes.

Server:

server/src/server.js

Client:

client/src/hooks/useFoodNest.js

Events:

order:created
order:status-updated

Validation and Build

Frontend:

cd client
npm run lint
npm run build

Backend syntax checks:

cd server
node -c src/server.js
node -c src/app.js
node -c src/controllers/orderController.js
node -c src/controllers/deliveryController.js

Deployment

This project can be deployed as a single Node web service that serves both the API and the built Vite frontend.

Recommended setup

• App hosting: Render web service
• Database: MongoDB Atlas or any hosted MongoDB instance

Included deployment config

A root render.yaml is included for Render Blueprint deploys. It:

• installs server and client dependencies
• builds the frontend with VITE_API_URL=/api
• starts the Express server from server/src/server.js
• serves the built frontend from Express in production

Required production environment values

• MONGODB_URI
• JWT_SECRET
• CLIENT_URL

For a single-service Render deploy, set:

VITE_API_URL=/api
CLIENT_URL=https://your-render-service-url.onrender.com

Render deploy steps

1. Push this repo to GitHub.
2. Create a MongoDB Atlas database and copy its connection string.
3. In Render, choose New > Blueprint and connect the repo.
4. Render will detect the root render.yaml.
5. Provide values for:
   • MONGODB_URI
   • CLIENT_URL
6. Deploy the Blueprint.
7. Open https://your-service-url/api/health to confirm the backend is live.
8. Open the root site URL to confirm the frontend is being served by Express.

Notes

• The first backend startup seeds demo restaurants if the database is empty.
• Local development still uses separate frontend and backend servers.
• If you prefer separate frontend/backend hosting, you can still deploy them independently by pointing VITE_API_URL at your backend's public /api URL.

Current Limitations and Future Improvements

• Persist auth sessions across page refreshes.
• Move feedback, coupons, and offers from localStorage to MongoDB.
• Add stronger backend ownership checks for order status updates.
• Integrate a real payment gateway.
• Add live driver GPS tracking and route calculation.
• Add automated API and UI tests.
• Add image upload support for restaurants and menu items.