CHAPTER 1:

INTRIDUCTION

1.1 About Company/Organization

Zomato is a renowned global food technology company that has
revolutionized the way people discover and interact with restaurants.
Established in 2008 by Deepinder Goyal and Pankaj Chaddah, Zomato
began as a restaurant menu discovery platform under the name
"Foodiebay." Over the years, it has expanded its services and grown
into a comprehensive ecosystem for food lovers, connecting millions
of users with restaurants across the globe.
Evolution and Growth
From its humble beginnings, Zomato has consistently innovated to stay
ahead in the competitive food-tech industry. In 2010, the platform
rebranded to Zomato and introduced features like restaurant reviews,
ratings, and photographs. These additions quickly gained popularity,
making Zomato a go-to platform for diners seeking trusted
recommendations and insights. By 2011, Zomato expanded its
operations to international markets, including the UAE, Sri Lanka, and
the UK, marking its entry into the global arena.
Today, Zomato operates in over 20 countries, including India, the
United States, Australia, and South Africa. Its diverse range of services
includes restaurant discovery, online food ordering, table reservations,
and subscription-based loyalty programs like Zomato Gold (now
Zomato Pro). The platform also supports restaurant partners by offering
tools for inventory management, marketing, and delivery logistics.

Page |1
Services and Offerings
Zomato’s core services are designed to cater to both consumers and
restaurant partners. These include:
1. Restaurant Discovery: Users can search for restaurants based on
location, cuisine, ratings, and reviews. The platform provides
detailed profiles with menus, photos, and operational details.

2. Online Food Ordering: Zomato enables users to order food from

their favorite restaurants and have it delivered to their doorstep.
The service is supported by an extensive delivery network and
real-time tracking features.

3. Table Reservations: With the table booking feature, users can

reserve seats at restaurants in advance, ensuring a hassle-free
dining experience.

4. Zomato Pro: This subscription-based service offers exclusive

discounts and benefits to members, enhancing the value
proposition for frequent diners.

5. Hyperpure: Zomato’s B2B initiative provides restaurants with

high-quality ingredients and supplies, ensuring better food quality
and operational efficiency.

Page |2
Page |3
1.2 About the Project
This project involves developing the Zomato web application
frontend using React, a modern JavaScript library for building user
interfaces. The project aims to create a dynamic, responsive, and
interactive platform where users can:Search for restaurants by location,
cuisine, or popularity.View detailed restaurant profiles, including
menus, photos, and reviews.Place food orders online or reserve tables
conveniently.React’s component-based architecture is utilized to
ensure reusability, maintainability, and scalability of the codebase. The
project emphasizes real-time data handling, seamless navigation, and
performance optimization, providing users with a smooth and engaging
experience.
In a Zomato-like project, the frontend built with React would typically
handle:
1. Dynamic Content Rendering: React allows the page to update
dynamically, meaning as users interact with the platform
(searching for restaurants, reading reviews, etc.), the page content
can update without needing a full page reload.

2. Component-based Architecture: React uses reusable

components to build the user interface. For instance, components
could include search bars, restaurant listings, ratings, and review
sections. This modular approach makes the development process
more efficient and maintainable.

3. State Management: React uses state management tools like

Redux or Context API to manage and share the state across
different components. For example, when a user searches for a
restaurant or logs in, the state changes and is reflected in the UI.

Page |4
4. Routing: React Router is often used to handle navigation within
the app. It allows users to move between different pages (e.g.,
homepage, restaurant details, or user profile) without reloading
the entire page.

5. Asynchronous Data Fetching: React often works in conjunction

with APIs to fetch data asynchronously. For a Zomato-like
platform, data such as restaurant details, reviews, and menu items
would be fetched from a backend server and displayed
dynamically.

6. Performance Optimization: React provides features like lazy

loading, code splitting, and virtual DOM, which help ensure the
platform runs smoothly and efficiently, even with large amounts
of data.

Page |5
 Key Features of the Project
1. Restaurant Search and Discovery: Users can explore
restaurants based on location, cuisine, ratings, and popularity,
with advanced filtering options.
2. Interactive Restaurant Profiles: Detailed restaurant pages with
menus, photos, user reviews, and operational details ensure
comprehensive information.
3. Online Food Ordering and Delivery: A streamlined interface
for placing orders, tracking deliveries in real-time, and ensuring
a hassle-free experience.
4. Table Reservations: Simplified booking options that allow users
to reserve tables at their preferred restaurants.
5. User Account Management: Secure login, profile
customization, and order history tracking for a personalized
experience.

Page |6
1.3 Objectives of the Project
1. User-Friendly Interface: Develop an intuitive and visually
appealing design to enhance user engagement.
2. Efficient Performance: Optimize performance using React’s
virtual DOM and other features to ensure fast and responsive
interactions.
3. Seamless API Integration: Enable real-time data updates
through robust backend communication.
4. Scalability and Maintainability: Create a modular architecture
to support future enhancements and updates.
5. Core Functionalities: Implement essential features like search,
filtering, restaurant details, and online ordering.
6. Responsive Design: Ensure compatibility across various devices
and screen sizes, including desktops, tablets, and smartphones.
7. Enhanced User Experience: Incorporate modern UI/UX
principles to make navigation and interactions smooth and
intuitive.
8. Real-Time Features: Integrate functionalities like live order
tracking and instant updates to improve user satisfaction.
9. Security and Privacy: Implement secure authentication and data
protection measures to safeguard user information.
10. Integration with Third-Party Services: Enable smooth
integration with payment gateways, mapping tools, and social
media platforms.
11. Testing and Debugging: Conduct rigorous testing to
identify and fix bugs, ensuring a stable and reliable application.
12. Accessibility: Design the platform to be accessible to users
with varying abilities, adhering to web accessibility standards.

Page |7
 CHAPTER 2:
SYSTEM ANALYSIS

2.1 INTRODUCTION
Zomato web system analysis provides an overview of the process
involved in analyzing the current system and determining the
requirements for a new or enhanced system. Zomato, a popular online
platform for discovering restaurants, ordering food, and reading
reviews, operates in a dynamic and competitive environment. The
purpose of this analysis is to assess the existing features, identify areas
for improvement, and propose a more efficient solution to meet the
needs of users, restaurant partners, and other stakeholders.
This section outlines the objectives of the system analysis, including:
 Understanding the needs of users (such as customers, restaurant
owners, and delivery personnel).
 Analyzing the existing Zomato platform's strengths and
weaknesses.
 Identifying technical, operational, and economic challenges that
could impact the development of new features or improvements.
 Ensuring that the system aligns with Zomato’s business goals,
such as increasing user engagement, expanding market reach, and
enhancing the overall customer experience.
The analysis serves as the foundation for designing and implementing
changes or enhancements to the Zomato web platform, ensuring that it
continues to meet the evolving demands of its diverse user base.

Page |8
2.2 IDENTIFICATION OF NEED
The Identification of Need section addresses the reasons for
developing or enhancing the Zomato web platform. It identifies the
gaps in the current system and highlights the opportunities to meet the
growing demands of users, restaurant partners, and delivery services.
Key aspects include:
1. User Expectations:
 Increasing demand for personalized restaurant recommendations
based on user preferences and past behavior.
 Need for faster, more accurate search results to improve user
experience.
 Desire for seamless navigation, real-time order tracking, and
intuitive interfaces.
2. Business Goals:
 Expanding market reach by integrating advanced features like AI-
driven recommendations and voice search.
 Enhancing partnerships with restaurants by offering better
analytics and management tools.
 Increasing user retention and engagement through loyalty
programs and gamified features.
3. Competitive Landscape:
 Staying ahead in a competitive market by incorporating
innovative features seen in rival platforms.
 Addressing feedback from users and stakeholders to improve
services.
4. Technological Advancements:
 Leveraging modern technologies (e.g., machine learning, cloud
computing) to enhance system performance and scalability.

Page |9
  Adapting to new trends, such as sustainability-focused dining and
virtual kitchens.
5. Operational Efficiency:
 Streamlining the order and delivery process to reduce delays and
errors.
 Simplifying restaurant onboarding and menu management.
By identifying these needs, the analysis ensures that the Zomato web
platform evolves to meet user demands, achieve business objectives,
and remain competitive in the market.

P a g e | 10
2.3 PRELIMINARY INVESTIGATION
The Preliminary Investigation phase is the initial step in
understanding the scope, requirements, and challenges of developing
or enhancing the Zomato web platform. This phase involves gathering
information, analyzing the current system, and defining the objectives
for the proposed solution.

1. Information Gathering:
 Conducting interviews with stakeholders, including users,
restaurant owners, delivery personnel, and internal teams.
 Reviewing user feedback and complaints to identify pain points
in the current platform.
 Analyzing market trends and competitor platforms to determine
areas for improvement or innovation.

2. Assessment of the Current System:

 Strengths:
o Established user base and brand recognition.
o Functional features like restaurant search, reviews, and food
delivery.
 Weaknesses:
o Potential inefficiencies in search algorithms, delivery
tracking, or user interface.
o Limited integration of advanced personalization features.
o Challenges in scalability and handling peak traffic.

3. Defining the Project Scope:

P a g e | 11
  Identifying the key areas to address, such as:
o Enhancing the search and recommendation system.
o Improving delivery tracking and restaurant management
tools.
o Integrating modern technologies like AI and real-time
analytics.
 Establishing boundaries to ensure the project remains focused and
achievable within time and budget constraints.

4. Identifying Constraints:
 Technical Constraints: Compatibility with existing
technologies, limitations in infrastructure, or resource
availability.
 Financial Constraints: Budget limitations for development,
testing, and deployment.
 Operational Constraints: Ensuring minimal disruption to
current operations during system upgrades.

5. Setting Objectives:
 Deliver a user-friendly and scalable platform that meets user and
business needs.
 Enhance system performance and reduce operational
inefficiencies.
 Integrate innovative features to maintain a competitive edge.

P a g e | 12
2.4 FEASIBILITY STUDY
The Feasibility Study evaluates whether the proposed enhancements
or development of the Zomato web platform are viable and worth
pursuing. It ensures the project is technically, economically, and
operationally feasible before committing resources to its
implementation.

2.4.1 Introduction
This section introduces the purpose of the feasibility study and its role
in the project lifecycle. The study aims to assess the practicality of the
proposed system, considering technical, financial, and operational
factors. It ensures that the project aligns with organizational goals and
user expectations while minimizing risks.

P a g e | 13
2.4.2 Technical Feasibility
This section examines whether the current technology and
infrastructure can support the development and deployment of the
proposed system.
Key Considerations:
 Technology Stack: Assessing the suitability of React (frontend),
Node.js (backend), and databases like MongoDB or PostgreSQL
for handling increased traffic and complex functionalities.
 Scalability: Evaluating whether the system can scale to support
growing user demand and market expansion.
 Integration: Ensuring seamless integration with third-party APIs
for maps, payment gateways, and delivery tracking.
 Resource Availability: Assessing the availability of skilled
personnel, such as developers and designers, to execute the
project.
 Risks: Identifying potential technical challenges, such as
performance bottlenecks or compatibility issues.

P a g e | 14
2.4.3 Economic Feasibility
This section assesses the financial viability of the project by analyzing
costs and benefits.
Key Considerations:
 Cost Analysis:
o Development costs, including salaries, software licenses,
and hardware.
o Maintenance costs for servers, infrastructure, and ongoing
support.
 Revenue Projections:
o Increased revenue through enhanced user engagement,
subscriptions, and partnerships.
o Potential for new revenue streams, such as premium
features or advertising.
 Return on Investment (ROI): Estimating the time required to
recover development costs and achieve profitability.
 Budget Allocation: Ensuring sufficient funds are available for
the project without compromising other operations.

P a g e | 15
2.4.4 Operational Feasibility
This section evaluates whether the proposed system can be effectively
implemented and maintained in the operational environment.
Key Considerations:
 User Adoption: Ensuring the system is user-friendly and meets
the needs of customers, restaurants, and delivery partners.
 Training and Support: Providing adequate training for internal
teams and stakeholders to use the system effectively.
 Workflow Integration: Analyzing how the system will integrate
with existing workflows and processes without significant
disruptions.
 Long-term Sustainability: Assessing the system’s ability to
adapt to future changes, such as market trends or technological
advancements.

The feasibility study provides a comprehensive evaluation of the

project, ensuring that it is practical, cost-effective, and aligned with the
goals of Zomato and its stakeholders. It serves as a critical decision-
making tool before proceeding to the design and development phases.

P a g e | 16
2.5 DATAFLOW DIAGRAM (DFD)
The Dataflow Diagram (DFD) is a visual representation of how data
flows within the Zomato web system. It illustrates the processes, data
stores, and interactions between external entities and the system. The
DFD is developed in multiple levels to provide a detailed understanding
of the system’s functionality and data interactions.

2.5.1 Introduction
This section introduces the concept and purpose of DFDs.
Key Points:
 A DFD helps stakeholders understand how data moves through
the system, making it easier to identify inefficiencies or areas for
improvement.
 It is a tool for modeling system processes, data inputs/outputs,
and interactions with external entities like users, restaurants, and
payment gateways.
 The DFD is divided into levels:
o 0-Level DFD (Context Diagram): High-level overview of
the system.
o 1-Level DFDs: Breaks down the main processes into sub-
processes.
o 2-Level DFDs: Provides detailed views of individual sub-
processes.

P a g e | 17
2.5.2 0-Level DFD/Context Diagram
The 0-Level DFD provides a high-level view of the Zomato system,
showing the interactions between the system and external entities.
Key Elements:
 External Entities:
o Users: Customers searching for restaurants, placing orders,
and providing feedback.
o Restaurants: Partners managing menus, receiving orders,
and updating availability.
o Payment Gateways: Third-party systems for processing
payments.
o Delivery Personnel: Individuals receiving and fulfilling
delivery requests.
 System Processes:
o Receiving user input (search queries, orders).
o Processing orders and payments.
o Sending data to restaurants and delivery personnel.
 Data Stores: Centralized storage for user data, restaurant details,
orders, and transactions.

P a g e | 18
2.5.3 1-Level DFDs
The 1-Level DFD breaks down the main processes into sub-processes
for a more detailed view.
Example Sub-Processes:
1. User Interaction:
o User login/registration.
o Searching for restaurants or dishes.
2. Order Management:
o Adding items to the cart.
o Confirming orders and sending them to restaurants.
3. Payment Processing:
o Verifying payment details.
o Sending payment confirmations to users and restaurants.
4. Delivery Coordination:
o Assigning delivery personnel.
o Tracking order status and updating users.

P a g e | 19
2.5.4 2-Level DFDs
The 2-Level DFD provides a detailed view of specific sub-processes.
Example Detailed Processes:
1. User Login/Registration:
o Verifying user credentials.
o Retrieving or storing user information in the database.
2. Order Confirmation:
o Validating cart items and restaurant availability.
o Sending order details to the restaurant.
3. Real-Time Tracking:
o Receiving GPS data from delivery personnel.
o Updating order status for the user in real time.

By using DFDs at various levels, the Zomato web platform’s data flow
is clearly defined, enabling developers and stakeholders to understand
the system’s processes and data interactions. This clarity helps in
designing a more efficient and user-friendly platform.

P a g e | 20
2.6 HARDWARE REQUIREMENTS
The Hardware Requirements section outlines the essential physical
infrastructure necessary for the development, deployment, and
operation of the Zomato web platform. These requirements ensure
smooth performance, scalability, and reliability of the system.

1. Server Requirements:
 Web Server:
o Handles user requests and hosts the application.
o Specifications:
 Processor: Multi-core CPU (e.g., Intel Xeon).
 RAM: 8 GB or more.
 Storage: 256 GB SSD.
 Database Server:
o Stores user data, restaurant details, and transaction records.
o Specifications:
 Processor: Multi-core CPU.
 RAM: 16 GB or more.
 Storage: 500 GB SSD.

2. Networking Equipment:
 Router:
o For connecting the servers to the internet.

 Switches:
o For efficient internal communication between servers.

P a g e | 21
3. Development Devices:
 Workstations:
o Used by developers and testers.
o Specifications:
 Processor: Intel i5 or equivalent.
 RAM: 8 GB or more.
 Storage: 256 GB SSD.
 Mobile Devices:
o For testing the platform on Android and iOS devices.

4. Backup and Power:

 Storage Backup:
o External hard drives or cloud storage for data backups.
 Power Backup:
o Uninterruptible Power Supply (UPS) to prevent downtime
during power outages.

These basic requirements ensure a functional and reliable setup for

developing and running the Zomato web platform.

P a g e | 22
2.7 Software Requirements
The Software Requirements for the Zomato web application include
the necessary software tools, libraries, and technologies required for
the development, deployment, and operation of the platform. These
requirements ensure the application is scalable, efficient, and provides
a smooth user experience.

1. Frontend Development:
 React.js:
o A JavaScript library for building the user interface. React
enables the development of interactive, dynamic, and
responsive web pages.
 HTML5/CSS3:
o Standard markup and styling languages for creating the
structure and design of the web pages.
 JavaScript:
o The core scripting language for making the web application
interactive and responsive.
 React Router:
o A library for handling routing in the application, enabling
navigation between different pages without reloading the
page (single-page application).
 Redux:
o A state management library used to manage and centralize
the application's state, ensuring consistency across
components.
 Material-UI or Bootstrap:
o CSS frameworks for designing responsive and modern user
interfaces with pre-built components.

P a g e | 23
2. Backend Development:
 Node.js:
o A JavaScript runtime environment that allows for the
development of server-side applications using JavaScript.
 Express.js:
o A web application framework for Node.js used to build
RESTful APIs and handle HTTP requests.
 JWT (JSON Web Tokens):
o For user authentication and authorization, ensuring secure
communication between the client and server.
 Nodemon:
o A tool for automatically restarting the server during
development when changes are made to the code.

3. Database Management:
 MongoDB (NoSQL Database):
o A NoSQL database used for storing unstructured or semi-
structured data like user profiles, restaurant details, and
reviews.
 PostgreSQL (Optional Relational Database):
o A relational database used for handling structured data like
transactions, orders, and payment records.
 Mongoose (for MongoDB):
o An ODM (Object Data Modeling) library for MongoDB,
used to define schemas and interact with the database.

P a g e | 24
4. API Integration:
 Payment Gateway API (e.g., Stripe, Razorpay, PayPal):
o For handling online payments securely and efficiently.
 Google Maps API:
o For location-based services, such as displaying restaurant
locations, calculating delivery routes, and showing user
addresses.
 Twilio API:
o For sending SMS notifications regarding order updates,
delivery status, etc.

5. Deployment and Hosting:

 Cloud Platforms (AWS, Google Cloud, or Heroku):
o Cloud services for hosting the application, ensuring
scalability, and managing server resources.
 CI/CD Tools (e.g., Jenkins, GitHub Actions):
o Continuous Integration and Continuous Deployment tools
to automate the process of testing, building, and deploying
the application.

P a g e | 25
6. Version Control:
 Git:
o A version control system for tracking changes in the
codebase and collaborating with other developers.
 GitHub/GitLab:
o Platforms for hosting Git repositories, managing pull
requests, and enabling collaboration among developers.

7. Testing Tools:
 Jest:
o A JavaScript testing framework for writing unit and
integration tests for React components and backend APIs.
 Cypress or Selenium:
o Tools for end-to-end testing, ensuring the application works
as expected from the user's perspective.

8. Monitoring and Analytics:

 Google Analytics:
o For tracking user behavior, page views, and other
interactions within the application.
 New Relic or Datadog:
o For monitoring the performance of the application, tracking
errors, and ensuring high availability.
 Sentry:
o A tool for error tracking and logging, helping developers
identify and fix issues quickly.

P a g e | 26
9. Development Tools:
 Visual Studio Code or WebStorm:
o Integrated development environments (IDEs) for writing
and debugging code.
 Postman:
o A tool for testing APIs, making HTTP requests, and
checking the responses from the backend.

P a g e | 27
 CHAPTER 3:
SYSTEM DESIGN

3.1 INTRODUCTION
The system design phase is a crucial step in the software development
lifecycle, as it defines how the system will function and how its
components will interact. In this chapter, we will outline the
architecture of the Zomato web application, focusing on the system’s
overall structure, data flow, and entity relationships. The design aims
to ensure that the system meets the functional and non-functional
requirements, providing a seamless user experience.

3.2 ER DIAGRAM
An Entity-Relationship (ER) diagram is a visual representation of the
system’s data and the relationships between different entities. It serves
as a blueprint for database design, helping to understand how data is
stored and accessed.

3.2.1 INTRODUCTION
The ER diagram for the Zomato web application illustrates the main
entities involved, such as users, restaurants, orders, and reviews. It also
shows the relationships between these entities, helping to visualize how
data flows and is interconnected within the system. This diagram is
essential for understanding the data structure and for designing the
underlying database.

P a g e | 28
3.2.2 ER DIAGRAMS OF PROJECT
The ER diagram for the Zomato web application includes the following
entities:
1. User:
o Attributes: User ID, Name, Email, Phone Number, Address,
etc.
o Relationships: A user can place many orders and write
reviews for multiple restaurants.
2. Restaurant:
o Attributes: Restaurant ID, Name, Location, Cuisine Type,
Rating, Menu, etc.
o Relationships: A restaurant can receive many orders and
reviews from different users.
3. Order:
o Attributes: Order ID, User ID (foreign key), Restaurant ID
(foreign key), Order Date, Total Price, etc.
o Relationships: An order is placed by a user for a restaurant.
4. Review:
o Attributes: Review ID, User ID (foreign key), Restaurant ID
(foreign key), Rating, Comment, Date, etc.
o Relationships: A review is written by a user for a restaurant.
5. Menu Item:
o Attributes: Item ID, Name, Description, Price, Restaurant
ID (foreign key).
o Relationships: A restaurant can have many menu items.
The ER diagram helps to define the relationships and ensures that the
database structure is normalized and efficient.

P a g e | 29
P a g e | 30
3.3 DATA/TABLE STRUCTURES
The data or table structures define how the data will be organized
within the database. These structures include the tables, their attributes,
and the relationships between them.

The primary tables for the Zomato web application could include:
1. Users Table:
o Columns: User_ID, Name, Email, Phone, Address, etc.
o Primary Key: User_ID
o Foreign Keys: None
2. Restaurants Table:
o Columns: Restaurant_ID, Name, Location, Cuisine_Type,
Rating, etc.
o Primary Key: Restaurant_ID
o Foreign Keys: None
3. Orders Table:
o Columns: Order_ID, User_ID, Restaurant_ID,
Order_Date, Total_Price, etc.
o Primary Key: Order_ID
o Foreign Keys: User_ID (references Users table),
Restaurant_ID (references Restaurants table)
4. Reviews Table:
o Columns: Review_ID, User_ID, Restaurant_ID, Rating,
Comment, Date, etc.
o Primary Key: Review_ID

P a g e | 31
 o Foreign Keys: User_ID (references Users table),
Restaurant_ID (references Restaurants table)
5. Menu_Items Table:
o Columns: Item_ID, Name, Description, Price,
Restaurant_ID
o Primary Key: Item_ID
o Foreign Keys: Restaurant_ID (references Restaurants
table)
These tables will be linked through foreign keys, ensuring that the
relationships between users, restaurants, orders, reviews, and menu
items are maintained properly. The structure is designed to be scalable,
flexible, and efficient for handling large amounts of data.

This chapter provides a comprehensive overview of the system design

for the Zomato web application, focusing on the ER diagram and data
structures that will support the system's functionality. The design
ensures that data is well-organized and accessible for the application’s
operations.

P a g e | 32
 CHAPTER 4:
SYSTEM IMPLEMENTATION AND MAINTENANCE

System Implementation:
System implementation is the phase where the actual system is built
and made operational. It involves translating the design into a working
software application and deploying it to the production environment.
Key Steps in System Implementation:
1. Development of the System:
o The system is developed according to the specifications and
designs outlined in previous phases. This includes coding
the frontend (using React), backend (using Node.js and
Express), and database (using MongoDB or MySQL).
o Frontend Development:
 React components are created to handle user
interactions, display restaurant information, manage
user login, and perform search operations.
o Backend Development:
 APIs are built to handle user requests, such as fetching
restaurant data, placing orders, writing reviews, and
processing payments.
o Database Setup:
 The database schema is implemented, and the data is
populated with initial records (e.g., restaurants, menu
items, etc.).
2. Testing the System:
o Unit Testing:
 Individual components, APIs, and functions are tested
to ensure they work as expected.

P a g e | 33
 o Integration Testing:
 The interaction between different components (e.g.,
frontend and backend) is tested to ensure smooth data
flow and functionality.
o User Acceptance Testing (UAT):
 End-users test the system to ensure it meets their
requirements and expectations.
3. Deployment:
o Hosting:
 The web application is deployed to a cloud platform
(e.g., AWS, Heroku, or Google Cloud) for production
use.
o Database Setup:
 The production database is configured and connected
to the application, ensuring that all data is stored and
retrieved correctly.
o Domain and SSL Configuration:
 The application is configured with a custom domain,
and SSL certificates are installed to ensure secure
communication.
4. Training and Documentation:
o User Documentation:
 Documentation is provided to end-users, explaining
how to use the application’s features (e.g., creating an
account, searching for restaurants, placing an order).
o Developer Documentation:

P a g e | 34
  Developers are provided with documentation on the
codebase, APIs, and system architecture to facilitate
future maintenance and updates.

System Maintenance:
System maintenance ensures that the application continues to function
efficiently and remains up-to-date with changing requirements,
technology, and user feedback. It involves monitoring the system,
fixing bugs, and adding new features.
Key Aspects of System Maintenance:
1. Bug Fixes and Issue Resolution:
o Monitoring:
 Tools like Sentry or New Relic are used to monitor
the application for errors, crashes, and performance
issues.
o Bug Tracking:
 Bugs and issues reported by users or identified during
testing are tracked using tools like Jira or GitHub
Issues.
o Patches and Fixes:
 Regular patches are applied to fix bugs, address
security vulnerabilities, and improve system stability.
2. Performance Optimization:
o Database Optimization:
 Queries and database indexes are optimized to
improve performance, especially as the number of
users and data grows.
o Frontend Optimization:

P a g e | 35
  Techniques like lazy loading, code splitting, and
minification are used to improve the loading speed
and performance of the web application.
o Caching:
 Caching strategies (e.g., Redis) are implemented to
reduce the load on the server and improve response
times for frequently accessed data.
3. Security Updates:
o Patch Management:
 Regular updates to third-party libraries and
frameworks (e.g., React, Node.js) are applied to
address security vulnerabilities.
o User Data Protection:
 User data, including sensitive information like
passwords and payment details, is encrypted, and
secure protocols (e.g., HTTPS) are used to protect
data during transmission.
4. Feature Enhancements and Upgrades:
o User Feedback:
 Feedback from users is collected to identify areas for
improvement or new features. This could include
adding new restaurant categories, improving search
functionality, or introducing promotions.
o Continuous Integration and Continuous Deployment
(CI/CD):
 New features and updates are deployed regularly
using CI/CD pipelines to ensure that the system
remains up-to-date with minimal downtime.
o Version Control:

P a g e | 36
  The codebase is maintained using version control
tools like Git to track changes and manage updates.
5. Backup and Disaster Recovery:
o Data Backups:
 Regular backups of the database and application data
are performed to prevent data loss in case of a failure.
o Disaster Recovery Plan:
 A disaster recovery plan is in place to restore the
system quickly in case of a major failure, ensuring
minimal downtime.
6. User Support and Troubleshooting:
o Help Desk:
 A support team is available to assist users with issues
such as account problems, payment issues, or
technical difficulties.
o FAQ and Knowledge Base:
 A knowledge base or FAQ section is provided to
address common user queries and provide self-help
resources.

P a g e | 37
 CHAPTER 5:
SYSTEM TESTING
5.1 INTRODUCTION
System testing is a critical phase in the software development lifecycle
that ensures the application works as expected and meets the specified
requirements. It involves executing the system in a controlled
environment to identify defects, ensure reliability, and verify the
functionality of the application.
The goal of system testing is to evaluate the overall performance,
security, usability, and compatibility of the system. This chapter covers
the importance of system testing, the various testing techniques used,
and the strategies implemented to ensure that the Zomato web
application is robust and free of errors before it is deployed to
production.
Key objectives of system testing include:
 Verifying that all features of the application function correctly.
 Ensuring the application meets the business and user
requirements.
 Identifying and fixing any bugs or issues that may affect the user
experience.
 Testing the system’s performance under various conditions.
System testing is performed after the system has been developed and
integrated, ensuring that all components work together as intended.

P a g e | 38
5.1.1 TESTING TECHNIQUES
Testing techniques are the methods used to identify defects and verify
the functionality of the system. These techniques help ensure that the
Zomato web application operates smoothly and delivers a seamless
user experience.
The following are common testing techniques used in system testing:
1. Unit Testing:
o Purpose: Tests individual components or units of the
application in isolation to ensure they function correctly.
o Tools: Jest, Mocha (for JavaScript testing).
o Example: Testing a function that calculates the total price
of an order.
2. Integration Testing:
o Purpose: Verifies that different modules or components of
the system work together as expected.
o Tools: Postman (for API testing), Mocha.
o Example: Testing the interaction between the frontend and
backend when placing an order.
3. System Testing:
o Purpose: Tests the entire system as a whole to ensure that
all components work together and meet the specified
requirements.
o Tools: Selenium, Cypress (for end-to-end testing).
o Example: Testing the entire flow from user registration,
browsing restaurants, placing an order, and making a
payment.
4. Regression Testing:
o Purpose: Ensures that new code changes or bug fixes do
not negatively impact existing functionality.

P a g e | 39
 o Tools: Selenium, Cypress.
o Example: After adding a new feature (e.g., a rating system),
regression testing ensures that the existing features like
search and order placement still work correctly.
5. User Acceptance Testing (UAT):
o Purpose: Verifies that the system meets the user’s needs
and requirements.
o Tools: Manual testing by end-users.
o Example: End-users test the application to ensure that it
functions as expected and provides the features they need.
6. Performance Testing:
o Purpose: Ensures the application performs well under
expected load conditions.
o Tools: Apache JMeter, LoadRunner.
o Example: Testing how the application handles a large
number of simultaneous users or high traffic during peak
times.
7. Security Testing:
o Purpose: Identifies vulnerabilities in the system and
ensures that sensitive data is protected.
o Tools: OWASP ZAP, Burp Suite.
o Example: Testing for SQL injection vulnerabilities,
ensuring proper encryption of passwords, and checking the
security of payment transactions.
8. Compatibility Testing:
o Purpose: Ensures that the application works across
different browsers, devices, and operating systems.
o Tools: BrowserStack, Sauce Labs.

P a g e | 40
o Example: Testing the Zomato web application on different
browsers like Chrome, Firefox, and Safari to ensure
consistent behavior.

P a g e | 41
5.2 TESTING STRATEGIES
A well-defined testing strategy is essential to ensure the Zomato web
application is thoroughly tested and free of defects. The strategy
outlines the approach, resources, and schedule for testing and provides
a framework for identifying and resolving issues efficiently.
The following testing strategies can be employed for the Zomato web
application:
1. Test Planning:
o Objective: Define the scope, resources, and schedule for
testing.
o Activities:
 Define test cases and scenarios based on the system
requirements.
 Identify the resources required, such as testers, tools,
and environments.
 Schedule testing activities to ensure timely delivery.
2. Test Case Design:
o Objective: Create detailed test cases that outline the
specific conditions, inputs, expected outputs, and steps for
each test.
o Activities:
 Design test cases for each feature and functionality of
the application.
 Ensure that test cases cover all possible scenarios,
including edge cases and error handling.
 Document the expected results and compare them
with actual results.
3. Test Execution:
o Objective: Execute the test cases and record the results.

P a g e | 42
 o Activities:
 Run the test cases manually or using automated testing
tools.
 Record any defects or issues encountered during
testing.
 Retest after defects are fixed to ensure that they have
been resolved.
4. Defect Tracking and Reporting:
o Objective: Track and report any defects or issues identified
during testing.
o Activities:
 Use tools like Jira or Bugzilla to track defects.
 Categorize defects based on severity and priority.
 Report defects to the development team for resolution.
5. Test Closure:
o Objective: Finalize testing activities and ensure that all
defects have been addressed.
o Activities:
 Review the testing process and ensure all test cases
have been executed.
 Confirm that the system meets the requirements and is
ready for production.
 Provide test reports and documentation for future
reference.
6. Continuous Testing and Feedback:
o Objective: Ensure ongoing testing throughout the software
lifecycle.

P a g e | 43
o Activities:
 Implement continuous integration (CI) and
continuous testing to detect defects early in the
development process.
 Gather feedback from end-users and make necessary
adjustments based on their input.

P a g e | 44
 CHAPTER 5:
SYSTEM SECURITY MEASURES
System security is a critical aspect of any web application, especially
one that handles sensitive user data, such as personal information,
payment details, and order history. For the Zomato web application,
ensuring the security of both users and data is essential to prevent
unauthorized access, data breaches, and other malicious activities.
Below are the key security measures that should be implemented to
protect the Zomato web application:

1. Authentication and Authorization

Authentication ensures that only authorized users can access the
system, while authorization determines what actions authenticated
users are allowed to perform.
 User Authentication:
o Multi-Factor Authentication (MFA): Implement two-
factor authentication (2FA) for users to enhance security.
Users should verify their identity using both a password and
a second factor (e.g., a one-time password sent to their
mobile device).
o OAuth: Use OAuth or other secure authentication protocols
for third-party logins (e.g., Google or Facebook).
o Password Management:
 Use strong password policies (e.g., requiring a mix of
uppercase, lowercase, numbers, and special
characters).
 Password Hashing: Store passwords securely by
hashing them using strong algorithms like bcrypt or
PBKDF2. Avoid storing plain-text passwords.

P a g e | 45
  Salting: Add a unique salt to each password before
hashing to protect against rainbow table attacks.
 Role-Based Access Control (RBAC):
o Implement role-based access control to ensure that users
can only access resources and perform actions appropriate
to their role (e.g., admin, customer, restaurant owner).

2. Data Encryption
Data encryption ensures that sensitive information is unreadable to
unauthorized parties.
 Encryption in Transit:
o Use HTTPS (SSL/TLS) to encrypt all data transmitted
between the client (user's browser) and the server. This
prevents man-in-the-middle attacks and ensures the privacy
of sensitive information, such as payment details and user
login credentials.
 Encryption at Rest:
o Encrypt sensitive data stored in the database, such as user
personal information, payment data, and order history,
using strong encryption algorithms like AES-256.
o Ensure that encryption keys are stored securely and
separately from encrypted data.

3. Secure Payment Processing

Since Zomato handles online payments, securing payment transactions
is critical to protect user financial information.
 PCI-DSS Compliance:

P a g e | 46
 o Ensure that the system complies with Payment Card
Industry Data Security Standard (PCI-DSS) to securely
process, store, and transmit credit card information.
 Third-Party Payment Gateways:
o Use trusted third-party payment gateways (e.g., Stripe,
PayPal) to process payments. These services comply with
industry standards for secure payment processing and
reduce the burden of handling sensitive payment data
directly.

4. SQL Injection Prevention

SQL injection is a common attack where an attacker inserts malicious
SQL code into input fields to manipulate the database.
 Parameterized Queries and Prepared Statements:
o Use parameterized queries and prepared statements to
prevent SQL injection. This ensures that user input is treated
as data and not executable code.
 Input Validation and Sanitization:
o Validate and sanitize all user inputs to ensure they meet
expected formats (e.g., no special characters in a name or
address field).
o Use libraries like validator.js to check for valid input before
passing it to the database.

5. Cross-Site Scripting (XSS) Prevention

P a g e | 47
XSS attacks occur when an attacker injects malicious scripts into web
pages viewed by other users.
 Input Sanitization:
o Sanitize all user-generated content (e.g., reviews,
comments) to ensure that it does not contain executable
JavaScript.
 Content Security Policy (CSP):
o Implement a Content Security Policy (CSP) to restrict the
types of content that can be executed on the page, reducing
the risk of XSS attacks.
 Escaping Output:
o Ensure that any user-generated content displayed on the
webpage is properly escaped to prevent the execution of
scripts.

6. Cross-Site Request Forgery (CSRF) Prevention

CSRF attacks trick users into performing unwanted actions on a web
application where they are authenticated.
 Anti-CSRF Tokens:
o Use anti-CSRF tokens to verify that requests made to the
server are legitimate and initiated by the authenticated user.
 SameSite Cookies:
o Set the SameSite attribute for cookies to Strict or Lax to
prevent cookies from being sent along with cross-site
requests.
7. Session Management
Proper session management is essential to protect against session
hijacking and unauthorized access.

P a g e | 48
  Secure Session Cookies:
o Use secure cookies with the HttpOnly and Secure flags to
prevent cookies from being accessed by JavaScript and
ensure they are only sent over HTTPS.
 Session Expiry:
o Implement session expiration and automatic logout after a
period of inactivity (e.g., 15-30 minutes) to reduce the risk
of session hijacking.
 Token-Based Authentication (JWT):
o Use JSON Web Tokens (JWT) for stateless authentication,
ensuring that the server doesn't store session information
but instead relies on signed tokens to verify user identity.

8. Security Audits and Penetration Testing

Regular security audits and penetration testing help identify
vulnerabilities and ensure the system remains secure.
 Penetration Testing:
o Conduct regular penetration tests to simulate attacks and
identify potential vulnerabilities.
 Vulnerability Scanning:
o Use automated tools like OWASP ZAP or Burp Suite to
scan for security vulnerabilities, such as cross-site scripting
(XSS), SQL injection, and other common exploits.

9. Logging and Monitoring

Continuous monitoring and logging are crucial for detecting suspicious
activity and responding to security incidents.
 Centralized Logging:

P a g e | 49
 o Use centralized logging systems (e.g., ELK Stack or
Splunk) to track and monitor logs from various components
of the system (e.g., web server, application server,
database).
 Intrusion Detection Systems (IDS):
o Implement an Intrusion Detection System (IDS) to detect
unusual or unauthorized activity, such as brute-force login
attempts or abnormal traffic patterns.
 Real-Time Alerts:
o Set up real-time alerts for critical security events (e.g., failed
login attempts, access to sensitive data) to notify the
security team immediately.

10. Backup and Disaster Recovery

Data loss due to a security breach or technical failure can be
catastrophic, so it's essential to have backup and recovery measures in
place.
 Regular Backups:
o Perform regular backups of the application data, including
user information, orders, and reviews, to ensure that it can
be restored in case of a disaster.
 Disaster Recovery Plan:
Develop and test a disaster recovery plan to quickly restore the system
in case of a major security breach or technical failure.

P a g e | 50
 CHAPTER 7:
SYSTEM MODULES/REPORTS AND THEIR DESCRIPTIONS
In the Zomato web application, various system modules and reports
work together to deliver a seamless experience for users and
administrators. Below are the key modules of the Zomato web
application along with their descriptions:

1. User Management Module

Description: The User Management module handles everything
related to user registration, authentication, and profile management.
This module ensures that only authorized users can access the platform
and make use of its features.
 Functions:
o User Registration: Allows users to sign up using their email,
social media accounts, or phone numbers.
o Login/Logout: Provides secure login and logout
functionality using username/password or third-party
authentication (OAuth).
o Profile Management: Allows users to update personal
details, including name, email, password, and preferences.
o Forgot Password: Provides a mechanism to reset passwords
in case users forget them.
o User Roles: Differentiates between regular users, restaurant
owners, and administrators with distinct access levels.

P a g e | 51
2. Restaurant Management Module
Description: This module is designed for restaurant owners to manage
their restaurant profiles, menus, and order details. It helps restaurant
owners add, update, and delete menu items and manage customer
orders.
 Functions:
o Restaurant Registration: Allows restaurant owners to
register their business on the platform.
o Menu Management: Provides tools to add, edit, and remove
menu items, including prices, descriptions, and images.
o Order Management: Enables restaurant owners to view and
manage incoming orders, mark orders as complete, and
track delivery statuses.
o Reviews and Ratings: Allows restaurant owners to monitor
customer feedback, respond to reviews, and improve their
offerings.

P a g e | 52
3. Search and Filter Module
Description: The Search and Filter module enables users to search for
restaurants based on various criteria, such as location, cuisine type,
ratings, and price range. This module enhances user experience by
providing quick access to relevant restaurant listings.
 Functions:
o Search: Allows users to search for restaurants by name,
cuisine, or location.
o Filters: Users can filter search results based on parameters
like price range, ratings, distance, delivery time, and more.
o Sorting: Allows users to sort the search results by ratings,
price, or proximity to their location.
o Map Integration: Displays search results on an interactive
map, showing the location of each restaurant.

P a g e | 53
4. Ordering and Payment Module
Description: The Ordering and Payment module is responsible for
managing customer orders, including selecting items, adding them to
the cart, and proceeding with payment. This module ensures that users
can easily place orders and complete payments securely.
 Functions:
o Cart Management: Allows users to add, remove, and modify
items in their cart.
o Order Placement: Enables users to place orders by selecting
items from the menu, specifying quantities, and adding
special instructions.
o Payment Integration: Integrates with third-party payment
gateways (e.g., Stripe, PayPal) to process payments
securely.
o Order Confirmation: Provides users with an order
confirmation and estimated delivery time.
o Order History: Allows users to view past orders, reorder
items, and track the status of current orders.

P a g e | 54
5. Review and Rating Module
Description: The Review and Rating module enables users to rate and
review restaurants and their dishes. This module helps users make
informed decisions based on feedback from other customers.
 Functions:
o Rating: Allows users to rate restaurants and individual menu
items on a scale (e.g., 1 to 5 stars).
o Reviews: Users can write detailed reviews about their
experience, including food quality, delivery time, and
customer service.
o Review Moderation: Admins can monitor and moderate
reviews to ensure they comply with the platform’s
guidelines.
o Reply to Reviews: Restaurant owners can respond to
customer reviews, addressing concerns or thanking users
for positive feedback.

6. Admin Dashboard Module

Description: The Admin Dashboard module provides administrators
with an overview of the platform’s activities, including user statistics,
restaurant registrations, order statistics, and system performance. This
module is essential for managing and maintaining the system.
 Functions:
o User Management: Admins can view, edit, or delete user
accounts, and manage user roles.
o Restaurant Management: Admins can approve or reject
restaurant registrations, view restaurant details, and monitor
restaurant performance.

P a g e | 55
 o Order Monitoring: Admins can view and manage orders
placed on the platform, ensuring timely delivery and
resolving any issues.
o Reports and Analytics: Provides insights into system
performance, including active users, total orders, revenue,
and popular restaurants.
o System Logs: Tracks system activities and logs errors or
security incidents.

7. Analytics and Reporting Module

Description: The Analytics and Reporting module generates various
reports that provide insights into user activity, order trends, revenue,
and other key metrics. This module helps both administrators and
restaurant owners make data-driven decisions.
 Functions:
o Sales Reports: Provides detailed reports on daily, weekly,
and monthly sales, helping restaurant owners track revenue
and profitability.
o User Engagement Reports: Tracks user activity, such as the
number of active users, average session duration, and
popular search queries.
o Order Reports: Provides insights into the number of orders,
average order value, and delivery times.
o Rating and Review Reports: Generates reports on user
ratings and reviews, highlighting customer satisfaction and
areas for improvement.
o Marketing Analytics: Tracks the effectiveness of
promotional campaigns, including discounts, offers, and
user acquisition strategies.

P a g e | 56
8. Notification Module
Description: The Notification module is responsible for sending
notifications to users and restaurant owners about important events,
such as order updates, promotions, or new restaurant registrations.
 Functions:
o Order Notifications: Sends notifications to users when their
order status changes (e.g., order confirmed, out for delivery,
delivered).
o Promotional Notifications: Sends users notifications about
ongoing discounts, special offers, or new restaurants on the
platform.
o Push Notifications: Allows restaurant owners to receive
real-time notifications about new orders, reviews, and
customer inquiries.
o Email and SMS Notifications: Sends email and SMS
notifications for account-related activities, such as
password resets, order confirmations, and promotional
offers.

9. Security and Privacy Module

Description: The Security and Privacy module ensures that all user
data is protected and that the platform complies with relevant data
protection regulations, such as GDPR or CCPA.
 Functions:
o Data Encryption: Ensures that sensitive data (e.g.,
passwords, payment details) is encrypted both in transit and
at rest.
o Privacy Settings: Allows users to manage their privacy
preferences, including opting in or out of marketing
communications.

P a g e | 57
o Access Control: Ensures that users can only access their
own data and that administrators have appropriate
permissions.
o Compliance: Ensures the system complies with data
protection laws, including data retention and user consent
management.

P a g e | 58
 CHAPTER 8:
FUTURE SCOPE OF THE PROJECT
The Zomato web application has the potential for continuous growth
and improvement, both in terms of technology and features. As the food
delivery industry evolves and user expectations change, the project can
be enhanced to meet new challenges and opportunities. Below are some
potential areas for the future scope of the Zomato web application:

1. Integration with AI and Machine Learning

 Personalized Recommendations:
By integrating AI and machine learning algorithms, the platform
can offer personalized restaurant and dish recommendations
based on user preferences, previous orders, and browsing
history. This can enhance user experience and encourage repeat
orders.
 Dynamic Pricing:
AI-powered algorithms could be used to implement dynamic
pricing for menu items based on factors such as demand, time of
day, or location, helping restaurants optimize their pricing
strategy.
 Predictive Analytics:
Machine learning models could be used to predict peak times for
orders, customer behavior patterns, and inventory management
for restaurants. This would help improve operational efficiency
and ensure timely deliveries.

2. Voice Search and Ordering

 Voice-Activated Ordering:
With the growing popularity of voice assistants like Google
Assistant, Alexa, and Siri, integrating voice search and voice-
activated ordering into the Zomato app would offer a hands-free,

P a g e | 59
 user-friendly experience. Customers could place orders, search
for restaurants, or even ask for recommendations using voice
commands.

3. Improved Restaurant Analytics and Business Insights

 Advanced Analytics for Restaurants:
Zomato could provide restaurant owners with more advanced
analytics tools, such as customer segmentation, sales
forecasting, and marketing campaign performance tracking. This
would help restaurants optimize their offerings and make data-
driven decisions.
 Integration with POS Systems:
Integrating Zomato with restaurant Point-of-Sale (POS) systems
could streamline order management, inventory tracking, and
sales reporting, making it easier for restaurant owners to manage
their business.

4. Enhanced Customer Support and Chatbots

 AI-Powered Chatbots:
Zomato could integrate AI-powered chatbots for instant
customer support, handling common queries related to orders,
payments, and restaurant details. This would provide users with
quick assistance and reduce the need for human intervention.
 Live Chat Support:
Adding live chat support would allow users to interact with
customer service agents in real-time, resolving issues or
inquiries more efficiently.

P a g e | 60
 CHAPTER 9

APPENDICES
This chapter provides additional resources, guidelines, and references to support the
development and understanding of the Zomato web application project. The
appendices are crucial for providing detailed insights into the project’s design, coding
standards, and testing processes. Below is an overview of the sections included in this
chapter:

9.1 SCREEN SHOTS AND THEIR DESCRIPTIONS

This section includes screenshots of various pages and functionalities of the Zomato web
application. The purpose of these screenshots is to visually demonstrate the user interface
(UI) and user experience (UX) design. Each screenshot is accompanied by a detailed
description to help understand how the system works and how users interact with it.
 Examples of Screenshots:
o Home Page: A screenshot of the landing page showing the search bar,
restaurant listings, and featured offers.

P a g e | 61
o Restaurant Profile: A screenshot displaying a specific restaurant’s page,
including the menu, ratings, reviews, and contact details.

o Order Checkout: A screenshot showing the cart page where users can review
their order and proceed to payment.

o User Profile: A screenshot of the user profile page where personal

information, order history, and preferences can be managed.

P a g e | 62
 o Admin Dashboard: A screenshot of the admin panel showcasing analytics,
user management, and restaurant statistics.
o Feedback and Review Page
This page allows users to leave feedback and rate their experience after
an order is delivered. It also displays past reviews submitted by the user.
 Key Features:
o Star-based rating system.
o Text box for detailed feedback.
o Option to upload images of the food.

P a g e | 63
9.2 CODING GUIDELINES AND SAMPLE CODES

 Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.png" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>zomato - Online Food Ordering App</title>
</head>
<body>
<div id="root"></div>
<div id="modal"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

P a g e | 64
  AddRestaurantHeader.jsx

import css from './AddRestaurantHeader.module.css'

import banner from '/banners/banner2.jpg'

let AddRestaurantHeader = () => {

let [toogleMenu, setToggleMenu] = useState(true);

let toggleBanner = toogleMenu ? (<div className={css.banner}>

<Navbar setToggleMenu={setToggleMenu} toogleMenu={toogleMenu}
page="add-restaurant" />
<div className={css.bannerInner}>
<img src={banner} alt="banner" className={css.bannerImg} />
<div className={css.bannerTxt}>
<div className={css.title}>Register your restaurant on
Zomato</div>
<div className={css.tag}>for free and get more customers!</div>
<div className={css.btns}>
<Link to='/' className={css.btn}>Register your
restaurant</Link>
<Link to='/' className={css.btn}>Restaurant already listed?
Claim now</Link>
</div>
</div>
</div>
</div>) : <AddRestaurantMobileNavbar
setToggleMenu={setToggleMenu} toogleMenu={toogleMenu} />

P a g e | 65
 return toggleBanner;
}

export default AddRestaurantHeader;

P a g e | 66
 AddRestaurantHeader.module.css

.banner {
width: 100%;
height: 25rem;
margin-bottom: 2rem;
}

.bannerInner {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.bannerImg {
width: 100%;
height: 100%;
position: relative;
object-fit: cover;
}

.bannerTxt {
width: 70%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
margin-top: 1rem;
position: absolute;
color: var(--color-white);
}

.title {
font-size: 2.5rem;
font-weight: 600;

P a g e | 67
 text-align: center;
}

.tag {
font-weight: 200;
font-size: 1.4rem;
margin: 1rem 0;
}

.bld {
font-weight: bold;
}

.btns {
width: 100%;
margin-top: 1rem;
}

.btn {
width: 310px;
padding: 15px 20px;
margin-right: 1rem;
outline: none;
border: none;
background-color: var(--bg-blueish1);
color: var(--color-white);
font-size: 1rem;
font-weight: 450;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}

@media all and (max-width: 480px) {

.bannerTxt {
display: flex;
align-items: center;
}

.btns {

P a g e | 68
 display: flex;
flex-wrap: wrap;
}

.btn {
margin: 0.5rem;
}
}

@media all and (max-width: 768px) {

.title {
font-size: 1.9rem;
font-weight: bold;
text-align: center;
}

.tag {
font-size: 0.9rem;
}
}

@media only screen and (max-width: 992px) {

.bannerTxt {
display: flex;
}

.btns {
display: flex;
}

.btn {
width: 290px;
padding: 15px;
margin-right: 1rem;
background-color: var(--bg-blueish1);
color: var(--color-white);
font-size: 0.8rem;
font-weight: 300;
border-radius: 5px;
cursor: pointer;

P a g e | 69
 }
}

 SearchListedRestaurant.css

import css from './SearchListedRestaurant.module.css'

let SearchListedRestaurant = () => {

return <div className={css.outerDiv}>
<div className={css.innerDiv}>
<div className={css.title}>Already have your restaurant
listed?</div>

P a g e | 70
 <div className={css.tagLine}>Search here and claim the
ownership of your restaurant</div>
<div className={css.searchBox}></div>
</div>
</div>
}

export default SearchListedRestaurant;

 SearchListedRestaurant.module.css

.outerDiv {
position: relative;
width: 100%;
margin: 1rem 0;
background-color: var(--bg-ash);
}

.innerDiv {
padding: 4rem;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
}

.title {
text-align: center;
font-size: 2.5rem;

P a g e | 71
 font-weight: 500;
}

.tagLine {
font-size: 1.2rem;
word-spacing: 1px;
font-weight: 400;
color: var(--color-p2-text);
margin: 1rem 0;
}

@media all and (max-width: 480px) {

.title {
font-size: 1.6rem;
}

.tagLine {
font-size: 0.9rem;
}
}

P a g e | 72
  Footer.jsx:

import footerCss from './Footer.module.css';

import Gstore from '/icons/playstore.png';

import Appstore from '/icons/appstore.png';
import indianFlag from '/images/indiaflag.png';

import Facebook from '/images/facebook.png'

import Twitter from '/images/twitter.png'
import Instagram from '/images/instagram.png'
import Linkedin from '/images/linkedin.png'
import Youtube from '/images/youtube.png'

let Footer = () => {

return <div className={footerCss.footer}>
<div className={footerCss.innerFooter}>
<div className={footerCss.sec1}>
<div className={footerCss.logoBox}>zomato</div>
<div className={footerCss.filters}>
<div className={footerCss.filterBox}> <span>
<img className={footerCss.icon} src={indianFlag}
alt="india flag" />
</span>
<span>India</span>

P a g e | 73
 <span className={footerCss.arrow}
>&#709;</span></div>
<div
className={footerCss.filterBox}><span> <span></span>
English</span> <span className={footerCss.arrow}
>&#709;</span></div>
</div>
</div>
<div className={footerCss.sec2}>
<div className={[footerCss.box1, footerCss.box].join('
')}>
<div className={footerCss.boxTtl}>ABOUT
ZOMATO</div>
<a href="" className={footerCss.boxOpt}>Who We
Are</a>
<a href="" className={footerCss.boxOpt}>Blog</a>
<a href="" className={footerCss.boxOpt}>Work With
Us</a>
<a href="" className={footerCss.boxOpt}>Investor
Relations</a>
<a href="" className={footerCss.boxOpt}>Report
Fraud</a>
</div>
<div className={[footerCss.box2, footerCss.box].join('
')}>
<div
className={footerCss.boxTtl}>TOMAVERSE</div>
<a href=""
className={footerCss.boxOpt}>zomato</a>

P a g e | 74
<a href="" className={footerCss.boxOpt}>Feeding India</a>
<a href=""
className={footerCss.boxOpt}>Hyperpure</a>
<a href=""
className={footerCss.boxOpt}>zomaland</a>
</div>
<div className={[footerCss.box3, footerCss.box].join('
')}>
<div className={footerCss.boxTtl}>FOR
RESTAURANTS</div>
<a href="" className={footerCss.boxOpt}>Partner
With Us</a>
<a href="" className={footerCss.boxOpt}>Apps For
You</a>

<div className={footerCss.boxTtl}>FOR
ENTERPRISES</div>
<a href="" className={footerCss.boxOpt}>zomato
For Work</a>
</div>
<div className={[footerCss.box4, footerCss.box].join('
')}>
<div className={footerCss.boxTtl}>LEARN
MORE</div>
<a href=""
className={footerCss.boxOpt}>Privacy</a>
<a href=""
className={footerCss.boxOpt}>Security</a>

P a g e | 75
 <a href=""
className={footerCss.boxOpt}>Terms</a>
<a href=""
className={footerCss.boxOpt}>Sitemap</a>
</div>
<div className={[footerCss.box5, footerCss.box].join('
')}>
<div className={footerCss.boxTtl}>SOCIAL
LINKS</div>
<div className={footerCss.socialImgs}>
<a href=""
className={footerCss.socialImgAnchore} >
<img className={footerCss.socialImg}
src={Facebook} alt="linkedin" />
</a>
<a href=""
className={footerCss.socialImgAnchore} >
<img className={footerCss.socialImg}
src={Linkedin} alt="instagram" />
</a>
<a href=""
className={footerCss.socialImgAnchore} >
<img className={footerCss.socialImg}
src={Instagram} alt="facebook" />
</a>
<a href=""
className={footerCss.socialImgAnchore} >

P a g e | 76
 <img className={footerCss.socialImg}
src={Twitter} alt="twitter" />
</a>
<a href=""
className={footerCss.socialImgAnchore} >
<img className={footerCss.socialImg}
src={Youtube} alt="youtube" />
</a>
</div>
<a href='' className={footerCss.app}><img
className={footerCss.appImg} src={Gstore} alt="google play
store" /></a>
<a href='' className={footerCss.app}><img
className={footerCss.appImg} src={Appstore} alt="apple app
store" /></a>
</div>
</div>
<hr className={footerCss.breakLine} />
<div className={footerCss.sec3}>
By continuing past this page, you agree to our Terms of
Service, Cookie Policy, Privacy Policy and Content Policies. All
trademarks are properties of their respective owners. 2008-2022
© zomato™ Ltd. All rights reserved.
</div>
</div>
</div>
}

P a g e | 77
export default Footer;

 Footer.module.css
.footer {
width: 100%;
height: auto;
background-color: #F8F8F8;
padding: 2rem 4rem;
}

P a g e | 78
.innerFooter {}

.sec1 {
width: 100%;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.logoBox {
width: 150px;
height: 30px;
font-size: 2rem;
font-weight: 600;
}

.logo {
width: 100%;
height: 100%;
}

.filters {
display: flex;

P a g e | 79
 flex-wrap: wrap;
}

.filterBox {
margin-right: 20px;
padding: 10px;
border: 1px solid rgb(181, 181, 181);
border-radius: 5px;
display: flex;
justify-content: space-evenly;
align-items: center;
}

.icon {
width: 20px;
height: 20px;
margin-right: 5px;
}

.arrow {
margin-left: 5px;
}

.sec2 {
width: 100%;

P a g e | 80
 display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

.box {
width: 20%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}

.boxTtl {
margin: 10px 0px;
letter-spacing: 2px;
}

.boxOpt {
margin: 5px 0px;
text-decoration: none;
color: rgb(105, 105, 105);
font-size: 0.9rem;
}

.socialImgAnchore {

P a g e | 81
 text-decoration: none;
}

.socialImg {
width: 20px;
height: 20px;
margin: 5px;
cursor: pointer;
}

.app {
width: 146px;
height: 38px;
margin: 5px 0;
text-decoration: none;
border-radius: 5px;
}

.appImg {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 5px;
}

P a g e | 82
.breakLine {
margin: 20px 0;
border-top: 1px solid rgb(207, 207, 207);
}

.sec3 {
color: rgb(79, 79, 79);
text-align: justify;
font-size: 0.9rem;
}

@media all and (max-width: 800px) {

.sec1,
.sec2 {
width: 100%;
display: flex;

flex-wrap: wrap;
}

.box {
width: 40%;
}
}

P a g e | 83
@media all and (max-width: 550px) {

.footer {

padding: 1rem 2rem;

}

@media all and (max-width: 350px) {

.footer {
padding: 1rem 1rem;
}

.filters {
margin: 2rem 0 0 0;
}

P a g e | 84
}

P a g e | 85
Collections.jsx
import css from './Collections.module.css'

import rightArrow from '/icons/right-arrow.png'

import CathTheMatachImg from '/images/cathcthematch.jpg'

import NewInTownImg from '/images/newintown.jpg'

import TrendingThisWeekImg from '/images/trendingthisweek.jpg'

import CallingBarHoppersImg from '/images/callingallbarhoppers.jpg'

import CollectionsCard from '../../../utils/Cards/card2/CollectionsCard'

let Collections = () => {

return <div className={css.outerDiv}>

<div className={css.title}>Collections</div>

<div className={css.tagLine}>

<span className={css.desc}>Explore curated lists of top

restaurants, cafes, pubs, and bar in Agra, based on trends</span>

<span className={css.collectionPlacesTag}>All collections in Agra

<span className={css.rightArrowBox}><img className={css.rightArrow}
src={rightArrow} alt="right arrow" /></span></span>

</div>

<div className={css.cards}>

<CollectionsCard imgSrc={CathTheMatachImg} title="Catch the

Match" places="30" />

<CollectionsCard imgSrc={NewInTownImg} title="New In Town"

places="19" />

P a g e | 86
 <CollectionsCard imgSrc={TrendingThisWeekImg} title="Trending
This Week" places="30" />

<CollectionsCard imgSrc={CallingBarHoppersImg} title="Calling

all Bar Hoppers" places="30" />

</div>

</div>

export default Collections;

P a g e | 87
  Collections.module.css
. outerDiv {

margin: 3rem 0;

width: 100%;

.title {

font-size: var(--font-title-sz1);

font-weight: var(--font-title-weight);

color: var(--color-title-text);

.tagLine {

width: 100%;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

.desc {

font-weight: 350;

font-size: 1.2rem;

P a g e | 88
.collectionPlacesTag {

font-size: 1rem;

color: var(--color-pinky);

cursor: pointer;

.rightArrow {

width: 10px;

height: 10px;

color: var(--color-redish1);

filter: invert(21%) sepia(60%) saturate(7414%) hue-rotate(359deg)

brightness(94%) contrast(100%);

.cards {

width: 100%;

margin: 2.5rem 0;

display: flex;

flex-wrap: wrap;

justify-content: center;

@media all and (max-width: 480px) {

P a g e | 89
 .outerDiv {

margin: 2rem 0;

P a g e | 90
9.3 VALIDATION CHECKS
Description: This section describes the various validation checks
implemented in the Zomato web application to ensure that the data
entered by users is accurate, complete, and secure. Validation checks
are essential for maintaining data integrity and preventing errors or
malicious activities.
 Types of Validation Checks:
o Input Validation: Ensures that users enter valid data in form
fields (e.g., email addresses, phone numbers, and credit card
details). For example:
 Email Validation: Checks if the email format is correct
(e.g., [email protected]).
 Password Strength Validation: Ensures that the
password meets the required criteria (e.g., minimum
length, inclusion of special characters, etc.).
o Form Validation: Ensures that all required fields are filled
out before submission. For instance, a user cannot place an
order without selecting a delivery address.
o Payment Validation: Verifies that payment details are
correct before processing the transaction. For example,
checks for valid credit card numbers and expiration dates.
o Security Validation: Ensures that user data is secure,
preventing issues like SQL injection or cross-site scripting
(XSS). This includes validating inputs to prevent malicious
code execution.
o Server-Side Validation: Ensures that data sent from the
client-side is verified on the server before being stored in
the database. This prevents manipulation of data on the
client side.

P a g e | 91
 Error Messages and Feedback:
The application provides real-time error messages and feedback
to users if they fail to meet validation criteria. For example:
o "Please enter a valid email address."
o "Password must contain at least one uppercase letter, one
number, and one special character."
o "Order cannot be placed without selecting a delivery
address."

P a g e | 92
 CHAPTER 10

BIBLIOGRAPHY/REFERENCES
This chapter lists all the references, resources, and materials
used during the development and documentation of the
Zomato web application project. The bibliography ensures
proper acknowledgment of the sources and provides a
pathway for further reading and research.

Bibliography/References
1. Books and Publications
o "React.js Essentials" by Artemij Fedosejev.
o "Learning React: Modern Patterns for Developing React
Apps" by Alex Banks and Eve Porcello.
o "Web Development with Node and Express" by Ethan
Brown.
2. Web Resources
o React Official Documentation: https://reactjs.org/docs
o MDN Web Docs for JavaScript, HTML, and CSS:
https://developer.mozilla.org
o Zomato API Documentation:
https://developers.zomato.com/documentation
o GitHub Repository for Sample Projects: https://github.com
3. Tools and Frameworks
o React.js: https://reactjs.org
o Bootstrap for UI Components: https://getbootstrap.com

P a g e | 93
 o Firebase Authentication and Database:
https://firebase.google.com
4. Articles and Blogs
o "Best Practices for Building Scalable Web Applications" on
Medium.
o "Modern Frontend Development with React and Redux" on
Dev.to.
o "Optimizing Web Performance for Food Delivery
Platforms" on Smashing Magazine.
5. Research Papers and Journals
o "The Role of Technology in Food Delivery Services"
published in the International Journal of E-Commerce.
o "User Experience Design for E-commerce Websites" in the
Journal of Web Engineering.
6. Miscellaneous
o Online Tutorials and Video Guides from YouTube Channels
like Traversy Media and The Net Ninja.
o Discussions and Solutions from Stack Overflow:
https://stackoverflow.com

P a g e | 94
Curriculum Vitae
A Curriculum Vitae (CV) provides a summary of the team
members' or individual developer's academic qualifications,
technical skills, and relevant experience. This section
includes:
 Personal Information:
o Name: Himanshu
o Contact Details: [email protected]
o LinkedIn Profile (if applicable)
 Educational Background:
❖ Master of computer Application (MCA)| Dr. A.P.J. Abdul Kalam Technical University (Pursuing)

❖ The Bachelor of Computer Applications (BCA)| Dr. Bhimrao Ambedkar University

❖ XII (UP board) | Agra, Uttar Pradesh

❖ X (UP Board) | Agra, Uttar Pradesh

 Technical Skills:
o Proficiency in programming languages, frameworks, and
tools used in the project (e.g., React, JavaScript, HTML,
CSS, Node.js, Firebase).
 Project Experience:
o Brief description of the Zomato web application project,
including roles and responsibilities.
 Additional Information:
o Certifications (APNA Mern Stack Certification).
o Hobbies or interests related to web development.

P a g e | 95
P a g e | 96