.
Coding and Implementation
1. Technology Stack Used
Briefly list and describe the technologies used in your project:
• Frontend: React.js (for building dynamic UI)
• Backend: Node.js with Express.js (for handling server-side logic)
• Database: MongoDB (for storing user and food order data)
• Other Tools: Postman (for API testing), VS Code (for
development), Git (for version control)
Frontend Implementation
The frontend of the “Foody” application was developed using React.js, a
powerful JavaScript library for building interactive user interfaces. The
project structure is well-organized for scalability and component
reusability.
Project Structure Overview
The src folder is the heart of the React application. It contains the following
major directories and files:
• components/ – Reusable UI components
o AppDownload/ – Section for downloading the app.
o ExploreMenu/ – Category and menu listing.
o FoodDisplay/ – Displays list of food items.
o FoodItem/ – Individual food item card.
o Footer/, Header/, Navbar/ – Layout elements for
navigation and structure.
o LoginPopup/ – Component for user login popup/modal.
• Context/ – Application-level state management
o StoreContext.jsx – Contains global context using React
Context API to manage shared state such as cart items, user
info, etc.
• pages/ – Main pages of the application
o Home/ – Landing page showing banner, explore menu, and
food items.
o Cart/ – Shows selected items with options to
increase/decrease quantity or remove.
o MyOrders/ – Displays order history of logged-in users.
o PlaceOrder/ – Checkout page with delivery form and order
summary.
o Verify/ – Page for verifying user via OTP/email (optional if
implemented).
• App.jsx – Main entry point where routing is defined using React
Router.
• main.jsx – Entry point rendering <App /> into the DOM.
• index.css – Global styles for the application.
Frontend folder image
Routing
React Router DOM was used for client-side navigation:
State Management
• The FOODY frontend is developed using React.js with Context API for global
state management and Axios for API integration. Below is a breakdown of
major logic implemented in the StoreContext.jsx file:
1. Global Context Setup
React's createContext and useState are used to manage food list, cart items, and
user token globally.
2. Add to Cart Logic
Adds item to local cart state and syncs with the backend if the user is authenticated:
3. Remove from Cart
Decreases quantity or removes item from cart, updates backend too:
4. Get Total Cart Amount
Calculates the total price of items in cart by multiplying quantity and price:
5. Fetch Food List from Backend
On component load, fetch food data from API and update state:
6. Load Cart Items
If token is available, load cart data from backend:
7. useEffect for Initialization
When the app loads, fetch food list and cart data (if token exists):
8. Context Provider
All context values are bundled and passed to child components using the provider:
Styling
• CSS is used for styling through index.css and component-level styles.
• Responsive design principles were followed to make the site mobile-friendly.
Backend Coding and Implementation
The backend of the FOODY application is built using Node.js with Express.js for handling
HTTP requests, and MongoDB for data storage. The structure follows the MVC pattern
to separate concerns and keep the codebase modular.
🔧 Project Structure
• controllers/ – Contains logic for handling requests
o foodController.js – Manages food list operations
o cartController.js – Handles cart operations like
add/remove items
o orderController.js – Manages order placement and
retrieval
o userController.js – Handles user registration/login
• routes/ – Defines API endpoints and maps them to corresponding
controller functions
o foodRoute.js, cartRoute.js, orderRoute.js,
userRoute.js
• models/ – Defines Mongoose schemas
o foodModel.js – Schema for food items
o orderModel.js – Schema for placed orders
o userModel.js – Schema for registered users
• middleware/ – Contains middleware functions
o auth.js – Token verification for protected routes
• config/ – Stores configuration (like DB connection, not shown but
assumed)
• uploads/ – To store uploaded files (e.g., food item images)
Backend Folder Image
🚀 Server Setup (server.js)
Basic Express setup with middleware and route registration:
🔐 Authentication Middleware
auth.js checks for valid token:
📦 Sample Controller Logic
🔸 Cart Controller (cartController.js)
🧾 MongoDB Models
🔸 foodModel.js
userModel.js
🔄 API Endpoint Overview
Method Endpoint Description
POST /api/user/regis Register new user
ter
POST /api/user/login Login and get token
GET /api/food/list Get list of food items
POST /api/cart/add Add item to cart
POST /api/cart/remov Remove item from cart
e
POST /api/cart/get Get current cart data
POST /api/order/plac Place an order
e
GET /api/order/user Get user-specific
orders
Admin Panel – Coding and Implementation
The admin panel in the FOODY application is built separately using React.js.
It provides authorized admin users a dashboard to manage food items,
view orders, and maintain overall control of the platform. This panel is
separate from the main user-facing app and focuses on CRUD (Create,
Read, Update, Delete) functionalities.
🗂️ Project Structure Overview
• components/
o Navbar/ – Top navigation bar for admin
o Sidebar/ – Sidebar with links to pages like Add, List, Orders
• pages/
o Add/ – Form to add new food items to the menu (name, price,
image, category)
o List/ – Displays all existing food items with delete/edit
options
o Orders/ – Displays orders placed by users with order status
and timestamps
• App.jsx – Main component that manages routes and layout
• main.jsx – React app entry point
• index.css – Styling for the dashboard UI
ADMIN Folder Image
🚦 Routing Setup
Routing is handled using React Router, and it includes:
🧾 Admin Functionalities
🔸 1. Add Food Item (pages/Add)
• A form with fields like name, price, image, category
• On submit, calls backend API: POST /api/food/add
🔸 2. List of Food Items (pages/List)
• Fetches all food data from: GET /api/food/list
• Displays in a table format
• Admin can:
o Delete item: DELETE /api/food/:id
🔸 3. View Orders (pages/Orders)
• Fetch all user orders using: GET /api/order/all
• Admin can view:
o Items ordered
o Order total and time
o Change order status (delivered/pending)
