Summer Intern BTech_2020_10235

Online Food Store Website Using MERN
A Report
Submitted in partial fulfilment of the requirements for the
award of the Degree of
Bachelor of Technology
in
Computer Science and Engineering

By
AARFIN ANJUM
BTECH/10235/20
Birla Institute of Technology, Mesra
Ranchi, Jharkhand-835215
i
APPROVAL OF THE GUIDE
Recommended that the B. Tech. Summer Internship Project titled Online Food
Store Website Using MERN submitted by BTECH/10235/20, AARFIN
ANJUM is approved by me for submission. This should be accepted as fulfilling
the partial requirements for the award of Degree of Bachelor of Technology in
Computer Science and Engineering. To the best of my knowledge, the report
represents work carried out by the student in Birla Institute of Technology,
Mesra Ranchi and the content of this report is not form a basis for the award of
any previous degree to anyone else.
Date: July 16th, 2023
Dr. Satish Chander

Assistant Professor
Department of Computer
Science and Engineering
ii
DECLARATION CERTIFICATE
I certify that
a) The work contained in the report is original and has been done by
myself under the general supervision of my supervisor.
b) The work has not been submitted to any other Institute for any
other degree or diploma.
c) I have followed the guidelines provided by the Institute in writing
the report.
d) I have conformed to the norms and guidelines given in the Ethical
Code of Conduct of the Institute.
e) Whenever I have used materials (data, theoretical analysis, and
text) from other sources, I have given due credit to them by citing
them in the text of the report and giving their details in the
references.
f) Whenever I have quoted written materials from other sources, I
have put them under quotation marks and given due credit to the
sources by citing them and giving required details in the
references.
Date: July 16th, 2023 AARFIN ANJUM

BTECH/10235/20
Department of Computer Science
and Engineering
iii
CERTIFICATE OF APPROVAL
This is to certify that the work embodied in this Summer Internship Report
entitled “Online Food Store Website Using MERN” , is carried out by AARFIN
ANJUM, BTECH/10235/20 has been approved for the degree of Bachelor of
Technology in Computer Science and Engineering of Birla Institute of
Technology, Mesra, Ranchi.
Date:
Place:
(Chairman) (Panel Coordinator)

Head of the Department Examiner
Dept. of Comp. Sc. & Engg. Dept. of Comp. Sc. & Engg.
iv
ABSTRACT
E-commerce has become an essential element of our daily lives in recent years. It is expanding
on a daily basis. Most individuals today prefer to purchase online rather than going to the store.
As the availability of the internet is rapidly increasing, so will the number of online buyers.
Digital shopping is much more convenient, as buyers don’t have to leave the comfort of their
homes.
Over the last few years, web development has gone through significant changes in every
aspect. The rapid development of web technologies has taken development to a new level.
One of the most widely used full stack which plays a leading role in web development
nowadays is the MERN stack. The MERN stack includes four components: MongoDB
database, Express as back-end web framework, React.js serves as frontend library and Node.js
as JavaScript environment.
Inspired by the capabilities and versatility of the MERN stack and with the increase in
demand for e-commercial websites, we created an online Food-Store with the fundamental
features. Our objective was to create a user-friendly platform that would allow the customers
to buy food online.
In this project, we conducted an in-depth analysis of the requirements and features needed
for this website. This involved defining the user journey, outlining the core functionalities,
and considering factors such as user authentication, menu browsing, cart management and
payment integration.
v
ACKNOWLEDGEMENT
I would like to express my heartfelt gratitude and appreciation to all the individuals who have
contributed significantly to the successful completion of this project. Their support, guidance,
and encouragement have been invaluable throughout the journey.
First and foremost, I am deeply grateful to my project guide Dr. Satish Chander for their
unwavering support, expertise, and valuable insights. His guidance and mentorship have been
beneficial in shaping the direction and execution of this project. I am grateful for his patience,
encouragement, and the time they dedicated to reviewing and providing feedback on my work.
I extended my sincere appreciation to the Head of the Department, Prof. Supratim Biswas for
providing me with the opportunity to undertake this project and for fostering an environment
conducive to research and innovation. Their encouragement and support have been crucial in
my academic and professional development.
I would like to acknowledge and thank all the teachers of Computer Science and Engineering
for imparting knowledge and skills that have been integral to the successful completion of the
project. Their dedication, expertise and willingness to share their wisdom have greatly enriched
my learning experience.
I am indebted to my parents and my family for their constant love, encouragement, and
unwavering belief in my abilities. Their support has been my pillar of strength throughout this
journey.
I would also like to acknowledge and express my sincere appreciation to my teammates Miss
Trisha Sharon Panna and Miss Madhu Raj for their exceptional collaboration, dedication
with, and hard work. Their contribution, ideas, and teamwork were integral for the completion
of the project.
Additionally, I would like to express my gratitude to my classmates and friends for their
valuable discussions, and constructive feedback that have shaped my ideas and approach.
Finally, I would like to express my gratitude to the Computer Science Department and Birla
Institute of Technology for providing the necessary resources and infrastructure that facilitate
the smooth progress of this project.
vi
Thank you all for being a part of this incredible journey and for your invaluable contributions.
Date: July 16th, 2023 (Signature)

AARFIN ANJUM
BTECH/10235/20
vii
CONTENTS
ABSTRACT …………………………………………………………………………… i
ACKNOWLEDGEMENT ………………………………………………………….... ii
LIST OF FIGURES ……..…………………………………………………………..... iii
LIST OF TABLES …………………………………………………………………..... iv
CHAPTER 1 INTRODUCTION……………..………………………………………. 1
1.1 OVERVIEW …………..…………………………………………………………….……………….. 1
1.2 PURPOSE………………………………………………………………………………………………2
CHAPTER 2 BACKGROUND OF THE PROJECT…………………………………2

2.1 E-COMMERCE……………………………………………………………………..2
2.2.1 TYPES………………………….……………………………………………………………….... 2
2.2.2 ELEMENTS……………………………………………………………………………………….3
2.2.3 ADVANTAGES……………………………………………………………………………………4
2.2 MERN………….……………………………………………………………………..5
CHAPTER 3 METHODOLOGY………………………………………………………8
3.1 SCOPE………...……………………………………………………………………..8
3.2 DESIGN PLANNING……...…………………………………………………….....9
3.3 DEVELOPMENT PHASE………………………………………………………….10
3.4 IMPLEMENTATION PHASE….………………………………………………….11
CHAPTER 4 EXPERIMENTAL RESULTS AND DISCUSSION …………………..13

4.1 FRONTEND…....……………………………………………………………………..13
4.2 DESIGN PLANNING……...…………………………………………………………23
CHAPTER 5 CONCLUSION……………………………………….…………………..25
5.1 SUMMARY…....……………………………………………………………………...25
viii
5.2 FUTURE SCOPE…………...………………………………………………………..26
REFERENCES ……………………………………………………………………………27
LIST OF FIGURES
Figure 4.1 Home Page -1 12
Figure 4.1 Home Page -1 13
Figure 4.2 Home Page-2 14
Figure 4.3 Header.js Code Snippet 14
Figure 4.4 Menu Page 15
Figure 4.5 Menu.js Code Snippet 16
Figure 4.6 Signup Page 16
Figure 4.7 Signup.js Code Snippet 17
Figure 4.8 Login Page 17
Figure 4.9 Login.js Code Snippet 18
Figure 4.10 Cart Page 19
Figure 4.11 Cart.js Code Snippet 19
Figure 4.12 Add New Product 20
Figure 4.13 Newproduct.js Code Snippet 20
Figure 4.14 Payment Gateway Page 21
Figure 4.15 Index.js Code Snippet 21
Figure 4.16 Payment Done Page 22
Figure 4.17 Payment Success.js Code Snippet 22
Figure 4.18 Payment is Cancel Page 23
Figure 4.19 Payment Cancel.js Code Snippet 23
ix
x
CHAPTER 1
INTRODUCTION
The world of e-commerce has experienced significant growth and transformation in recent
years, becoming an integral part of our daily lives. With the increasing availability of the
internet, online shopping has become the preferred method for purchasing a wide range of
products and services. Among them, the online food stores have witnessed a remarkable
growth in this digital platform. This has greatly revolutionized the way customers access
and enjoy their favourite meals.
The objective of this project was to create an intuitive and seamless online shopping
experiencing, where customers could browse, select, and purchase food items with ease.
Through the utilization of web development technologies and the implementation of the
MERN stack, the online food store was designed and developed to provide an efficient ans
secure platform for food transactions.
In this report, we will delve into methodology, implementation details, and results of the
project. We will discuss the key feature of the online food store, including the user interface,
product filter, shopping cart functionality, secure checkout process.
The significance of this project lies in its potential to transform the food purchasing
experience for both the customer and the store admin. By offering a convenient online
platform, we aim to enhance accessibility to diverse food options and simplify the ordering
process.
1.1 OVERVIEW
The website is an e-commerce platform that allows users to browse and purchase products.
It provides features such as user authentication, product listing, product details, cart
management, and payment processing using the Stripe API.
1. User Authentication: The website allows user to sign up and log in. The signup page
collects user information such as first name, last name, email, password, and profile
image. The login page verifies user credentials and grants access to authenticated users.
Page | 1
2. Product Listing: The homepage displays a selection of products. It fetches product data
from the server using Redux and renders and product cards to showcase each product’s
image, name, and price.
3. Product Details: When a user clicks on a product card, they are directed to the product
details page. This page retrieves the specific product’s details from the Redux store and
displays them, name, category, price, and description. Users have the option to add the
product to their cart or proceed with purchasing it.
4. Cart Management: The website allows users to add products can be added from both
the homepage and the product details page. The cart contents are managed in the Redux
store and can be viewed in the cart page.
5. Product Management: The website includes an admin section where new products can
be added. The admin can access the product management page and fill out a form with
product details such as name, category, image, price, and description. Upon submission,
the product is saved to the server.
6. Payment Processing: The website integrates with the Stripe API to handle payment
processing. When users proceed to checkout, the website generates a Stripe checkout
session using the selected product’s details and redirects the user to the Stripe payment
page. After a successful payment, the user is redirected to a success page to indicate that
the payment was processed successfully.
Overall, this website provides a user-friendly interface for browsing and purchasing
products. It incorporates user authentication, product listing and details, cart management,
and secure payment processing using Stripe.
1.2 PURPOSE
The primary objective of this project is to explore the implementation of a food store website
using the MERN stack. The MERN stack, known for its versatility, scalability, and
efficiency, is an ideal choice for developing dynamic web applications. By using this
technology, we aim to create a website that can provide users with a seamless, user-friendly
and convenient online shopping experience. The website aims to connect customers with a
wide range of products and facilities their browsing, selection, and purchase process.
Overall, the purpose of this website is to deliver an intuitive, secure, and efficient e-
commerce platform that satisfies user’s shopping needs while ensuring an ideal and
enjoyable experience from product discovery to checkout.
Page | 2
CHAPTER 2
BACKGROUND OF THE PROJECT

2.1 E-COMMERCE
E-commerce refers to the online buying and selling of goods and services. It has rapidly
gained popularity as a widely accepted business model in recent years.
The concept of e-commerce emerged in the 1960s and since undergone significant
development. With the increasing popularity of mobile devices and the widespread use of
social media, the power and influence of websites in the e-commerce realm have become
more evident.
2.2.1 TYPES
Some basic forms of e-commerce:
1. B2B (Business to Business) This type of e-commerce involves trade and transactions
between companies, business, and organization.
2. B2C (Business to Consumer) B2C e-commerce refers to business that directly sell
their products or services to individual consumers over the internet.
3. C2B (Consumer to Business) C2B e-commerce occurs when individual consumers sell
their products or services to business or organizations.
4. C2C (Consumer to Consumer) C2C e-commerce takes place when individuals
consumers sell their goods or services directly to other consumers.
2.2.2 ELEMENTS
In E-commerce, all the basic elements of the commerce are available, but in some
variations compare to traditional commerce.
1. A Product or Services: In e-commerce, the product or service is presented virtually
on website. Multimedia presentations and detailed features of the product can be
showcased on the webpage, which may not be possible with physical products.
2. A Place to sell the Product: In the e-commerce, the website serves as the platform to
display and sell products in traditional commerce.
3. Attracting Customers to the Website: E-commerce relies on search engines and
linkages with other websites to drive customer traffic to the organization’s website.
Page | 3
4. Order Placement: Orders are places directly on the e-commerce website. Customers
use shopping cart or shopping I-cards on the company’s webpages to select and order
items, which are then accepted by the e-commerce company as customer orders.
5. Payment Process: Unlike traditional commerce where buyers and seller have direct
contact, e-commerce, there is a need for secure and reliable way to accept payments
online. Various payment methods, such as credit cards, digital wallets or back
transfers, are integrated into ecommerce platform to facilitates secure and convenient
transaction.
2.2.3 ADVANTAGES
1. Reduced overhead cost: Running an e-commerce store is less cost effective as it
eliminates the need for renting commercial real estates. Instead, you can pay more
affordable fee for web hosting services.
2. No need for a physical storefront: Setting up and maintaining a physical storefront
can be costly. With e-commerce, you can start selling products online without the
expenses of renting and maintaining a physical space.
3. Ability to reach a broader audience: Unlike a physical store that has limitations on
the number of visitors, an e-commerce store allows you to reach a global audience. You
can showcase your products to potential customers from around the world.
4. Scalability: With a physical store, scaling your business often involves relocating to a
larger space, which can be time-consuming and expensive. E-commerce allows for easy
scalability as your website can accommodate the growth of your business without the
need for physical relocation.
5, Efficient Logistics Tracking: E-commerce provides electronic records of sales and
other logistics, making it easier to track and manage inventory, shipping, and sales
trends. This enables better decision-making and facilitates business growth over time.
2.2MERN
The MERN stack, an acronym for MongoDB, Express, React, and Node, comprises a set of
powerful technologies utilized in the development of scalable web applications encompassing
backend, frontend, and data components. It leverages JavaScript to facilitate faster and more
Page | 4
streamlined development of full-stack web applications. The MERN stack consists of the
following key components:
1. MongoDB
2. Express(.js)
3. React(.js)
4. Node(.js)
Each of these four technologies plays an important role in providing an end-to-end framework
for the developers.
Advantages of MERN stack:
1. Cost-effective: The MERN stack's utilization of JavaScript makes it cost-effective,
enabling users to achieve better results with relatively lower investment.
2. SEO friendly: MERN stack applications are designed to be search engine optimization
friendly, allowing search engines like Google and Yahoo to efficiently crawl and index
website pages.
3. Better performance: The MERN stack emphasizes faster communication between the
backend, frontend, and database, resulting in enhanced website speed and overall
performance.
4. Open Source: All four technologies within the MERN stack are open-source, enabling
developers to access solutions and support from the open-source community during
development, offering long-term benefits.
5. Easy to switch between client and server: MERN’s unified language(JavaScript) makes
it straightforward and efficient to switch between the client and the server sides of the
application.
JavaScript:
JavaScript is a cross-platform, object-oriented scripting language widely used for creating
dynamic client-side web pages. It allows for seamless integration with objects from the hosting
environment and provides means to manipulate them. Unlike compiled languages, JavaScript
is translated by the JavaScript interpreter within web browsers. It serves as fully-fledged,
interpreted programming language, facilitating dynamic interactivity when applied to an
HTML document.
Applications of JavaScript:
JavaScript is used to create interactive websites. It is mainly used for :
Page | 5
1. Client-side validation.
2. Dynamic drop-down menus.
3. Displaying date and time.
4. Displaying pop-up windows and dialog boxes.
5. Displaying clocks.
Node.js:
Node.js is an open-source platform and environment for servers that enables the rapid
development of network applications. It is built on Chrome’s JavaScript Runtime and provide
framework for creating server-side applications. With its built-in library, Node.js allows
applications to function as web servers without the need for resource-intension software such
as Apache HTTP server, Nginx, or IIS. It offers an event-driven, non-blocking I/O model and
a cross platform runtime environment, making it highly scalable for building server-side
applications using JavaScript. Node.js is commonly utilized for developing backend services
such as APIs, web applications, and mobile applications.
Express.js: It is a framework built on top of Nodejs, providing robust features for web and
mobile development. It offers extensive support for handling HTTP requests and middleware
methods, making it a powerful and user-friendly API. Express.js enhances the programming
environment without compromising the speed of Node.js. It is commonly utilized as a core
component in popular Node.js frameworks such as Sails.js and MEAN stack. With Express.js,
developers can design single-page, multi-page, and hybrid web applications. It incorporates a
routing table, enabling different actions to be performed based on HTTP methods and URLs.
MongoDB: MongoDB is an open-source database and the leading NoSQL database utilized
by millions of users. It is implemented in one of the most popular programming languages of
today. MongoDB is a cross-platform database that operates based on the concept of collections
and documents. It offers high performance, availability, and scalability with ease. NoSQL
refers to a database format that does not rely on Transact-SQL for data access. MongoDB was
developed on a JavaScript framework and utilizes the JSON data type. IT follows a collection
and document approach, delivering efficient production, extensive availability, and seamless
scalability.
React.js: It is one of the most popular JavaScript frontend libraries which has a strong
foundation and a large community. It is a declarative, efficient and flexible JavaScript library
for building reusable UI components. It is an open source, component based frontend library
Page | 6
which is responsible only for the view layer of the application. The main objective of ReactJS
is to develop User Interface (UI) that improves the speed of the apps. It uses virtual DOM
(JavaScript object) which improves the performance of the app. The JavaScript virtual DOM
is faster than regular DOM. We can use ReactJS on the client side and server side as well as
with other frameworks. It uses components and data patterns that improves readability and
helps to maintain larger apps.
Page | 7
CHAPTER 3
METHODOLOGY
3.1 SCOPE
The project aims to develop a dynamic and user-friendly ecommerce website that offers a
wide range of products to the customers. The website serves as a platform for businesses
to showcase and sell their products online, providing customers with a convenient and
secure shopping experience.
Its key goals:
1. Enable businesses to establish an online presence and expand their customer reach.
2. Provide customers with a seamless and intuitive shopping experience, allowing them
to browse, search, and purchase products with ease.
3. Implement secure payment processing and data protection measures to ensure
customer trust and confidentiality.
4. Offer a visually appealing and responsive website to enhance user engagement and
satisfaction.
5. Develop a scalable and flexible platform that can accommodate future expansions and
enhancements.
Target Audience: The e-commerce website caters to a diverse audience of online shoppers,
including individuals, businesses, and organizations. The target audience includes customers
seeking a wide range of food products across various categories, such as fruits, vegetables,
rice, pizza and more.
Unique Features:
1. User Registration: Enable users to create accounts, manage their profiles and track
orders.
2. Product Catalog: Showcase a comprehensive catalog of products, including detailed
descriptions, image pricing and category classification.
3. Filter Functionality: Allow users to filter the catalog based on various criteria.
Page | 8
4. Shopping Cart and Checkout: Implement a shopping cart system that enables users to
add products, review their cart, and proceed to secure checkout.
5. Secure Payment Integration: Integrate a secure payment gateway to facilitate safe and
convenient online transactions.
6. Responsive Design: Ensure the website is optimized for different devices and screen
sizes, offering a seamless experience across desktop, tablet and mobile platforms.
3.2 DESIGN PLANNING

Design planning is a crucial phase in the development of an online food store. It involves
creating a roadmap for the visual design, layout, and user experience. The design planning
phase builds upon the conceptual design and research, translating the findings into actionable
design decisions.
The following key aspects are considered during the design planning process:
1. User Interface Design: The user interface (UI) design focuses on creating an
intuitive and visually appealing interface for the customers to browse and interact
with the online food store. It includes designing the navigation menus, search
functionality, product listings, shopping cart, and checkout process.
2. Responsive Design: With the increasing use of mobile devices, it is essential to
design the online food store to be responsive and compatible with various screen
sizes. The design planning phase includes optimizing the layout and content to ensure
a consistent and user-friendly experience across desktops, tablets and mobile devices.
Responsive design enables the customers to access the store and place orders
conveniently from any device.
3. Visual Design: The visual design plays a crucial role in creating an appetizing and
enticing experience for customers. It involves selecting appropriate colors,
typography, imagery, and visual elements that reflect the nature of the food store and
its offering.
4. Menu and Food Presentation: Designing an effective menu layout and food
presentation is essential for showcasing the available food items and attracting
customers to make purchases. This phase includes organizing the menu categories,
displaying food images and descriptions. Attention is given to the arrangement and
presentation of food items to make them visually appealing and appetizing.
Page | 9
5. Checkout Process: The design planning phase also includes the design of the
checkout process, which should be smooth, secure, and user-friendly. The checkout
page should provide clear instructions for the customers to review their order, enter
delivery details, and make payments. Design decisions are made to ensure a seamless
transition from selecting food items to completing the purchase.
6. Integration of Food Ordering Features: The design planning phase involves
integrating food ordering features, such as customization options, special requests, and
dietary preferences. The design decisions are made to provide a user-friendly and
efficient ordering experience.
3.3 DEVELOPMENT PHASE
The development phase involves defining the approach and steps to be followed for
implementing the project. It outlines the strategies and techniques that will be used to design,
develop, and deploy the online food store.
1. Requirement Gathering: The first step is to gather detailed requirements for the online
food store. This involves understanding the target audience, desired features, and
business objectives. Requirements are documents and used as a reference throughout
the development process.
2. Technology Selection: The appropriate technologies and tools need to be selected to
build the online food store. This includes choosing a suitable web development
framework, programming languages, database management system, and other relevant
technologies based on the project requirements and scalability considerations.
3. Database Design: A well-structured database design is essential for managing product
information, customer details, orders, and other relevant data. This includes optimizing
the database for efficient data retrieval and storage.
4. Frontend Development: The frontend development phase involves implementing the
UI design using HTML, JavaScript, tailwind and ReactJS. This includes coding the user
interface components, integrating interactive elements, and ensuring responsive design
to provide a seamless experience across different devices.
5. Backend Development: The backend development focuses on building the server-side
functionality of the online food store. This includes implementing features such as user
authentication, product management, cart management, payment processing and order
fulfillment. Server-side technologies like Node.js are utilized for this purpose.
Page | 10
6. Integration of Third-Party Services: This includes integrating necessary third party
services into the online food store. This may involve incorporating payment gateways,
tailwind CSS to enhance the functionality and user experience.
7. Testing and Quality Assurance: Rigorous testing is performed to identify and fix any
bugs, errors, or usability issues. This includes unit testing, integration testing, and user
acceptance testing. Quality assurance processes are implemented to ensure the online
food store meets the desired results.
8. Iterative Development and Enhancements: The methodology uses an iterative
approach, allowing for continuous improvement and adding new features based on user
feedback and evolving business requirements.
3.4 IMPLEMENTATION PHASE

The implementation phase involves executing the planned steps and activities outlined in the
development process of the online food store. It encompasses the actual coding, configuration,
integration, testing and deployment of the system.
1. Front-end Development: The user interface design is translated into code using
HTML, tailwind and ReactJS. The frontend development focuses on creating visually
appealing and user-friendly web pages. It involves implementing layout, navigation
menus, interactive menus, interactive elements, and integrating UI components with
backend functionalities.
2. Back-end Development: The backend development involves building the server-side
logic and functionality of the online food store. This includes implementing user
authentication, database connectivity, handling HTTP requests, processing business
logic and integrating with external services. Node.js is used to develop robust and
scalable server-side components.
3. Database Implementation: The database design is implemented by creating the
necessary database schemas, defining relationships between entities, and optimizing
queries for efficient data retrieval and storage. MongoDB is configured, and data
migration scripts are executed to populate the database with initial data.
4. Integration of Third-Party Services: Integration with third-party service is
implemented to enhance the functionality and user experience of the online food store.
This includes integrating payment gateways (using Stripe APIs), toast services.
Page | 11
5. Testing and Quality Assurance: Rigorous testing is conducted to ensure the
reliability, performance, and usability of the online food store. Various testing
techniques, such as unit testing, integration testing, and user acceptance testing, are
employed to identify and fix bugs, validate functionalities, and ensure the system meets
the specified requirements.
6. Project Management and Collaboration: Throughout the implementation phase,
effective project management techniques, such as task tracking, version control, and
communication tools, are utilized to ensure seamless collaboration among the team
members. Regular meetings, progress updates, and milestone reviews are conducted to
monitor progress and address any challenges.
Use Case Diagram
Fig.3.1 Use case diagram
Page | 12
CHAPTER 4
EXPERIMENTAL RESULTS AND DISCUSSION

4.1 FRONTEND
Home Page:
It is the main entry point for users and provides a captivating and user-friendly interface. Its
primary goal is to engage visitors, showcase featured products, and provide easy navigation
to different sections of the website. The key elements of the home page are:
1. Header: The header section is positioned at the top of the home page and typically
includes the logo of the online food store, navigation links to different pages or
sections of the websites.
2. Banner: The banner section is a prominent section that grabs the attention of the
visitors. It may display enticing food images, special offers, or promotional messages
to attract users to explore further.
3. Product Categories: A section for highlighting different product categories available
in the online food store. Each category is typically accompanied by icons using the
React-icons.
Fig.4.1 Home Page-1
Page | 13
Fig.4.2 Home Page-2
Fig.4.3 Header.js Code Snippet
Page | 14
Menu Page:
The menu page serves as the central hub for the customers to explore the wide range of food
options available. It consists of:
1. Product Categories: The menu items are organized into different sections for easy
navigation. Customers can click on each category to view the corresponding item.
2. Add to Cart/ Buy Now: For easy ordering, each menu item is typically accompanied
by an “Add to Cart” and “Buy Now” button. Customers can add their desired items to
their cart for later purchase or directly proceed to the checkout process.
Fig.4.4 Menu Page
Page | 15
Fig.4.5 Menu.js Code Snippet
Signup Page:
The signup page is present for the registration of the new customers. The main section is a
registration form which includes an image, name, email address and password field. It has the
submit/sign-up button. It also has a link to redirect to the login page.
Fig.4.6 Signup page
Page | 16
Fig.4.7 Signup.js Code snippet
Login Page:
It provides a login page for the already existing users. The form consists of an email and
password field. It also has a link to redirect to the signup page.
Fig.4.8 Login Page
Page | 17
Fig.4.9 Login.js Code Snippet
Cart Page:
The cart page is an essential component of an e-commerce website that allows users to
review, manage, and finalize their selected items before proceeding to the checkout process.
Key Elements:
1. Your Cart Items: Or the cart summary displays the list of products added to the card.
It includes information such as the product name, image, price, quantity and subtotal.
Users can easily identify and review the selected items.
2. Product Quantity and Product Subtotal: Users can adjust the quantity of each product
in the cart. Plus and minus button allows users to increase or decrease the quantity of
a specific item. The subtotal of each product calculates the total cost based on the
quantity and price of the product.
3. Summary : This section displays the total quantity and price of the products.
4. Payment Button: When the users are ready to complete their purchase, they may click
on the Payment button which redirects them to a payment gateway page.
Page | 18
Fig.4.10 Cart page
Fig.4.11 Cart.js Code Snippet
Add New Product:
If the user logged in is the admin, there is an additional page. The new product page allows
the admin to add new products filling the product details form.
Page | 19
Fig.4.12 Add new product
Fig.4.13 Newproduct.js Code Snippet
Payment Gateway Page:
The payment section is integrated with the Stripe payment gateway API. This integration
involved setting up a Stripe account, obtaining APT keys, and configuring the necessary
settings to enable the payment processing.
Page | 20
Fig.4.14 Payment Gateway Page
Fig.4.15 Index.js Payment Gateway Code Snippet
Success.js and Cancel.js pages are added to show whether the payment is successful or not as
shown in the below figure.
Payment done successfully:
Page | 21
Fig.4.16 Payment done Page
Fig.4.17 Payment Success.js Code Snippet
Payment is Cancel:
Page | 22
Fig.4.18 Payment is cancel page
Fig.4.19 Payment Cancel.js Code Snippet
4.2 DESIGN PLANNING

Server-side implementation using Node.js, Express, and MongoDB.
1. SERVER SETUP: The code sets up an Express server by importing the required
dependencies and configuring middleware. The server listens on a specific port for
incoming requests.
2. DATABASE CONNECTION: The code establishes a connection to the MongoDB
database using the Mongoose library. It connects to the specified MongoDB URL,
enabling data storage and retrieval.
3. USER MODEL: The code defines a user schema using Mongoose. The schema
represents the structure and properties of a user object, including fields such as
firstName, lastName, email, password, confirmPassword and image.
Page | 23
4. USER ROUTES: The code defines routes for user-related operations, such as user
signup and login. These routes handle HTTP requests (POST or GET) from the
frontend and interact with the database to perform the required actions.
a. The “/signup” route handles the user signup functionality. It receives a POST
request with user data, validates the input, checks if the email is already
registered, and creates a new user document in the database if everything is
valid.
b. The “/login” route handles user login functionality. It receives a POST request
with user credentials, verifies the email and password combination, and
returns a response indicating successful login or failure.
5. PRODUCT MODEL: The code defines a product schema using Mongoose. The
schema represents the structure and properties of a product object, including fields
such as name, category, image, price and description.
6. PRODUCT ROUTES: The code defines routes for product-related operations, such
as fetching product data and uploading new products.
a. The “/product” route handles the retrieval of product data. It receives a GET
request and queries the database to retrieve all product documents. The fetched
data is returned as a response to the frontend.
b. The “/uploadProduct” route handles the uploading of new products. It receives

a POST request with the product data, validates the input, and creates a new
product document in the database.
7. STRIPE INTEGRATION: The code includes a route (“/checkout-payment”) for

integrating Stripe as the payment gateway. It receives a POST request with an array of
products to be purchased, communicates with the Stripe API to create a payment
session, and returns the session ID to the frontend for further processing.
8. SERVER-SIDE VALIDATION AND ERROR HANDLING: The backend code

primarily focuses on providing data and functionality through APIs (e.g., JSON
response). However, in a full-stack application, the backend may also implement
server-side rendering (SSR) to generate dynamic HTML pages and serve them to the
frontend.
Page | 24
CHAPTER 5
CONCLUSION
In conclusion, the MERN stack e-commerce website for the food store is a powerful and
comprehensive solution for running an online food business. With the integration of
MongoDB, Express.js, React.js, and Node.js the website provides a seamless and efficient
platform for customers to browse, order, and enjoy their favorite food items. With this
MERN e-commerce website the food store can expand its reach, attract more customers and
streamline the ordering process. The provides a solid foundation for future growth and the
incorporation of additional features, such as personalized recommendations, secure payment
options.
The MERN stack offers numerous benefits including flexibility, scalability and performance.
MongoDB serves as the database allowing for efficient storage and retrieval of product
information, user data, and order details.
Express.js handles the server-side logic, enabling smooth communication between the client
and server.
React.js enhances the user interface with its component-based architecture, ensuring a
dynamic and interactive shopping experience.
Node.js powers the backend, facilitating fast and real-time data processing.
SUMMARY
In summary, the MERN stack e-commerce website for the food store combines cutting edge
technologies and robust functionality to create a seamless and engaging online food shopping
experience. It empowers the food store to connect with customers, drive sales, and establish a
strong online presence in the competitive e-commerce market.
FUTURE SCOPE
The future scope of a food store e-commerce website using the MERN stack is promising and
offers several opportunities for growth and enhancement. Here are some potential areas of
future development.
1. Advanced Search and Filtering: Implementing more advanced search and filtering
options can help users find specific food items based on categories, ingredients and
Page | 25
other criteria. This can improve the user experience and make it easier for customers
to discover relevant products.
2. Personalized Recommendations: Leveraging user data and machine learning
algorithms, personalized recommendation systems can suggest food items based on
individual preferences, previous purchases, and browsing history. This can enhance
customer satisfaction, increase sales and encourage repeat purchases.
3. Integration with Delivery Services: Integrating the websites with third party delivery
services can offer customers convenient and seamless delivery options. This features
can enable users to track their orders, select preferred delivery slots and receive real-
time updates on the status of their deliveries.
4. Mobile App Development: Creating a mobile app for the food store e-commerce
website can provide a dedicated platform for customers to browse and order food
items. A mobile app can offer additional features such as push notifications, mobile
specific offers.
5. Social Media Integration: Integrating social media platforms can allow customers to
share their favorite food items, write reviews, and engage with the food store’s brand.
Overall, the future scope of a food store e-commerce website using MERN stack is vast. By
continuously innovating and incorporating new features and technologies, the website can
stay competitive, attract a larger customer base, and provide an exceptional online shopping
experience for food enthusiasts.
REFERENCES
1. React Documentation: https://react.dev/learn

2. NodeJS Documentation: https://nodejs.org/en/docs/guides/getting-started-guide
3. Tailwind CSS: https://tailwindui.com/documentation
4. MongoDB: https://www.mongodb.com/docs/
5. Stripe API Reference: https://stripe.com/docs/api
********************************************************
********************************************************
Page | 26
Page | 27
7/16/23, 10:11 PM Similarity Report
Online Food Store Website Using MERN Similarity Index

By: AARFIN ANJUM
As of: Jul 16, 2023 10:10:48 PM 15%
6,220 words - 56 matches - 41 sources
Mode: Similarity Report
Online Food Store Website Using MERN A Report
16
AARFIN ANJUM BTECH/10235/20
i APPROVAL OF THE GUIDE Recommended that the B. Tech. Summer Internship Project titled Online Food Store Website
Using MERN submitted by BTECH/10235/20, AARFIN ANJUM is approved by me for submission. This should be
accepted as fulfilling the partial
To the best of my knowledge, the
report represents work carried out by the student in Birla Institute of Technology, Mesra Ranchi and the content
: July 16th, 2023 Dr. Satish Chander Assistant Professor
Institute of Technology 13
https://app.ithenticate.com/en_us/report/100750058/similarity 1/20
I certify that a) The work contained in the report is original and has been done by myself under the
. Date: July 16th, 2023 AARFIN ANJUM BTECH/10235/20
Institute of Technology 13
work embodied in this Summer Internship Report entitled “Online Food Store Website Using MERN” , is carried out by
AARFIN ANJUM, BTECH/10235/20 has been approved for
Birla
Institute
, Mesra, Ranchi. Date: Place: (Chairman)
. (Panel Coordinator) Examiner Dept. of Comp. Sc. & Engg. iv ABSTRACT E-commerce has become an essential element of
our daily lives in recent years. It is expanding on a daily basis. Most individuals today prefer to purchase online rather than
going to the store. As the availability of the internet is rapidly increasing, so will the number of online buyers. Digital shopping
is much more convenient, as buyers don’t have to leave the comfort of their homes. Over the last few years, web
development has gone through significant changes in every aspect. The rapid development of web technologies has taken
development to a new level. One of the most widely used full stack which plays a leading role in web development nowadays
is the MERN stack. The MERN stack includes four components: MongoDB database, Express as back-end web
framework, React.js serves as frontend library and Node.js as JavaScript environment. Inspired by the capabilities and
versatility of the MERN stack and with the increase in demand for e-commercial websites, we created an online Food-Store
with the fundamental features. Our objective was to create a user-friendly platform that would allow the customers to buy
food online. In this project, we conducted an in-depth analysis of the requirements and features needed for this website.
This involved defining the user journey, outlining the core functionalities, and considering factors such as user
authentication, menu browsing, cart management and payment integration. v
ACKNOWLEDGEMENT I would like to express my heartfelt gratitude and appreciation to all the 10
individuals who
have contributed significantly to the successful completion of this project. Their support, guidance, and encouragement
have been invaluable throughout the journey.
First and foremost, I am deeply grateful to my project guide Dr . Satish Chander for 23
their unwavering support, expertise, and valuable insights. His guidance and mentorship have been beneficial in shaping the
direction and execution of this project.
the time they dedicated to reviewing and providing feedback on my work. I extended my sincere appreciation to
the Head of the Department, Prof . Supratim Biswas for providing me with the 28
opportunity to
undertake this project and for fostering an environment conducive to research and innovation. Their encouragement and
support have been crucial in my academic and professional development.
I would like to acknowledge and thank all the teachers of Computer Science Engineering 31
imparting knowledge and skills that have been integral to the successful completion of the project. Their dedication,
expertise and willingness to share their wisdom have greatly enriched my learning experience.
I am indebted to my parents and my family for their 21
constant love, encouragement, and unwavering belief in my abilities. Their support has been my pillar of strength throughout
this journey.
I would also like to acknowledge and express my sincere appreciation to my 25
teammates Miss Trisha Sharon Panna and Miss Madhu Raj for their exceptional collaboration, dedication with, and hard work.
Their contribution, ideas, and teamwork were integral for the completion of
the project . Additionally, I would like to express my gratitude to my classmates and
friends for their valuable discussions, and
constructive feedback that have shaped my ideas and approach. Finally,
I would like to express my gratitude to the Computer Science Department and Birla Institute 18
Technology for providing the necessary resources and infrastructure that facilitate the smooth progress of this project. vi
Thank you all for being a part of this incredible journey and for your invaluable contributions. Date: July 16th, 2023
(Signature) AARFIN ANJUM BTECH/10235/20 vii
CONTENTS ABSTRACT …………………………………………………………………………… i ACKNOWLEDGEMENT 17

………………………………………………………….... ii LIST OF FIGURES .................................................................................... iii
INTRODUCTION……………..………………………………………. 1 1.1
…………..…………………………………………………………….……………….. 11
.2 PURPOSE… ............................................................................................... 2 CHAPTER 2 BACKGROUND OF THE
PROJECT…………………………………2 2.1 E-COMMERCE… .......................................................................2 2.2.1
TYPES… ................................................................................................ 2 2.2.2
ELEMENTS… ................................................................................... 3 2.2.3
ADVANTAGES……………………………………………………………………………………4 2.2 MERN… .................................................................................... 5
CHAPTER 3 METHODOLOGY………………………………………………………8 3.1 SCOPE….......................................................................... 8
3.2 DESIGN PLANNING… ................................................................. 9 3.3 DEVELOPMENT
PHASE………………………………………………………….10 3.4 IMPLEMENTATION PHASE… ............................................... 11
RESULTS AND DISCUSSION 18

FRONTEND…....……………………………………………………………………..13 4.2
DESIGN PLANNING… ................................................................. 23 CHAPTER 5
CONCLUSION……………………………………….…………………..25 5.1 SUMMARY .................................................................................. 25 viii 5.2
FUTURE SCOPE…………...………………………………………………………..26 REFERENCES .................................................................................. 27
LIST OF FIGURES Figure
Home Page -1 Home Page -1 Home Page-2 33
Header.js Code Snippet Menu Page Menu.js Code Snippet Signup Page Signup.js Code Snippet Login Page Login.js Code
Snippet Cart Page Cart.js Code Snippet Add New Product Newproduct.js Code Snippet Payment Gateway Page Index.js
Code Snippet Payment Done Page Payment Success.js Code Snippet Payment is Cancel Page Payment Cancel.js Code
Snippet 12 13 14 14 15 16 16 17 17 18 19 19 20 20 21 21 22 22 23 23 ix x CHAPTER 1 INTRODUCTION The world of
e-commerce has experienced significant growth and transformation in recent years 14
, becoming an integral part of our daily lives. With the increasing availability of the internet, online shopping has become the
preferred method for purchasing a wide range of products and services. Among them, the online food stores have witnessed
a remarkable growth in this digital platform. This has greatly revolutionized the way customers access and enjoy
their favourite meals. The objective of this project was to create an intuitive and seamless online shopping experiencing,
where customers could browse, select, and purchase food items with ease. Through the utilization of web development
technologies and the implementation of the MERN stack, the online food store was designed and developed to provide an
efficient and secure platform for food transactions. In this report, we will delve into methodology, implementation details, and
results of the project. We will discuss the key feature of the online food store, including the user interface, product filter,
shopping cart functionality, secure checkout process. The significance of this project lies in its potential to transform the
food purchasing experience for both the customer and the store admin. By offering a convenient online platform, we aim to
enhance accessibility to diverse food options and simplify the ordering process. 1.1 OVERVIEW The website is
an e-commerce platform that allows users to browse and purchase products 24
. It provides features such as user authentication, product listing, product details, cart management, and payment processing
using the Stripe API. 1. User Authentication: The website allows user to sign up and log in. The signup page collects user
information such as first name, last name, email, password, and profile image. The login page verifies user credentials and
grants access to authenticated users. 2. Product Listing: The homepage displays a selection of products. It fetches product
data from the server using Redux and renders and product cards to showcase each product’s image, name, and price. 3.
Product Details: When a user clicks on a product card, they are directed to the product details page. This page retrieves the
specific product’s details from the Redux store and displays them, name, category, price, and description. Usershave the
option to add the product to their cart or proceed with purchasing it. 4. Cart Management: The website allows users to add
products can be added from both the homepage and the product details page. The cart contents are managed in the Redux
store and can be viewed in the cart page. 5. Product Management: The website includes an admin section where new
products can be added. The admin can access the product management page and fill out a form with product details such as
name, category, image, price, and description. Upon submission, the product is saved to the server. 6.
Payment Processing: The website integrates with the Stripe API to handle payment processing. When users proceed to
checkout, the website generates a Stripe checkout session using the selected product’s details and redirects the user to the
Stripe payment page. After a successful payment, the user is redirected to a success page to indicate that the payment was
processed successfully. Overall, this website provides a user-friendly interface for browsing and purchasing products. It
incorporates user authentication, product listing and details, cart management, and secure payment processing using Stripe.
1.2 PURPOSE The primary objective of this project is to explore the implementation of a food store website using theMERN
stack. The MERN stack, known for its versatility, scalability, and efficiency, is an ideal choice for developing dynamic web
applications. By using this technology, we aim to create a website that can provide users with a seamless, user-friendlyand
convenient online shopping experience. The website aims to connect customers with a wide range of products and facilities
their browsing, selection, and purchase process. Overall, the purpose of this website is to deliver an intuitive, secure, and
efficient e- commerce platform that satisfies user’s shopping needs while ensuring an ideal and enjoyable experience from
product discovery to checkout. CHAPTER 2 BACKGROUND OF THE PROJECT 2.1
E-COMMERCE E-commerce
. It has rapidly gained popularity as a widely accepted business model in recent years. The concept of e-commerce emergedin
the 1960s and since undergone significant development. With the increasing popularity of mobile devices and the widespread
use of social media, the power and influence of websites in the e-commerce realm have become more evident.
2.2.1 TYPES Some basic forms of e-commerce: 1. B2B (Business to Business) This type of e-commerce involves trade and
transactions between companies, business, and organization. 2. B2C (Business to Consumer) B2C e-commerce refers to
business that directly sell their products or services to individual consumers over the internet. 3. C2B (Consumer to Business)
C2B e-commerce occurs when individual consumers sell their products or services to business or organizations.4.
sell their goods or services directly to other consumers. 2.2.2 ELEMENTS In E-commerce, all the basic elements of the
when individuals
commerce are available, but in some variations compare to traditional commerce. 1. A Product or Services: In e-commerce,
the product or service is presented virtually on website. Multimedia presentations and detailed features of the product can be
showcased on the webpage, which may not be possible with physical products. 2. A Place to sell the Product: In the e-
commerce, the website serves as the platform to display and sell products in traditional commerce. 3. Attracting Customers
to the Website: E-commerce relies on search engines and linkages with other websites to drive customer traffic to the
organization’s website. 4. Order Placement: Orders are places directly on the e-commerce website. Customers use shopping
cart or shopping I-cards on the company’s webpages to select and order items, which are then accepted by the e-commerce
company as customer orders. 5. Payment Process: Unlike traditional commerce where buyers and seller have direct contact,
e-commerce, there is a need for secure and reliable way to accept payments online. Various payment methods, such as credit
cards, digital wallets or back transfers, are integrated into ecommerce platform to facilitates secure and convenient
transaction. 2.2.3 ADVANTAGES 1. Reduced overhead cost: Running an e-commerce store is less cost effective as it
eliminates the need for renting commercial real estates. Instead, you can pay more affordable fee for web hosting services.
2. No need for a physical storefront: Setting up and maintaining a physical storefront can be costly. With e-commerce, you
can start selling products online without the expenses of renting and maintaining a physical space. 3. Ability to reach a
broader audience: Unlike a physical store that has limitations on the number of visitors, an e-commerce store allows you to
reach a global audience. You can showcase your products to potential customers from around the world. 4. Scalability: With a
physical store, scaling your business often involves relocating to a larger space, which can be time-consuming and expensive.
E-commerce allows for easy scalability as your website can accommodate the growth of your business without the need for
physical relocation. 5, Efficient Logistics Tracking: E-commerce provides electronic records of sales and other logistics,
making it easier to track and manage inventory, shipping, and sales trends. This enables better decision-making and
facilitates business growth over time. 2.2MERN
, comprises a set of powerful technologies utilized in the development of scalable web applications encompassing backend,
frontend, and data components. It leverages JavaScript to facilitate faster and more streamlined
development of full-stack web applications . The MERN stack 7
consists of the following key components:
. Advantages of MERN stack: 1. Cost-effective: The MERN stack's utilization of JavaScript makes it cost-effective, enabling
users to achieve better results with relatively lower investment. 2. SEO friendly: MERN stack applications are designed to be
search engine optimization friendly, allowing search engines like Google and Yahoo to efficiently crawl and index website
pages. 3. Better performance: The MERN stack emphasizes faster communication between the backend, frontend, and
database, resulting in enhanced website speed and overall performance. 4. Open Source: All four technologies within the
MERN stack are open-source, enabling developers to access solutions and support from the open-source community during
development, offering long-term benefits. 5.
’s unified language(JavaScript) makes it straightforward and efficient to switch between the client and the server sides of
the application.
JavaScript: JavaScript is a cross-platform, object-oriented scripting language widely used 19
for creating dynamic client-side web pages. It allows for seamless integration with objects from the hosting environment
and provides means to manipulate them. Unlike compiled languages, JavaScript is translated by the JavaScript interpreter
within web browsers. It serves as fully-fledged, interpreted programming language, facilitating dynamic interactivity when
applied to an HTML document. Applications
: Page | 5
1. Client-side validation. 2. Dynamic drop-down menus. 3. Displaying date and time. 4. Displaying pop-up 2
windows and dialog boxes
. 5. Displaying clocks.
Node.js: Node.js is an open-source platform and environment 4
for servers that enables the rapid development of network applications. It is built on Chrome’s JavaScript Runtime and
provide framework for creating server-side applications. With its built-in library, Node.js allows applications to function as
web servers without the need for resource-intension software such as Apache HTTP server, Nginx, or IIS. It offers
an event-driven, non-blocking I/O model and a 27
cross platform runtime environment, making it highly scalable for building
server-side applications using JavaScript. Node.js is commonly utilized for 37
developing backend services such as APIs, web applications, and mobile applications. Express.js: It is a framework built on
top of Nodejs, providing robust features for web and mobile development. It offers extensive support for handling HTTP
requests and middleware methods, making it a powerful and user-friendly API. Express.js enhances the programming
environment without compromising the speed of Node.js. It is commonly utilized as a core component in popular Node.js
frameworks such as Sails.js and MEAN stack. With Express.js, developers can
design single-page, multi-page, and hybrid web applications. It 26
incorporates a routing table, enabling different actions to be performed based on HTTP methods and URLs. MongoDB:
MongoDB is an open-source database and the leading NoSQL database utilized by millions of users. It is implemented in one
of the most popular programming languages of today. MongoDB is a cross-platform database that operates based on the
concept of collections and documents. It offers high performance, availability, and scalability with ease. NoSQL refers toa
database format that does not rely on Transact-SQL for data access. MongoDB was developed on a JavaScript framework
and utilizes the JSON data type. IT follows a collection and document approach, delivering efficient production, extensive
availability, and seamless scalability. React.js: It
application. The
object) which improves the performance of the app. The JavaScript virtual DOM is faster than regular DOM. We
components
and data patterns that improves readability and helps to maintain larger apps
. CHAPTER 3 METHODOLOGY 3.1 SCOPE The project aims to develop a dynamic and user-friendly ecommerce website that
offers a wide range of products to the customers. The website serves as a platform for businesses to showcase and sell their
products online, providing customers with a convenient and secure shopping experience. Its key goals: 1. Enable businesses
to establish an online presence and expand their customer reach. 2. Provide customers with a seamless and intuitive
shopping experience, allowing them to browse, search, and purchase products with ease. 3. Implement secure payment
processing and data protection measures to ensure customer trust and confidentiality. 4. Offer a visually appealingand
responsive website to enhance user engagement and satisfaction. 5. Develop a scalable and flexible platform that can
accommodate future expansions and enhancements. Target Audience: The e-commerce website
caters to a diverse audience of online shoppers, including individuals , businesses, and 20
organizations. The target audience includes customers seeking a wide range of food products across various categories,
such as fruits, vegetables, rice, pizza and more. Unique Features: 1. User Registration: Enable users to create accounts,
manage their profiles and track orders. 2. Product Catalog: Showcase a comprehensive catalog of products, including detailed
descriptions, image pricing and category classification. 3. Filter Functionality: Allow users to filter the catalog based on
various criteria. 4. Shopping Cart and Checkout: Implement a shopping cart system that enables users to add products,
review their cart, and proceed to secure checkout. 5. Secure Payment Integration: Integrate a secure payment gateway to
facilitate safe and convenient online transactions. 6. Responsive Design: Ensure the website is optimized for different devices
and screen sizes, offering a seamless experience across desktop, tablet and mobile platforms. 3.2 DESIGN PLANNING Design
planning is a crucial phase in the development of an online food store. It involves creating a roadmap for the visual design,
layout, and user experience. The design planning phase builds upon the conceptual design and research, translating the
findings into actionable design decisions. The following key aspects are considered during the design planning process: 1.
customers to browse and interact with the online food store. It includes designing the navigation menus, search functionality,
: The
product listings, shopping cart, and checkout process. 2. Responsive Design: With the increasing use of mobiledevices, it is
essential to design the online food store to be responsive and compatible with various screen sizes. The design planning
phase includes optimizing the layout and content to ensure a consistent and user-friendly experience across desktops, tablets
and mobile devices. Responsive design enables the customers to access the store and place orders conveniently from any
device. 3. Visual Design: The visual design plays a crucial role in creating an appetizing and enticing experience for
customers. It involves selecting appropriate colors, typography, imagery, and visual elements that reflect the nature of the
food store and its offering. 4. Menu and Food Presentation: Designing an effective menu layout and food presentation is
essential for showcasing the available food items and attracting customers to make purchases. This phase includes
organizing the menu categories, displaying food images and descriptions. Attention is given to the arrangement and
presentation of food items to make them visually appealing and appetizing. 5. Checkout Process: The design planning phase
also includes the design of the checkout process, which should be smooth, secure, and user-friendly. The checkout page
should provide clear instructions for the customers to review their order, enter delivery details, and make payments.
Design decisions are made to ensure a seamless transition from selecting food items to completing the purchase. 6.
Integration of Food Ordering Features: The design planning phase involves integrating food ordering features, such as
customization options, special requests, and dietary preferences. The design decisions are made to provide a user-friendly
and efficient ordering experience. 3.3 DEVELOPMENT PHASE The development phase involves defining the approach and
steps to be followed for implementing the project. It outlines the strategies and techniques that will be used to design,
develop, and deploy the online food store. 1. Requirement Gathering: The first step is to gather detailed requirements for the
online food store. This involves understanding the target audience, desired features, and business objectives. Requirements
are documents and used as a reference throughout the development process. 2. Technology Selection: The appropriate
technologies and tools need to be selected to build the online food store. This includes choosing a suitable web
development framework, programming languages, database management system, and other relevant technologies based
on the project requirements and scalability considerations. 3. Database Design: A well-structured database design is
essential for managing product information, customer details, orders, and other relevant data. This includes optimizing the
database for efficient data retrieval and storage. 4.
Frontend Development: The frontend development UI design
using HTML , JavaScript, tailwind and
ReactJS. This includes coding the user interface components, integrating interactive elements, and ensuring responsive
design to provide a seamless experience across different devices. 5.
Backend Development: The backend development focuses on
server-side functionality of the online food store. This includes implementing features such as user authentication, product
management, cart management, payment processing and order fulfillment. Server-side technologies like Node.js are utilized
for this purpose. 6. Integration of Third-Party Services: This includes integrating necessary third party services into the online
food store. This may involve incorporating payment gateways, tailwind CSS to enhance the functionality and user experience.
7. Testing and Quality Assurance: Rigorous testing is performed
to identify and fix any bugs , errors, or usability issues 3
. This includes
unit testing, integration testing, and user acceptance testing . Quality assurance processes are
implemented to
ensure the online food store meets the desired results. 8. Iterative Development and Enhancements: The methodology uses
an iterative approach, allowing for continuous improvement and adding new features based on user feedback and evolving
business requirements. 3.4 IMPLEMENTATION PHASE The implementation phase involves executing the planned steps and
activities outlined in the development process of the online food store. It encompasses the actual coding, configuration,
integration, testing and deployment of the system. 1. Front-end Development: The user interface design is translated into
code using HTML, tailwind and ReactJS. The frontend development focuses on creating visually appealing and user-friendly
web pages. It involves implementing layout, navigation menus, interactive menus, interactive elements, and integrating UI
components with backend functionalities. 2. Back-end Development: The backend development involves building the server-
side logic and functionality of the online food store. This includes implementing user authentication, database connectivity,
handling HTTP requests, processing business logic and integrating with external services. Node.js is used to develop robust
and scalable server-side components. 3. Database Implementation: The database design is implemented by creating the
necessary database schemas, defining relationships between entities, and optimizing queries for efficient data retrieval and
storage. MongoDB is configured, and data migration scripts are executed to populate the database with initial data. 4.
Integration of Third-Party Services: Integration with third-party service is implemented to enhance the functionality and user
experience of the online food store. This includes integrating payment gateways (using Stripe APIs), toast services. 5.
Testing and Quality Assurance: Rigorous testing is
conducted to ensure the reliability , performance, and usability of the 41
online food store.
Various testing techniques, such as unit testing, integration testing, and user acceptance testing, are
employed to identify and fix bugs
, validate functionalities, and ensure the system meets the specified requirements. 6. Project Management and
Collaboration: Throughout the implementation phase, effective project management techniques, such as task tracking,
version control, and Page | 11 communication tools, are utilized to ensure seamless collaboration among the team
members. Regular meetings, progress updates, and milestone reviews are conducted to monitor progress and address any
challenges.
CHAPTER 4 EXPERIMENTAL RESULTS AND DISCUSSION 4.1 FRONTEND Home Page: It is the main entry point for users and
provides a captivating and user-friendly interface. Its primary goal is to engage visitors, showcase featured products, and
provide easy navigation to different sections of the website. The key elements of the home page are: 1. Header: The header
section is positioned at the top of the home page and typically includes the logo of the online food store, navigation links to
different pages or sections of the websites. 2. Banner: The banner section is a prominent section that grabs the attention of
the visitors. It may display enticing food images, special offers, or promotional messages to attract users to explore further.
3. Product Categories: A section for highlighting different product categories available in the online food store. Each
category is typically accompanied by icons using the React-icons.
Fig.4.1 Home Page -1 Fig.4.2 39
Home Page-2 Fig.4.3 Header.js Code Snippet Menu Page: The menu page serves as the central hub for the customers to
explore the wide range of food options available. It consists of: 1. Product Categories: The menu items are organized into
different sections for easy navigation. Customers can click on each category to view the corresponding item. 2. Add to Cart/
Buy Now: For easy ordering, each menu item is typically accompanied by an “Add to Cart” and “Buy Now” button. Customers
can add their desired items to their cart for later purchase or directly proceed to the checkout process. Fig.4.4 Menu Page
Fig.4.5 Menu.js Code Snippet Signup Page: The signup page is present for the registration of the new customers. The main
section is a registration form which includes an image, name, email address and password field. It has the submit/sign-up
button. It also has a link to redirect to the login page. Fig.4.6 Signup page Fig.4.7 Signup.js Code snippet Login Page: It
provides a login page for the already existing users. The form consists of an email and password field. It also has a link to
redirect to the signup page. Fig.4.8 Login Page Fig.4.9 Login.js Code Snippet Cart Page: The cart page is an essential
component of an e-commerce website that allows users to review, manage, and finalize their selected items before
proceeding to the checkout process. Key Elements: 1. Your Cart Items: Or the cart summary displays the list of products
added to the card. It includes information such as the product name, image, price, quantity and subtotal. Users can easily
identify and review the selected items. 2. Product Quantity and Product Subtotal: Users can adjust the quantity of each
product in the cart. Plus and minus button allows users to increase or decrease the quantity of a specific item. The subtotal
of each product calculates the total cost based on the quantity and price of the product. 3. Summary : This section displays
the total quantity and price of the products. 4. Payment Button: When the users are ready to complete their purchase, they
may click on the Payment button which redirects them to a payment gateway page. Fig.4.10 Cart page Fig.4.11 Cart.js Code
Snippet Add New Product: If the user logged in is the admin, there is an additional page. The new product page allows the
admin to add new products filling the product details form. Fig.4.12 Add new product Fig.4.13 Newproduct.js Code Snippet
Payment Gateway Page: The payment section is integrated with the Stripe payment gateway API. This integration involved
setting up a Stripe account, obtaining APT keys, and configuring the necessary settings to enable the payment processing.
Fig.4.14 Payment Gateway Page Fig.4.15 Index.js Payment Gateway Code Snippet Success.js and Cancel.js pages are added
to show whether the payment is successful or not as shown in the below figure. Payment done successfully: Fig.4.16
Payment done Page Fig.4.17 Payment Success.js Code Snippet Payment is Cancel: Fig.4.18 Payment is cancel page \
Fig.4.19 Payment Cancel.js Code Snippet 4.2 DESIGN PLANNING Server-side implementation using Node.js, Express, and
MongoDB. 1. SERVER SETUP: The code sets up an Express server by importing the required dependencies and configuring
middleware. The server listens on a specific port for incoming requests. 2. DATABASE CONNECTION: The code establishes a
connection to the MongoDB database using the Mongoose library. It connects to the specified MongoDB URL, enabling data
storage and retrieval. 3. USER MODEL: The code defines a user schema using Mongoose. The schema represents the
structure and properties of a user object, including fields such as firstName, lastName, email, password, confirmPassword
and image. 4. USER ROUTES: The code defines routes for user-related operations, such as user signup and login. These routes
handle HTTP requests (POST or GET) from the frontend and interact with the database to perform the required actions. a. The
“/signup” route handles the user signup functionality. It receives a POST request with user data, validates theinput, checks if
the email is already registered, and creates a new user document in the database if everything is valid. b.
The “/login” route handles user login functionality. It receives a POST request with user credentials, verifies the email and
password combination, and returns a response indicating successful login or failure. 5. PRODUCT MODEL: The code defines
a product schema using Mongoose. The schema represents the structure and properties of a product object, including fields
such as name, category, image, price and description. 6. PRODUCT ROUTES: The code defines routes for product-related
operations, such as fetching product data and uploading new products. a. The “/product” route handles the retrieval of product
data. It receives a GET request and queries the database to retrieve all product documents. The fetched data is returned as a
response to the frontend. b. The “/uploadProduct” route handles the uploading of new products. It receives a POST request
with the product data, validates the input, and creates a new product document in the database. 7. STRIPE INTEGRATION: The
code includes a route (“/checkout-payment”) for integrating Stripe as the payment gateway. It receives a POST request with
an array of products to be purchased, communicates with the Stripe API to create a payment session, and returns the session
ID to the frontend for further processing. 8. SERVER-SIDE VALIDATION AND ERROR HANDLING: The backend code primarily
focuses on providing data and functionality through APIs (e.g., JSON response). However, in a full- stack application, the
backend may also implement server-side rendering (SSR) to generate dynamic HTML pages and serve them to the frontend.
CHAPTER 5 CONCLUSION In conclusion, the MERN stack e-commerce website for the food store is a powerful and
comprehensive solution for running an online food business. With the integration of
the website provides a seamless and efficient platform for customers to browse, order, and enjoy their favorite food items.
With this MERN e-commerce website the food store can expand its reach, attract more customers and streamline the ordering
process. The provides a solid foundation for future growth and the incorporation of additional features, such as personalized
recommendations, secure payment options. The MERN stack offers numerous benefits including flexibility, scalability and
performance. MongoDB serves as the database allowing for efficient storage and retrieval of product information, user data,
and order details. Express.js handles the server-side logic, enabling smooth communication between the client and server.
React.js enhances the user interface with its component-based architecture, ensuring a dynamic and interactive shopping
experience. Node.js powers the backend, facilitating fast and real-time data processing. SUMMARY In summary, the MERN
stack e-commerce website for the food store combines cutting edge technologies and robust functionality to create a
seamless and engaging online food shopping experience. It empowers the food store to connect with customers, drive sales,
and establish a strong online presence in the competitive e-commerce market. FUTURE SCOPE The future scope of a food
store e-commerce website using the MERN stack is promising and offers several opportunities for growth and enhancement.
Here are some potential areas of future development. 1. Advanced Search and Filtering: Implementing
food items based on categories, ingredients and other criteria. This can improve the user experience and make it easier for
customers to discover relevant products. 2. Personalized Recommendations: Leveraging user data and machine learning
algorithms, personalized recommendation systems can suggest food items based on individual preferences, previous
purchases, and browsing history. This can enhance customer satisfaction, increase sales and encourage repeat purchases.
3. Integration with Delivery Services: Integrating the websites with third party delivery services can offer customers
convenient and seamless delivery options. These features can enable users to track their orders, select preferred delivery
slots and receive real- time updates on the status of their deliveries. 4. Mobile App Development: Creating a mobile app for
the food store e-commerce website can provide a dedicated platform for customers to browse and order food items. A
mobile app can offer additional features such as push notifications, mobile specific offers. 5. Social Media Integration:
Integrating social media platforms can allow customers to share their favorite food items, write reviews, and engage with the
food store’s brand. Overall, the future scope of a food store e-commerce website using MERN stack is vast. By continuously
innovating and incorporating new features and technologies, the website can stay competitive, attract a largercustomer
base, and provide an exceptional online shopping experience for food enthusiasts. REFERENCES 1. React Documentation:
https://react.dev/learn 2. NodeJS Documentation:
https://nodejs.org/en/docs/guides/getting-started-guide 36
3. Tailwind CSS: https://tailwindui.com/documentation 4. MongoDB: https://www.mongodb.com/docs/
******************************************************** ********************************************************
| 27
162 words / 3% - Internet from 22-Feb-2023 12:00AM

www.coursehero.com
36 words / 1% - Internet from 29-Dec-2020 12:00AM

www.coursehero.com
57 words / 1% - from 11-Jun-2023 12:00AM

www.ijraset.com
50 words / 1% - from 06-May-2023 12:00AM

www.ijraset.com
74 words / 1% - Internet from 25-May-2021 12:00AM

github.com
62 words / 1% - Internet from 03-Jan-2008 12:00AM

www.dhcarchives.com
51 words / 1% - Internet from 29-Sep-2022 12:00AM

futurefinders.in
35 words / 1% - from 23-Mar-2023 12:00AM

eresources.nlb.gov.sg
14 words / < 1% match - Internet from 27-Dec-2020 12:00AM

www.coursehero.com

www.coursehero.com
10
11 words / < 1% match - Internet from 06-Jan-2023 12:00AM

github.com
11
10 words / < 1% match - from 23-Mar-2023 12:00AM

eresources.nlb.gov.sg
12

www.facweb.iitkgp.ernet.in
13
14 26 words / < 1% match - from 25-May-2023 12:00AM

www.irjmets.com
22 words / < 1% match - Internet from 25-May-2022 12:00AM

15
docplayer.net

16 pages.cs.wisc.edu

17 core.ac.uk
20 words / < 1% match - Internet from 25-Nov-2022 12:00AM

18 umpir.ump.edu.my
11 words / < 1% match - Internet from 15-Jan-2023 12:00AM

19 www.theseus.fi
8 words / < 1% match - from 08-Jun-2023 12:00AM

20 www.theseus.fi
16 words / < 1% match - Internet from 16-Mar-2021 12:00AM

21 www.ess.washington.edu
12 words / < 1% match - Internet from 16-Oct-2022 12:00AM

www.studymode.com
22

repository.mines.edu
23
24 11 words / < 1% match - Internet from 05-Jan-2023 12:00AM

www.freelancer.com
25 10 words / < 1% match - Crossref Posted Content

Hugo Rodrigues Damasceno. "Solid-state NMR on the quadrupolar low-γ nucleus
>sup<25>/sup<Mg: Application to glasses", Universidade de Sao Paulo, Agencia USP de Gestao da
Informacao Academica (AGUIA), 2023
10 words / < 1% match - Internet from 24-Nov-2022 12:00AM

26
ijtre.com
10 words / < 1% match - Internet from 03-Jun-2019 12:00AM

iuliantabara.com
27
28 10 words / < 1% match - Internet from 18-Jan-2023 12:00AM

rajkdarbar.github.io
10 words / < 1% match - from 29-May-2023 12:00AM

29
technodocbox.com
10 words / < 1% match - from 22-Mar-2023 12:00AM

30 warmundertone.blogspot.com

31 www.cs.sunysb.edu

32 www.ecomsay.com

33 blacklisthackers.com

34 irigs.iiu.edu.pk

35 newsletter.pragmaticengineer.com
36 9 words / < 1% match - Internet from 20-Dec-2022 12:00AM

theses.hal.science
37 8 words / < 1% match - Crossref

C. Vinothini, C Tarun, K A Bhavana, G Nikhil Krishna, Advaith Praveen. "NBA web portal: A Comprehensive
Survey on NBA Accreditation and MERN Stack for the Purpose of Implementing aPortal", 2022
International Conference on Inventive Computation Technologies (ICICT), 2022
38 8 words / < 1% match - Crossref

Tapas Si, Debolina Bhattacharya, Somen Nayak, Péricles B.C. Miranda, Utpal Nandi, Saurav Mallik, Ujjwal
Maulik, Hong Qin. "PCOBL: A Novel Opposition-based Learning Strategy to Improve Metaheuristics
Exploration and Exploitation for Solving Global Optimization Problems", IEEE Access,2023
8 words / < 1% match - from 02-Jun-2023 12:00AM

pdfcookie.com
39
40 8 words / < 1% match - from 27-Mar-2023 12:00AM

pubmed.ncbi.nlm.nih.gov

41
utpedia.utp.edu.my

Summer Intern BTech_2020_10235

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Summer Intern BTech_2020_10235

Uploaded by

Copyright:

Available Formats

Online Food Store Website Using MERN

Computer Science and Engineering

Birla Institute of Technology, Mesra

Date: July 16th, 2023

Dr. Satish Chander

Date: July 16th, 2023 AARFIN ANJUM

(Chairman) (Panel Coordinator)

Date: July 16th, 2023 (Signature)

CHAPTER 2 BACKGROUND OF THE PROJECT…………………………………2

CHAPTER 4 EXPERIMENTAL RESULTS AND DISCUSSION …………………..13

Figure 4.1 Home Page -1 12

Figure 4.1 Home Page -1 13

Figure 4.2 Home Page-2 14

Figure 4.3 Header.js Code Snippet 14

Figure 4.4 Menu Page 15

Figure 4.5 Menu.js Code Snippet 16

Figure 4.6 Signup Page 16

Figure 4.7 Signup.js Code Snippet 17

Figure 4.8 Login Page 17

Figure 4.9 Login.js Code Snippet 18

Figure 4.10 Cart Page 19

Figure 4.11 Cart.js Code Snippet 19

Figure 4.12 Add New Product 20

Figure 4.13 Newproduct.js Code Snippet 20

Figure 4.14 Payment Gateway Page 21

Figure 4.15 Index.js Code Snippet 21

Figure 4.16 Payment Done Page 22

Figure 4.17 Payment Success.js Code Snippet 22

Figure 4.18 Payment is Cancel Page 23

Figure 4.19 Payment Cancel.js Code Snippet 23

BACKGROUND OF THE PROJECT

3.2 DESIGN PLANNING

3.4 IMPLEMENTATION PHASE

Use Case Diagram

Fig.3.1 Use case diagram

EXPERIMENTAL RESULTS AND DISCUSSION

Fig.4.1 Home Page-1

Fig.4.3 Header.js Code Snippet

Fig.4.4 Menu Page

Fig.4.6 Signup page

Fig.4.8 Login Page

Fig.4.11 Cart.js Code Snippet

Add New Product:

Fig.4.13 Newproduct.js Code Snippet

Payment Gateway Page:

Fig.4.15 Index.js Payment Gateway Code Snippet

Payment done successfully:

Fig.4.17 Payment Success.js Code Snippet

Fig.4.19 Payment Cancel.js Code Snippet

4.2 DESIGN PLANNING

b. The “/uploadProduct” route handles the uploading of new products. It receives

7. STRIPE INTEGRATION: The code includes a route (“/checkout-payment”) for

8. SERVER-SIDE VALIDATION AND ERROR HANDLING: The backend code

1. React Documentation: https://react.dev/learn

Online Food Store Website Using MERN Similarity Index

Mode: Similarity Report

Online Food Store Website Using MERN A Report

AARFIN ANJUM BTECH/10235/20

To the best of my knowledge, the

: July 16th, 2023 Dr. Satish Chander Assistant Professor

. Date: July 16th, 2023 AARFIN ANJUM BTECH/10235/20

AARFIN ANJUM, BTECH/10235/20 has been approved for

, Mesra, Ranchi. Date: Place: (Chairman)

authentication, menu browsing, cart management and payment integration. v