Design Phase of FOODY – Food
Delivery Application
The design phase defines the structure, interface, and data management
for the FOODY application. It ensures a well-organized interaction between
users, admins, backend services, and the database. FOODY has been built
with a clear separation of responsibilities between user functions, admin
management, and backend logic.
1. System Architecture Design
FOODY follows a modular full-stack architecture using the MERN stack
(MongoDB, [Link], [Link], [Link]). The core structure includes:
• Frontend ([Link]): Displays UI for both users and admins.
Communicates with the backend using REST APIs.
• Backend ([Link] + [Link]): Handles business logic, routing,
authentication, and CRUD operations.
• Database (MongoDB): Stores user accounts, food items, and order
details in separate collections.
Backend Features:
• JWT-based authentication for secure user/admin login.
• API endpoints handle user login/signup, order placing, order tracking,
and admin functions.
System Architecture Flow Diagram
2. UI/UX Design
👤 User Side Flow:
• Homepage: When a user visits the website, the
homepage displays the available food items and menu.
• Food Menu: Items are listed under categories like
“Cakes,” “Pure Veg,” and “Chicken.”
• Login/Signup: Required before placing any orders.
• Order Placement: After login, users can add items to the
cart and place an order.
• Order History Page: Users can view their past orders
including item names, total amount, and current status.
🛠️ Admin Panel Flow:
• Add Food Item: Admin can add new food items by
selecting a category (e.g., Cakes, Pure Veg, Chicken).
• List of Items: Admin can view a list of all food items they
have added.
• Order Management: Admin can view complete order
details like:
o User who placed the order
o Delivery address
o Items ordered
o Order total
o Current status
• Status Update: Admin can change the order status (e.g.,
Pending → Processing → Delivered).
User Side Screenshots:
Landing page
Responsive view
Signup Page
Login Page
MENU LIST
Footer image
Order Image
Payment Interface
My Order
ADMIN Panel Screenshot
ADD FOOD
List of Foods
Orders
3. Database Design
MongoDB is used to store application data in the form of
collections. The structure includes:
• Users Collection:
o Fields: name, email, password (hashed),cartData
User Schema design screenshot
• FoodItems Collection:
Fields: name, description, price, image, category
Food Schema design screenshot
• Orders Collection:
o Fields:
userId,items,amount,address,status,date,payment
Order Schema design screenshot
Each of these collections is connected using reference IDs. The backend
uses Mongoose models for schema definitions and query execution.
Authentication is handled via JWT (JSON Web Tokens) to protect user
sessions and secure admin access.
Conclusion
The design of FOODY ensures seamless user and admin experience with a
clear flow of data between the frontend, backend, and database. Proper
component separation and secure data management provide a strong
foundation for reliable and scalable food delivery operations.
