Scribd
Upload
2 views17 pages

Coding and Implemention

The document outlines the coding and implementation details of the 'Foody' application, which utilizes a technology stack including React.js for the frontend, Node.js with Express.js for the backend, and MongoDB for data storage. It describes the project structure, frontend and backend functionalities, state management, API endpoints, and the separate admin panel for managing food items and orders. The application follows best practices for scalability, modularity, and responsive design.

Uploaded by

manjeetphogat7056
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views17 pages

Coding and Implemention

The document outlines the coding and implementation details of the 'Foody' application, which utilizes a technology stack including React.js for the frontend, Node.js with Express.js for the backend, and MongoDB for data storage. It describes the project structure, frontend and backend functionalities, state management, API endpoints, and the separate admin panel for managing food items and orders. The application follows best practices for scalability, modularity, and responsive design.

Uploaded by

manjeetphogat7056
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

.

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)

You might also like