FOUR WHEELER SERVICE BOOKING & APPOINTMENT SYSTEM

A Project Done By

PRAVEEN REMO. E 211122205017

RAJKUMAR. E 211122205022
SAGAR. A 211122205023
PRAVIN. B 211122104026

STUDENTS OF
INFORMATION TECNOLOGY DEPARTMENT

MADHA ENGINEERING COLLEGE

KUNDRATHUR

CHENNAI-69
 Grocery WebApp

A Project Done By
KAMESHWARAN B 211121104027
YUVARAJ N 211121104059
KEERTHANA R211121104029
KERAN TABERAH E 211121104031
ABIRAMI 211121104002

STUDENTS OF
COMPUTER SCIENCE & ENGINEERING DEPARTMENT

MADHA ENGINEERING COLLEGE

KUNDRATHUR
CHENNAI-69
 BONAFIDE CERTIFICATE

Certified that this project report titled "GROCERY WEBAPP" is the

bonafide work of "Kameshwaran.B" (211121104027), "Yuvaraj.N"
(211121104059), "Keerthana.R" (211121104029), "KeranTaberah.E"
(211121104031), "Abirami" (211121104002) who carried out the project. Work
under my supervision.

SIGNATURE SIGNATURE

Er. B KALPANA SATTU., B.Tech(IT)., Mr. M.NAVIN BHARATHI.,

BS Psychology., MS Criminology., M.Tech(IT)
ME CSE
HEAD OF THE DEPARTMENT ASSOCIATE PROFESSOR
Computer Science Engineering Computer Science Engineering
Madha Engineering College, Madha Engineering College,
Kundrathur, Chennai - 600 069 Kundrathur, Chennai - 600 069

Submitted for the examination held on ______________

Internal Examiner External Examiner

 ACKNOWLEGDEMENT

First of all we pay our grateful thanks to the chairman Ln.Dr. S.Peter for introducing the
Engineering College in Kundrathur

We would like to thank the Director Er.A.Prakash, for giving us support and valuable
suggestion for our project

It is with great pleasure and privilege we express our sincere thanks and gratitude to
Dr.Venugopalakrishnan, M.E.,M.B.A., Ph.D., Principal, for the spontaneous help rend to us
during our study in this college

We express our sincere thanks to Mrs. Er. B Kalpana Sattu., B.Tech(IT)., BS Psychology.,
MS Criminology., ME CSE, Head of the Computer Science Department and our project
Coordinator Mr. M.Navin Bharathi., M.Tech(IT)., for the Good will fostered towards and
for their guidance during the execution of this project.

It is a great privilege to express our sincere thanks to our Internal Guide Mr. M.Navin
Bharathi., M.Tech(IT)., and we acknowledge our indebtedness to her for the encouragement
valuable suggestions and clear tireless guidance given to us on the preparation and execution
of this project

We would like to thank all the teaching and non-teaching STAFF MEMBERS & Friends of
the Computer Science Engineering Department for giving the support and valuable suggesions
for our Project work.
Table of Content
5 User Interface & screenshots 21

5.1 Home Page 21

5.2 Product Linking Page 23

5.3 Product Details Page 26

5.4 Cart Page 27

5.5 Login/Signup Page 29

5.6 Checkout Page 31

5.7 Confirmation Page 33

6 Roles Management 35

6.1 Admin Dashboard 35

6.2 Product Management 36

6.3 Category Management 38

6.4 Order Management 40

6.5 User Management 41

7 Conclusion 43

8 References 44
 Abstract

The Grocery WebApp is an innovative solution for online grocery shopping, developed using
the MERN (MongoDB, Express.js, React, Node.js) stack. This project aims to provide users
with a seamless shopping experience while enabling administrators to efficiently manage the
platform. Key features for users include a modern interface with product browsing, advanced
filtering, a secure authentication system, a dynamic shopping cart, and an intuitive checkout
process.

On the administrative side, the platform offers robust tools for managing products, categories,
orders, and users, as well as generating reports and monitoring system performance. The
application follows a modular architecture, ensuring scalability, maintainability, and
responsiveness.

With a strong focus on user experience, security, and performance, the Grocery WebApp is
well-suited to meet the demands of the evolving e-commerce landscape, offering a reliable
platform for both users and administrators. Future enhancements, including AI-powered
recommendations and advanced analytics, promise to further elevate its utility and
effectiveness.
 List Of Figures
Fig Fig Name Page No

1.1 Technical Architecture 3

1.2 ER Diagram 4

1.3 Project Structure 9

1.4 Home Page 22

1.5 Home Page Code 22

1.6 Product Listing Page Code 24

1.7. a) Product Listing Page 24

1.7. b) Product Listing Page 25

1.7. c) Product Listing Page 25

1.8 Product Details Page Code 26

1.9 Product Details Page 27

1.10 Cart Page Code 28

1.11 Cart Page 28

1.12. a) Login/Signup Page Code 29

1.12. b) Login/Signup Page Code 30

1.13. a) Login/Signup Page 30

1.13. b) Login/Signup Page 31

1.14 Checkout Page Code 32

1.15 Checkout Page 33

1.16 Confirmation Page Code 34

1.17 Confirmation Page 34

1.18 Admin Dashboard Code 35

1.19 Admin Dashboard 36

 1.20 Product Management Code 37

1.21. a) Product Management 37

1.21. b) Product Management 38

1.22 Category Management Code 39

1.23 Category Management 39

1.24 Order Management Code 40

1.25 Order Management 41

1.26 User Management Code 42

1.27 User Management 42

 1. Project Overview

our basic grocery-web app! Our app is designed to provide a seamless online shopping
experience for customers, making it convenient for them to explore and purchase a wide range
of products. Whether you are a tech enthusiast, a fashionista, or a homemaker looking for
everyday essentials, our app has something for everyone.

With user-friendly navigation and intuitive design, our grocery-webapp app allows customers
to browse through various categories, view product details, add items to their cart, and securely
complete the checkout process. We prioritize user satisfaction and aim to provide a smooth and
hassle-free shopping experience.

For sellers and administrators, our app offers robust backend functionalities. Sellers can easily
manage their product listings, inventory, and orders, while administrators can efficiently handle
customer inquiries, process payments, and monitor overall app performance.

With a focus on security and privacy, our grocery-webapp app ensures that customer data is
protected, transactions are secure, and personal information remains confidential. We strive to
build trust with our customers and provide a safe platform for online shopping.

We are excited to have you on board and look forward to providing you with a delightful
shopping experience. Happy shopping with our grocery-webapp!

1.1 Purpose:

The application aims to bridge the gap between traditional grocery shopping and the
convenience of online platforms. It enables users to save time and effort while offering
businesses a robust system to manage inventory, orders, and customer interactions.
1.2 Key Features:

1. Product Browsing:

• Users can search, filter, and sort products by categories, price, or popularity.
2. User Authentication:

• Secure login and signup functionality with JWT-based authentication.

3. Shopping Cart:

• Real-time cart updates for adding, removing, or modifying items.

4. Order Management:

• Users can view their order history and track current orders.
5. Admin Panel:

• Administrative tools for managing products, monitoring sales, and analysing customer

data.

The Grocery WebApp not only enhances user convenience but also empowers grocery stores
to operate more efficiently in a competitive digital market.

2. Architecture

2.1 Technical Architecture:

 Fig 1.1 Technical Architecture

The technical architecture of an flower and gift delivery app typically involves a client-server
model, where the frontend represents the client and the backend serves as the server. The
frontend is responsible for user interface, interaction, and presentation, while the backend
handles data storage, business logic, and integration with external services like payment
gateways and databases. Communication between the frontend and backend is typically
facilitated through APIs, enabling seamless data exchange and functionality.

2.2 ER Diagram:
 Fig 1.2 ER Diagram

The Entity-Relationship (ER) diagram for an flower and gift delivery app visually represents
the relationships between different entities involved in the system, such as users, products,
orders, and reviews. It illustrates how these entities are related to each other and helps in
understanding the overall database structure and data flow within the application.

2.3. Frontend Architecture (React.js):

The frontend is designed using React.js, a JavaScript library that allows for building reusable
and responsive user interfaces. Key aspects include:

• Component-Based Structure:
UI is divided into reusable components like ProductCard, Navbar, and Cart. Each
component handles specific tasks, improving maintainability.

• State Management:

Context API or Redux is used for managing application state, such as user
authentication and cart data.
 • Routing:
React Router manages navigation between pages, such as Home, Product Details, and
Checkout, without full-page reloads.

• Styling:
Styling is implemented using CSS, SCSS, or libraries like Material-UI or Bootstrap for
responsiveness.

2.4. Backend Architecture (Node.js + Express.js):

The backend handles business logic, API endpoints, and communication with the database.
Key aspects include:

• RESTful APIs:
APIs are built using Express.js to handle HTTP requests and responses.

o Example:

 GET /api/products: Fetch all products.

 POST /api/orders: Place an order.

• Middleware:
Custom middleware is implemented for tasks like request validation, error handling,
and authentication using JWT.

• Scalability:
Node.js's asynchronous and event-driven nature ensures the backend can handle
multiple concurrent requests.

2.5. Database Architecture (MongoDB):

MongoDB, a NoSQL database, is used for flexible and scalable data storage.

• Collections:

The database consists of the following key collections:

• Users: Stores user credentials, profile data, and order history.

• Products: Stores product details like name, price, category, and availability.
 • Orders: Tracks orders, including user ID, product IDs, and order status.

• Cart: Temporary storage for a user's cart items.

• Schema Design:
Documents are structured to allow efficient querying and updates. For
instance, orders store product references instead of embedding entire product
details to minimize data duplication.

3. Setup Instruction

Prerequisites:

• Node.js (v14 or higher)

• MongoDB (locally or via a cloud service like MongoDB Atlas)

• Git

• npm or yarn
Installation:

1. Clone the repository:

git clone <repository-url>

cd <repository-folder>

2. Install dependencies for both frontend and backend:

cd client npm
install cd
../server
npm install

3. Set up environment variables:

• Create a .env file in the server directory.
• Add variables such as database connection string, JWT secret, etc.

Project Structure
 Fig 1.3 Project Structure

This structure assumes an Angular app and follows a modular approach.

Here's a brief explanation of the main directories and files:

• src/app/components: Contains components related to the customer app, such as register,

login, home, products, my-cart, my-orders, placeorder, history, feedback,
productdetails, and more.
 • src/app/modules: Contains modules for different sections of the app. In this case, the
admin module is included with its own set of components like add-category,
addproduct, dashboard, feedback, home, orders, payment, update-product, users, and
more.

• src/app/app-routing.module.ts: Defines the routing configuration for the app, specifying

which components should be loaded for each route.

• src/app/app.component.ts, src/app/app.component.html, `src.

Running the Application:

1. Start the Backend

The backend server is powered by Node.js and runs on the port specified in the .env file
(default: 5000).

1. Open a terminal.
2. Navigate to the server directory:

cd se

rver
3. Start the backend server:

npm start

2. Start the Frontend

The frontend is built using React.js and runs on port 3000 by default.

1. Open a new terminal.

2. Navigate to the client directory:
cd client
3. Start the frontend development server:
npm start

4. The React application will open in your default browser. If it doesn’t, you can manually
open: http://localhost:3000
 4. API Documentation

4.1. Authentication Endpoints

4.1.1. User Signup

• Endpoint: /api/auth/signup

• Method: POST

• Description: Allows new users to create an account.

• Request:

{
"name": "John Doe",
"email": "[email protected]",
"password": "securepassword"
}

• Response:

{
"message": "User registered successfully",
"user": {
"id": "648c6d8f58b7f8e95b5c",
"name": "John Doe",
"email": "[email protected]"
}
}

4.1.2. User Login

• Endpoint: /api/auth/login

• Method: POST

• Description: Authenticates the user and provides a JWT token.

 • Request Body:

{
"email": "[email protected]",
"password": "securepassword"
}

• Response:

{
"message": "Login successful",
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI..."
}

4.2. Product Endpoints

4.2.1. Get All Products

• Endpoint: /api/products
• Method: GET
• Description: Fetches all available products.
• Response:

[
{
"id": "648d7c92df7a2b8f3e3a",
"name": "Apple",
"price": 2.5,
"category": "Fruits",
 "stock": 50
},
{
"id": "648d7c93df7a2b8f3e3b",
"name": "Bread",
"price": 1.5,
"category": "Bakery",
"stock": 30
}
]

4.2.2. Get Product by ID

• Endpoint: /api/products/:id
• Method: GET
• Description: Fetches a specific product by ID.

• Response:
• {

• "id": "648d7c92df7a2b8f3e3a",

• "name": "Apple",

• "price": 2.5,

• "category": "Fruits",

• "stock": 50

• }

4.3. Cart Endpoints

4.3.1. Add Item to Cart

 • Endpoint: /api/cart
• Method: POST
• Description: Adds an item to the user’s cart.
• Request Body:

{
"productId": "648d7c92df7a2b8f3e3a",
"quantity": 3
}

• Response:

{
"message": "Item added to cart",
"cart": {
"id": "648d8c34df7b2f5e2a2c",
"items": [
{
"productId": "648d7c92df7a2b8f3e3a",
"quantity": 3
}
]
}
}

4.3.2. Get User’s Cart

• Endpoint: /api/cart

• Method: GET

• Description: Fetches the current user’s cart.

• Response:

{
 "id": "648d8c34df7b2f5e2a2c",
"items": [
{
"productId": "648d7c92df7a2b8f3e3a",
"name": "Apple",
"price": 2.5,
"quantity": 3
}
],
"totalPrice": 7.5
}

4.4. Order Endpoints

4.4.1. Place Order

• Endpoint: /api/orders

• Method: POST

• Description: Places an order for the items in the user’s cart.

• Request Body:

{
"address": "123 Main Street, Cityville"
}

• Response:

{
"message": "Order placed successfully",
"order": {
"id": "648d9e93df7a2b8f3e4a",
"items": [
{
"productId": "648d7c92df7a2b8f3e3a",
"quantity": 3
 }
],
"totalPrice": 7.5,
"address": "123 Main Street, Cityville",
"status": "Processing"
}
}

4.4.2. Get Order History

• Endpoint: /api/orders

• Method: GET

• Description: Fetches all past orders for the logged-in user.

• Response:

[
{
"id": "648d9e93df7a2b8f3e4a",
"items": [
{
"productId": "648d7c92df7a2b8f3e3a",
"name": "Apple",
"quantity": 3
}
],
"totalPrice": 7.5,
"address": "123 Main Street, Cityville",
"status": "Delivered"
}
]
4.5. Error Handling

In case of errors, the API responds with a descriptive message and status code.
Example:

Error Response:

{
"error": "Product not found",
"statusCode": 404
}

4.6 Authentication:

The authentication system of the Grocery WebApp ensures secure access to the
platform for users, allowing them to sign up, log in, and maintain their session via JWT
(JSON Web Token). The backend manages user authentication using JWT-based token
authentication. Here's how it works in detail:

4.6.1. User Authentication Flow

1. Signup

o A new user registers by providing basic details like name, email, and
password.

o The backend validates the provided data, hashes the password, and

stores it in the database. o A JWT token is generated and returned to

the user, allowing them to authenticate future requests.

2. Login o An existing user provides their email and password. o The backend

verifies the credentials and, if valid, generates a JWT token. o This token is

sent back to the client and stored (usually in localStorage or cookies) for

future requests.

3. Protected Routes o Certain routes (e.g., cart management, order placement)

are protected and can only be accessed if the user is authenticated.

{
 "name": "John Doe",
"email": "[email protected]",
"password": "securepassword"
}
o The client must send the JWT token in the Authorization header of the

request to access these routes. o The backend verifies the token’s validity

and grants access if the token is valid.

4.6.2. Backend Authentication Flow

2.1. User Signup

• Endpoint: /api/auth/signup

• Method: POST

• Description: Registers a new user. The server will hash the password and store user
details in the database.

• Request Body:

• Response:

{
"message": "User registered successfully",
"user": {
"id": "648c6d8f58b7f8e95b5c",
"name": "John Doe",
"email": "[email protected]"
}
}

Password Hashing:
 Passwords are hashed using bcrypt before storing them in the database for security
purposes.

2.2. User Login

• Endpoint: /api/auth/login
• Method: POST
• Description: Authenticates a user by comparing the provided credentials with stored
ones and returns a JWT token.
• Request Body:

{
"email": "[email protected]",
"password": "securepassword"
}

• Response:

{
"message": "Login successful",
"token":
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0OGM2ZDhkZjc4YzY1
MjFiYmZmYmNmM2MwZDZkNTExZmQzIiwiaWF0IjoxNjgyNzQ2NjU4fQ.ZJ2
XYnk_bAKjXJJJ8-V9Yo5sM6YB3q6fmIl4HfouZpY"
}

JWT Token:
The generated JWT token contains the user’s id and is valid for a set period (e.g., 1
hour). It is signed using a secret key

4.6.3. Token-based Authentication

3.1. JWT Authentication Middleware

To protect routes, a middleware is used to check the validity of the JWT token.

• Middleware Function:
 The middleware extracts the token from the Authorization header, decodes it, and
verifies it. If the token is valid, it allows the request to proceed. If not, it sends an
error response.

const jwt = require('jsonwebtoken');

const authenticateToken = (req, res, next) => { const token =

req.header('Authorization')?.split(' ')[1]; // Extract token from
"Bearer <token>"
if (!token) {
return res.status(401).json({ error: 'Access denied. No token provided.' });
}

try {
const decoded = jwt.verify(token, process.env.JWT_SECRET); // Verify the token
req.user = decoded; // Attach decoded user data to the request next(); // Proceed to the
next middleware/handler

} catch (error) {
res.status(400).json({ error: 'Invalid token.' });
}
};

3.2. Using Middleware on Protected Routes

Once the authenticateToken middleware is set up, you can use it to protect routes that require
authentication.

• Example: Protected Cart Route

 const express = require('express'); const {
authenticateToken } = require('./middleware/auth');

const router = express.Router();

router.get('/api/cart', authenticateToken, (req, res) => {

// This route is protected. Only accessible if the user is authenticated.
res.status(200).json({ message: 'Cart details here' }); });

5. User Interface & Screenshots

The Grocery WebApp provides an intuitive, user-friendly interface that allows

customers to browse products, add items to their cart, and place orders. Below is a
detailed description of the key UI features:

5.1. Home Page

• Features:
o Header Section: Includes the logo, navigation links (Home, Products, Cart,
Login/Register). o Product Categories: Displays various product categories
(e.g., Fruits, Vegetables, Bakery) that users can click to browse relevant items.
o Featured Products: A carousel or grid layout of popular or featured products.
o Search Bar: Allows users to search for products by name or category.
 Fig 1.4 Home Page

Fig 1.5 Home Page Code

5.2. Product Listing Page

• Features:
o Category Filters: Users can filter products by category, price range, or brand.
o Sort Options: Sort products by price (ascending/descending) or popularity. o
Product Cards: Each product is displayed in a card format with an image,
name, price, and "Add to Cart" button. o Pagination: If there are many products,
pagination is used to navigate through pages.

Example UI (Product Listing):

• A grid layout with product cards.

• Each card includes:
o Product image. o Name and price.
o An "Add to Cart" button.

Fig 1.6 Product Listing Page Code

Fig 1.7 a. Product Listing Page

Fig 1.7 b. Product Listing Page

 Fig 1.7 c. Product Listing Page

5.3. Product Details Page

• Features:
o Product Image: A large, high-quality image of the product.
o Product Information: Detailed information about the product such as
description, price, available stock, etc.
o Quantity Selector: Users can select the quantity they want to add to the cart. o
Add to Cart Button: Allows users to add the selected quantity of the product
to their cart.
o Reviews Section: Shows reviews and ratings from other customers.
 Fig 1.8 Product Details Page Code

Fig 1.9 Product Details Page

5.4. Cart Page

Features:
o Cart Items List: Displays all the products added to the cart with images, names,
quantities, and prices. o Quantity Editing: Users can change the quantity of each
product or remove it from the cart.
o Total Price Calculation: Shows the total price of all items in the cart. o
Checkout Button: Allows users to proceed to checkout and confirm their order.

Fig 1.10 Cart Page Code

 Fig 1.11 Cart Page

5.5. Login/Signup Page

• Features:

o Login Form: Contains fields for email and password, with a "Login" button. o
Signup Form: New users can sign up with name, email, and password fields,
along with a "Sign Up" button. o Validation: Both forms have validation for
required fields and proper format (e.g., email).
o Forgot Password Link: A link for users to reset their password if they forget
it.
Fig 1.12 a. Login/Signup Page Code

Fig 1.12 b. Login/Signup Page Code

 Fig 1.13 a. Login/Signup Page

Fig 1.13 b. Login/Signup Page

5.6. Checkout Page

• Features:

o Shipping Information Form: A form to enter shipping details like name,

address, and contact information.

o Order Summary: Displays the items in the cart along with their prices and
total.
o Payment Integration: Options to choose the payment method (e.g., Credit
Card, PayPal). o Place Order Button: A button to finalize and place the order.

Fig 1.14. Checkout Page Code

 Fig 1.15. Checkout Page

5.7. Confirmation Page (Order Success)

• Features:
o Order Confirmation: Displays a message confirming that the order has been
placed successfully. o Order Details: Provides the user with details of the
order, including the products purchased, total price, and shipping address. o
Next Steps: Information about the order processing or estimated delivery
time.
 Fig 1.16. Confirmation Page Code

Fig 1.17. Confirmation Page

6. Roles Management

6.1. Admin Dashboard

• Features:
o Overview Widgets: Key metrics such as total sales, active users, total orders,
and inventory status displayed in widgets. o Recent Orders: A table or list
of the most recent orders with order ID, customer name, date, and status. o
Quick Links: Easy navigation to manage products, categories, orders, and
users. o Charts: Graphical representations of sales trends, user growth, or
product performance.

Fig 1.18. Admin Dashboard Code

 Fig 1.19. Admin Dashboard

6.2. Product Management

• Features:

o Product List:
 A table displaying all products with columns for name, category, stock,
price, and actions.
 Pagination for better navigation if there are many products.
o Add Product:
 A form to add a new product with fields for name, category, price,
description, stock, and product image.
o Edit Product:
 Allows admins to update details for an existing product, such as price,
stock, or description.
o Delete Product:
 Remove products from the catalog with confirmation prompts to avoid
accidental deletions.
Fig 1.20. Product Management Code

Fig 1.21. a. Product Management

 Fig 1.21. b. Product Management

6.3. Category Management

• Features:

o Category List:
 View all categories in a table format.
 Includes options to edit or delete categories.
o Add Category:
 A form to add new categories with fields for name and description.
o Edit Category:
 Update existing categories' names or descriptions.
 Fig 1.22. Category Management Code

Fig 1.23. Category Management

6.4. Order Management

• Features:
o Order List:
  A table showing all orders with details such as order ID, customer name,
order date, status, and total amount.
 Includes search and filter options (e.g., filter by date, status, or
customer).
o Order Details:
 View detailed information about an individual order,
including:
 Products purchased (name, quantity, and price).
 Shipping details (name, address, contact information).
 Payment status (paid/pending).
o Update Order Status:
 Change the status of an order (e.g., Pending, Shipped, Delivered,
Cancelled).

Fig 1.24. Order Management Code

 Fig 1.25. Order Management

6.5. User Management

• Features:
o User List:
 View all registered users in a table format, including details like name,
email, registration date, and status.
o Edit User Role:
 Assign or update user roles (e.g., customer, admin). o
Activate/Deactivate User:
 Temporarily disable or enable user accounts.
Fig 1.26. User Management Code

Fig 1.27. User Management

7. Conclusion
The Grocery WebApp is a full-featured platform designed to streamline online grocery
shopping for users and empower administrators to manage the system efficiently. Built
with the MERN stack, the app leverages React for a dynamic user interface, Node.js
and Express.js for a robust backend, and MongoDB for scalable data storage. Key
features like user authentication, cart management, and seamless checkout ensure an
excellent user experience, while the admin panel offers tools for effective product,
order, and user management.
Through rigorous testing and thoughtful design, the application demonstrates
reliability, usability, and scalability, making it suitable for real-world deployment. The
project not only showcases technical expertise in full-stack development but also
emphasizes modern development practices, including modular architecture, RESTful
API design, and responsive UI development.
Future enhancements, such as integrating AI-powered recommendations or advanced
analytics, can further enrich the app’s functionality and provide added value to users.

8. References
1. React Documentation - https://reactjs.org/docs
2. Node.js Documentation - https://nodejs.org/en/docs
3. Express.js Guide - https://expressjs.com/en/guide
4. MongoDB Documentation - https://www.mongodb.com/docs
5. JWT Authentication - https://jwt.io/introduction
6. Cypress Testing - https://www.cypress.io
7. Bootstrap (for responsive design) - https://getbootstrap.com/docs
8. Postman (for API testing) - https://www.postman.com
9. MERN Stack Tutorials - https://www.freecodecamp.org/news/mern-stack-tutorial