FoodPlaza Restaurant Website
Project Images :-
What is FoodPlaza ?
**FoodPlaza** is a full-stack restaurant-owned food delivery platform built with**Next.js, Node.js, Express, and MongoDB**. It connects Customers, Admins, and Delivery Boys through dedicated role-based workflows. Customers can browse food, manage carts, place orders using **Razorpay or Cash on Delivery**, track deliveries in real time, and submit reviews. The platform features**Socket.IO real-time updates, live location tracking, 5 km delivery assignment, OTP-based delivery verification, Google authentication, Cloudinary image management, and delivery earnings analytics**. The Admin Panel provides complete restaurant and order management, while the Delivery Boy Panel handles assignments, completed orders, and earnings.
Technology Stack :-
Frontend :-
- • Next.js - Used as the main frontend framework to build the FoodPlaza web application and its pages.
- • React - Used to build reusable and interactive UI components for Customer, Admin, and Delivery Boy panels.
- • Redux Toolkit - Used for centralized management of application and cart-related state.
- • Redux Persist - Used to persist Redux state across page reloads and navigation.
- • React Hook Form - React Hook Form - Used for form handling and validation across authentication and other forms.
- • Socket.IO Client - Used on the frontend to receive and send real-time order, delivery, and shop-status events.
- • React Toastify - Used to display user-friendly toast notifications and alerts.
- • Custom Image Magnifier - Used to provide a zoomed view of food images, including mobile lens-size control.
Backend :-
- • Node.js - Used as the backend runtime environment for FoodPlaza server-side operations.
- • Express.js - Used to build backend APIs and handle application requests and routes.
- • JWT (JSON Web Token) - Used as part of the authentication system for securing authenticated user sessions.
- • bcrypt - Used to securely encrypt/hash passwords and verify login credentials.
- • Mongoose - Used for MongoDB data modeling and database operations.
- • Multer - Used for handling image/file uploads on the backend.
- • Nodemailer - Used to send OTP emails, including the delivery verification OTP.
- • Socket.IO - Used to provide real-time communication between Customers, Admins, and Delivery Boys.
- • cookie-parser - Used for handling authentication-related cookies.
- • CORS - Used to manage cross-origin requests between the frontend and backend.
- • nanoid - Used to generate random IDs for food orders.
- • dotenv - Used to manage environment variables and sensitive configuration values.
- • Nodemon - Used during development to automatically restart the backend server when code changes.
Database :-
- • MongoDB Atlas - Used as the cloud database for storing users, foods, orders, delivery information, and other application data.
Styling :-
- • Tailwind CSS - Used for responsive styling and designing the application's mobile, desktop, and large-screen interfaces.
- • GSAP - Used to create interactive UI animations.
- • Swiper.js - Used to create carousel and slider-based UI sections.
- • Swiper.js - Used to create carousel and slider-based UI sections.
External Services :-
- • Firebase Authentication - Used to implement Google authentication for supported users.
- • Cloudinary - Used to store food and profile images in cloud storage and use their URLs in the application.
- • Razorpay - Used to provide online payment functionality for customer orders.
- • Geoapify - Used for obtaining location-related information such as latitude, longitude, name, state, and pincode.
- • Chart.js - Used to visualize Delivery Boy daily, weekly, and monthly earnings.
Maps & Location :-
- • Leaflet - Used to display interactive maps for location and delivery tracking.
- • React-Leaflet - Used to integrate Leaflet maps into the React/Next.js application.
- • Browser Geolocation API - Used with watchPosition() to continuously track the current location of Users and Delivery Boys.
Three Powerful User Roles :-
Customer
Customers Can :
- Create an account / Login
- Login with Google
- Browse restaurant foods
- View individual food details
- Zoom food images
- Add/remove cart items
- Wishlited the food items
- Change quantities
- Save multiple addresses
- Select an address from the map
- Place orders
- Pay using Razorpay
- Use Cash on Delivery
- View order history
- Search orders by food name
- Request order cancellation
- Track Delivery Boy in real time
- Rate food
- Submit feedback
- User can manage their profile details
Restaurant Admin
Admin Can :
- Control restaurant open/closed status
- Manage profile
- Add food
- Edit food
- Delete food
- Manage orders
- Update order status
- Approve/reject cancellation requests
- View complete order history
- Search orders by Order ID/customer name
- Place orders
- Pay using Razorpay
- Use Cash on Delivery
- View order history
- Search orders by food name
- Receive real-time new-order notifications
Delivery Boy
Delivery Boys Can :
- View available orders
- Accept/decline orders
- View completed orders
- Track earnings
- View Total earnings
- View daily earnings
- View weekly earnings
- View monthly earnings
- Update profile details
- View complete order history
- Receive new delivery assignments in real time
- Can track real time delivery route on map current location to delivery location
Architecture Section
FoodPlaza follows a full-stack architecture connecting Customers, Admins, and Delivery Boys through a Next.js frontend.Redux Toolkit and Redux Persist manage application state, while Node.js and Express.js handle REST APIs and business logic. MongoDB Atlas stores users, foods, orders, Delivery Boys, reviews, and earnings. Socket.IO enables real-time order and delivery communication, while external services such as Razorpay, Firebase, Cloudinary, Geoapify, and Nodemailer provide payments, authentication, image storage, location services, and email notifications.
Complete Order Journey
The complete FoodPlaza order workflow integrates cart management, payment processing, real-time Socket.IO communication, location-based delivery assignment, live map tracking, and OTP-based delivery verification. Each role receives real-time updates throughout the order lifecycle.
Real-Time Architecture
FoodPlaza uses Socket.IO to provide real-time communication between Customers, Admins, and Delivery Boys. Order creation, delivery acceptance, order status, delivery completion, and shop availability updates are synchronized instantly across the platform without requiring page refreshes.
Live Delivery Tracking
FoodPlaza implements a real-time delivery tracking system using the Browser Geolocation API, watchPosition(), MongoDB, Socket.IO, Geoapify, Leaflet, and React-Leaflet. The Delivery Boy's location is continuously updated and synchronized with the backend, allowing customers to view the Delivery Boy's live location and route on an interactive map throughout the delivery process.
Smart Delivery Assignment
FoodPlaza uses a location-aware delivery assignment system to efficiently identify available Delivery Boys when an order moves to Out for Delivery. The system searches for Delivery Boys within a 5 km range, filters out those currently handling orders using a Set for O(1) membership checks, identifies available riders, creates the delivery assignment, and broadcasts it in real time using Socket.IO. The assignment ID is then stored with the order for tracking and future reference.
Secure Delivery Verification
FoodPlaza uses an OTP-based delivery verification system to ensure that an order is confirmed only after successful customer verification. When the Delivery Boy marks an order as delivered, a 6-digit OTP is generated, stored with a 5-minute expiry, and sent to the customer via Nodemailer. The customer enters the OTP, and after successful validation, the order is marked as completed. The workflow also includes loading states, validation, disabled actions, and OTP resend functionality.
Authentication System
FoodPlaza implements a role-based authentication system forAdmins, Customers, and Delivery Boys. Users can authenticate using email and password with bcrypt verification or throughGoogle Authentication using Firebase. After successful authentication, the user's current location is stored for location-based features. The platform also provides a password recovery workflow where users receive an OTP, verify it, and set a new password.
Food Experience
FoodPlaza provides a rich food-detail experience where customers can explore food images, detailed descriptions, customer reviews, and related food recommendations. A custom image magnifier allows users to inspect food images closely with responsive lens sizing for mobile devices. The page also includes a convenient side cart for managing selected items, while up to three related foods can be added directly to the cart for a seamless ordering experience.
High Performance Cart Experience
FoodPlaza provides a dynamic cart system where users can add or remove food items, increase or decrease quantities, and see updated prices without a complete page reload. To optimize frequent cart interactions, debouncing is used to reduce repeated API calls by processing the final action after a short delay. This keeps cart updates efficient while maintaining a responsive side-cart and pricing experience.
Payment System
FoodPlaza supports two payment methods: Cash on Delivery and Razorpay Online Payment. During checkout, customers can select their preferred payment option. COD orders proceed directly to order confirmation and delivery, while Razorpay handles online payment before the order is confirmed. Both workflows ultimately connect to the same order-processing and delivery system.
Restaurant Control System
FoodPlaza provides an Admin-controlled restaurant availability system that allows the restaurant to switch between Open and Closed states. When open, customers can browse the menu, add items, and place orders normally. When closed, the customer interface displays the Shop Closed state, checkout and order placement are blocked, and customers receive a notification. The restaurant status is stored independently, so it remains controlled by the Admin rather than depending on whether the Admin is currently logged in.
Delivery Boy Analytics
FoodPlaza provides a dedicated earnings analytics dashboard for Delivery Boys using Chart.js. The dashboard presents Today's Earnings through a bar chart, Weekly Earnings through a seven-day line chart, and Monthly Earnings through a monthly bar chart. It also includes summary cards for Today's Earnings and Total Earnings, giving Delivery Boys a clear view of their earnings and performance across different time periods.
Engineering Highlights
FoodPlaza goes beyond a traditional frontend implementation by combining secure authentication, real-time communication, location-based services, performance optimization, and business logic into a complete full-stack system. The project implements role-based access control, JWT and bcrypt-based authentication, persistent Redux state, Socket.IO real-time synchronization, live location tracking, and a 5 km delivery assignment mechanism with O(1) availability checks using Set. It also includes debounced cart operations, OTP-based delivery verification with expiry, Razorpay payments, Cloudinary image management, MongoDB/Mongoose data handling, and responsive interfaces across devices.
- Role-based authentication & authorization
- JWT authentication
- bcrypt password verification
- Redux state persistence
- Real-time Socket.IO communication
- Browser-based live location tracking
- 5 km delivery assignment logic
- O(1) Delivery Boy availability lookup using Set
- Debounced cart operations
- OTP-based delivery verification
- OTP expiry mechanism
- Razorpay integration
- Cloudinary image management
- MongoDB/Mongoose data management
- Responsive mobile and desktop UI
- Real-time UI state synchronization