Food Ordering Web Application

Major project report submitted in partial fulfilment of the

requirement for the degree of Bachelor of Technology

in

Information Technology

By

ATISHYA JAIN (191511)

UNDER THE SUPERVISON OF

Dr.Vikas Baghel,

Dr.Monika Bharti

Department of Computer Science & Engineering and Information

Technology

Jaypee University of Information Technology, Waknaghat, 173234,

Himachal Pradesh, INDIA
 CERTIFICATE

This is to certify that the work which is being presented in the internship report titled “Food Ordering
Web Application” in partial fulfilment of the requirements for the award of the degree of B.Tech in
Information Technology and submitted to the Department of Information Technology, Jaypee
University of Information Technology, Waknaghat, is an authentic record of work carried out by
Atishya Jain during the said period; February 2022 – till date, ensuring proper care towards the rules
and regulations as specified by the Non-Disclosure Agreement signed between

Atishya Jain and Cognizant, Niveditha CM dated 7 february, 2023.

Atishya Jain
191511

Jaypee University of Information Technology Waknaghat, Solan, H.P.

The above statement made is correct to the best of our knowledge.

(Coach: Niveditha,CM(HR-GenC , Cognizant)

Supervisor: Dr Vikas Baghel (Assistant Professsor, SG)

Co-supervisor: Dr Monika Bharti (Assistant Professsor, SG)
Jaypee University of Information Technology, Solan

I
 CANDIDATE’S DECLARATION

I hereby declare that the work presented in this report entitled “Food Ordering Web Application”
in partial fulfillment of the requirements for the award of the degree of Bachelor of Technology in
Computer Science and Engineering/Information Technology submitted in the department of
Computer Science & Engineering and Information Technology, Jaypee University of Information
Technology Waknaghat is an authentic record of my own work carried out over a period from Feb
2023 to May 2023 under the supervision of Dr.Vikas Baghel and Dr. Monika Bharti.

The matter embodied in the report has not been submitted for the award of any other degree or
diploma.

(Student Signature)
Atishya Jain (191511)

This is to certify that the above statement made by the candidate is true to the best of my knowledge.

(Supervisor Signature) (Co-Supervisor Signature)

Dr.Vikas Baghel Dr.Monika Bharti
Designation: Assistant Professor(SG) Designation: Assistant Professor(SG)
Department: ECE Department: CSE
Dated:10/05/2023 Dated:10/05/2023

II
PLAGIARISM CERTIFICATE

III
 AKCNOWLEDGEMENT

Firstly, I express my heartiest thanks and gratefulness to almighty God for His divine blessing makes
us possible to complete the project work successfully.

This is a matter of pleasure for me to acknowledge my deep sense of gratitude to my college, Jaypee
University of Information Technology for giving me an opportunity to explore my abilities via this
internship program. I would like to express my sincere gratitude to our Training and Placement
officer, Mr. Pankaj Kumar and our faculty Coordinator, Dr. Nafis U Khan for this opportunity. I also
wish to express my gratitude to my internship supervisors, for their valuable guidance and advice
towards my internship.

I would like to record my sincere appreciation and gratitude towards all the officials, coaches, trainers,
mentors and employees of Cognizant, without whose kind assistance, my internship program would
not have been proceeding in a swift direction. The facts and other vital information provided by them
have contributed towards making this report as comprehensive as possible. I am indeed thankful to
them.

I would also generously welcome each one of those individuals who have helped me straightforwardly
or in a roundabout way in making this project a win. In this unique situation, I might want to thank
the various staff individuals, both educating and non-instructing, which have developed their
convenient help and facilitated my undertaking.

Finally, I must acknowledge with due respect the constant support and patients of my parents.

Atishya Jain
191511

IV
 TABLE OF CONTENTS

Title Page Number

Certificate I

Candidate’s Declaration II

Plagiarism Certificate III

Acknowledgment IV

List of Abbreviations VI

List of Figures VII-VIII

List of Tables IX

Abstract X

Chapter - 1 - Introduction 1

Chapter - 2 - Literature Survey 9

Chapter - 3- System Analysis

12

Chapter - 4 Performance Analysis 31

Chapter - 5 Conclusion 51

References 55

Appendices 57
 LIST OF ABBREVIATIONS
Abbreviations Definition

UI User Interface

API Application Programming Interface

CRUD Create, Read, Update, Delete

JWT JSON Web Token

HTML Hypertext Markup Language

CSS Cascading Style Sheets

HTTP Hypertext Transfer Protocol

HTTPS Hypertext Transfer Protocol Secure

SQL Structured Query Language

NoSQL Not Only SQL

IDE Integrated Development Environment

CLI Command Line Interface

MVC Model-View-Controller

SPA Single Page Application

RxJS Reactive Extensions for JavaScript

JSON JavaScript Object Notation

UI/UX User Interface/User Experience

SSO Single Sign-On

CDN Content Delivery Network

AWS Amazon Web Services

VI
 LIST OF FIGURES

Figures Name Page No.

Fig 3.1.1a Frontend Runs on localhost:4200 11

Fig 3.1.1b Backend Runs on localhost:5000 11

Fig 3.1.3 Schematic diagram 16

Fig 3.1.4a Flow chart 17

Fig 3.1.4b Customer Flow chart 18

Fig 3.1.5 Database Design for web application to 19

order food from fresh palette café.

Fig 3.1.6 Used case diagram 19

Fig 3.2.2.1 Property Versions 21

Fig 3.2.2.3 Dev dependencies included in project 22

Fig 3.3 Version of Angular Framework used 23

Fig 3.6 TypeScript configuration 24

Fig 3.5.1.1 Login Layout 25

Fig 3.5.1.8 Menu Display 26

Fig 3.5.1.9 Search sample 27

Fig 3.5.1.10 Cart Page 27

Fig 4.2.1.1 User Model 31

VII
Fig 4.2.1.2 Food Model 31

Fig 4.2.1.3 Cart and CartItem Model 31

Fig 4.2.2.1 User Service 33

Fig 4.2.2.2 Food Service 33

Fig 4.2.2.3 Cart Service 34

Fig 4.2.3.1 User data stored 37

Fig 4.2.3.2 Food Item Details 37

Fig 4.2.4 API and backend setup 38

Fig 4.2.5 App Module 38

Fig 4.3.1a Home Page 39

Fig 4.3.1b Successful Login Popup 39

Fig 4.3.1c User Profile 41

Fig 4.3.2a Login Failed Popup 44

Fig 4.3.2b Login Empty Warning Popup 45

Fig 4.4.1 Home Page 45

Fig 4.4.2 Login Page 46

Fig 4.4.3 Cart Page 46

Fig 4.4.4 Search Page 47

VIII
 LIST OF TABLES

Table Name Page no.

Table 2.1 Literature survey 8

IX
 ABSTRACT
Today's technology has revolutionized the food industry with the introduction of web applications
that allow customers to order meals online from the comfort of their own homes. For Fresh Palette
café, known for their delicious and healthy meals, an Angular web application has been developed to
simplify the ordering process for their customers. The goal of this project is to provide an enjoyable
dining experience by offering a convenient and straightforward way of ordering meals, while also
benefiting the restaurant owners with seamless organization of orders.

Starting with a study to identify the needs of our customers, we followed a deliberate and iterative
process to create a web application for ordering food from the Fresh Palette Cafe website. The design
and structure phase led us to select Angular as the ideal development framework due to its reliability
and straightforwardness. The Model-View-Controller (MVC) architecture and Single Page
Application (SPA) design of the website combine industry-standard best practises to achieve
optimum speed and user experience.

To guarantee that it fulfils the needs and expectations of our target audience, the website combines a
variety of technologies and tools, including HTML, CSS, JavaScript, RxJS, JSON, and SQL.
Customers may simply browse menus, read dish descriptions and prices, and make orders in just a
few easy steps thanks to the website's user-friendly (UI) design. Additionally, the website offers a
variety of personalization options that let users tailor their orders to their preferences.

User input and usability testing were used throughout the development process to make sure the
website satisfies the requirements and expectations of our target audience. The final result is a
dependable, effective, and user-friendly platform that streamlines the ordering process for both
consumers and restaurant owners and offers a seamless eating experience for everyone.

In conclusion, the creation of a web application to order food from fresh palette cafe website for Fresh
Palette Café using Angular is a significant advancement for the food business as it gives clients a
quick and easy option to buy meals online while also improving the whole eating experience. The
project also emphasises the value of security and speed optimisation in contemporary web
development as well as the adaptability and durability of Angular as a development framework

X
CHAPTER -1 INTRODUCTION

1.1 Introduction
The main objective of this project is to create a smooth, user-friendly web application that will enable
consumers to quickly and easily order meals from the Fresh Palette Cafe system. Customers may
browse menus, pick meals, personalise their orders, and make payments online thanks to the website's
user-friendly design. We intend to enhance the ordering procedure for patrons and restaurant
proprietors while also enhancing the entire eating experience by offering an online platform..

The food business is one of the biggest and most varied economic sectors, encompassing anything
from fast food chains to fine dining establishments. For foodies who like to eat their favourite dishes
without ever leaving the comfort of their homes, we offer an online food ordering service. The website
is designed to be user-friendly for a wide range of users, including busy professionals, families, and
tech-savvy millennials. The need for effective and user-friendly web apps to acquire food from fresh
palette café systems that are available from anywhere, at any time, has increased due to the popularity
of online shopping and the accessibility of mobile devices.

To address this demand, we created a web application using the Angular development framework
that enables visitors to order meals from the fresh palette café website.A strong basis for creating
dynamic and responsive web apps is provided by the well-known JavaScript framework Angular.
Dependency injection, two-way data binding, and a robust template system are just a few of the many
features and capabilities it provides.

These features make Angular a fantastic choice for developing complex online apps, such a website
for placing food orders. The flexible and scalable architecture of Angular also enables developers to
create reusable components and modules, reducing the time and expense required for development.
In-depth information on the requirements analysis, design and architecture, implementation, testing,
deployment, and maintenance of our web application for ordering meals from the fresh palette cafe
website will be provided in this project report. We intend to draw a large audience of customers and
boost the exposure and profitability of participating businesses by offering a quick and easy substitute
for purchasing food online.

1
We will also discuss the website's benefits and drawbacks as well as potential modifications that may
be done in the future to enhance its usability. We'll talk about the skills and knowledge we gained
through building a difficult web application using Angular and how we may utilise them in future
work. The primary elements of the website will be covered, including order tracking, payment
processing, and user interface design. We will provide code snippets and screenshots of the website
as it develops in addition to test results and any defects found during testing.

We anticipate that this initiative will be a valuable tool for companies and organisations in the food
sector and that it will promote more innovation and development in this quickly growing sector.
Overall, this project is an outstanding example of how Angular can be used to create cutting-edge
online applications for purchasing meals from Fresh Palette Cafe's website.

1.2 Problem Statement

Due to COVID-19 outbreak a reliable and efficient system for placing food orders is needed, one that
enables customers to do so online and make secure payments. Certainly. The problem statement
outlines the issue or challenge that the initiative aims to resolve. The problem in this situation is the
typical way of ordering meals in a restaurant, which may be time-consuming and unproductive,
especially during busy hours. Additionally, the COVID-19 pandemic has compelled restaurants to
adopt contactless ordering and payment procedures in order to safeguard the safety of customers and
staff.

Going in person, perusing the menu, and putting your order with the server is the traditional way to
order at a restaurant. However, this process could be time-consuming and unsuccessful, especially if
restaurants are busy at the time.

Due to the pandemic, more people are deciding to use online ordering and delivery services, which
has fundamentally altered the food industry. If they want to remain competitive, restaurants must
provide customers a quick and simple way to order food online.

However, developing a web application to purchase meals from the fresh palette cafe website may be
a challenging and complex process since it requires a range of technical skills and knowledge. Thus,

2
the issue description underlines the need for a stable and efficient web application that enables
customers to place orders online and make safe payments for meals from Fresh Palette Cafe.

1.3 Objectives

1. Using Angular, create a web application that allows users to order meals from the
fresh palette café website: The main objective of this project is to design and build a
meal ordering website using Angular. The creation of complex and scalable web
programmes is possible thanks to the front-end programming framework Angular, which
is well-liked and dependable. Angular may be used to create a responsive and user-
friendly website that gives users a simple method to place food orders.

2. Make a web application with Angular that enables customers to place orders for food
from the fresh palette café web application: The main objective of this project is to
design and build a meal ordering web application using Angular. The creation of complex
and scalable web programmes is possible thanks to the front-end programming framework
Angular, which is well-liked and dependable. Angular may be used to create a responsive
and user-friendly web application that gives users a simple method to place food orders.
.

3. Use user feedback and usability testing throughout the development process: To
guarantee a user-friendly and effective web application, take into consideration user
feedback and usability testing at every level of the development process. Throughout the
development process, user feedback must be gathered in order to adjust the web
application towards this goal. Usability testing includes evaluating the usability of the web
application and determining its weak points.

4. Optimize the website for performance and scalability: For the website to handle large
visitor levels during peak hours, performance and scalability optimisations must be made.
Utilising recommended practises for web development, including image optimisation,
page load time optimisation, and cache implementation, is necessary to achieve this goal.

3
 The project's overall objectives are to utilise Angular to create a robust, scalable, and user-
friendly online application for food ordering from the fresh palette cafe website that enables
simple and efficient ordering for customers and streamlines the ordering process for restaurant
owners.

1.4 Scope
.
1. Technologies: The following technologies will be used in the development of the web
application for ordering meals from the fresh palette café website:
MongoDB for database administration.
Node.js and Express for server-side development;
Angular for front-end development;
Stripe for payment processing.

2. Testing and Evaluation: A mix of automated testing, human testing, and usability testing
will be utilised in the testing and assessment process to ensure that the web application to
purchase meals from the fresh palette cafe website is user-friendly, efficient, and secure.

3. Timeline and Products:: The project plan will comprise the project timetable and the
agreed-upon deliverables. Every stage of the development process will have specific
deliverables, and a set timetable will be followed while creating the online web application
to purchase food from the fresh palette cafe platform.

4. Features and Functionality: The website for ordering food will have the following
options and features:
User login and registration;
menu browsing and ordering;
customization options;
payment processing and confirmation;
order tracking and history;
contact and feedback forms
5. Development Process: The creation of the web application to order food from fresh
palette cafe website will adhere to the Agile technique, which entails incremental and
iterative development, frequent testing, and ongoing stakeholder feedback.

4
 6. Target Audience: The general objective of this project is to design, build, test, and
evaluate a web application to purchase food from Fresh Palette’s Cafe website using
Angular, Node.js, and MongoDB, with a focus on user-friendliness, efficiency, and
security. The project will follow an Agile methodology, have distinct deliverables, and
follow a specified schedule. In the future, it could be improved depending on suggestions
and demands from stakeholders.

7. Future Enhancements: Future updates to the fresh palette cafe website's online
application that allows users to order meals may include additional capabilities and
features including social media integration, reward programmes, and loyalty programmes.
Stakeholders' opinions and requirements will be taken into consideration when these
enhancements are implemented.
The general objective of this project is to design, build, test, and evaluate a web application to
purchase food from Fresh Palette's cafe website using Angular, Node.js, and MongoDB, with a focus
on user-friendliness, efficiency, and security. The project will follow an Agile methodology, have
distinct deliverables, and follow a specified schedule. In the future, it could be improved depending
on suggestions and demands from stakeholders.

1.5 Language Used

1.5.1 Front-end:

• HTML: HTML is one of a web application's most essential building blocks. It stands for
"Hypertext Markup Language". There are specific tags for each type of component,
including paragraph, bold, italic, button, and form tags. The responsive front-end templates
for the web application are made with Bootstrap.
• CSS: CSS is short for "cascading style sheet". It controls every design element, including
colour, font, alignment, margin, and padding.
• You may develop interactive webpages using the server-side and client-side computer
language JavaScript. The main purpose of it is to offer animations on the front end.
• Angular: An HTML and TypeScript-based framework and platform for building single-page
client applications. Angular was developed using TypeScript.
.

5
1.5.2 Back-end:

1. MongoDB: The well-known NoSQL database MongoDB makes use of a document-oriented

data architecture. It is possible to manage enormous volumes of data with outstanding speed,
flexibility, and scalability. The project's MongoDB database is where the menu items, user
information, and order information are all kept.
2. Express: A document-oriented data architecture is used by the popular NoSQL database
MongoDB. Massive amounts of data may be managed with exceptional speed, adaptability,
and scalability. The menu items, user data, and order data are all stored in the project's
database, MongoDB.
3. Mongoose: Mongoose is an object data modelling (ODM) module for Node.js and MongoDB.
It provides a higher level of abstraction in compared to MongoDB's native driver, making it
easier to utilise MongoDB in Node.js applications. In this project, Mongoose is used to
generate the data structure, perform CRUD operations (create, read, update, delete), and
validate data.
4. JWT: JSON online Token (JWT) is one of the often used authentication techniques for web
applications. It offers a clear, secure way for parties to transfer claims. JWT is used in this
project to create and validate tokens for user authentication and authorisation.
5. Nodejs: Back-end apps use this JavaScript framework.It is mainly utilised by servers that are
event-driven and non-blocking.
a. A strong collection of capabilities are offered for both online and mobile apps by this Nodejs
framework.
b. Mongo DB, a NoSQL-based database, and its library "Mongoose."
c. Express.js is a Node.js web application framework that is open-source and free. It is used
to design and create web apps rapidly and simply.

6. Nodemailer: Email transmission is made possible using the Nodemailer Node.js package. In
this project, order confirmation emails are sent to consumers using Nodemailer.

7. Passport: Passport is a well-known authentication middleware for Node.js. It provides a

variety of authentication strategies for token-based, local, and social authentication, among other
authentication mechanisms. The project implements local JWT authentication using Passport.

6
1.6 Project Overview
1. Project Objectives: The main goal of this project is to develop, test, and evaluate an
online web application that allows users to order food from the Fresh Palette café platform
using Angular, Node.js, and MongoDB. The website must be effective, secure, and easy
to use.
2. Project Background: The Fresh Palette Cafe, which has a well-known location, seeks to
increase its customer by offering online food shopping. Customers may use the website to
browse the menu, customise their orders, and make payments.

3. Stakeholders: Owners and managers of Fresh Palette Cafe, customers who will use the
web application to order food from Fresh Palette Cafe's website, developers who will
design, develop, and test the website, and testers who will assess the website's
functionality and usability are the project's stakeholders.

4. Project Deliverables:
The project deliverables include:
• A requirements specification document
• A design specification document
• A development plans.
• A fully functional web application to order food from fresh palette cafe website.
• A user manual
• A test plan and test cases
• A project reports.
5. Project Constraints:
The project constraints include:
• Time: The project must be completed within a specific timeline.
• Budget: The project must be completed within a specific budget.
• Resources: The project must be completed with the available resources.
• Technology: The website must be developed using Angular, Node.js, and
MongoDB.
6. Project Timeline: According to an agile approach, the project timeline will include
incremental and iterative development, regular testing, and continuing stakeholder
feedback. The exact timeline and deliverables will be outlined in the project plan in

7
 collaboration with the stakeholders. Creating, testing, and evaluating a website for a café
named Fresh Palette café while adhering to time, money, resource, and technology
constraints are generally outlined in the project description for this Angular web
application to order meals from the fresh palette cafe website. The project will follow an
agile methodology, have clear deliverables, and involve a range of stakeholders with
different roles and goals. The programme aims to meet client expectations and provide the
managers and owners of Fresh Palette with a lucrative return on their investment.
7. Assumptions and Risks: Project assumptions and hazards include:
• Assumptions: The developers have the knowledge and expertise necessary to
plan, create, and test the website. Throughout the development phase, the
stakeholders will offer concise and consistent input.
• Risks: The project might be delayed or derailed by technical problems, such as
server failures or problems with payment processing. The website could not be
efficient or user-friendly, which would result in poor adoption rates.

8
CHAPTER -2 LITERATURE SURVEY
Today, engaging users to websites and mobile applications depends heavily on good design. To
identify the particular elements that go into successful website and mobile application design,
however, not much research has been done. We aim to gather information on effective design in this
literature review and give a selection of widely used research features to help designers and
researchers operationalize best practises for encouraging and anticipating user engagement. The
scope of this literature survey includes:

• Usability as a key design element: The International Standardisation Organisation (ISO)

defines usability as the effectiveness, efficiency, and satisfaction with which users may
achieve their objectives. However, there isn't currently consensus on how to operationalize
and assess website usability.

• The importance of website design: The majority of businesses and organisations now rely
primarily on their websites for public communication due to the increase in internet usage
over the past 10 years. While poorly designed websites have been shown to negatively effect
visitor retention and purchase behaviour, well-designed websites with excellent usability have
been shown to have a positive impact on both.

• Limitations and future research: Although this literature review offers a foundation for future
study, more investigation and description of website design factors that affect user
engagement are still required. To assist designers and researchers in creating successful
website designs, clear criteria are needed.

• The seven design elements that appear the most frequently in the literature under review are
the focus of this literature assessment. Some of these elements include readability, navigation,
graphical representation, arrangement, and the utility of the material. In prior studies, these
elements were constructed and evaluated to see how they affected user engagement.

This review of the literature offers a thorough overview of the significance of website design,
emphasises usability as a crucial component of the design, and offers a shortlist of seven design
components that increase user engagement. Exploratory research can give definitions for website
design aspects as well as a place to start for additional exploration.

9
Authors Published Title Technology Description

Mohamed Angular and the Trending Frameworks of Mobile Angular The essay analyses five well-
Sultan [1] and Web-based Platform Technologies: A known frameworks and
Comparative Analysis, FTC, 2017 compared 12 distinct
frameworks for mobile and
online apps. The noteworthy
features and advantages of the
new Angular2 framework
above existing frameworks are
highlighted. The finding raises
the prospect of the emergence
of a new generation of
frameworks shortly.

Verhaeghe From GWT to Angular: An Experiment Report on Angular .We designed a

B, Shatnawi Migrating a Legacy Web Application, IEEE,2021 semiautomated migration
A et al. [2] approach that helps
developers migrate
applications’ front ends
from GWT to Angular and a
tool that performs the
migration.

Ziping Liu Study of Secured Full-Stack Web Development, Full Stack The article explores
and Bidyut CATA 2019 Development recommended practises for
Gupta [3] creating a safe online
application utilising Angular
and ASP.NET core
frameworks, complete with
example code, and reviews
layered architecture and the
MVC pattern for web
development. It also addresses
typical vulnerabilities in web
applications.

Anirudh An Interpretation and Anatomization of Angular: Angular In this paper, a thorough

Bhaskar, A Google Web Framework, IRJET,2020 overview of the origin and
Manjunath history of Angular is given
A.E [4] along with a detailed
explanation of the key
features which makes Angular
so unique and widely used in
the industry. Finally, an
insight to testing is given and
the paper is wound up with
the advantages of Angular and
the future scope of Angular.

10
 Domokos Netfood: A Web Customers may concurrently
CE, Séra B, Software System Application place individual or group
Simon et al. for Web Development orders from several
[5] application to restaurants using Netfood, an
order food from order management system
fresh palette cafe focused on deliveries. A
and Delivery
online interface allows users
, IEEE 2018
to place orders.

Abd Wahab Implementation Full Stack This article discusses the

MH, Kadir of network-based Development creation of a smart order
et al.[6] smart order with focus on system for restaurants with the
system Angular goal of enhancing data
, IEEE,2008 management and
communication. A hardware
design phase and a system
development phase make up
the system development life
cycle. The outcomes
demonstrate that the system is
efficient and that data
transmission operates as
anticipated.

Table 2.1: The Table shows the Author's name, the Proposed Approaches, the Journal it was
published in, the Year of publication and their technologies.

11
 CHAPTER -3 SYSTEM ANALYSIS AND DEVELOPMENT

3.1 System Design

3.1.1 Proposed Design
The following services have been developed for this web application to order food from fresh palette
cafe online project's system design:
• Cart Services: The functioning of the website's shopping cart is controlled by the cart service.
Users may modify or delete things from their carts as well as examine the total cost of their
carts.
• Food Services: This department is in charge of all activities involving food, including
changing the menu to include new items and deleting older ones. The administration of food
item categories such appetisers, entrées, main meals, and desserts is also under its purview.
• User Service: This service is responsible for handling all user-related tasks, such as user
registration, login, authentication, and authorisation. User profiles, order histories, and user
reviews are also preserved.

In addition to these services, the system design includes the following:

• Front-end: It is a user-friendly and responsive design. There are websites for placing food
orders, maintaining carts, signing in, and creating an account. The front-end and back-end
services may communicate via APIs.
• Database: To meet the needs of the services, the database structure was created.’To keep
track of all the data on customers, carts, and food products, a database is developed.
• API: APIs were created to allow communication between all services and the front end of the
website. The front-end functions that are required, such user authentication, cart management,
and a web application for ordering meals from fresh palette café, are made available through
the APIs.

12
 Figure 3.1.1a: Frontend Runs on localhost:4200

Figure3.1.1b: Backend Runs on localhost:5000

• Payment Gateway Integration: A payment gateway is integrated with the website to allow
users to make payments online securely.

The following services can be used for the development of the web application to order food from
fresh palette cafe website:

1. Nodejs: Node.js is the first: Using Node.js, a server-side JavaScript runtime, the back-end of
the web application to order meals from the fresh palette café website may be developed. It
offers a non-blocking I/O paradigm to manage large amounts of data.

2. Angular Framework: Using the well-known front-end development framework Angular,

the user interface of the website for the online web application to purchase meals from Fresh
Palette Cafe may be constructed. It includes features that speed up and optimise development,
like dependency injection, data binding, and component-based design.

3. Express.js: Using the popular Node.js framework Express.js, the server-side application for
the web application to order meals from the fresh palette café website may be constructed. Its

13
 middleware, routing, and other features expedite and boost the efficiency of development. It's
an open-source programme created especially for web applications and APIs. It is a quick and
easy framework that enables the creation of web apps quickly, easily, and with the least
amount of code. Benefits of it include:
• Has get and post request middleware components.
• It is simple to combine with a variety of template engines, including Jade, Vash, and EJS.
• It is possible to connect to databases like MongoDB, MySQL, and Redis with ease.
• It also offers middleware for managing errors.
• Enables us to define routes using URLs and HTTP methods.

4. MongoDB: A NoSQL database called MongoDB may be utilised to store the information for
the food delivery website. Scalability, versatility, and high performance are qualities that it
offers, making it the best choice for processing massive volumes of data.

5. Firebase: The backend of the online web application for ordering meals from the fresh palette
cafe system might be built using the popular backend-as-a-service (BaaS) technology called
Firebase. It provides features that speed up and optimise development, such as real-time
databases, cloud storage, and authentication.

6. Body-Parser: A middleware for Node.js parsing, to be precise. It is in responsible of parsing

the incoming request body before we handle a request. In order to move data from the back
end to the front end for presentation, it is widely used in our project to extract the names of
various components, particularly forms.

7. Strip: Strip, a well-known payment processor, is used to handle secure online payments on
the web application for ordering meals from the fresh palette café website. It is a well-liked
substitute for online businesses since it provides benefits including easy integration, a variety
of payment options, and fraud prevention.

14
3.1.2 System Architecture Design
The system architecture design of the web application to order meals from Fresh Palette
Cafe online project is built on the Model-View-Controller (MVC) architectural pattern.
MVC is a well-liked design pattern for making web applications. The three interrelated
components of the application are the Model, the View, and the Controller.

RESTful APIs are also used in the project to create a web application for ordering meals
from the fresh palette café website. The APIs provide consistent communication between
the client and the server. A set of RESTful APIs that the server exposes may be accessed
by the client via HTTP requests. The APIs are developed using Express.js, a well-liked
Node.js framework for building web applications.

The system architecture of the website project for the online application to order meals
from Fresh Palette Cafe is based on a client-server architecture, in which a web browser
acts as the client and a web server hosts the website application. The client-server
architectural paradigm in web application is frequently utilised. The HTTP protocol is
used in this setup for all online interactions among the client and server.

The popular JavaScript server-side runtime framework Node.js is used to create the
Controller component. After taking requests from the View and getting data from the
Model, it answers to the View's inquiries. The relationship between each of the View and
the Model components is controlled by the Controller component of the website project
for the Fresh Palette Cafe online application.

The Controller element of the web application to order meals from fresh palette cafe
website project manages the link between the View and the Model components. It
responds to the View's queries after receiving information from the Model and accepting
requests from the View. The Controller component is developed using Node.js, a well-
liked JavaScript server-side runtime environment.

15
3.1.3 Schematic Diagram

Figure 3.1.3: Schematic diagram

16
3.1.4 Data Flow Diagram

Figure 3.1.4a: Flow chart

17
Figure 3.1.4b: Customer Flow chart

18
3.1.5 Database Design

Figure 3.1.5 : Database Design for web application to order food from fresh palette
cafe

3.1.6 Used Case Diagram

19
 Figure 3.1.6: Used case diagram

3.2 System Analysis

3.2.1 Model Methods:

1. Dependency Injection: A design strategy known as dependency injection manages object
dependencies in software systems. on make the code more modular and maintainable, provide
dependencies on other parts, services, and areas of the application in Angular.
2. Reactive programming: A design strategy known as dependency injection manages object
dependencies in software systems. on make the code more modular and maintainable, provide
dependencies on other parts, services, and areas of the application in Angular.
3.2.2 Dependencies:
The different types of Dependency Injection used in a web application to order food from fresh palette
cafe website built with Angular:

3.2.2.1 NgModule Injection: To summarise, NgModule is a crucial part of Angular's

dependency injection design. It provides a technique for configuring the DI system and
specifying the compilation context in which the system operates. NgModule's several
dependence injection types—providers, declarations, imports, exports, and bootstrap—
allow programmers to construct complex applications by reducing large apps into smaller,
more manageable modules.DevDependencies:
All devdependencies that are used for development purpose:
• @angular-devkit/build-angular: This package offers the settings and tools required to
create and run Angular apps. It is a component of the toolkit for Angular CLI.

20
• @angular/cli: The Angular CLI is a command-line interface tool that gives developers
the ability to build brand-new Angular projects, produce components, services, and
modules, and carry out a number of other development activities.
• @angular/compiler-cli: This package contains a command-line tool for converting
TypeScript and Angular templates into JavaScript code.
• @types/jasmine: TypeScript type definitions for the Jasmine testing framework are
contained in this package.
• typescript: A superset of JavaScript, typescript enhances the language with optional
static typing and other capabilities. It serves as the writing language for Angular apps.
Although these dependencies are not necessary for the application's production version,
they are crucial for development and testing.
3.2.2.2 Property Injection: Through the use of property injection, dependencies may
also be injected into a component or service. In property injection, the dependencies are
specified as public properties of the component or service. When the class is built, Angular
immediately injects the dependency because it is defined in the class as a property. The
Angular framework generates another instance of the component or service and modifies
the values of the attributes to indicate the necessary dependencies. Contrary to constructor
injection, this kind of injection is less frequent. The dependency injection strategy, also
known as property injection in Angular, involves injecting a dependency into a class using
a public property. The following are the various types of property injections used in the
given project:
• The Angular package Ngx-Toastr provides a toast notification component. It is injected
into the component via a property injection.
• The Angular library Ng-starrating provides a star rating component. It is injected into
the component via a property injection.
JavaScript library for reactive programming called Rxjs. It is injected into the component
via a property injection.
• Node.js: This module makes it possible to use Angular applications inside of zones. It is
injected into the component via a property injection.

Property injection is a useful technique to add dependencies to a class because there is no

need to write the constructor for the class..A brief explanation of each of these
dependencies is also feasible. It is also feasible to discuss the advantages and
disadvantages of property injection. Because the dependencies are not expressed explicitly

21
 in the constructor, property injection may make it more difficult to study the code.’The
component utilises properties injection to inject the required parts for ng-starrating, ngx-
toastr, rxjs, and zone.js, as can be seen in the project report.

Figure 3.2.2.1: Property Versions

Figure 3.2.2.3: Dev dependencies included in project

.
3.3 Angular framework
Building Angular apps requires the Angular framework and. The following is a quick description of
each package:
There are four fundamental files within the world of browser-based angular development:
@angular/platform-browser,
@angular/platform-browser-dynamic,
@angular/router,and

22
@anuglar/animations:-
Opting out of these particular packages would impede your ability to produce efficient and effective
applications using this framework.The various functionalities which each file provides include but
not limited to obtaining necessary angular code required by browsers such as with
PlatformBrowserDynamic function , bootstrap capability for dynamic processes within browsers with
PlatformBrowserDynamic package use , implementation of robust routing mechanisms through
router package and ability introduce animation fortifications via animations library.
• @angular/platform-browser: This file provides the Angular code required for a browser to run
Angular applications, such as the platformBrowserDynamic function.
• @angular/platform-browser-dynamic: Provides a set of tools for bootstrapping dynamic Angular
applications in the context of a browser.
• @angular/router: Provides a robust routing mechanism for Angular projects.
• @angular/animations: This package gives Angular apps the ability to use animation.
• @angular/common: Comprises the pipes, directives, and structural directives ngIf and ngFor that
are common to all Angular applications.
• @angular/compiler: The Angular compiler turns your Angular templates and components into
JavaScript code that can be executed.
• @angular/core: The primary Angular library contains tools for constructing directives, pipelines,
services, components, and other things.
• @angular/forms: Helps Angular app developers create forms.

These packages are often loaded as dependencies when you start a new Angular project using the
Angular CLI, and they are instantly imported in your application's modules when you add new
components, services, and other Angular artefacts.

23
 Figure 3.3: Version of Angular Framework used
3.4 Scripts
A collection of instructions that may be used to create, test, and launch the application are contained
in the "scripts" section of the package.json file of a standard Angular project. These commands are
essentially shortened versions of the foundational resources that Angular offers.
• start: Execute this script to start the development server. When you run this command, a
development server and a browser window referencing the app are launched.

• Ng: The Angular framework may be accessed with this command-line interface tool.

• test: This script is used to run the application's tests. When you use this command, it runs each of
the application's tests and generates a report.
• note: This script rebuilds the application whenever the code is modified. When you give this
command, the programme is automatically rebuilt while monitoring for changes to the code.

• build: Use this script to construct the production version of the application. This command creates
a software that is ready for production under the dist/ folder.

24
The creation and deployment of Angular apps can benefit greatly from these scripts. They offer a
straightforward and user-friendly method of interacting with the framework and automating typical
development operations.

3.5 TypeScript Configuration

Figure 3.6 : Shows all the TypeScript configuration

3.6 Requirements
3.6.1 Functional Requirements

3.6.1.1 User Login:

• Registered users should be able to log in to the website using their email address and
password.

3.6.1.2 User Registration:

• The registration form should include adequate validation checks to ensure that the user
submits legitimate information.

25
 Figure 3.5.1.1: Login Layout
3.6.1.3 Forgot Password: If a user loses their password, they should have the opportunity to
reset it. To provide users a link to reset their passwords, the "Forgot Password" option on
the login page needs to ask for their email address.

3.6.1.4 Email Verification:

Users should get an email with a verification link after registering on the website; they must
click the link to verify their email address before they can access the website.

3.6.1.5 Social Media Login:

Users should have the option of logging in with their Google, Facebook, and other social
media accounts, but suitable authentication methods should be implemented to ensure that
the user's social network account is valid.

3.6.1.6 User Profile Management:

26
 • Users should be able to modify the information on their profiles and have the changes
remain in effect. • Users who have registered should have access to their profile details,
including name, contact information, and password.
3.6.1.7 Menu display: This function shows a menu with all the food options, their costs, and
other information like ingredients, nutrition information, etc. Users may choose their
preferred things and place orders with its assistance.

Figure 3.5.1.7: Menu display

3.6.1.8 Search functionality: Users may search the website for certain restaurants or food
products using this tool. It saves customers time and enables them to rapidly discover their
favourite things.

Figure 3.5.1.9: Search sample

27
3.6.1.9 Order placement and payment: Users may securely place orders and make
payments on the website thanks to this functionality. Users should have the ability to check
the progress of their orders and, if necessary, cancel them.

Figure 3.5.1.10: Cart Page

3.6.1.10 Restaurant management: This feature allows restaurant owners to update
their profiles, change their menus, and monitor client orders. It makes it possible for
restaurant owners to easily plan their operations, control their inventory, and monitor their
sales.

3.6.1.11 Rating and feedback system: Using this feature’ users may rate and discuss
their meal and delivery experiences.’It helps other users make decisions while placing
their orders and helps the website improve its offers in response to user input..

3.6.1.12 Notifications: This function notifies consumers of the status of their orders,
updates on delivery, and other crucial website-related information. It. keeps website
visitors informed and interested.

3.6.1.13 Customer support: Through a variety of channels, including chat, email, and
phone, this service offers consumers customer help.’It improves user experience and
assists users in resolving website-related questions and problems.

3.6.1.14 Social media integration: This service allows users to submit details about
their food orders and experiences on social media platforms like Facebook and Instagram.
It facilitates website promotion and increases system traffic.

28
3.6.2 Non-Functional Requirements
1. Performance:
• The website must respond to user input in under two seconds.
• The website can support up to 500 users at once.
• The website must be accessible at least 99.9% of the time.
2. Security:
• User authentication should be implemented using secure methods, such as hashing and
salting passwords, in all server-to-client communications on the website.
• To guarantee that users may only access the areas of the website that they are
authorised to, the website must implement role-based access control.

3. Usability:
• The website must be responsive and mobile device-optimized, with a straightforward
and user-friendly user interface.
• The website must give consumers brief, clear directions on how to execute activities.

4. Scalability:
• The website must be scalable horizontally, meaning it must be able to add more servers
to meet rising traffic without noticeably degrading its performance.
• During peak periods, the website must be able to manage a tenfold increase in traffic.

5. Reliability: The website must be able to recover from server issues and failures within 30
seconds and have automated backups to avoid data loss in the case of a disaster. The
website needs a monitoring system so that it can detect errors and notify the development
team.
6. Maintainability:
o The website has to be modular, follow the SOLID principles, and have automated tests
to ensure that changes don't break functionality that currently exists.
o The website's rich documentation makes the code and system architecture simple for
developers to understand.

29
To ensure that each of these non-functional criteria is addressed, it would be desirable to integrate
exact measurements and measures. The document may also include diagrams of network topology
or system architecture to illustrate the design decisions made in order to meet the non-functional
requirements.

30
 CHAPTER - 4 EXPERIMENTS & RESULT ANALYSIS

4.1 Experimental Setup:

The experimental setup section outlines the hardware and software requirements needed to
successfully run the web application to order food from fresh palette cafe website project.
4.1.1 Hardware Requirements
The web application to order food from fresh palette cafe website project may be operated on a
number of hardware setups, however for best performance, the following recommendations are made:
• Display: 14 inches or bigger with a resolution of 1920 x 1080 pixels or higher
• Processor: Intel Core i5 or higher
• RAM: 8 GB or higher
• Storage: 256 GB or higher
• Network: Ethernet or Wi-Fi
4.1.2 Software Requirements
The meal ordering online project needs the software and equipment listed below to function:
• Operating system: Linux, macOS, or Windows 10
Node.js must be version 14.17.0 or later, and Angular CLI must be version 12.2.0 or later.
• Version 4.4.9 or higher of MongoDB
The project's tools and software were all purchased from their official websites and set up in
accordance with the installation manuals. On a machine with the suggested hardware and software
specs, the experimental configuration was tested.

4.2 Implementation
4.2.1 Models:
4.2.1.1 User Model:

31
 Figure 4.2.1.1: User Model

4.2.1.2 Food Model:

Figure 4.2.1.2: Food Model – All variables created for a food item
4.2.1.3 Cart Model:

Figure 4.2.1.3: Cart and CartItem Model

4.2.2 Services
We have used total three services for user , cart and food details .

32
4.2.2.1 User Service:
User support for the fresh palette cafe's online food ordering system The website project is in charge
of overseeing user-related tasks including login and logout management. ToastrService and
HttpClient are only two of the dependencies that are needed by this injectable class in Angular.

The login() method of the service sends a POST request and an IUserLogin object to the backend
server using the HttpClient module. The setUserToLocalStorage() method sets the user information
to the local storage if the login is successful. If the login attempt is unsuccessful, it shows an error
message using the ToastrService.

User information is removed from the BehaviorSubject and deleted from local storage by the service's
logout() function. In order to avoid any problems with the previous user's information, the window is
also reloaded.

The User class's private BehaviorSubject, which contains the user's most current data, may be
subscribed to by other components. Additionally, it has an Observable that the userSubject may utilise
to emit events if the user data changes.

In general, the User Service plays a critical role in the authentication and authorisation procedures
for the Fresh Palette Cafe Website project, providing the safe handling of the user's sensitive data.

33
 Figure 4.2.2.1 a

Figure 4.2.2.1 b
Figure 4.2.2.1 a- b: User Service showing login and logout functionality

34
4.2.2.2 Food Service:
The FreshPalette Cafe's meals may be ordered using the Web application's FoodService section. The
website project is responsible for providing the functionalities needed to obtain food items from the
server. It provides three main ways to access food: getAll, getAllFoodBySearchTerm, and
getFoodById.

By providing these options, the FoodService enables the other application components to get food
items from the server and display them to the user. This service is crucial to the operation of the Web
application to order food from the fresh palette cafe Website because it provides the consumer with
the crucial information about food goods.

The getAll method retrieves every food item that is available and located on the server. The resulting
Observable of type Food[], which includes the food items, may be subscribed to by any component
that wishes to display the food items.
The getAllFoodBySearchTerm method retrieves all of the food items using the user-provided search
term. The query is prefixed in the server's URL, and the items of food that were located are then
returned as an Observable of type Food[].
The getFoodById method retrieves a single food item based on its ID. The food ID is added to the
server's URL to generate a food item, which is then returned as an Observable of type Food.

35
 Figure 4.2.2.2: Food Service typescript file access all details of a food item for home page, at the
time of search of an item and seeing a food item by its ID .

4.2.2.3 Cart Service:

The CartService is in charge of overseeing the user's cart in the web application to order food
from fresh palette cafe website project. It manages all cart activities, including the addition
of food items, removal of food items, adjusting the number of food items, and clearing of
carts.

To store the cart items and their data, including the food item, its amount, and its pricing, it
employs a Cart model. To represent a specific item in the cart, it also employs a CartItem
model.

The service tracks modifications to the cart using a BehaviorSubject and notifies any
subscribers of these modifications. In order to maintain the cart information between page
refreshes, it additionally keeps it in the localStorage section of the browser.

36
The CartService is responsible for managing the shopping cart on the meal ordering website.
It keeps track of the state of the cart using a Cart object, which contains an array of CartItem
objects that represent the items in the cart. Whenever the cart is modified, it also contains a
BehaviorSubject that is used to emit the modified cart object.

The removeFromCart method eliminates an item from the cart by filtering the items array in
the Cart object to remove the item with the given foodId. Following that, the
setCartToLocalstorage method is called, which sends the changed cart through the
BehaviorSubject.

The addToCart method adds an item to the cart by creating a new CartItem object from the
Food object that was sent to the function and placing it in the items array of the Cart object.
If the item is already in the cart, the method does nothing and exits. The updated cart is then
emitted through the BehaviorSubject when the setCartToLocalstorage method has been
invoked to update the cart in local storage.

By locating the CartItem object with the given foodId and changing its amount and price
values, the changeQuantity method modifies the quantity of an item in the cart. The modified
cart is then sent through the BehaviorSubject by calling the setCartToLocalstorage function.

Use the setCartToLocalstorage method to modify the cart in local storage and emit it through
the BehaviorSubject. It calculates the total cost and total number of things in the cart by using
the reduce method on the items array of the Cart object. The modified Cart object is then
saved locally as a JSON string after being communicated via the BehaviorSubject.

The clearCart function changes the cart in local storage, resets the Cart object to an empty
cart, and emits the updated cart via the BehaviorSubject.

The function getCartFromLocalStorage retrieves the Cart object's JSON text representation
from local storage and parses it to create a new Cart object. If there are no cart records in the
local storage, a new empty Cart object is returned. This function is used to initialise the Cart
object in the CartService's constructor.

37
In order for other components to subscribe to it and get updates anytime there is a change to
the cart, the getCartObservable function returns an observable of the Cart object.

Overall, the CartService is crucial to producing a faultless and user-friendly online application
for the project's process of ordering meals from the Fresh Palette Cafe.

Figure 4.2.2.3 a

38
 Figure 4.2.2.3 b
Figure 4.2.2.3 a-b: Cart Service- All the functionality of cart to add item, to remove item , increase
quantity , reduce quantity , clear cart .

4.2.3 Data Base

4.2.3.1 User Data Base :

Figure 4.2.3.1: User data stored which is checked on time of login

4.2.3.2 Food Item Data Base:

39
 Figure 4.2.3.2: All details of Food Items that are being displayed on the home screen.

4.2.4 Backend Server

Figure 4.2.4 a

40
 Figure 4.2.4 b
Figure 4.2.4 a-b: All API and backend setup .

4.2.5 App Module

This is the AppModule file for the web application to order food from fresh palette cafe
website's Angular project. It has all the settings, imports, and declarations required for the
programme to function.
All of the application's components, such as HeaderComponent, HomeComponent,
SearchComponent, FoodPageComponent, CartPageComponent, TitleComponent, and
LoginComponent, are listed in the declarations section.

The BrowserModule, which enables the application to run in the browser, the
AppRoutingModule for routing, the RatingModule for the star rating feature, the
HttpClientModule for sending HTTP requests, the ReactiveFormsModule for using reactive
forms, the ToastrModule for displaying toast messages, and the BrowserAnimationsModule
for animation are all listed in the imports section.

41
The bootstrap section identifies the application's primary component, in this instance
AppComponent.
This is the web application to order food from fresh palette cafe website project's Angular
app module file (app.module.ts). It specifies and imports several modules and project-related
components.

Declarations for each component and module are included in the declarations and imports
arrays, respectively. Use the providers array to add providers for dependency injection. In this
case, we haven't created any special suppliers.

The bootstrap array is then used to bootstrap the AppComponent as the application's root
component.

The Angular application's fundamental functionality is provided by the BrowserModule and

HttpClientModule modules, while the RatingModule module is utilised to provide ratings.

For developing reactive forms that are utilised in the login component for user authentication,
the ReactiveFormsModule module is imported.

Use the ToastrModule to show alerts on the screen in response to user input or server-side
events.

The AppComponent is the primary component of the application, and there are other defined
components for the header, home, search, food page, cart page, title, and login.

Overall, this file sets the program's core structure together with all necessary dependencie and
modules. It is a significant file that is necessary for the efficient running of the programme.

42
 Figure 4.2.5: App Module showing all the components created
4.2.6 Angular Project Framework and Configuration
The build and development parameters for an Angular application are defined and customised
in the angular.json configuration file. An Angular project's root directory has the file, which
provides details about the project's dependencies, settings, and organisational structure.

The parts of the angular.json file are as follows:

• version: Identifies the configuration file's version.
The root directory for new projects is defined by the newProjectRoot setting.
Projects: This section includes the workspace's setup for each project.
• Schematics: Provides settings for the code snippet generators known as schematics.
• cli: the Angular CLI's options directory.
The name, root folder, source root, and prefix are just a few of the features that make up the
project section. For the project's numerous build and development activities, including
constructing, testing, and serving, the architect property includes configurations.

The output path, index file, main file, and assets are just a few examples of the settings that
the build configuration offers. The styles field defines the global styles to incorporate into the
build, including the primary scss file and any extra styles from external dependencies. The
scripts field defines any JavaScript files to include in the build..

43
 The configurations property lists many build configurations, including "production" and
"development" configurations. Options for each configuration may include source maps, build
output budget sizes, and build optimisations.

The build configuration to use is one of the choices specified in the serve configuration. To
extract translations from the project for localization, use the extract-i18n option.

The test configuration details the assets, styles, scripts, and polyfills that need be present in
the test environment in order to execute the tests.

Finally, Angular schematics—code generators used to produce files like components,

services, and directives—have choices in the schematics section. In conclusion, the
angular.json file, which specifies the project structure, dependencies, and many build and
development options, is a crucial configuration file for an Angular project.
4.2.7 Events List
Every web application needs events because they allow for dynamic and interesting user
experiences. Our online application for ordering food from the fresh palette cafe website
may utilise events to launch activities, such as updating the shopping cart, displaying alerts
when an order is successfully placed, or tracking user activity for analytics. In this section,
we'll go through the various events used in our application and how Angular handles them.
1. User Login Event: A user's login to the website initiates this event. It is possible to track
user behaviour and tailor their online experience with it.

2. User Signup Event: A new user's registration on the website causes this event to occur.
It may be utilised to keep track of the quantity of signups as well as other pertinent details
like their preferences and location.

3. Item Added to Cart Event: This event is launched when a user adds an item to their
online Food ordering cart.’It has the ability to gauge consumer interest in a certain product
and recommend comparable items to them.

4. Order Placed Event: Each time someone makes an order through our website it sparks
something called an Order Placed Event that provides us with valuable data such as what
was bought how much of it was ordered and where our customers are located.

44
 5. Item Removed from Cart Event: Should any customer decide to remove something from
their virtual cart before completing checkout we'll receive notification through something
called an Item Removed from Cart Event – enabling us to better cater to each individuals
preferences moving forward..

6. Order Delivered Event: As soon as we've successfully delivered someones order we're
alerted by means of an Order Delivered Event which tracks delivery progress and ensures
accuracy on our part when fulfilling requests..

7. Order Cancelled Event: Anyone who cancels their online purchase will invoke whats
known as an Order Cancelled Event – allowing us to understand why this may have
occurred while simultaneously keeping track of how often cancellations happen overall.

8. Search Event: Finally whenever someone uses the search bar on our website it triggers a
Search Event thats incredibly useful in monitoring interest levels for various items and
finding ways to improve our online search capabilities and overall user experience

9. Delivered Order: This event is started when an order is delivered to the user..It might be
applied to track the status of delivery and confirm that the correct order was sent.

10. Payment Processed Event: This event is started when a user's payment is processed on
the website. It may be used to monitor both the quantity of payments that have been
received successfully and any possible issues with payments.

11. Review Submitted Event: When a person reviews a product or service and submits it on
the website, this happens. It may be utilised to keep an eye on customer feedback and
improve the level of the services the website offers.

4.3 Test Cases:

A comprehensive list of the test cases developed for the application must be included in this section.
It should include both positive and negative test cases as well as cutting-edge situations that might
jeopardise the system. Additionally, the expected outcomes for each test scenario must be stated.
4.3.1 Positive Test Case:

45
 First will be showing the Page without Login. After that Screenshot of Successful login.

Figure 4.3.1 a : This is the Page when we open the Website . In the Header section it will be
showing only the Login option and cart option.

Figure 4.3.1b: Shows the pop up of successful login

46
 Figure 4.3.1c: After successful Login in header it will show the user name and have a drop down
option in which we will be option to visit profile , order details and to LogOut.

4.3.2 Negative Test Case:

Figure 4.3.2a: In this wrong details have be entered in the login therefore a popup of Login Failed!
is shown.

47
 Figure 4.3.2b : Should not be Empty warning is shown to login if nothing is filled and login is
clicked .

4.4 Results:
4.4.1 Home Page :

Figure 4.4.1 : Home Page

4.4.2 Login Page :

48
 Figure 4.4.2: Login Page

4.4.3 Cart Page :

\
Figure 4.4.3: Cart Page

4.4.4 Search :

49
Figure 4.4.4: Search Page

50
Chapter-5 CONCLUSIONS
5.1 Conclusion
We initially determined the functional and non-functional requirements for the website
before building the crucial features and functionalities to meet those objectives. Some of
these features include a user-friendly interface for browsing restaurants and menu items,
a shopping cart for adding and managing products for orders, an order history section for
looking over past orders, and a restaurant administration system for controlling the menu
and orders. We also set up a number of security precautions to ensure the protection of
user data and transactions.

In conclusion, our proposal to create a website for ordering meals was successfully
developed and evaluated. We utilised Angular as the main front-end framework
throughout the project, coupled with a number of back-end tools like Node.js, Express,
and MongoDB. The project's objectives included making it easier for people to purchase
meals online and helping restaurant operators manage customer orders and menu items.

We utilised a range of dependency injection techniques, including as constructor injection,

property injection, and method injection, to manage and deliver dependencies to the
numerous components and services across the project. We also incorporated a number of
events, including click events, form events, and lifecycle events, to increase interactivity
and improve the website user experience.

We looked at a variety of performance indicators, including page load time, server

response time, and database query time, and created performance graphs and charts to
display the results. Based on our research, we identified areas that needed to be improved
and provided suggestions for more work that might be done to improve the website's
operation.

The Angular framework has shown to be effective for accelerating development and
streamlining maintenance. The whole user experience has been enhanced by the addition
of services including menu customization, user registration and authentication, restaurant
management, and order tracking. The effort has also raised awareness of how important it
is to manage and build databases effectively for data storage. Similar to every software

51
 project, there is always room for improvement. Performance improvement for this project
could be advantageous, particularly for the queries the database and backend server make.

Overall, it was challenging but rewarding to design the website project for the web
application to purchase food from Fresh Palette Cafe. We were able to provide a platform
that is both functional and user-friendly for the web application to order food from Fresh
Palette Cafe. This website should be beneficial to both users and restaurant owners, and
we want to continue growing and improving this endeavour. Overall, the project to create
an online web application to order food from fresh palette cafe website was successful in
meeting its goals of offering a practical and user-friendly platform for customers to place
orders and for restaurants to manage their orders.

Working with modern web development tools and methodologies has been a good
learning experience thanks to the project to build an online web application to purchase
meals from the fresh palette cafe website. Additionally, it has aided in the development of
expertise in project management, database administration, frontend, and backend
programming, and UI/UX design.

5.2 Future Scope

There is always space for progress and improvement in software projects. In this part, we
will talk about the possible expansion of the online meal ordering website application's
capability as well as any prospective improvements that may be done to improve the user
experience. These upgrades can help the platform draw in more users and maintain its
position as a leader in the rapidly developing online meal ordering market. Let us look
more closely at the anticipated future developments below.
• Mobile App Development: It is possible to convert the online web application to
order food from fresh palette cafe website into a mobile application, increasing its
accessibility to a larger audience. Having a mobile app will be a fantastic method
to reach out to more clients with the increasing number of smartphone users.

• Integration with Third-party Payment Gateways: Multiple payment channels,

including PayPal, Stripe, and others, can be supported by the project in the future.

52
 This will provide customers more alternatives for paying for their products and
streamline the ordering process..

• Integration with Social Media Platforms: It is possible to combine the project

with social networking sites like Facebook, Twitter, and Instagram. Customers
will be able to do this and share their experiences with their social media followers
and friends, perhaps promoting the business..

• Customization of User Interface: It is possible to expand the project so that users

may personalise the user interface to suit their tastes. This might involve things
like altering the website's layout, text size, and colour palette.

• Integration with Delivery Services: Extensions to the project allow for

integration with outside delivery services like UberEats, Grubhub, etc. Customers
will have additional delivery alternatives as a result, and the ordering procedure
will be easier.

• Implementation of Advanced Analytics: It is possible to expand the project to

incorporate sophisticated analytics tools that will track website performance,
reveal user preferences and behaviours, and offer new information on how to make
changes in the future.

• Integration with Chatbots: It is possible to expand the project to incorporate

chatbots that may assist clients with order placement, order tracking, and general
customer service. This will lessen the workload of the customer care team and
improve the client experience.

• Implementation of Loyalty Programs: The project may be expanded to

incorporate consumer incentive schemes for making purchases, posting reviews,
and introducing friends. Both retaining current clients and luring new ones will
benefit from this.

53
 • Expansion to Multiple Locations: Adding more sites to the project will help it
reach a larger audience and grow its clientele. In addition to recruiting more
people, this calls for the setup of new servers and databases.

• Integration with AI and ML technologies: It is possible to expand the project to

incorporate AI and ML technologies, such as customised suggestions, predictive
ordering, and automated customer assistance. Customers will have a better
customised experience as a result, and this will aid in streamlining corporate
procedures..

These are only a few of the project's potential future scope areas. The precise areas to be
addressed will rely on the objectives and needs of the organisation, as well as the money
and resources at hand.

54
 REFERENCES

[1] Sultan M. Angular and the Trending Frameworks of Mobile and Web-based Platform
Technologies: A Comparative Analysis. InProc. Future Technologies Conference 2017 (pp.
928-936).
[2] Verhaeghe B, Shatnawi A, Seriai A, Etien A, Anquetil N, Derras M, Ducasse S. From GWT
to Angular: An experiment report on migrating a legacy web application. IEEE Software.
2021 Jul 29;39(4):76-83.
[3] Liu Z, Gupta B. Study of Secured Full-Stack Web Development. InCATA 2019 Mar 13 (pp.
317-324).
[4] Bhaskar A, Manjunath AE. An Interpretation and Anatomization of Angular: A Google Web
Framework. International Research Journal of Engineering and Technology (IRJET). 2020
May;7(05).
[5] Domokos CE, Séra B, Simon K, Kovács L, Szakács TB. Netfood: A Software System for
Web application to order food from fresh palette cafe and Delivery. In2018 IEEE 16th
International Symposium on Intelligent Systems and Informatics (SISY) 2018 Sep 13 (pp.
000143-000148). IEEE.
[6] Abd Wahab MH, Kadir HA, Ahmad N, Mutalib AA, Mohsin MF. Implementation of network-
based smart order system. In2008 International Symposium on Information Technology 2008
Aug 26 (Vol. 1, pp. 1-7). IEEE.
[7] Amey Thakur and Karan Dhiman, “Chat Room Using HTML, PHP, CSS, JS, AJAX.”,
International Research Journal of Engineering and Technology (IRJET), 1948–1951, 08
June 2021. https://doi.org/10.6084/m9.figshare.14869167.
[8] Amey Thakur and Karan Dhiman, “Chat Room Using HTML, PHP, CSS, JS, AJAX.”,
ArXiv, abs/2106.14704 (2021): n. Pag.
[9] Amey Thakur."Car Rental System", Volume 9, Issue VII, International Journal for Research
in Applied Science and Engineering Technology (IJRASET) Page No: 402-412, ISSN:
2321-9653, https://doi.org/10.22214/ijraset.2021.36339.
[10] Amey Thakur, Mega Satish."Digital Bookstore", Volume 9, Issue VII, International Journal
for Research in Applied Science and Engineering Technology (IJRASET) Page No: 1302-
1313, ISSN: 2321-9653, https://doi.org/10.22214/ijraset.2021.36609
[11] Kofler, Michael. "phpMyAdmin." The Definitive Guide to MySQL5 (2005): 87-116. [6]
Musciano, Chuck, and Bill Kennedy. HTML & XHTML: The Definitive Guide: The
Definitive Guide. " O'Reilly Media, Inc.", 2002.
[12] Raggett, Dave, Arnaud Le Hors, and Ian Jacobs. "HTML 4.01 Specification." W3C
recommendation 24 (1999).

55
[13] Blansit, B. Douglas. "An Introduction to Cascading Style Sheets (CSS)." Journal of
Electronic Resources in Medical Libraries 5, no. 4 (2008): 395-409. [9] W3Schools.
"W3Schools." (2013).
[14] Chavan, Varsha, Priya Jadhav, Snehal Korade, and Priyanka Teli. "Implementing
customizable online web application to order food from fresh palette cafe system using
web-based application." International Journal of Innovative Science, Engineering &
Technology 2, no. 4 (2015): 722-727.

56
 APPENDICES
AngularJS: [Online]. Available: https://angularjs.org/.
MongoDB: [Online]. Available: https://www.mongodb.com/.
Express: [Online]. Available: https://expressjs.com/.
Node.js. [Online]. Available: https://nodejs.org/.

57
58