SEMESTER TRAINING REPORT

On
“FOOD DELIVERY APP using MERN STACK”

Submitted in partial fulfillment of the

requirements for the award of the degree

Bachelor of Technology
In
Computer Science and Engineering
To
IKJ Punjab Technical University, Jalandhar

SUBMITTED BY:
Name: Pawanpreet Kaur
Roll No: 2002553
Semester: 8th
Batch: 2024
Under the guidance of
Mr. Rajeev Sharma
Assistant Professor

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Chandigarh Engineering College-CGC, Landran
Mohali, Punjab – 140307
 CERTIFICATE

This is to certify that Mr. / Ms. Pawanpreet Kaur has partially completed / completed / not completed
the Semester Training during the period from 23rd January 2024 to 10th April 2024 in our Organization
/ Industry as a Partial Fulfillment of Degree of Bachelor of Technology in Computer Science &
Engineering.

(Signature of Project Supervisor)

Date: ____________________

ii
CERTIFICATE BY COMPANY

iii
 DECLARATION CERTIFICATE

I hereby declare that the Project Report entitled "Food Delivery App using MERN stack" is an
authentic record of my own work as requirements of 8th semester academic during the period from
23rd January 2024 to 10th April 2024 for the award of degree of B. Tech. (Computer Science &
Engineering, Chandigarh Engineering College- CGC, Landran, Mohali under the guidance of Mr.
Rajeev Sharma.

Signature of Student
Pawanpreet Kaur
2002553
Date: 21 May 2024

Certified that the above statement made by the student is correct to the best of our knowledge and
belief.

Signatures

Examined by:

1. 2. 3. 4.

Head of Department

(Signature and Seal)

iv
 ACKNOWLEDGMENT

I take this opportunity to express my sincere gratitude to the Director- Principal Dr. Rajdeep Singh
Chandigarh Engineering College, Landran for providing this opportunity to carry out the present
work. I am highly grateful to the Dr. Sukhpreet Kaur HOD CSE, Chandigarh Engineering College,
Landran (Mohali).
I would like to expresses my gratitude to other faculty members of Computer Science & Engineering
department of CEC, Landran for providing academic inputs, guidance & Encouragement throughout
the training period. The help rendered by Mr. Rajeev Sharma, Supervisor for Experimentation is
greatly acknowledged. I would also like to acknowledge the help of my Project Partner, Prachi Saini,
who helped me all along the building of this project. Finally, I express my indebtedness to all who
have directly or indirectly contributed to the successful completion of my semester training.

v
 ABOUT THE COMPANY

Grazitti Interactive: Guiding Businesses Through Digital Transformation

Established in 2008, Grazitti Interactive is a global digital services company empowering

businesses to thrive in today's digital landscape. They leverage cutting-edge technologies like cloud
computing, mobile app development, and social media integration to revolutionize business
operations.

A One-Stop Shop for Digital Transformation:

Grazitti Interactive positions itself as a comprehensive solution for businesses seeking a digital edge.
Their expertise spans across:

 Web Application Development: They specialize in building robust web applications, often
utilizing the Drupal content management system (CMS) alongside other open-source
technologies.
 Strategic Digital Marketing: Their services encompass Search Engine Optimization
(SEO), Pay-Per-Click (PPC) advertising, social media marketing, and content creation,
ensuring a holistic online presence.
 Salesforce Expertise: As a certified Salesforce Partner, Grazitti offers consultancy,
implementation, and seamless integrations for businesses using the Salesforce platform.

Global Reach and Proven Results:

With offices in India (Panchkula & Mohali), USA (Mountain View, CA), Canada (Edmonton,
AB), Singapore, and Australia (Sydney), Grazitti Interactive caters to a vast clientele, including
Fortune 500 companies. They have a well-established reputation for delivering innovative and cost-
effective digital solutions.

vi
 ABSTRACT

In an era defined by digital transformation and technological innovation, the landscape of food
ordering and delivery is undergoing a profound evolution. Our project, titled ‘Food Delivery App
using MERN stack’ represents a pioneering endeavour to harness the capabilities of the MERN
(MongoDB, Express.js, React.js, Node.js) stack to create a cutting-edge food ordering application
poised to revolutionize the dining experience for users.

The genesis of our project is rooted in the burgeoning demand for seamless and efficient solutions in
the realm of food ordering and delivery. Recognizing the need to bridge the gap between traditional
dining experiences and modern technological advancements, we embarked on a journey to develop
an innovative platform that caters to the evolving needs and preferences of today's consumers.

The primary objective of our project is to deliver a feature-rich food ordering application that offers
a seamless and intuitive user experience. Leveraging the unique strengths of the MERN stack, we
aim to create a scalable and efficient architecture that enables smooth navigation, streamlined
ordering processes, and transparent order tracking for users.

Key features of the application include user authentication and registration, intuitive interface for
browsing restaurants and menus, dynamic cart management functionality, secure checkout process
with payment integration, and comprehensive order tracking and status updates. Additionally, the
application will offer user profile management capabilities to personalize the dining experience based
on individual preferences.

Through meticulous attention to detail and adherence to best practices in software engineering and
user experience design, we aspire to create a product that not only meets but exceeds the expectations
of modern-day consumers. By deploying the application on a reliable and secure hosting platform,
we aim to ensure widespread accessibility and seamless user interactions.

In conclusion, our project represents a concerted effort to leverage cutting-edge technology and
innovative design principles to redefine the food ordering experience. By embracing the
transformative potential of the MERN stack, we envision our application as a trailblazing solution
that sets new standards of excellence in the realm of food ordering and delivery.

vii
 TABLE OF CONTENTS

Contents Page No.

1. Acknowledgement……………………………………………………….. v
2. About the Company……………………………………………………….vi
3. Abstract……………………………………………………………………vii
4. Table of Contents………………………………………………………….viii
5. List of Tables………………………………………………………………x
6. List of Figures……………………………………………………………...xi
7. Abbreviations and Nomenclature………………………………………….xii
8. Chapter 1: Introduction to the Project…………………………………….1
 1.1 Project Overview………………………………………………1
 1.2 Project Objective………………………………………………1
 1.3 Why DineDash?.………………………………………………1
 1.4 Literary Survey………………………………………………...2
 1.5 Feasibility Analysis……………………………………………5
 1.6 History of Food Delivery Apps………………………………..7
 1.7 Case Study……………………………………………………..8
Chapter 2: Software Require Specification………………………………11
 2.1 Introduction……………………………………………………11
 2.2 Overall Description……………………………………………11
 2.3 Specific Requirements…………………………………………11
 2.4 Other Requirements……………………………………………12
Chapter 3: Introduction and details of software used…………………….13

 3.1 MongoDB: Document-Oriented Database ……………………15

 3.2 Express.js: Building the Server-Side ………………………….16
 3.3 React.js: Building the Dynamic User Interface ……………….17
 3.4 Node.js: Powering the MERN stack…………………………...19
 3.5 The User Interface (UI) Development…………………………20

Chapter 4: System Design ………………………………………………..22

 4.1 Introduction ……………………………………………………22
viii
  4.2 System Architecture …………………………………………..22
 4.3 Data Flow Diagrams (DFDs)………………………………….23
 4.4 Entity Relationship Diagram (ER diagram)…………………..24
Chapter 5: System Implementation and Testing…………………………27
 5.1 Front-End Development…………………………………...….27
 5.2 Back-End Development…………………………………....…30
 5.3 Testing………………………………………………………..33
Chapter 6: Implementation (Modules)…………………………………..40
 6.1 Modularization Approach…………………………………….40
 6.2 User Interface Modules Breakdown………………………….40
 6.3 Back-End Module Breakdown………………………………..45
Chapter 7: Testing (Test Cases)……………………………………....….54
 7.1 User Interface (UI) Tests………………………………...……54
 7.2 Data Fetching Tests…………………………………………...56
 7.3 Additional Test Cases…………………………………………57
Chapter 8: Screenshots…………………………………………………..58
Chapter 9: Conclusions and Future Scope…………………………...….64
 9.1 DineDash: A Food Delivery App Built with MERN…………64
 9.2 Future Scope…………………………………………………..64
Chapter 10: References…………………………………………………..66

ix
 LIST OF TABLES

Tables Page No.

1. Table i: Comparison of food delivery apps………………………………….4

2. Table ii: MERN stack………………………………………………………..5
3. Table iii: Alternative stack…………………………………………………..5
4. Table iv: Economic Feasibility………………………………………….......6
5. Table v: Advantages and Disadvantages of Delivery Network Option……...7
6. Table vi: UI module Breakdown…………………………………………….40
7. Table vii: Backend Module Breakdown……………………………………. 45

x
 LIST OF FIGURES

Figures Page No.

1. Fig i: Logos of some Food Delivery Apps…………………………………….4

2. Fig ii: MERN Stack……………………………………………………………14
3. Fig iii: MERN Stack Development……………………………………….........14
4. Fig iv: UI Development Technologies…………………………………………20
5. Fig v: System Design…………………………………………………………..22
6. Fig vi: Admin Work Flow Process…………………………………………….24
7. Fig vii: Customer Work Flow Process…………………………………………24
8. Fig viii: ER Diagram…………………………………………………………...25
9. Fig ix: Schema Diagram………………………………………………………..26
10. Fig x: Home Screen Before Login………….…………………………………..58
11. Fig xi: Login Screen……………………………………………………….……58
12. Fig xii: Signup Screen…………………………………………………………..58
13. Fig xiii: Login Error…………………………………………………………….59
14. Fig xiv: Home after Login or Signup……………………………………………59
15. Fig xv: Carousel…………………………………………………………………59
16. Fig xvi: Search Component……………………………………………………...60
17. Fig xvii: Card Component……………………………………………………....60
18. Fig xviii: My Cart……………………………………………………..................60
19. Fig xix: Empty Cart……………………………………………………...............61
20. Fig xx: How Search Works? …………………………………………………….61
21. Fig xxi: Footer Component……………………………………………………....61
22. Fig xxii: Add to Cart Button……………………………………………………..61
23. Fig xxiii: My orders……………………………………………………...............62
24. Fig xxiv: Food Category……………………………………………………........62
25. Fig xxv: Orders……………………………………………………......................62
26. Fig xxvi: FoodItems……………………………………………………...............63
27. Fig xxvii: Users……………………………………………………......................63

xi
 ABBREVIATIONS AND NOMENCLATURE

1. MERN- MongoDB, Express.js, React, Node.js (Technology stack)

2. HTML – Hyper Text Markup Language
3. CSS – Cascading Style Sheets
4. JS – JavaScript
5. UI – User Interface
6. JSON – JavaScript Object Notation
7. DOM – Document Object Model
8. HTTP – Hyper Text Transfer Protocol
9. SQL – Structured Query Language
10. PHP – Hypertext Preprocessor
11. LAMP – Linux, Apache, MySQL, PHP
12. ODM – Object Data Modelling
13. Npm – Node Package Manager
14. JWT – JSON Web Token
15. CORS – Cross – Origin Resource Sharing
16. USP – Unique Selling Proposition
17. DFD – Data Flow Diagram
18. ER – Entity Relationship

xii
 CHAPTER 1: INTRODUCTION TO THE PROJECT

1.1 Project Overview

In today's fast-paced world, convenience reigns supreme. This is evident in the surging popularity of
food delivery apps, with the global market expected to reach $14,247.53 million by the year, 2030.
Gone are the days of limited menus and phone calls. Food delivery apps empower users to explore a
vast selection of cuisines and restaurants from the comfort of their couches, with just a few taps on
their smartphones. This shift towards on-demand services and a mobile-first society has fuelled the
food delivery app revolution.

1.2 Project Objective

This project, ‘FOOD DELIVERY APP using MERN stack’, aims to develop a user-friendly and
feature-rich food delivery app utilizing the robust MERN stack (MongoDB, Express.js, React.js, and
Node.js). The MERN stack's scalability, real-time capabilities, and suitability for mobile app
development make it the ideal choice for building a dynamic and efficient food delivery platform.

Our target audience encompasses a diverse range of users, including:

 Tech-savvy millennials and Gen Z individuals who are comfortable using mobile apps for
everyday needs.
 Busy professionals seeking convenient meal options after a long workday.
 Families looking for a wider variety of food choices beyond their immediate surroundings.
 Individuals with specific dietary restrictions (e.g., vegetarian, vegan, gluten-free) who require
specialized food options.

The app will cater to their needs by offering a seamless food ordering experience and a curated
selection of restaurants that cater to various preferences.

1.3 Why DineDash?

DineDash is the name of “Food Delivery App using Mern stack”.Mern stack is the most commonly
used technology stack for web development which includes frontend and backend technologies.

1
Ordering a quick and convenient meal: A busy professional returning home late from work can
browse restaurants, filter by cuisine (e.g., Italian), and order a quick dinner with a few clicks.

 Planning a special occasion meal: A user planning a birthday party can utilize the app to
order food for a large group, schedule a specific delivery time, and browse catering options
offered by restaurants.
 Discovering new restaurants: A user craving something new can explore restaurants by
location, cuisine type (e.g., Ethiopian), or browse user reviews and ratings to discover hidden
gems in their area.
 Finding meals with specific dietary needs: A user with gluten-free or vegan dietary
restrictions can utilize filters to find restaurants offering suitable options, ensuring a safe and
enjoyable dining experience.
 Re-ordering favorite meals: A user can easily reorder their favorite dish from a previously
visited restaurant, eliminating the need to search menus again.
 Taking advantage of promotions and discounts: The app can notify users about ongoing
promotions and discount codes offered by restaurants, allowing them to save money on their
orders.

1.4 Literary Survey: Food Delivery Apps

This section delves into existing literature relevant to developing a food delivery app using the MERN
stack. We'll explore research papers, industry reports, technical documentation, and conduct a
competitor analysis to gain valuable insights that will inform our project.

1. Research Papers and Articles

 Our literature search focused on recent research related to food delivery apps. Here are some
key areas we investigated:
o Understanding User Behavior: A research paper explored user preferences in food
delivery apps. They found that users prioritize factors like [Key Findings - e.g., ease
of use, variety of restaurants, fast delivery times]. This highlights the importance of
designing an intuitive interface, offering a diverse restaurant selection, and optimizing
delivery efficiency in our app.

2
 o The Rise of Mobile Payments: A study analyzed trends in mobile payment
integration for food delivery apps. The research suggests a growing preference for
[Key Findings - e.g., digital wallets, secure one-click payments]. We will incorporate
secure and user-friendly mobile payment options in our app to cater to this evolving
trend.
o Real-time Features and User Experience: Research examined the impact of real-
time data management on user experience in food delivery apps. Their findings
indicate that features like [Key Findings - e.g., live order tracking, in-app chat with
restaurants] significantly enhance user experience. We will leverage real-time
functionalities to provide users with transparency and control over their orders.

2. Industry Reports and Market Analysis

 To understand the food delivery app industry landscape, we analyzed reports from reputable
sources like "Ordering In: The Rapid Evolution of Food Delivery" by McKinsey & Company
(2023) and https://kreatifbeats.com/2022/10/13/ui-ux-design-for-user-engagement-of-food-
delivery-applications/. Here are some key takeaways:
o Market Growth Potential: The global food delivery app market is expected to reach
a staggering $14,247.53 million by the year, 2030. This signifies a thriving industry
with immense potential for our app.
o Market Segmentation: Industry reports suggest segmentation by [Segmentation
Factors - e.g., demographics, device usage, location]. We will consider these factors
when defining our target audience and tailoring app functionalities to their needs.
o Key Players and Industry Trends: The market is dominated by major players like,
Uber Eats and Grubhub.

3. Technical Documentation

 Exploring technical documentation provided by the MERN stack technologies proved

invaluable. Resources from the official documentation of MongoDB, Express.js, React.js and
Node.js along with HTML, CSS and JavaScript provided comprehensive guidance on their
functionalities and best practices.

3
  Additionally, tutorials on topics like Events in JavaScript, Hooks in React, and virtual DOM
using libraries will be crucial in implementing these functionalities effectively within our
MERN stack app.

4. Competitor Analysis

 We conducted a thorough analysis of leading food delivery apps like DoorDash, Uber Eats,
and Grubhub. Here's a comparative overview:

Feature DoorDash Uber Eats Grubhub

Young professionals, Young adults, Tech-savvy

Target Audience Families, Urban dwellers
Busy families users

Unique Selling Extensive restaurant

Fast delivery times Wide variety of cuisines
Proposition network

User reviews & ratings, Loyalty programs, Contactless delivery

Functionalities
Order customization Promotions options

Diverse restaurant Competitive pricing,

User-friendly interface,
Strengths selection, Multiple Customizable search
Efficient delivery system
payment methods filters

Limited delivery areas in Higher delivery fees Order accuracy issues

Weaknesses
some regions compared to competitors reported by some users

Table i: Comparison of food delivery apps

Fig i: Logos of some Food Delivery Apps

4
1.5 Feasibility Study

This section analyzes the feasibility of developing a food delivery app using the MERN stack
(MongoDB, Express.js, React.js, and Node.js). It will explore the technical, economic, and
operational feasibility of the project.

1. Technical Feasibility

 Suitability of MERN Stack: Explain how the MERN stack aligns with your app's
functionalities. Here's a table summarizing the key benefits:

MERN Stack Component Benefit for Food Delivery App

MongoDB (Database) Flexible schema for diverse restaurant data and user profiles

Efficient handling of API requests and real-time

Express.js (Backend Framework)
communication

Dynamic and user-friendly interface for seamless ordering

React.js (Frontend Framework)
experience

Node.js (JavaScript Runtime Real-time functionalities like live order tracking and push
Environment) notifications

Table ii: MERN Stack

 Alternative Technology Stacks: Briefly discuss alternative options like LAMP (Linux,
Apache, MySQL, PHP) and explain why MERN is a better choice. Here's a table for
comparison:

Feature MERN Stack LAMP Stack

Requires additional configuration for

Scalability Highly scalable
scaling

Real-time Requires additional libraries for real-

Well-suited with Socket.IO
Functionality time functionalities

5
 Development Faster development with pre-
May require more custom development
Speed built components

Table iii: Alternative Stack

2. Economic Feasibility

 Development Costs: Estimate the costs associated with developing your app. Consider
including a table like this:

Cost Category Description

Development Team (Number of developers) x (Hourly rate) x (Development hours)

Third-party Integrations Payment gateways, Mapping services

Cloud Infrastructure Server hosting, Database storage

Table iv: Economic Feasibility

Total Estimated Development Cost:

 Revenue Models: Explore potential ways to generate revenue:

o Commission Fees: Charge a commission on each order placed through the app
(percentage from restaurants and/or users).
o Subscription Model: Offer a premium tier with additional features like priority
delivery or exclusive discounts.
o Delivery Fees: Implement a delivery fee structure based on distance or order value.

3. Operational Feasibility

 Resources Required: Analyze the resources needed to operate your app effectively:

6
 o Customer Support: Outline a plan for addressing customer inquiries and resolving
issues promptly. Consider offering multiple support channels (e.g., in-app chat, email,
phone).
o Delivery Network: Decide if you'll build your own delivery network or partner with
existing delivery services.

Delivery Network
Advantages Disadvantages
Option

More control over delivery Higher initial investment,

Build Your Own Network
times and quality logistical challenges
Partner with Existing Lower initial costs, established Less control over delivery
Services delivery infrastructure personnel and quality
Table v: Advantages and Disadvantages of Delivery Network Option

1.6 History of Food Delivery Apps: A Journey of Convenience

1. The Early Days: Convenience at Your Doorstep

The concept of food delivery can be traced back centuries, with pizza delivery services emerging in
the late 19th century in the United States. However, the rise of food delivery apps as we know them
today is a relatively recent phenomenon.

 The 1990s and Early 2000s: The internet revolutionized communication, paving the way for
online food ordering systems. Pioneering websites like Pizza Hut's online ordering platform
(1994) offered a glimpse of the future.
 The Mobile Revolution and App Boom (Late 2000s): The widespread adoption of
smartphones with internet connectivity opened doors for mobile food delivery apps. Early
players like Seamless (2000) and Grubhub (2004) focused on connecting users with
restaurants that offered delivery services.

2. The Rise of Giants and the On-Demand Economy

The 2010s witnessed the emergence of major food delivery app players that continue to dominate the
market today:

 2010: DoorDash is founded, initially focusing on high-end restaurant deliveries.

7
  2010: Uber launches Uber Eats, leveraging its existing ride-hailing network for delivery
logistics.
 2014: Postmates enters the scene, offering on-demand delivery for various items, including
food.

Key Factors Driving Growth:

 Convenience: Food delivery apps eliminated the need for phone calls and simplified the
ordering process, making it easier than ever to enjoy restaurant meals at home or work.
 Wider Restaurant Selection: Apps aggregated restaurants from a broader geographical area,
offering users a wider variety of cuisines and dining options compared to traditional delivery
services.
 Real-time Tracking and Transparency: Live order tracking features provided users with
transparency and peace of mind, allowing them to monitor the progress of their deliveries.
 The Rise of On-demand Services: Food delivery apps thrived within the growing on-demand
economy, offering instant gratification and catering to busy lifestyles.

3. The Evolving Landscape: Innovation and New Trends

 Focus on User Experience: Competition has driven a focus on user experience, with apps
constantly innovating to offer smoother interfaces, advanced search filters, and personalized
recommendations.
 Delivery Fee Models: Different app platforms employ various delivery fee structures, with
some charging flat fees and others implementing distance-based pricing.
 Subscription Services: Premium subscription models offer additional benefits like free
delivery on a certain number of orders per month.
 Expansion Beyond Traditional Deliveries: Certain platforms have expanded their services
to include grocery delivery, alcohol delivery, and even convenience store deliveries.
 Focus on Sustainability: There's a growing trend of eco-friendly delivery options offered by
some apps, like partnering with bicycle couriers or electric vehicle delivery fleets.

1.7 Case Study:

Zomato - A Growing Giant in the Food Delivery Landscape

8
1. Company Background and Mission:

Zomato, formerly known as FoodieBay, was founded in 2008 in New Delhi, India. It started as a
restaurant search and discovery platform, providing users with comprehensive information on
restaurants, including menus, reviews, ratings, and contact details. Zomato's mission statement
revolves around "connecting people with great food experiences." Over time, the company has
evolved into a leading online food delivery platform in India and other Asian countries.

2. Target Audience and Unique Selling Proposition (USP):

Zomato primarily targets tech-savvy millennials and Gen Z individuals who are comfortable using
mobile apps for everyday needs. Additionally, busy professionals, families, and individuals with
specific dietary restrictions (vegetarian, vegan, gluten-free) are part of their user base.

 USP 1: Diverse Restaurant Selection: Zomato boasts a vast network of restaurants across
various cuisines and price points, catering to a wide range of user preferences.
 USP 2: Focus on Local and Independent Restaurants: Zomato actively promotes local and
independent restaurants alongside established chains, offering users a wider variety of
culinary experiences.
 USP 3: Emphasis on User-generated Content: Reviews and ratings from fellow users play
a crucial role in Zomato's platform, allowing users to make informed decisions based on real-
world experiences.

3. Business Model and Revenue Streams:

Zomato primarily generates revenue through the following methods:

 Commission Fees: Zomato charges restaurants a commission fee on each order placed
through the app.
 Delivery Fees: Some restaurants levy delivery fees on top of the order value, with a portion
potentially going to Zomato.
 Subscription Model: Zomato Pro offers premium features like free delivery on a certain
number of orders per month for a subscription fee.
 Advertising: Zomato displays targeted advertisements from restaurants within the app,
generating additional revenue.
9
4. Technological Stack and Innovation:

While the specific details of Zomato's tech stack are not publicly available, it's likely built on a
scalable and robust architecture to handle a large user base and high order volume. Here are some
potential technologies they might utilize:

 Front-end: React.js or similar frameworks for building a user-friendly and responsive mobile
app interface.
 Back-end: Node.js or other server-side technologies for efficient API handling and real-time
functionalities.
 Database: Cloud-based databases like Google Cloud Firestore or Amazon DynamoDB to
ensure scalability and data management.
 Machine Learning: Zomato might leverage machine learning algorithms to personalize
recommendations and optimize search results based on user preferences and past behaviour.

 Referral Programs: Zomato might offer referral programs, incentivizing existing users to
invite friends and family, leading to user base growth.
 Strategic Partnerships: Partnering with local restaurants and delivery service providers can
expand Zomato's reach and service offerings.

5. Challenges and Future Outlook:

Zomato faces competition from established players like Swiggy in India and needs to continuously
innovate to maintain its market share. Additionally, ensuring fair treatment of delivery personnel and
maintaining operational efficiency are ongoing challenges.

By analysing Zomato's journey, this case study demonstrates how a food delivery app can achieve
success by focusing on a diverse user base, a unique value proposition, and continuous adaptation to
the evolving market landscape.

10
 CHAPTER 2: SOFTWARE REQUIREMENT SPECIFICATION

2.1 Introduction

 Project Title: Food Delivery App using MERN stack

 Document Version: 1.0
 Author(s): Pawanpreet Kaur and Prachi Saini
 Purpose: This document outlines the software requirements for developing a food delivery
app using the MERN stack (MongoDB, Express.js, React.js, and Node.js). It specifies the
functionalities, features, and non-functional requirements for the app.

2.2 Overall Description

 Product Perspective: This app is designed for users who want to conveniently order food
from nearby restaurants and have it delivered to their doorstep. It will also target restaurants
seeking to expand their customer base and offer online delivery services.
 Product Features:
o User functionalities will include:
 User registration and login
 Search for restaurants by cuisine, location, or keywords
 Browse restaurant menus and reviews
 Place orders with customization options
 User Classes and Characteristics: The app will cater to two primary user classes:
o Customers: Tech-savvy individuals who use smartphones to order food delivery.

2.3 Specific Requirements

 Functional Requirements:
o User Registration and Login: Users should be able to register with basic information
(name, email, phone number) and create a secure login. Social login options (e.g.,
Facebook, Google) can be considered (optional).
o Restaurant Search: Users can search for restaurants by location (geolocation or zip
code), cuisine type, specific keywords in restaurant names or menus. Advanced search
filters based on price range, delivery time, ratings, etc., can be added (optional).

11
 o Restaurant Details: Display detailed information for each restaurant, including menu
items with descriptions, prices, pictures, customer reviews, and ratings. Contact
information and estimated delivery time should be clearly displayed.
o Order Placement: Users should be able to add items to their cart, customize orders
with special instructions, and choose a preferred payment method (credit card, debit
card, digital wallet). Secure payment processing through a trusted integration is
essential.

Non-Functional Requirements:

o Performance: The app should be responsive and load quickly on various devices
(smartphones, tablets) with decent internet connections.
o Scalability: The system should be able to handle a growing user base and high order
volume without compromising performance.
o Security: User data (personal information, payment details) must be secured using
appropriate encryption protocols. Secure login mechanisms and authorization for
functionalities are essential.
o Availability: The app should be highly available with minimal downtime.
Implementing redundancy in critical components can be considered (optional).
o Usability: The user interface should be intuitive, user-friendly, and easy to navigate
for users with varying levels of tech experience.

2.4 Other Requirements

 Error Handling: The app should gracefully handle errors and provide users with clear and
informative messages in case of issues.

12
CHAPTER 3: INTRODUCTION & DETAILS OF SOFTWARE USED

The food delivery industry has witnessed a significant transformation with the advent of technology-
driven solutions. In recent years, the demand for convenient and efficient food delivery services has
surged, leading to the emergence of various food delivery apps. These apps have not only
revolutionized the way people order food but have also presented new opportunities for businesses to
expand their reach and enhance customer satisfaction.

This report aims to provide a comprehensive analysis of the development of a food delivery app using
the MERN stack. The MERN stack, which comprises MongoDB, Express.js, React, and Node.js, has
gained widespread popularity for its ability to streamline the development process and create robust,
scalable web applications. By leveraging the capabilities of the MERN stack, the food delivery app
under consideration has been designed to offer a seamless user experience, efficient order
management, and real-time tracking of deliveries.

The report will delve into the details of the technologies used in the development of the app, including
the architecture, database management, front-end and back-end components, and the integration of
third-party services. Furthermore, it will explore the challenges encountered during the development
process and the strategies employed to overcome them, thereby providing valuable insights for
developers and businesses venturing into similar projects.

The MERN stack is a popular choice for building modern web applications. It's an acronym that
stands for four key technologies used throughout the development process:

 MongoDB: A NoSQL document database that offers flexibility and scalability for storing and
managing application data. Unlike traditional relational databases, MongoDB stores data in
JSON-like documents, making it a natural fit for JavaScript-based applications.
 Express.js: A lightweight web framework built on top of Node.js that simplifies building
server-side applications. Express provides a clean and efficient way to handle routing,
middleware, and server responses.
 React.js: A powerful JavaScript library for building dynamic and interactive user interfaces.
React uses a component-based architecture that promotes code reusability and
maintainability.

13
  Node.js: A JavaScript runtime environment that allows developers to execute JavaScript code
outside of a web browser. Node.js forms the foundation of the MERN stack, enabling server-
side development with JavaScript.

Fig ii: MERN stack

Here are some key benefits of using the MERN stack:

 JavaScript Everywhere: Developers can use JavaScript for both front-end and back-end
development, reducing the need to learn multiple languages and promoting code reuse.
 Rapid Development: The technologies within MERN are known for their ease of use and
extensive tooling, allowing for faster development cycles.
 Scalability: Both MongoDB and Node.js are inherently scalable, making MERN applications
suitable for growing user bases and data volumes.
 Large Community: MERN has a vast and active developer community.

Fig iii: MERN stack Development

14
By leveraging these technologies together, developers can build dynamic and feature-rich web
applications with a focus on efficiency and maintainability.

This section delves into the specific functionalities of each technology within the MERN stack used
to build this project. We'll explore how these components interact to create the application's overall
functionality.

3.1 MongoDB: Document-Oriented Database

Introduction:MongoDB is a NoSQL document database that deviates from the traditional relational
database structure.

Instead of tables and rows, data is stored in flexible JSON-like documents. This allows for greater
flexibility and scalability, especially when dealing with complex data structures.

Benefits in this Project:

 Data Modeling Flexibility: Our project likely involves data with varying structures (e.g., user profiles
with different fields). MongoDB allows us to define custom document schemas that adapt to these
variations.
 Scalability: As the application grows, MongoDB can easily scale horizontally by adding additional
servers to handle increased data volume.
 Rich Queries: MongoDB provides a powerful query language (MQL) that allows for efficient
retrieval and manipulation of data based on complex criteria.

Implementation Details:

 Connecting to MongoDB: The project will utilize the Mongoose library for Node.js. Mongoose acts
as an Object Data Modeling (ODM) layer, providing a familiar object-oriented interface for interacting
with MongoDB.
 Data Schema Definition: We'll define data models (schemas) in Mongoose that represent the different
types of data stored in the application (e.g., User, Post, Comment). These models specify the structure
and data types of each document field. Here's an example schema for a User model:

JavaScript
const mongoose = require('mongoose');

15
const userSchema = new mongoose.Schema({
username: {
type: String,
required: true,
unique: true
},
email: {
type: String,
required: true,
unique: true
},
password: {
type: String,
required: true
},
// Add other fields as needed (e.g., profile picture, bio)
});

module.exports = mongoose.model('User', userSchema);

Use code with caution.

content_copy

Security Considerations:

 Mongoose and MongoDB offer functionalities for user access control and data security. Implementing
proper authentication and authorization mechanisms is crucial to protect sensitive user data.
 Consider hashing and salting user passwords before storing them in the database to prevent
unauthorized access.

3.2 Express.js: Building the Server-Side

Introduction:

Express.js is a minimalist web application framework for Node.js. It provides a streamlined approach
to building web servers, handling HTTP requests and responses, routing, middleware, and more.

Benefits in this Project:

16
  Routing: Express allows us to define routes that map URLs to specific functions within the
application. This keeps our code organized and facilitates handling different types of requests (e.g.,
GET, POST, PUT).
 Middleware: Middleware functions act as interceptors in the request-response cycle, allowing for
tasks like authentication, logging, or data parsing.

3.3 React.js: Building the Dynamic User Interface

React.js is a JavaScript library for building user interfaces (UIs). It uses a component-based
architecture, where complex UIs are built from smaller, reusable components. React manages the UI's
state, efficiently updating only the parts that need to change when data updates occur.

Benefits in this Project:

 Component-Based Architecture: This approach promotes code reusability, maintainability, and

easier collaboration on large projects. Developers can build complex UIs by composing smaller, self-
contained components.
 Virtual DOM: React employs a virtual DOM, which represents a lightweight in-memory
representation of the actual UI. This allows React to efficiently calculate the minimal changes needed
to update the real DOM, resulting in smooth performance.
 State Management: React allows for managing the application's state in a clear and predictable
manner. Developers can define state variables within components and use state updates to trigger
re-renders of the UI whenever the data changes.

Implementation Details:

 Component Creation: We'll create React components representing various UI elements within the
application (e.g., user login form, post list, individual post view). These components will be
responsible for rendering their respective UI sections and handling user interactions. Here's a basic
example of a React component:

JavaScript
import React from 'react';

function UserList(props) {
return (

17
 <ul>
{props.users.map(user => (
<li key={user.id}>{user.username}</li>
))}
</ul>
);
}

export default UserList;

 Data Fetching and State Management: Data displayed in the UI often comes from the server
(MongoDB in our case). We'll integrate libraries like Axios or Fetch API to make requests to Express.js
API endpoints and retrieve data. React components can manage their internal state using the
useState hook or leverage external state management solutions like Redux or Context API for

complex applications. Here's an example using useState to fetch and display a user list:

JavaScript
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {
const [users, setUsers] = useState([]);

useEffect(() => {
const fetchData = async () => {
const response = await axios.get('/api/users');
setUsers(response.data);
};

fetchData();
}, []);

return (
<ul>
{users.map(user => (
<li key={user.id}>{user.username}</li>
))}
</ul>
);

18
}

export default UserList;

 Component Lifecycle Methods: React components have lifecycle methods that allow for actions at
different stages. We can utilize methods like componentDidMount to fetch data from the server
after the component mounts or componentDidUpdate to update the UI based on state changes.

3.4 Node.js: Powering the MERN stack

Introduction:

Node.js is a JavaScript runtime environment that allows developers to execute JavaScript code
outside of a web browser. It forms the foundation of the MERN stack, enabling server-side
development with JavaScript.

Role in this Project:

 Node.js serves as the platform for running the Express.js web server. The server listens for
incoming HTTP requests from the client (React application) and handles them using defined
routes and middleware functions.
 Node.js code can interact with the MongoDB database through Mongoose to perform CRUD
operations on data.
 Additional functionalities like user authentication, file uploads, or background tasks can be
implemented using Node.js libraries and modules.

Benefits of using Node.js:

 JavaScript Everywhere: The MERN stack allows developers to use JavaScript for both
front-end and back-end development, promoting code reuse and reducing the need to learn
multiple languages.
 Event-Driven Architecture: Node.js is well-suited for handling real-time applications and
asynchronous tasks due to its non-blocking, event-driven architecture.
 Vast Ecosystem: Node.js has a large and active developer community, providing a rich
ecosystem of libraries, frameworks, and tools for building various server-side functionalities.

19
3.5 The User Interface (UI) Development:

Fig iv: UI Development Technologies

 HTML: The Foundation of Web Pages

o Explain that HTML (Hyper Text Markup Language) forms the foundation of web
pages, defining the structure and content using tags. It acts as a blueprint for the
content that users see in their browsers. Highlight the importance of semantic HTML
for improved accessibility and maintainability.
o Briefly mention the basic HTML elements like headings (<h1>, <h2>), paragraphs
(<p>), lists (<ul>, <ol>), images (<img>), and forms (<form>).
 CSS: Adding Style and Visual Appeal
o Describe how CSS (Cascading Style Sheets) dictates the visual presentation of your
web pages. It controls elements' appearance, including colors, fonts, sizes, spacing,
layouts, and animations.
o Explain the concept of CSS selectors that target specific HTML elements and apply
styles to them. Briefly mention common CSS properties like color, font-size,
background-color, margin, and padding.
 JavaScript: Bringing Interactivity to Life
o Introduce JavaScript as a dynamic programming language that adds interactivity to
web pages. It allows you to manipulate the DOM (Document Object Model), respond
to user actions, create dynamic content, and enhance the user experience.
o Explain how your React components likely use JavaScript for functionalities like:
20
  Handling form submissions (e.g., validating user input, sending data to the
backend)
 Managing user input (e.g., updating form fields, displaying error messages)
 Updating the UI based on user interactions (e.g., adding items to the cart,
displaying product details)
 Bootstrap (Optional): Building Faster and Consistent UIs
o Briefly introduce Bootstrap as a popular front-end framework that provides pre-built
components and styles for web development. It simplifies the process by offering
ready-made elements like buttons, navigation bars, forms, and more.
o If your application uses Bootstrap, highlight its benefits like:
 Faster development with pre-built components
 Consistent UI across different pages
 Responsive design for optimal viewing on various devices

Connecting the Front-End: User Interaction and Data Flow

 Explain how the front-end (HTML, CSS, JavaScript) interacts with the backend (MERN
stack) to create a complete user experience.
 Describe the typical flow of user interaction and data exchange:
1. User interacts with the UI (e.g., clicks a button, submits a form)
2. JavaScript in your React components handles the event and might perform some initial
validation or processing.
3. If necessary, JavaScript sends an asynchronous request (e.g., using Fetch API or
Axios) to the backend API.
4. The backend API processes the request (e.g., validates user credentials, retrieves
product data, processes orders).
5. The backend API sends a response back to the front-end.
6. The front-end JavaScript receives the response and updates the UI accordingly (e.g.,
displays success/error messages, updates product listings in the cart).

21
 CHAPTER 4: SYSTEM DESIGN

4.1 Introduction

This document outlines the system design for a food ordering application, based on the functionalities
implemented in the provided React code. The application enables users to register, login, browse
restaurants, view menus, add items to a cart, place orders, and potentially track order status
(depending on the code's current scope).

Fig v: System Design

4.2 System Architecture

 High-Level Overview:
o The application follows a client-server architecture.
o The front-end user interface (UI) is likely built with React.js, handling user
interactions and displaying information.

22
 o The back-end server (not included in the provided code) would be responsible for
processing user requests, interacting with the database, and potentially handling
functionalities like payment processing and order communication with restaurants.

 Front-End Technologies:
o The provided code snippet suggests the use of React.js for building the UI components.
o HTML structures the content and defines the page layout.
o CSS styles the visual appearance of the UI elements.

 Back-End Technologies:
o The specific back-end technologies haven't been implemented in the provided code,
but considering the MERN stack, possibilities include:
 MongoDB: A NoSQL document database for storing application data like user
information, restaurant details (if implemented), and potentially orders (if
implemented).
 Express.js: A web framework for Node.js that could be used to build APIs for
handling user requests and interacting with the database.

4.3 Data Flow Diagrams (DFDs):

 Due to the limited code provided, creating detailed DFDs is challenging. However, you can
create a high-level DFD based on the assumed functionalities:

 Context Diagram:

Data flows:

 User registration details (User -> System)

 Login credentials (User -> System)
 Restaurant search criteria (User -> System)
 Order details (User -> System)
 Restaurant data (System -> User)

23
 Fig vi: Admin work flow process

Fig vii: Customer work flow process

24
  Level 0 DFD
o Decompose the main processes from the context diagram into sub-processes based on
your assumptions about the back-end functionality.
o For example, "Order Placement" could involve sub-processes for validating cart
contents, calculating total amount, interacting with the payment gateway (if
implemented), sending order details to the restaurant (if implemented), and updating
order status in the database.

4.4 Entity-Relationship Diagram (ER Diagram)

 Design an ER diagram based on the entities likely involved in your application:

Fig vii: ER Diagram

25
 Entities:
o User (attributes: user_id, name, email, password, address)
o Restaurant (attributes: restaurant_id, name, cuisine, location, image_url, rating) (if
implemented)
o Menu Item (attributes: menu_item_id, restaurant_id, name, description, price,
image_url) (data structure not provided in code)
o Cart (attributes: cart_id, user_id, items) (if implemented)
o Order (attributes: order_id, user_id, restaurant_id, placed_at, total_amount, status,
items) (if implemented)

Fig ix: Schema Diagram

26
 CHAPTER 5: SYSTEM IMPLEMENTATION AND TESTING

5.1 Front-End Development

‘Dinedash’, the food delivery app is built using React and other front end technologies, the user
interface of the app includes multiple screens and components as below:

 Components: These are the items that are being repetitively used in the app, for example:
Food item card which displays the food item. Although, each card represent a different
food item, all cards have the same design and structure. The components include in this
food ordering app are as below:

1. Card.js

 This component represents a single food item on the menu.

 It displays the item's image, name, price, and allows selection of quantity and size.
 It uses useState hooks to manage the selected quantity and size.
 It utilizes the useContext hook to access the dispatchCart function from the
ContextReducer to add items to the cart.
 It calculates the final price based on the selected quantity and size options.
 It includes a button that triggers the handleAddToCart function when clicked.

2. Carousal.js

 This component creates a rotating image carousel using Bootstrap's Carousel

component.
 It displays three images representing different food categories by default.
 It utilizes Bootstrap's navigation controls to switch between carousel items.

3. ContextReducer.js

 This file defines the Context API state management for the shopping cart.
 It creates two Contexts: CartStateContext holds the current cart items, and
CartDispatchContext provides functions to modify the cart state.
 It defines a reducer function that handles different actions on the cart state:
27
 o ADD: Adds a new item to the cart.
o REMOVE: Removes an item from the cart at a specific index.
o DROP: Empties the entire cart.
o UPDATE: Updates the quantity of an existing item in the cart.

4. CartProvider.js

 This component serves as a provider for the Context API defined in

ContextReducer.js.
 It wraps the application's children components with the CartStateContext and
CartDispatchContext providers, making the cart state and dispatch functions
accessible throughout the application.

5. useCart.js and useDispatchCart.js

 These are custom hooks that simplify accessing the cart state and dispatch
functions from the Context API.
 useCart retrieves the current cart items from the CartStateContext.
 useDispatchCart retrieves the dispatch function to modify the cart state.

6. Footer.js

 This component displays a simple footer with copyright information and

potentially social media links (represented by empty placeholders).

7. Navbar.js

 This component creates the navigation bar for the application.

 It displays the application name ("DineDash") and navigation links for "Home"
and potentially "My Orders" (if the user is logged in).
 It conditionally displays login and signup buttons if the user is not logged in.
 It utilizes the useCart hook to access the cart data and displays a badge with the
number of items in the cart.
 It includes a button that triggers a modal to display the cart contents when clicked
(using a separate Modal component, not provided).

28
  It provides a logout button that removes the authentication token and redirects to
the login page.

 Screens: These include the login, signup, home screens etc. The screens are linked to each
other allowing the user to move from one screen to other. The screens used in this app are
as below:

1. Home.js

 Fetches food category and item data from a backend API

(http://localhost:5000/api/foodData).
 Displays a search bar to filter items based on user input.
 Uses a carousel component (Carousel.js, not provided) to showcase three different
food categories with rotating images.
 Iterates through food categories and displays them along with their corresponding
food items.
 Each food item is rendered using the Card.js component.
 Includes a Navbar.js component for navigation and a Footer.js component.

4. Cart.js

 Retrieves cart data and dispatch functions from the Context API
(ContextReducer.js).
 Displays an empty message if the cart is empty.
 Iterates through cart items and displays them in a table format.
 Each item shows its name, quantity, size, price, and a delete button.
 Clicking the delete button dispatches an action to remove the item from the cart.
 Calculates the total price of all items in the cart.
 Implements a "Check Out" button that triggers a function (handleCheckOut) to
send the order data to the backend API (http://localhost:5000/api/orderData) upon
successful checkout. The function also clears the cart.

5. Login.js

 Provides a login form for users to enter their email and password.
29
  Submitting the form sends a POST request to the backend API
(http://localhost:5000/loginuser) to authenticate the user.
 Upon successful login, it stores the user's email and a JSON Web Token (JWT) in
local storage for future requests.
 Redirects the user to the homepage (/) on successful login.
 Displays an error message if the login credentials are invalid.
 Offers a link to the signup page (/createuser) for new users.

6. MyOrder.js

 Fetches order data for the logged-in user by sending a POST request to the backend
API (http://localhost:5000/api/myOrderData) with the user's email.
 Iterates through the retrieved order data and displays it in chronological order
(newest to oldest).
 Each order displays the date, food items (name, quantity, size, and price) for that
order.
 Includes a Navbar.js component for navigation and a Footer.js component.

7. Signup.js

 Provides a signup form for users to enter their name, email, password, and
geolocation.
 Submitting the form sends a POST request to the backend API
(http://localhost:5000/createuser) to create a new user account.
 Upon successful signup, it redirects the user to the login page (/login).
 Displays an error message if the signup information is invalid.
 Offers a link to the login page (/login) for existing users.

5.2 Back-End Development

5.2.1 Technology used in Back end:

Node.js and Express:

30
 Node.js: The code utilizes Node.js, a JavaScript runtime environment, to execute server-side
code. This allows for building dynamic web applications that can handle requests and interact
with databases.
 Express: Express.js, a popular Node.js framework, is used for building the backend
application. It provides a structured approach for defining routes, handling requests, and
managing middleware.

Mongoose and MongoDB:

 Mongoose: Mongoose is an Object Data Modeling (ODM) library for MongoDB in Node.js.
It simplifies the interaction with MongoDB by allowing you to define data models (schemas)
that map to your application's data structures.
 MongoDB: MongoDB is a NoSQL document database used for storing the application's data.
Mongoose provides an abstraction layer over MongoDB, allowing you to interact with the
database using JavaScript objects.

Other Technologies:

 JWT (Optional): The code snippet hints at the potential use of JSON Web Tokens (JWT) for
user authentication. JWTs are a secure way to represent a user's identity and can be used to
verify user authorization before processing requests.
 bcrypt (Optional): The code snippet includes bcryptjs, which suggests the use of password
hashing for secure storage of user passwords in the database. bcrypt is a popular library for
password hashing in Node.js applications.
 Express Middlewares: The code mentions middleware like express.json() and CORS
middleware. Middleware are functions executed at specific points in the request-response
cycle, allowing for functionalities like body parsing and Cross-Origin Resource Sharing
(CORS) configuration.

1. Models:

 Define a Mongoose schema for the Order model. This schema should include properties
like:

31
 o user_id: Stores the ID of the user who placed the order (references the User model).
o order_data: An array of objects containing details for each ordered food item (e.g.,
item ID, quantity, size, price).
o order_date: Timestamp of when the order was placed.
o order_status: String indicating the current status of the order (e.g., "pending",
"confirmed", "delivered").
 (Optional) Define a User model with properties like name, email, location, etc., if user
information is needed for the order.

2. Database Connectivity:

 Establish a connection to the MongoDB database using Mongoose.

 Utilize a connection string to specify the database location and credentials.
 Implement error handling to catch any connection issues.

3. Routes:

 Create a route to handle order placement requests (e.g., POST /api/orders).

 Within the route handler:
o Parse the request body to retrieve the order data (food items, quantities, etc.).
o Authenticate the user (if user ID is not provided in the order data). You might use
a JWT middleware for this.
o Retrieve the user ID from the authenticated user information.
o Create a new Order document with the retrieved data, including user_id,
order_data, and the current timestamp for order_date.
o Save the new order document to the database using Mongoose methods.
o Return a success or error message based on the operation.

4. Server Setup:

 Configure your Express server with necessary middleware like:

o Body parser to parse request bodies.
o CORS middleware to allow requests from the frontend application.
o (Optional) Authentication middleware to verify user identity before placing orders.
 Mount the order route (/api/orders) to the Express app.
32
  Start the server and listen on a chosen port.

5.3 Testing

Software testing is an essential process in ensuring the quality and reliability of software applications.
It involves a systematic approach to identify bugs, defects, and discrepancies between the expected
and actual behavior of the software. This guide explores various testing methodologies and their
applications.

1. Introduction

Software testing plays a crucial role in the software development lifecycle (SDLC). It helps to:

 Uncover Defects: Identify errors or bugs in the code that can lead to malfunctioning of the
software.
 Verify Requirements: Ensure the software meets the functional and non-functional
requirements specified for the project.
 Improve Usability: Evaluate the user interface (UI) and user experience (UX) to make the
software user-friendly.
 Reduce Risks: Mitigate potential risks associated with software releases by detecting issues
early on.
 Enhance Quality: Contribute to the overall quality, reliability, and performance of the
software.

2. Levels of Testing

Software testing can be categorized based on the level at which it is conducted:

 Unit Testing: The most granular level, focusing on individual units of code (e.g., functions,
modules). Unit tests are typically written by developers to ensure the correctness of their code
in isolation.
 Integration Testing: Tests how different units of code work together and interact with each
other. It verifies the functionality of integrated modules and ensures proper data flow between
them.

33
  System Testing: Tests the entire software application as a whole, simulating real-world
scenarios. System testing assesses the overall functionality, performance, and security of the
application.
 Acceptance Testing: Conducted by users or stakeholders to evaluate if the software meets
their acceptance criteria. It focuses on user requirements and ensures the application is fit for
its intended purpose.

3. White-Box Testing

White-box testing, also known as glass-box testing, involves testing the software with knowledge of
its internal structure and code. Testers have access to the source code and use their understanding of
the code's logic to design test cases.

White-Box Testing Techniques:

 Statement Coverage: Ensures all executable statements in the code are executed at least once
during testing.
 Branch Coverage: Tests all possible branches within conditional statements (e.g., if-else
statements).
 Decision Coverage: Verifies all possible combinations of conditions in decision points (e g.,
logical operators).
 Path Coverage: Executes all possible execution paths through the code.

Advantages of White-Box Testing:

 Thorough Testing: Can be very thorough due to the knowledge of internal workings.
 Uncover Complex Issues: Can identify logic errors and defects within the code itself.

Disadvantages of White-Box Testing:

 Time-Consuming: Requires significant time and effort to analyze the code and design test
cases.
 Maintenance Challenges: Test cases need to be updated frequently if the code undergoes
changes.
 Bias: Testers might focus on areas they understand better, neglecting less familiar parts.

34
4. Black-Box Testing

Black-box testing, also known as behavioral testing, focuses on testing the software's functionality
from an external perspective without knowledge of the internal code structure. Testers treat the
software as a black box and focus on inputs, outputs, and behavior.

Black-Box Testing Techniques:

 Equivalence Partitioning: Divides input values into valid and invalid partitions based on
equivalence criteria.
 Boundary Value Analysis: Tests input values at the edges or boundaries of valid and invalid
partitions.
 Error Guessing: Attempts to identify potential error conditions based on experience and
intuition.
 State Transition Testing: Tests the system's behavior under different states and the
transitions between them.

Advantages of Black-Box Testing:

 User-Centric Focus: Tests the software from the user's perspective, ensuring real-world
usability.
 Reusable Test Cases: Test cases are less dependent on code changes and can be reused for
different versions.
 Cost-Effective: Can be implemented with less effort compared to white-box testing.

Disadvantages of Black-Box Testing:

 Incomplete Coverage: May not uncover logic errors or defects hidden within the code.
 Limited Insight: Difficult to pinpoint the exact location of a bug without access to the code.

5. Integration Testing

Integration testing focuses on verifying the interaction and data exchange between different software
modules or components. It ensures that modules work together seamlessly to achieve the desired
functionality.

35
Integration Testing Techniques:

 Top-Down Integration: Starts by testing high-level modules and progressively integrating

lower-level modules one by one.
 Bottom-Up Integration:

a. Starts by testing low-level modules individually and then integrates them into larger
clusters, progressively building the entire system.
b. Advantages: Easier to isolate and debug issues in lower-level modules.
c. Disadvantages: May not uncover issues related to interactions between higher-level
modules.

Integration Testing Strategies:

 Big Bang Approach: Integrates all modules at once and tests the entire system as a whole.
 Advantages: Simple and quick to implement.
 Disadvantages: Difficult to isolate and pinpoint the source of bugs in a complex system.

Choosing the Right Integration Testing Approach:

The choice between top-down, bottom-up, or big bang approaches depends on factors like project
size, complexity, and risk tolerance. A hybrid approach combining elements of these methods might
be suitable for some projects.

6. Unit Testing

Unit testing is the foundation of software testing. It focuses on testing individual units of code,
typically functions, classes, or modules. Unit tests are written by developers to ensure the correctness
of their code in isolation from other parts of the application.

Benefits of Unit Testing:

 Early Bug Detection: Helps identify and fix defects early in the development cycle, leading
to lower overall testing costs.
 Improved Code Quality: Encourages developers to write clean, maintainable, and well-
structured code.
36
  Refactoring Confidence: Provides a safety net for code refactoring, allowing changes
without unintended side effects.
 Documentation: Well-written unit tests can serve as living documentation, explaining how
the code works.

Unit Testing Frameworks:

Popular frameworks like JUnit (Java), PHPUnit (PHP), and Jest (JavaScript) provide tools and
functionalities for writing and executing unit tests.

7. Functional Testing

Functional testing focuses on verifying if the software application behaves according to its defined
requirements and specifications. It ensures that the functionalities documented for the system work
as expected.

Functional Testing Techniques:

 Black-Box Testing Techniques: Techniques like equivalence partitioning, boundary value

analysis, and error guessing can be applied for functional testing from an external perspective.
 Use Case Testing: Tests the system based on use cases, which describe specific user
interactions and expected outcomes.
 Scenario Testing: Creates test cases that represent real-world scenarios and user flows
through the application.

8. Non-Functional Testing

Non-functional testing focuses on assessing the software's qualities beyond its core functionalities.
These qualities include:

 Performance Testing: Measures the application's performance aspects like speed, scalability,
and responsiveness under load.
 Usability Testing: Evaluates the user interface (UI) and user experience (UX) of the software
to ensure it is user-friendly and intuitive.

37
  Security Testing: Identifies vulnerabilities in the software that could be exploited by
attackers.
 Compatibility Testing: Ensures the software works correctly on different platforms,
operating systems, and browsers.

9. Regression Testing

Regression testing aims to ensure that existing functionalities are not broken after new features or
bug fixes are introduced. It involves re-running previously successful test cases to verify the overall
stability of the application.

Importance of Regression Testing:

 Reduces the risk of regressions, where fixing one issue introduces a new problem in another
part of the application.
 Increases confidence in code changes and new releases.
 Helps maintain the overall quality and stability of the software over time.

Regression Testing Techniques:

 Re-running existing test cases: Re-executing previously successful test cases after code
modifications.
 Prioritization: Focusing on high-risk areas or functionality most likely to be affected by
changes.
 Automated Regression Testing: Leveraging automated test scripts to reduce manual effort
and improve efficiency.

1. Identify Project Type and Goals:

 Web Application (DineDash Example): If you're working on a web application like

DineDash, your testing strategy will involve a combination of techniques.
 Mobile App: Mobile app testing might involve additional considerations for device
compatibility and touch interactions.
 Stand-alone program: For a desktop application, the focus might be on functionality and
user interface testing.

38
2. Start with Manual Testing:

 Manual testing is a great starting point, especially for smaller projects or if you're new to
testing. It involves manually stepping through the application and using its features from a
user's perspective.
 Develop Test Cases: Create a list of functionalities and scenarios you want to test. This helps
ensure systematic coverage of the application's features.

3. Utilize Black-Box Testing Techniques:

 Equivalence Partitioning: Divide inputs into valid and invalid categories and test with
representative values from each group.
 Boundary Value Analysis: Test inputs at the edges of valid and invalid ranges.
 Error Guessing: Think like a user and try to identify potential ways the application might
break or behave unexpectedly.

4. Leverage Automation for Efficiency (if applicable):

1. As your project grows and manual testing becomes time-consuming, consider automated
testing. There are frameworks available for various programming languages that allow you
to write scripts to automate repetitive tasks.
2. Start with Core Functionalities: Begin by automating tests for critical functionalities to
ensure their consistent behavior.
3. Choose the Right Tools: Research frameworks like JUnit (Java), PHPUnit (PHP), or Jest
(JavaScript) based on your project's technology stack.

5. Consider Additional Testing Types (if applicable):

 Performance Testing: If your application deals with high volumes of data or users, consider
tools to simulate load and measure performance.
 Security Testing: For applications handling sensitive data, explore security testing tools to
identify potential vulnerabilities.

39
 CHAPTER 6: IMPLEMENTATION (MODULES)
Building upon the discussions on technology stack and architecture in previous chapters, this chapter
delves into the modular breakdown of our DineDash-like application.

6.1. Modularization Approach

We adopted a functional decomposition approach to modularize the application. This means we

divided the application into modules based on distinct functionalities they handle. This approach
promotes better code organization, maintainability, and reusability.

6.2. User Interface Module Breakdown

The application consists of the following core frontend modules:

Module Name Description UI Components Technologies Used

Image, Name, Size Selection

Product Responsible for React components,
Dropdown, Quantity
Listing displaying individual food Bootstrap classes for
Selection Dropdown, "Add to
Module items in a card format. styling
Cart" Button
Carousel container, individual
Creates a rotating image React components,
Carousel slides displaying images,
carousel showcasing Bootstrap carousel
Module navigation buttons
featured items. component
(Previous/Next)
(Not directly responsible for
Cart Manages the application's React Context API,
UI, but indirectly affects the
Management shopping cart state (items, reducer function for
"My Cart" section and cart
Module quantities, prices). state management
item badge display)
Brand logo, Navigation links
Implements the navigation ("Home", "My Orders" React components,
Navigation
bar with links and user conditionally), Login/Signup Bootstrap classes for
Module
interaction elements. buttons, "My Cart" button styling
with badge, Logout button
Renders a basic footer
Text elements for copyright React components,
section with copyright
Footer Module and social media links (icons Bootstrap classes for
information and social
potentially included) styling (optional)
media link placeholders.
React, potentially
Allows users to search for Home (Search functionality additional libraries
Search Bar
specific food items. within) for styling (e.g.,
Bootstrap)
40
 React, potentially
Food Category Displays various food
Home Bootstrap or custom
Listing categories available.
CSS for layout
Represents an individual
food item with details like React, potentially
Food Item
name, image, price, size Card, Home Bootstrap or custom
Card
options, and potentially an CSS for styling
"Add to Cart" button.
React, potentially
Allows users to enter Bootstrap or custom
Login/Signup
credentials to log in or Login, Signup CSS for layout,
Form
signup. Form validation
libraries (optional)
Displays a user's past React, potentially
Order History
order details (date, items, MyOrder Bootstrap or custom
List
price). CSS for layout

Table vi: UI Module Breakdown

Component Structure and State Management:

 DineDash utilizes React components to build the user interface. Each component is a reusable
piece of UI logic written in JSX (JavaScript XML).
 Components can be nested to create complex UIs.
 React's useState hook allows components to manage their internal state. This state can be data
displayed in the UI or user interactions.

Example (Search Bar ):

The Home component likely has a SearchBar component for users to search for food items. This
SearchBar component might have a state variable to hold the current search query (useState('')). The
component would also have an event handler function to update the state whenever the user types in
the search bar (onChange event).

return (
<div key={category._id} className='row mb-3'>
<div className='col-12'>
<div className='category-container'>
<div className='fs-3 m-3'>
{category.CategoryName}
</div>

41
 <div className='row'>
{categoryContent}
</div>
</div>
</div>
</div>
);
});
}

The code simulates a function display_category that takes a dictionary-like object category as input
and displays the category name and content. The category content is assumed to be a list of items.

Here's a breakdown of the code:

1. Function Definition:
o The code defines a function display_category that takes a category argument.
2. Printing Category Name:
o Inside the function, it prints the value of the key CategoryName from the category
dictionary.
3. Printing Category Content:
o It then prints "Category Content:".
o It iterates over the categoryContent list (assuming it exists within the category
dictionary) and prints each item with a hyphen (-) prefix.

Example Usage:

 An example dictionary category is created with keys CategoryName and categoryContent.

 The display_category function is called with the category dictionary as an argument.

2. Data Fetching and Display:

 Components can fetch data from the backend API using the useEffect hook and the Fetch API.
 The fetched data is typically stored in the component's state (useState).
 The component then uses the state data to populate the UI elements (e.g., displaying food
categories or items).

Example (Food Category Listing ):

42
 const loadData = async () => {
try {
const response = await fetch("http://localhost:5000/api/foodData", {
method: "POST",
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json();
setFoodItem(data[0]);
setFoodCat(data[1]);
} catch (error) {
console.error("Error fetching data:", error);
}
}
useEffect(() => {
loadData();
}, []);

let content;
if (foodCat.length !== 0) {
content = foodCat.map((category) => {
const filteredItems = foodItem.filter(item => (item.CategoryName ===
category.CategoryName) &&(item.name.toLowerCase().includes(search.toLowerCase())))
const categoryContent = filteredItems.length !== 0 ? (
filteredItems.map((item) => (
<div key={item._id} className='col-12 col-md-6 col-lg-3 mb-3'>
<Card foodItem={item}
options={item.options[0]}

></Card>
</div>
))
) : (
<div key={category._id}>No Such Data Found</div>
);

Function loadData:

 This function fetches data asynchronously using async/await.

 It tries to:
o Fetch data from "http://localhost:5000/api/foodData" using a POST request.
o Sets headers to specify JSON content type.

43
  It then parses the response as JSON and stores the first element in setFoodItem (likely an
item) and the second element in setFoodCat (likely a category).
 If there's an error, it logs it to the console.

useEffect Hook:

 This hook runs the loadData function only once after the component mounts (empty
dependency array []).

Conditional Rendering:

 A variable content is declared.

 It checks if foodCat has any elements.
 If foodCat has elements:
o It maps through each category (category) in foodCat.
 For each category, it filters foodItem based on matching category name and
search term (converted to lowercase).
 If there are filtered items:
 It maps through the filtered items and creates a card component
(<Card>) for each item using the item data and options.
 If no items are filtered:
 It displays a message "No Such Data Found" for that category.

Overall, this code fetches data, stores it in state variables, and conditionally renders category
content based on the fetched data and a search term.

The Home component might have a separate section to display food categories. This section likely
utilizes a useEffect hook to fetch categories data from a backend endpoint (e.g., /categories). Once
fetched, the data is stored in the component's state (useState). The component then iterates through
the categories data and renders them visually on the screen (e.g., using a list or grid layout).

3. User Interaction and Event Handling:

44
  React components can respond to user interactions using event listeners attached to DOM
elements (e.g., buttons, input fields).
 Event handlers are typically functions that update the component's state or trigger actions
based on the user interaction.

Example (Food Item Card):

The FoodItemCard component likely receives food item data as props. It might display the item's
name, image, and price. The component could also have a button for adding the item to the cart.
Clicking this button would trigger an event handler function within the component. This function
might update the cart state in the parent component (e.g., Home component) or dispatch an event to
signal the addition of the item.

if (food !== 0) {
if (food.size === size) {
await dispatch({ type: "UPDATE", id: props.foodItem._id, price:
finalPrice, qty: qty })
return
}
else if (food.size !== size) {
await dispatch({ type: "ADD", id: props.foodItem._id, name:
props.foodItem.name, price: finalPrice, qty: qty, size: size,img: props.ImgSrc })
console.log("Size different so simply ADD one more to the list")
return
}
return
}

await dispatch({ type: "ADD", id: props.oodItem._id, name:

props.foodItem.name, price: finalPrice, qty: qty, size: size })

6.3 Back-End Module Breakdown

The application consists of the following core backend modules:

Module Technologies Inputs & API Reference (if

Description
Name Used Outputs applicable)

45
 Handles user
Node.js User
registration, login, POST /api/users
User (Express), credentials,
authentication, and (register), POST
Management Mongoose registration
profile management /api/users/login (login)
(MongoDB) data
functionalities.

Processes order
Node.js Order data POST /api/orders (place
placement, retrieval,
Order (Express), (items, order), GET
cancellation, and
Management Mongoose quantities, /api/orders/:orderId (get
management
(MongoDB) user ID) order details)
functionalities.

Table vii: Backend Module Breakdown

Backend (Node.js with Express):

1. API Endpoints and Data Model:

 The DineDash backend likely uses a Node.js server with the Express framework to define API
endpoints.
 These endpoints act as interfaces for the frontend components to interact with the backend
data and functionalities.
 The backend likely uses a database (e.g., MongoDB) to store application data like food items,
users, and orders. Mongoose is a popular library used with MongoDB for defining data models
and interacting with the database.

Example (API Endpoint for Food Categories ):

A backend API endpoint might be defined to serve a list of available food categories. This endpoint
would likely be a GET request handler (router.get('/categories')). The handler logic would potentially
retrieve distinct category names from the food item collection in the database and send them back to
the frontend component in JSON format (res.json(categories)).

router.post('/foodData',(req,res)=>{
try {
res.send([global.food_items,global.foodCategory])

}catch(error){
console.error(error.message);
res.send("Server Error")

46
 }
})

This code snippet defines a route handler for the Express.js router object. Let's break it down:

 Route Definition:
o router.post('/foodData', (req, res) => {...}): This line defines a route handler for the
POST request on the path /foodData.
o When a POST request is made to this path, the provided function will be executed.
o The function receives two arguments: req (request object) and res (response object).
 Data Sending:
o Inside the function, it tries (using try...catch) to send data as a response.
o It sends an array containing two elements:
 global.food_items: This likely refers to a global variable containing an array
of food items.
 global.foodCategory: This likely refers to a global variable containing an array
of food categories.
o res.send() is used to send the data back to the client (the code that made the POST
request).

Example (API Endpoint for Order):

router.post('/orderData', async (req, res) => {

let data = req.body.order_data
await data.splice(0,0,{Order_date:req.body.order_date})
console.log("1231242343242354",req.body.email)
let eId = await Order.findOne({ 'email': req.body.email })
console.log(eId)
if (eId===null) {
try {
console.log(data)
console.log("1231242343242354",req.body.email)
await Order.create({
email: req.body.email,
order_data:[data]
}).then(() => {
res.json({ success: true })
})
} catch (error) {
47
 console.log(error.message)
res.send("Server Error", error.message)

}
}
else {
try {
await Order.findOneAndUpdate({email:req.body.email},
{ $push:{order_data: data} }).then(() => {
res.json({ success: true })
})
} catch (error) {
console.log(error.message)
res.send("Server Error", error.message)
}
}
})

This code snippet defines a route handler for the Express.js router object that processes order data.
Here's a breakdown:

Route Definition:

 router.post('/orderData', async (req, res) => {...}): This line defines a route handler for the
POST request on the path /orderData.

Request Data Access:

 It retrieves the order_data from the request body using req.body.order_data.

Prepending Order Date:

 It uses async/await syntax.

 It prepends an object containing Order_date (likely retrieved from req.body.order_date) to the
beginning of the data array using data.splice(0, 0, {...}).

Email Check:

 It logs the user's email (req.body.email) for debugging purposes.

 It attempts to find an existing order document using Order.findOne({ 'email': req.body.email
}).
48
  It logs the resulting document (eId).

Order Creation (New User):

 If eId is null (no existing order for the email), it creates a new order document using
Order.create().
o The new order document contains the user's email and the order_data array.
o On successful creation, it sends a JSON response with { success: true } to the client.

Order Update (Existing User):

 If eId exists (existing order for the email), it updates the order document using
Order.findOneAndUpdate().
o It updates the order document matching the email (req.body.email).
o It uses the $push operator to add the data array to the order_data field in the existing
document.
o On successful update, it sends a JSON response with { success: true } to the client.

2. User Authentication and Authorization (Simplified):

 DineDash might implement user authentication using a mechanism like JWT (JSON Web
Tokens).
 Users would log in with their credentials, and upon successful verification, the backend would
generate a JWT token and send it back to the user.
 Subsequent requests from the user's frontend components would include this token in the
authorization header for verification before processing the request.

Note: This is a simplified explanation of user authentication. Real-world implementations involve

additional security measures like secure password hashing and token management.

router.post("/createUser", [
body('email').isEmail(),
body('name').isLength({min:5}),
body('password','Incorrect Password').isLength({min:5})],
async (req, res) => {
const errors=validationResult(req);
if(!errors.isEmpty()){

49
 return res.status(400).json({errors:errors.array()});
}

const salt=await bcrypt.genSalt(10);

let secPassword=await bcrypt.hash(req.body.password,salt)
try {
// console.log(req.body);
await User.create({

name: req.body.name,
password: secPassword,
email:req.body.email,
location: req.body.location
}).then(res.json({ success: true }));
} catch (error) {
console.error(error);
res.json({ success: false });
}
});

router.post(
"/loginuser",
[
body("email", "Incorrect email pattern").isEmail(),
body(
"password",
"Password length must be equal to or greater than 5"
).isLength({ min: 5 }),
],
async (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
let email = req.body.email;

try {
let userData = await User.findOne({ email });
if (!userData) {
return res
.status(400)
.json({ error: "Incorrect email, try logging in with a different email"
});
}

50
 const pwdCompare=await bcrypt.compare(req.body.password,userData.password)
if (!pwdCompare) {
return res
.status(400)
.json({ error: "Incorrect Password " });
}

const data={
user:{
id:userData.id
}
}
const authToken=jwt.sign(data,jwtSecret)
res.json({ success: true ,authToken});
} catch (error) {
console.error(error);
res.json({ success: false });
}
}
);

3. Server Setup

Here's a breakdown of the theory behind setting up a server in Express:

 Express.js: A web framework built on top of Node.js that simplifies building web
applications and APIs. It provides a clean and flexible way to handle HTTP requests and
responses.
 Node.js: An open-source, cross-platform JavaScript runtime environment that executes
JavaScript code outside of a web browser. It's event-driven and non-blocking, making it
efficient for handling concurrent connections.
 HTTP Requests and Responses: The foundation of communication between a web client
(browser) and a web server. Requests contain information about what the client wants from
the server (e.g., accessing a specific webpage), and responses contain the data sent back by
the server.
 Routes: Define the URLs that the server will respond to. Different routes can handle different
types of requests (GET, POST, etc.) and perform specific actions based on the requested URL.
 Middleware: Functions that are executed in sequence for every incoming request. They can
be used for various purposes like logging requests, parsing data, handling authentication, etc.

51
Setting Up an Express Server:

1. Project Initialization:
o Create a project directory and initialize a package.json file using npm init or yarn init.
2. Install Express:
o Install the Express module using npm install express or yarn add express.
3. Create the Express App:
o Import Express using const express = require('express') and create an app instance
using const app = express().
4. Define Routes:
o Use methods like app.get(), app.post(), etc., to define routes that handle different
HTTP verbs (GET, POST, etc.) for specific URLs. Each route handler function takes
two arguments: req (request object) and res (response object).
5. Handle Requests and Responses:
o Inside the route handler, use req to access information about the request (e.g., URL
parameters, headers, body data) and res to send responses back to the client. You can
use methods like res.send(), res.json(), etc., to send different types of data (text, JSON,
etc.).
6. Start the Server:
o Use the app.listen() method to start the server and specify the port on which it will
listen for incoming requests.

const express = require('express');

const app = express();
const port = 5000;
var routes = require('./routes/createUser')
require('./db')

app.use((req, res, next) => {

res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
app.use(express.urlencoded({ extended: true }));

52
app.get('/', (req, res) => {
res.send("Hello World")
});

app.use(express.json());
app.use('/api',require("./routes/createUser"));
app.use('/api',require("./routes/displayData"));
app.use('/api',require("./routes/OrderData"));
app.use('/', routes);

app.listen(port, () => {
console.log(`App listening on port ${port}`)
});

4. Data Validation and Error Handling:

 It's crucial to implement data validation on both the frontend and backend to ensure data
integrity.
 Frontend components can validate user input before sending it to the backend.
 The backend API endpoints should also validate received data to prevent invalid or malicious
data from entering the system.
 Error handling mechanisms should be implemented to gracefully handle unexpected situations
and provide informative messages to the user.

53
 CHAPTER 7: TESTING (TEST CASES)

This document outlines detailed test cases for the DineDash food delivery application, covering
functionalities like user interface (UI), data fetching, and additional features. These test cases are
designed to ensure the app functions as intended and delivers a smooth user experience.

7.1 User Interface (UI) Tests

Test Case 1: Login Functionality Description: Verify that a user can successfully log in with valid
credentials (email and password), and handle various scenarios.

 Steps:
1. Navigate to the Login page.
2. Enter a valid, registered email address in the email field. (Positive test)
3. Enter the corresponding password associated with the email in the password field.
(Positive test)
4. Click the Login button.
o Expected Result: The user should be redirected to the Home page after successful
login.
 Additional Test Cases:
o Invalid Email: Enter an unregistered email address. (Negative test)
 Expected Result: The application should display an error message indicating
"Invalid email address."
o Incorrect Password: Enter an incorrect password for the registered email. (Negative
test)
 Expected Result: The application should display an error message indicating
"Invalid password."
o Empty Fields: Leave both email and password fields empty. (Negative test)
 Expected Result: The application should display error messages indicating
"Please enter email address" and "Please enter password."

Test Case 2: Search Functionality

54
  Description: Verify that the search bar functionality works correctly for various search terms
and filters.
 Steps:
1. Navigate to the Home page.
2. Enter a search term for a specific food item (e.g., "pizza") in the search bar. (Positive
test)
3. Click the search button or press Enter.
o Expected Result: The application should display search results that match the entered
term, including food items with matching names or descriptions.

4. (Optional) Refine the search using additional filters provided by the app (e.g., cuisine
type, dietary restrictions). (Positive test)
 Expected Result: The search results should be further narrowed down based
on the applied filters.
5. Enter a search term that yields no results (e.g., "rare dish"). (Negative test)
 Expected Result: The application should display a message indicating "No
results found" or offer suggestions for similar searches.

Test Case 3: Food Item Details

 Description: Verify that clicking on a food item card displays its details comprehensively.
 Steps:
1. Navigate to the Home page.
2. Click on a food item card. (Positive test)
o Expected Result: The application should display a detailed view of the selected food
item, including:
 Name
 High-quality image
 Price
 Detailed description
 Size options (if applicable)
 Nutritional information (optional)
 Reviews and ratings (optional)
 Add to Cart button
55
7.2 Data Fetching Tests

Test Case 4: Food Category Listing

 Description: Verify that the application fetches and displays available food categories
efficiently and handles network issues.
 Steps:
1. Navigate to the Home page.
2. Wait for the page to load completely, with a reasonable loading indicator displayed
initially. (Positive test)
o Expected Result: The application should display a list of available food categories,
with clear and concise labels.

3. Simulate a slow internet connection or network outage. (Negative test)

 Expected Result: The application should display an appropriate error message
or a loading indicator until the data is retrieved successfully.

Test Case 5: Order History

 Description: Verify that a logged-in user can view their past order history with detailed
information.
 Steps:
1. Login with a valid user account that has placed at least one order. (Prerequisite)
2. Navigate to the My Orders page.
3. Wait for the page to load completely. (Positive test)
o Expected Result: The application should display a list of the user's past orders,
including:
 Order date and time
 Ordered items (name, quantity, price) with clear thumbnails
 Total price of the order
 Order status (placed, confirmed, delivered, canceled) - with visual indicators
 Option to re-order past items (optional)

56
7.3 Additional Test Cases:

 You can create additional test cases to cover functionalities like adding items to cart, checkout
process, user signup, error handling scenarios (invalid login, empty search), and responsive
design across different devices.

57
 CHAPTER 8: SCREENSHOTS

1. How the web app appears initially without login?

Fig x: Home screen before login

2. Login screen

Fig xi: Login screen

3. Signup screen

Fig xii: Signup screen

58
4. Incorrect Login attempt

Fig xiii: Login Error

5. Screen after login or signup

Fig xiv: Home after login or signup

6. Carousel

Fig xv: Carousel

59
7. Search Component

Fig xvi: Search Component

8. Card Component

Fig xvii: Card Component

9. My Cart

Fig xviii: My Cart

60
10. Empty cart

Fig xix: Empty Cart

11. How search works?

Fig xx: How search works?

12. Footer Component

Fig xxi: Footer Component

13. Add to cart button

Fig xxii: Add to Cart Button

61
14. My orders

Fig xxiii: My Orders

15. Food Category Database

Fig xxiv: Food Category

16. Orders Database

Fig xxv: Orders

62
17. FoodItems Database

Fig xxvi: FoodItems

18. Users Database

Fig xxvii: Users

63
 CHAPTER 9: CONCLUSIONS AND FUTURE SCOPE

9.1 DineDash: A Food Delivery App Built with MERN

DineDash is a user-friendly food delivery application built to connect users with restaurants. Users
can browse menus, place orders, and track deliveries in real-time, all within a convenient mobile
interface.

Key Features:

 Seamless User Experience: Registration, login, and profile management allow for a
personalized experience.
 Extensive Restaurant Selection: Browse a variety of restaurants, filter by preferences, and
explore detailed menus.
 Effortless Ordering: Add items, choose a payment method, and place orders with ease.
 Live Order Tracking: Track your order's progress and receive estimated delivery times.
 Optional Admin Panel: Manage restaurants, menus, user accounts, and orders for efficient
operations (if implemented).

Benefits of DineDash:

 Convenience: DineDash simplifies the food ordering process, offering a user-friendly

platform from browsing to delivery.
 Choice: Explore a diverse range of restaurants and menus, catering to various preferences.
 Transparency: Real-time order tracking keeps users informed and eliminates delivery
uncertainty.

9.2 Future Enhancements:

 Payment Integration: Secure payment gateways like Stripe or PayPal will streamline the
checkout process.
 Real-Time Chat: Direct communication with restaurants allows for order clarification and
special requests.
 Delivery Partner Network: Partnering with delivery services can expand reach and ensure
timely deliveries.
64
 Push Notifications: Stay informed about order status updates, promotions, and exclusive
offers.
 AI-Powered Recommendations: Personalized suggestions based on past orders and
preferences enhance user experience.
 Loyalty Programs: Reward repeat customers with points or discounts to incentivize
continued use.

65
 CHAPTER 10: REFERENCES

I. MERN Stack Technologies

 MongoDB: https://www.mongodb.com/docs/ , https://www.mongodb.com/docs/manual/

 Express.js: https://expressjs.com/ ,

https://medium.com/@haybams/build-a-restful-api-with-node-js-and-express-js

 React.js: https://legacy.reactjs.org/docs/getting-started.html,

https://legacy.reactjs.org/docs/create-a-new-react-app.html

 Node.js: https://nodejs.org/en/download , https://www.w3schools.com/nodejs/

II. Food Delivery App Development

 Best Practices for Building Food Delivery Apps: https://www.fatbit.com/mobile-

application-development.html - Authored by FATbit Technologies
 Designing a User-Friendly Food Delivery App: https://kreatifbeats.com/2022/10/13/ui-ux-
design-for-user-engagement-of-food-delivery-applications/ - Resource by Interaction Design
Foundation

III. User Experience (UX) and Trends

 The Importance of User Experience in Food Delivery Apps:

https://medium.com/@ademolaadeleke00/ux-case-study-on-a-food-delivery-mobile-app-
e6ae68926a1f - Authored by Cuzegbu

IV. Additional Resources

 MERN Stack Development Tutorials: https://github.com/YuriSpiridonov/fullstackopen -

Full Stack Open 2023 course repository
 Open-Source Food Delivery App Templates: https://github.com/topics/food-ordering-
system - Explore various open-source projects on GitHub

66
67