e-ISSN: 2582-5208

International Research Journal of Modernization in Engineering Technology and Science

( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:06/Issue:06/June-2024 Impact Factor- 7.868 www.irjmets.com

FOOD-DELIVERY WEBAPPLICATION WITH MERN

Anushka Gujar*1, Sakshi Rao*2, Kirti Panpatil*3, Sabiha Badhe*4, Dr. Dinesh D. Patil*5
*1,2,3,4UG Student, Computer Science & Engineering, HSM’s Shri Sant Gadge Baba College Of
Engineering And Technology, Bhusawal, Maharashtra, India.
*5Associate Professor and Head, Department of Computer Science & Engineering, HSM’s Shri Sant
Gadge Baba College Of Engineering And Technology, Bhusawal, Maharashtra, India.
DOI : https://www.doi.org/10.56726/IRJMETS59268
ABSTRACT
Nowadays, the internet is growing rapidly and is making itself an important part of a person’s life. People prefer
to do smart work rather than hard work. People use the internet to make their lifestyle easier and their work
easier to do in a shorter period of time. Adapting the internet to a person’s life is like introducing a new era of
internet usage. Food ordering is one of them. By using an online food ordering system, you can easily order
your favorite food from your favorite restaurants or hotels or from your nearby ones as well. This system has
made this generation’s lives a bit easier, as you can order the food you are craving at any time and anywhere.
This application helps both the user and the manager in their respective ways. It helps the users keep track of
their requests, like how long it will take to reach them, their payment history, etc. In the same way, it helps the
manager store customer data in their database and a lot more. Today, people prefer this because they can easily
operate it from their own residence or the place where they are; it displays the entire menu of the particular
restaurant, shows recommendations based on our search, and also makes it very easy to track the request. The
availability of these services is very easy; the user only has to login to the respective application and create a
personal profile containing their unique user ID and password, which helps to deliver their orders safely. After
a few steps in the application, the user is good to go for it. The development of a comprehensive platform that
allows homemakers and restaurant owners to sell their products online, gather client feedback, and wirelessly
manage menus is made possible by the MERN stack, which consists of MongoDB, ExpressJS, React, and NodeJS
Keywords: Internet, Food Ordering System, MERN.
I. INTRODUCTION
The internet and analogous technologies have had a big impact on people worldwide. Virtual stores allow
marketers to vend products encyclopedically, transubstantiating the marketing assiduity. Now, costumers can
buy goods anytime, anywhere, seven days a week. This online shopping trend extends to food orders, making
life easier for everyone. Colorfull options like Cash on Delivery and online payments are available for
convenience. Technology allowed caffs and food delivery services to join the online systems. You can now order
any type of food online and have it delivered to your doorsteps. Orders placed through an app are stored in a
database for quick reclamation by the staff. This quick response ensures timely deliveries and high client
satisfaction. The internet truly makes life more accessible for all involved.
II. LITURATURE REVIEW
Web-application using MERN stack
As mentioned in several research publications, food delivery online websites that make use of the MERN stack
provide a cutting-edge method for effective food ordering and delivery. The development of a comprehensive
platform that allows homemakers and restaurant owners to sell their products online, gather client feedback,
and wirelessly manage menus is made possible by the MERN stack, which consists of MongoDB, ExpressJS,
React, and NodeJS [1].
Customers’ Experience
A food delivery web application is essential to improving customers' online food ordering experience since it
offers convenience and a large selection of food selections, as previously described in research publications [2]
[3].

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[3359]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:06/Issue:06/June-2024 Impact Factor- 7.868 www.irjmets.com
Considering covid-19 factor
Factors like the Covid-19 epidemic have contributed to the growth of online food delivery applications by
giving individuals a quick and safe method to get meals without having to leave their homes [4].
Photos and Calorie Information of Food Items
The relevance of web design in this industry is shown by the fact that factors like showing food item photos and
calorie information on websites have a substantial impact on consumer attitudes and behaviors toward online
meal delivery services [5].
Business Development
Online meal ordering platforms are convenient and meet consumer demands, which boosts client happiness
and promotes business success [6] [7].
Effortless ordering Process
In order to increase dietary consumption among customers, menu designs that offer more reasonably priced
and nutrient-dense options are needed, according to a study on Indian online meal delivery services [8].
A food delivery web application may smoothly meet client demand and help the online food service sector
flourish by including user-friendly interfaces, a variety of food options, and nutritional information. All things
considered, the food delivery sector can undergo a revolution by utilizing the MERN stack in conjunction with
cutting-edge technology to offer a smooth and intuitive experience for both consumers and companies.
III. METHODOLOGY
Certainly! Let's break down the technique for building a web nourishment conveyance web application utilizing
the MERN stack into a step-by-step handle:
Prerequisite Gathering:
 Get it the destinations of the application: What issue does it illuminate? Who are the target clients?
 Accumulate prerequisites through partner gatherings, showcase investigate, and client studies.
 Distinguish key highlights such as client enrollment, eatery posting, menu browsing, requesting,
installment preparing, and arrange following.
Framework Plan:
 Plan the engineering of the application, counting frontend (React.js), backend (Node.js with Express.js),
and database (MongoDB).
 Arrange the database construction to store client data, eatery subtle elements, menus, orders, and
exchanges.
 Characterize Tranquil API endpoints for communication between the frontend and backend components.
1. Extend Setup:
 Set up your improvement environment by introducing Node.js, npm (Hub Bundle Supervisor), and
MongoDB.
 Initialize a modern Node.js extend and introduce essential conditions like Express.js for backend and
React.js for frontend.
2. Backend Advancement (Node.js with Express.js):
 Plan Serene API endpoints to handle different functionalities such as client confirmation, eatery
administration, menu administration, arrange handling, and installment.
 Make courses and controllers for each API endpoint to handle approaching demands, connected with the
database, and send suitable reactions.
 Actualize client verification utilizing strategies like JWT (JSON Web Tokens) or session-based
confirmation.
 Interface to MongoDB database utilizing Mongoose (ODM library) to perform CRUD operations on
information.

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[3360]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:06/Issue:06/June-2024 Impact Factor- 7.868 www.irjmets.com
3. Frontend Advancement (React.js):
 Plan and create client interfacing for diverse parts of the application counting domestic page, eatery
postings, menu show, cart, checkout, and client profile.
 Utilize Respond Switch for client-side steering to explore between distinctive pages of the application.
 Actualize state administration utilizing Respond Setting API or libraries like Redux to oversee worldwide
application state such as client verification status, cart things, etc.
 Coordinated with third-party APIs for highlights like maps (for showing eatery areas), installment portals,
and geolocation (for finding adjacent eateries).
4. Database Plan (MongoDB):
 Plan the database construction to store data such as client points of interest, eatery subtle elements, menu
things, orders, and exchanges.
 Utilize MongoDB's document-based show to speak to information in collections and records, guaranteeing
versatility and adaptability.
5. Client Verification and Authorization:
 Actualize client enrollment and login usefulness with highlights like secret word hashing and salting for
security.
 Set up get to control to confine certain functionalities (e.g., as it were confirmed clients can put orders).
6. Arrange Handling and Installment Integration:
 Execute arrange handling rationale to permit clients to browse menus, include things to cart, and put
orders.
 Coordinated with installment portals (e.g., Stripe, PayPal) to empower secure online installments.
 Actualize highlights like arrange following and notices to keep clients educated approximately the status of
their orders.
7. Testing:
 Type in unit tests and integration tests for both backend and frontend components to guarantee
unwavering quality and usefulness.
 Perform client acknowledgment testing to approve that the application meets the prerequisites and client
desires.
8. Arrangement:
 Select a facilitating stage (e.g., AWS, Heroku) and send the backend server and database.
 Convey the frontend application to serve inactive records or utilize stages like Vercel or Netlify for
facilitating.
9. Checking and Upkeep:
 Set up observing devices to track application execution, server uptime, and client movement.
 Routinely overhaul conditions and settle bugs to guarantee the application's steadiness and security.
 Screen client criticism and analytics to recognize zones for advancement and modern highlight
improvement.
10. Documentation and Back:
 Record the codebase, API endpoints, database pattern, and arrangement handle for future reference and
upkeep.
 Give client documentation and bolster assets to assist clients explore and utilize the application
successfully.
IV. TECHNOLOGY USED
The MERN stack is comprised of MongoDB, Express, React.js, and Node.js. Each component is basic to the
improvement handle and helps within the in general operation and execution of the net application.

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[3361]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:06/Issue:06/June-2024 Impact Factor- 7.868 www.irjmets.com
1. MongoDB:
MongoDB could be a NoSQL database that utilizes an versatile document-based information show. It spares
information as JSON-like archives, making it straightforward to coordinated and change information inside the
application. Because of its adaptability and capacity to handle enormous sums of information, MongoDB is the
most excellent arrangement for web applications that require energetic information capacity.
2. Express.js:
Express.js could be a straightforward and flexible Node.js web application system. It gives a comprehensive set
of API and web app improvement instruments and data. Express.js makes it less difficult to oversee routes,
process requests and reactions, and construct middleware. It is amazingly versatile and compelling for creating
web apps due to its lightweight and measured engineering.
3. React.js:
React.js may be a JavaScript library for creating client interfacing. It permits for the plan of reusable UI
components as well as their viable upgrading and rendering in reaction to information changes. React.js'
component-based design advances reuse, modularity, and viability. It moreover has a virtual DOM (Archive
Question Demonstrate) for expanded execution and rendering.
4. Node.js:
Node.js may be a JavaScript server-side runtime environment. Its event-driven, non-blocking plan makes it
especially adaptable and amazing at overseeing a few demands at once. Since it gives server-side scripting,
record framework operations, and arrange network, Node.js is an fabulous choice for building the backend of
websites.
These innovations work together to make a comprehensive web advancement arrangement. MongoDB handles
the database layer, Express.js handles the backend and directing, React.js handles the frontend client interface,
and Node.js handles the server-side runtime environment.
V. RESULT
The following Results were :
1. User authentication Input:
 SignUp and SignIn
 Expected output: Successful login and access to the user dashboard
 Result: Pass
2. Accessibility to the menu on all pages, including the landing page
 Input: Clicking “Menu” from Navigation Bar.
 Expected Output: Successful switch to the Menu page.
 Result: Pass
3. Add item to cart
 Input: Clicking the "Add to cart" button for a menu item
 Expected output: The item is added to the user's cart and the cart total is updated
 Result: Pass
4. Place order
 Input: Clicking the "Pay Now” button on the checkout page
 Expected output: Confirmation message that the order has been placed.
 Result: Pass
VI. CONCLUSION
The food delivery website using the MERN stack was successfully created, resulting in an efficient system for
ordering and delivering meals. Users can easily browse menus and place orders while restaurants can manage
orders and update menu items in real-time.
Requirements were thoroughly analyzed during the planning stage, and a comprehensive project plan was put
together. Wireframes, mockups, and database structure were developed during the design phase. The
implementation using the MERN stack offered a robust set of tools for building both the front-end and back-end
of the applicationTesting played a crucial role throughout the process, with unit, integration, and acceptance

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[3362]
 e-ISSN: 2582-5208
International Research Journal of Modernization in Engineering Technology and Science
( Peer-Reviewed, Open Access, Fully Refereed International Journal )
Volume:06/Issue:06/June-2024 Impact Factor- 7.868 www.irjmets.com
tests ensuring that the system met all criteria without any flaws. MongoDB was chosen as the database for its
fast data storage and retrieval capabilities, providing a scalable solution for handling large amounts of data.
ReactJS was used for the frontend to create a dynamic user experience with quick rendering and improved
speed. Various testing methods were employed to validate the application's functionality and performance,
uncovering challenges that were addressed in subsequent development cycles.The testing phase was vital in
ensuring the quality and reliability of the system, as issues were identified and fixed to deliver a seamless user
experience.
VII. REFERENCES
[1] Amit, Shersingh, Chauhan., Sushil, Bhardwaj., Ruman, Ahmed, Shaikh., Abhishek, Mishra., Sunita,
Nandgave. (2022). Food Ordering website “Cooked with care” developed using MERN stack. 1690-
1695. doi: 10.1109/ICICCS53718.2022.9788224
[2] (2023). Railway food delivery System. doi: 10.21203/rs.3.rs-3087899/v1
[3] Harsh, Pathak., Naman, Gupta., Dhiren, Premaker., Preeti, Garg. (2022). Design of Web App for Online
Food Services. International Journal For Science Technology And Engineering, 10(5):4316-4322. doi:
10.22214/ijraset.2022.43136
[4] Sushant, Rajvanshi. (2023). Examining Advantages, Reasons, and Issues of Ordering Online Food
through Mobile Application. International Journal For Science Technology And Engineering,
11(6):1149-1153. doi: 10.22214/ijraset.2023.53807
[5] S., Gnana, Sugirtham., V., Sindhu. (2021). An analysis of consumer satisfaction towards online food-
ordering apps. 15(1):146-153.
[6] Harsh, Pathak., Naman, Gupta., Dhiren, Premaker., Preeti, Garg. (2022). Design of Web App for Online
Food Services. International Journal For Science Technology And Engineering, 10(5):4316-4322. doi:
10.22214/ijraset.2022.43136
[7] Nefike, Gunden., Cristian, Morosan., Agnes, DeFranco. (2021). Are online food delivery systems
persuasive? The impact of pictures and calorie information on consumer behavior. 4(4):457-472. doi:
10.1108/JHTI-07-2020-0127
[8] Rizwan, Suliankatchi, Abdulkader., Kathiresan, Jeyashree., Vivek, Kumar., K., Senthamarai, Kannan.,
Deneshkumar, Venugopal. (2022). Online Food Delivery System in India: Profile of Restaurants and
Nutritional Value of Food Items. Vision: The Journal of Business Perspective, 097226292211101-
097226292211101. doi: 10.1177/09722629221110122

www.irjmets.com @International Research Journal of Modernization in Engineering, Technology and Science

[3363]