A

Project Report on

“CAMPUS BITE”

Submitted In Partial Fulfillment of the Requirement for the Award of the Degree Of

Bachelor of Technology
(Computer Science & Engineering)

Submitted to

Dr. A.P.J. Abdul Kalam Technical University, Uttar Pradesh, Lucknow

Submitted by
SHIVANSH YADAV (2103330100075)
VASHU GUPTA (2103330100089)
SONAL DWIVEDI (2203330109007)

Under the Supervision of

Ms KHUSHBOO PANDEY
Asst. professor
Department of CSE

Raj Kumar Goel Institute of Technology and Management, Ghaziabad-201003

UP (India)
2024 - 2025
 DECLARATION

I, Shivansh Yadav(2103330100075), Sonal Dwivedi(2203330109007) and Vashu

Gupta(2103330100089) students of Bachelor of Technology, Computer Science &
Engineering department at Raj Kumar Goel Institute of Technology for Women,
Ghaziabad hereby declare that the work presented in this project titled “CAMPUS
BITE” is outcome of our own work, is bonafide, correct to the best of our knowledge
and this work has been carried out taking care engineering ethics. We have
completely taken care in acknowledging the contribution of others in this academic
work. We further declare that in case of any violation of intellectual property rights
or copyrights found at any stage, we as the candidates will be solely responsible for
the same.

Date: Shivansh Yadav (2103330100075)

Vashu Gupta (2103330100089)
Sonal Dwivedi (2203330109007)
Place: Ghaziabad (U.P)
B.Tech. (CSE)
RKGITM, Ghaziabad

i
 CERTIFICATE

This is to certify that the project report entitled “CAMPUS BITE”, submitted by
Shivansh Yadav (2103330100075), Vashu Gupta (2103330100089) and Sonal Dwivedi
(2203330109007) in partial fulfillment of the requirement for the award of the degree
of Bachelor of Technology in Computer Science & Engineering to Dr. A.P.J. Abdul
Kalam Technical University, Uttar Pradesh, Lucknow is a record of student’s own
work carried out under our supervision and guidance.

Ms. Khushboo Pandey Ms. Nidhi Garg

(Project Guide) (Head of Department)

Asst. Professor Department of CSE

Department of CSE

ii
 ACKNOWLEDGEMENT

The present work will remain incomplete unless we express our feelings of gratitude
towards a number of persons who delightfully co-operated with us in the process of this
work.

First of all we would like to thank our HOD Ms. Nidhi Garg, RKGITM, Ghaziabad for
his encouragement and support during the course of my study. I extend my hearty and
sincere gratitude to my project guide, Ms. Khushboo Pandey, Asst.Prof., Department
of Computer Science & Engineering, RKGITM, Ghaziabad for her valuable direction,
suggestions and exquisite guidance with ever enthusiastic encouragement ever since the
commencement of this project.

This project would not have taken shape, without the guidance provided by project
coordinators Ms. Neha Tyagi, who helped in our project and resolved all the technical
as well as other problems related to the project and, for always providing us with a
helping hand whenever we faced any bottlenecks, inspite of being quite busy with their
hectic schedules.

iii
 ABSTRACT

The purpose of this project is to develop and online food ordering system. It is a system
that enable customer to place their food order online at any time at any place in the
college.

The reason to develop this system is due to the issue facing by food industry. These
issues are such as peak hour-long queue issues, increase of take away than visitors,
speed major request of food management, limited promotion and quality control of food
management.

Therefore, this system enhances the speed and standardization of taking order from the
customer and supply it to the staff in the kitchen accordingly.

Beside that it provides user friendly web pages and effective advertising medium to the
new product of the online food ordering restaurant to the customer at reasonable price .

iv
 TABLE OF CONTENTS

Chapter 1

Introduction and Objective ................................................................................................ 9

1.1 Introduction ..................................................................................................................... 9

1.2 Objective ........................................................................................................................ 10

Chapter 2

System Analysis .............................................................................................................. 11-21

2.1 Software Requirement Specification (SRS) .................................................................... 11

2.1.1 Data Gathering ................................................................................................. 11

2.1.2 Feasible Study .................................................................................................. 12

2.1.3 Software Process Model ................................................................................... 12

2.2 Hardware Requirement .................................................................................................... 13

2.3 Software Requirement ...................................................................................................... 13

2.4 Justification of Selection of Technology .......................................................................... 14

2.4.1 XAMPP ............................................................................................................. 14

2.4.2 Language ........................................................................................................... 14

HTML

CSS

JavaScript

Bootstrap

PHP
 2.4.3 MySQL .............................................................................................................. 15
2.5 Data Flow Diagram (DFD) ............................................................................................... 15

2.5.1 DFD 0 Level ...................................................................................................... 16

2.5.2 DFD 1 Level ...................................................................................................... 17

2.5.3 DFD 2 Level ...................................................................................................... 19

Chapter 3

3.1 Entity Relationship Diagram (ER- Diagram) ................................................................... 23

3.2 Data Dictionary ................................................................................................................ 24

3.3 Database Normalization ................................................................................................... 27

Chapter 4

Program Code and Testing…………………………………………………………...28-175

4.1 Coding………………………………………………………………………………28-173

4.2 Testing Approach…………………………………………………………………...174-175

Chapter 5

Results and Discussion……………………………………………………………….176-180

5.1 Output Screen……………………………………………………………………...176-180

Chapter 6

Conclusion………………………………………………………………………………...181

6.1 Limitation………………………………………………………………………………182

6.2 Future Scope……………………………………………………………………………182

Chapter 7

7.1 References……………………………………………………………………………..183
 CHAPTER 1

INTRODUCTION

Online food ordering system is proposed here which simplifies the food ordering process. It can be
defined as a simple and convenient way for customers to order food online, without having to go to
the restaurant. The proposed system shows a customer interface and update the menu with all
available options so that it eases the customer work. Customer can choose more than one item to
make an order and can view order details.

User can order his/her favourite food from desired restaurant and enjoy them with his/her loved ones.
and through this website only the admin who has the contraption power of this website can look up
to every activity of user and can guide or help them whenever a user is needed for help.

As you open the website Campus Bite a animated page will load and it will have two options one
i.e., Login and other Sign-Up.

If a user is new to the website then he can do sign-up first then he will get a user id and password,
through which he can then Login into the website easily.

Login into the website easily, and if he has that user id and password from previously so he can
direct switch on to login area.

After login the user will be redirected to home page where he will get to see a navbar containing
options like about section, menu section, order section, contact section.

Scrolling down there he/she will get option to explore our website. Then if he/she wants to book
order for food then he will get option of varieties of foods options user have to go down the website
where the option will be available.

User can book his favourite foods after order he will get a message that his order has been placed
after that it will lead to the payment option where user has to pay the required amount through Online
payment.

And all these activities can be controlled by admin he will get notification whenever any user will
login into the website and place any order. Admin can add, delete and update foods.

1
 OBJECTIVE

The primary objective of Campus Bite is to develop an efficient, user-friendly online canteen food
ordering system that simplifies the food ordering process for students, faculty, and staff within a
university campus.

Key goals include:

Streamline Ordering Process – Allow users to browse menus, place orders, and make payments
digitally, reducing long queues and wait times.

Enhance Convenience – Provide a seamless mobile/web interface for users to order food anytime,
anywhere within the campus.

Improve Efficiency – Enable canteen staff to manage orders, track inventory, and optimize food
preparation workflows.

Secure Transactions – Implement a reliable payment gateway (UPI, cards, wallet) for safe and
hassle-free transactions.

Real-Time Updates – Notify users about order status (confirmed, preparing, ready for
pickup/delivery) via SMS/email/push notifications.

Feedback System – Collect user reviews to improve food quality and service.

Scalability – Design a system that can accommodate future expansions, such as integrating multiple
canteens or adding delivery options.

By achieving these objectives, Campus Bite aims to enhance the overall dining experience on
campus while saving time and reducing operational inefficiencies.

2
 CHAPTER 2

REQUIREMENT AND ANALYSIS

2.1 Software Requirement Specification

A software requirements specification (SRS) is a detailed description of a software system to be

developed with its functional and non-functional requirements. The SRS is developed based the
agreement between customer and contractors. It may include the use cases of how user is going to
interact with software system. The software requirement specification document consistent of all
necessary requirements required for project development. To develop the software system, we
should have clear understanding of Software system. To achieve this, we need to continuous
communication with customers to gather all requirements.

2.1.1 Data Gathering Data Gathering is the process of gathering and measuring information on
variables of interest, in an established systematic fashion that enables one to answer stated research
questions, test hypotheses, and evaluate outcomes. The data collection component of research is
common to all fields of study including physical and social sciences, humanities, business, etc. Data
gathering techniques used in the (Software Development Lifecycle) SDLC.

2.1.2 Feasibility Study The measure of how beneficial or practical the development of informant
system will be to an organization. along this topic feasibility is measured. So far taking the feasibility
study and feasibility analysis during the development of the project food Ordering system we have
studied on the following four major categories of feasibility study

● Operational feasibility: Operational feasibility is the measure of how well a proposed system
solves the problems, and takes advantage of the opportunities identified during scope definition and
how it satisfies the requirements identified in the requirements analysis phase of system
development.

● Technical feasibility: A technical feasibility study assesses the details of how you intend to
deliver a product or service to customers. Think materials, labour, transportation, where

3
your business will be located, and the technology that will be necessary to bring all this together.

● Schedule Feasibility: Schedule Feasibility is defined as the probability of a project to be

completed within its scheduled time limits, by a planned due date. If a project has a high probability
to be completed on-time, then its schedule feasibility is appraised as high.

● Economic feasibility: the degree to which the economic advantages of something to be made,
done, or achieved are greater than the economic costs: The state commissioned a report on the
economic feasibility of a single-payer health system. During the development of food Ordering
system. we have tried to address all these feasibility analysis phases seriously. That’s why we think,
our project will succeed properly. Food ordering System.

2.1.3 Software Process Model

A waterfall model under the software development life cycle (SDLC) is the methodology used to
produce the food ordering system and the customer self-ordering system. It is used by system
developers to produce or alter information systems or software. It divides the development process
into several stages or processes. After the completion of one stage, it will logically move to another
stage. Sometimes moving back to the previous stage is necessary due to failure that occurs in current
stage.

4
2.2 HARDWARE REQUIREMENTS

● Processor: 1.6GHz or Faster

● Disk space: 4GB of Available Hard Disk And SSD

● RAM: 4GB

● Graphics – DirectX 9- capable Video Card

● Display – 1024 x 768 or Higher Resolution

2.3 SOFTWARE REQUIREMENT

● Operating System: Windows (Vista/7 or above)

● Web Browser: IE 10 or above, Mozilla FF 31 and above or Google Chrome

● Xampp

5
2.4 JUSTIFICATION OF SELECTION OF TECHNOLOGY

2.4.1 LANGUAGE

● HTML: Hypertext Markup Language is the standard markup language for documents designed to
be displayed in a web browser. It can be assisted technologies such as Cascading Style Sheets and
scripting languages such as JavaScript.

● CSS: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.

● Bootstrap: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first
front-end web development. It contains CSS and JavaScript-based design templates for
typography, forms, buttons, modals navigation, and other interface components.

● JavaScript: JavaScript is a programming language that conforms to the ECMA Script

specification. JavaScript is high-level, often just-in-time compiled, and multi- paradigm. Curly
bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

6
2.3.2 MySQL

MySQL is an open-source relational database management system. Its name is a combination of

"My", the name of co-founder Michael Widenius's daughter, and "SQL", the abbreviation for
Structured Query Language. This application is widely used for purposes, including data
warehousing, e-commerce and logging applications. The data in MySQL databases are stored in
the form of tables. It helps the admins to collect the data in an easy way. One of the reasons MySQL
is the world's most popular open source database is that it provides comprehensive support for
every application development need. ... MySQL also provides connectors and drivers (ODBC,
JDBC, etc.) that allow all forms of applications to make use of MySQL as a preferred data
management server.

2.4 DATA FLOW DIAGRAM (DFD)

DFD is an important tool used by system analysis. A data flow diagram model, a system using
external entities from which data flows to a process which transforms the data and create output
data transforms which go to other processes or external entities such as files. The main merit of
DFD is that it can provide an overview of what data a system would process.

SYMBOLS

● A Circle represents a process that transforms incoming data flow into outgoing data flows.
● A Square defines a source or destination of system data.
● An Arrow identifies data flow direction. It is the pipeline through which the information flows.
● An Open Rectangle is a data store, data at rest or a temporary repository of data.

7
 Data flow diagram symbol

Data Flow - Data flow are pipelines through the packets of information flow.

Process - A Process or task performed by the system.

Entity - Entity are object of the system. A source or destination data of a system.

Data Store - A place where data to be stored.

CONTEXT LEVEL DFD:

The context level data flow diagram (DFD) is describing the whole system. The (0) level DFD
describes the all-user modules who operate the system. Below data flow diagram of online library
management site shows the two users can operate the system Admin and Member user.

8
9
10
11
 CHAPTER 3

SYSTEM DESIGN

3.1 ER Diagram

12
3.2 DATA DICTIONARY

A data dictionary, or metadata repository, as defined in the IBM Dictionary of Computing, is a

"centralized repository of information about data such as meaning, relationships to other data, origin,
usage, and format". Oracle defines it as a collection of tables with metadata.

tbl_admin table Structure: This table store the login details of admin

tbl_category table Structure : This table store the login details of category food.

tbl_food table Structure : This table stores the details of food.

13
tbl_order table Structure : This table stores the details of order.

14
tbl_user table Structure : This table store the login details of user.

15
3.3 DATABASE NORMALIZATION

Normalization is a database design technique that reduces data redundancy and eliminates undesirable
characteristics like Insertion, Update and Deletion Anomalies. Normalization rules divide larger
tables into smaller tables and links them using relationships. The purpose of Normalization in SQL is
to eliminate redundant (repetitive) data and ensure data is stored logically.

16
 CHAPTER 4

PROGRAM CODE

CODE FOR BASIC STRUCTURE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bite-savant-system</title>
<meta name="description" content="Campus Bite Project" />
<meta name="author" content="Campus" />

<meta property="og:title" content="Campus Bite Project" />

<meta property="og:description" content="Campus Bite Project" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

<meta name="twitter: card" content="summary_large_image" />

<meta name="twitter: site" content="@lovable_dev" />
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
</head>

<body>
<div id="root"></div>
<!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
<script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

17
CODE FOR DESIGN

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 30 100% 98%;
--foreground: 20 10% 5%;

--card: 0 0% 100%;
--card-foreground: 20 10% 5%;

--popover: 0 0% 100%;
--popover-foreground: 20 10% 5%;

--primary: 24 95% 53%;

--primary-foreground: 60 9% 98%;

--secondary: 25 100% 91%;

--secondary-foreground: 20 10% 5%;

--muted: 25 30% 96%;

--muted-foreground: 25 5% 45%;

--accent: 25 100% 91%;

--accent-foreground: 20 10% 5%;

--destructive: 0 84.2% 60.2%;

--destructive-foreground: 60 9% 98%;

--border: 20 5% 90%;
--input: 20 5% 90%;
--ring: 24 95% 53%;

--radius: 0.75rem;

--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
--background: 20 10% 5%;
--foreground: 60 9% 98%;
18
 --card: 20 10% 8%;
--card-foreground: 60 9% 98%;

--popover: 20 10% 8%;

--popover-foreground: 60 9% 98%;

--primary: 24 95% 53%;

--primary-foreground: 60 9% 98%;

--secondary: 25 30% 15%;

--secondary-foreground: 60 9% 98%;

--muted: 25 30% 15%;

--muted-foreground: 25 5% 65%;

--accent: 25 30% 15%;

--accent-foreground: 60 9% 98%;

--destructive: 0 62.8% 30.6%;

--destructive-foreground: 60 9% 98%;

--border: 20 10% 20%;

--input: 20 10% 20%;
--ring: 24 95% 53%;

--sidebar-background: 240 5.9% 10%;

--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}

@layer base {
*{
@apply border-border;
}
body {
@apply bg-background text-foreground font-sans;
}
}

.food-item-card:hover .food-item-image {
transform: scale(1.05);
}
.food-item-image {
transition: transform 0.3s ease;
19
}

CODE FOR RESTRAUNT DETAIL

import { useParams, useNavigate } from 'react-router-dom';

import MainLayout from '@/components/layout/MainLayout';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Plus, Star, Clock, MapPin, Heart, Info, Phone, Globe, ChevronRight, Search } from 'lucide-
react';
import { Input } from '@/components/ui/input';
import { useCart } from '@/hooks/use-cart';

// Mock data for restaurant

const restaurant = {
id: '1',
name: 'Pizza Paradise',
description: 'Authentic Italian pizzas made with traditional techniques and the freshest ingredients. Our
wood-fired ovens bring the taste of Naples right to your doorstep.',
image:'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-
4.0.3&auto=format&fit=crop&w=1000&q=80',
coverImage:'https://images.unsplash.com/photo-1593504049359-74330189a345?ixlib=rb-
4.0.3&auto=format&fit=crop&w=1000&q=80',
rating: 4.8,
reviewCount: 124,
cuisine: 'Italian',
priceRange: 'Rs.Rs.',
address: '123 Main Street, Anytown, CA 90210',
phone: '(555) 123-4567',
website: 'www.pizzaparadise.example',
openingHours: '10:00 AM - 10:00 PM',
deliveryTime: '20-30 min',
deliveryFee: 2.99,
distance: '1.2 miles',
featured: true,
tags: ['Bestseller', 'Free Delivery'],
categories: [
{
id: 'bestsellers',
name: 'Bestsellers'
},
{
id: 'pizza',
name: 'Pizzas'
},
{
id: 'pasta',
name: 'Pasta'
20
 },
{
id: 'sides',
name: 'Sides'
},
{
id: 'desserts',
name: 'Desserts'
},
{
id: 'drinks',
name: 'Drinks'
}
],
menu: [
{
id: '101',
name: 'Margherita Pizza',
image: 'https://images.unsplash.com/photo-1574071318508-1cdbab80d002?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',
description: 'Classic pizza with tomato sauce, mozzarella cheese, and fresh basil',
price: 12.99,
category: 'pizza',
tags: ['Bestseller', 'Veg'],
options: [
{
name: 'Size',
choices: ['Small', 'Medium', 'Large']
},
{
name: 'Crust',
choices: ['Thin', 'Regular', 'Thick']
}
]
},
{
id: '102',
name: 'Pepperoni Pizza',
image: 'https://images.unsplash.com/photo-1628840042765-356cda07504e?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',
description: 'Classic pizza with tomato sauce, mozzarella cheese, and pepperoni',
price: 14.99,
category: 'pizza',
tags: ['Popular'],
options: [
{
name: 'Size',
choices: ['Small', 'Medium', 'Large']
},
{
name: 'Crust',
choices: ['Thin', 'Regular', 'Thick']
21
 }
]
},
{
id: '103',
name: 'Vegetarian Pizza',
image: 'https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',
description: 'Fresh vegetables including bell peppers, onions, mushrooms, olives on our signature
sauce',
price: 13.99,
category: 'pizza',
tags: ['Veg', 'Healthy'],
options: [
{
name: 'Size',
choices: ['Small', 'Medium', 'Large']
},
{
name: 'Crust',
choices: ['Thin', 'Regular', 'Thick']
}
]
},
{
id: '104',
name: 'Spaghetti Bolognese',
image: 'https://images.unsplash.com/photo-1622973536968-3ead9e780960?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',
description: 'Spaghetti with rich meat sauce and parmesan cheese',
price: 11.99,
category: 'pasta',
tags: ['Classic'],
options: [
{
name: 'Size',
choices: ['Regular', 'Large']
},
{
name: 'Add-ons',
choices: ['Extra Cheese', 'Meatballs', 'None']
}
]
},
{
id: '105',
name: 'Garlic Bread',
image: 'https://images.unsplash.com/photo-1619894991209-08e9c7a1e456?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',
description: 'Freshly baked bread with garlic butter and herbs',
price: 4.99,
category: 'sides',
22
 tags: ['Popular'],
options: [
{
name: 'Size',
choices: ['4 pieces', '8 pieces']
},
{
name: 'Add-ons',
choices: ['Cheese', 'None']
}
]
},
{
id: '106',
name: 'Tiramisu',
image: 'https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',
description: 'Classic Italian dessert made with espresso-soaked ladyfingers and mascarpone cheese',
price: 6.99,
category: 'desserts',
tags: ['Bestseller'],
options: [
{
name: 'Size',
choices: ['Individual', 'Shareable']
}
]
},
{
id: '107',
name: 'Italian Soda',
image:'https://images.unsplash.com/photo-1624517452488-04869289c4ca?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',
description: 'Refreshing soda with your choice of fruit syrup',
price: 3.49,
category: 'drinks',
tags: ['Refreshing'],
options: [
{
name: 'Flavor',
choices: ['Cherry', 'Raspberry', 'Blueberry', 'Lime']
},
{
name: 'Size',
choices: ['Regular', 'Large']
}
]
}
]
};

const RestaurantDetail = () => {

23
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const { addItem } = useCart();
const [searchQuery, setSearchQuery] = useState('');
const [activeCategory, setActiveCategory] = useState('bestsellers');

const filteredMenuItems = restaurant.menu.filter((item) => {

// For bestsellers, show items with bestseller tag
if (activeCategory === 'bestsellers') {
return item.tags.includes('Bestseller') &&
(searchQuery === '' || item.name.toLowerCase().includes(searchQuery.toLowerCase()));
}

// For other categories, filter by category and search term

return item.category === activeCategory &&
(searchQuery === '' || item.name.toLowerCase().includes(searchQuery.toLowerCase()));
});

const handleAddToCart = (item: any) => {

addItem({
id: item.id,
name: item.name,
price: item.price,
image: item.image,
restaurantId: restaurant.id,
restaurantName: restaurant.name
});
};

return (
<MainLayout>
<div className="container px-4 md:px-6 py-6">
<div className="relative mb-6">
<div className="h-64 md:h-80 rounded-xl overflow-hidden">
<img
src={restaurant.coverImage}
alt={restaurant.name}
className="w-full h-full object-cover"
/>
</div>
<div className="absolute -bottom-12 left-6 flex items-center gap-4">
<div className="h-24 w-24 rounded-xl overflow-hidden border-4 border-background bg-white">
<img
src={restaurant.image}
alt={restaurant.name}
className="h-full w-full object-cover"
/>
</div>
</div>
</div>

<div className="mt-16 md:mt-8 flex flex-col md:flex-row md:items-center justify-between">

24
 <div>
<div className="flex items-center gap-2 mb-1">
<Badge variant="outline" className="bg-food-primary/10 text-food-primary border-food-
primary/30">
{restaurant.cuisine}
</Badge>
<span className="text-muted-foreground">•</span>
<span className="text-muted-foreground">{restaurant.priceRange}</span>
<span className="text-muted-foreground">•</span>
<span className="text-muted-foreground">{restaurant.distance}</span>
</div>
<h1 className="text-2xl md:text-3xl font-bold">{restaurant.name}</h1>
<div className="flex items-center gap-2 mt-1">
<div className="flex items-center">
<Star className="h-4 w-4 fill-yellow-400 stroke-yellow-400 mr-1" />
<span>{restaurant.rating}</span>
<span className="text-muted-foreground ml-1">({restaurant.reviewCount} reviews)</span>
</div>
<span className="text-muted-foreground">•</span>
<div className="flex items-center">
<Clock className="h-4 w-4 mr-1 text-muted-foreground" />
<span className="text-muted-foreground">{restaurant.deliveryTime}</span>
</div>
</div>
</div>

</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">

<div className="md:col-span-2">
<div className="mb-6 sticky top-20 bg-background pt-2 z-10">
<div className="relative mb-4">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search menu items"
className="pl-8 bg-muted/50"
/>
</div>
<Tabs value={activeCategory} onValueChange={setActiveCategory}>
<TabsList className="flex overflow-x-auto pb-2 w-full h-auto">
{restaurant.categories.map((category) => (
<TabsTrigger
key={category.id}
value={category.id}
className="flex-shrink-0"
>
{category.name}
</TabsTrigger>
))}
</TabsList>
25
 {restaurant.categories.map((category) => (
<TabsContent key={category.id} value={category.id} className="pt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{filteredMenuItems.map((item) => (
<Card key={item.id} className="overflow-hidden">
Rs.{item.price.toFixed(2)}</span>
<Button
size="sm"
onClick={() => handleAddToCart(item)}
className="bg-food-primary hover:bg-food-dark text-white"
>
<Plus className="h-4 w-4 mr-1" /> Add
</Button>
</div>
</div>
<div className="h-32 w-32 relative overflow-hidden">
<img
src={item.image}
alt={item.name}
className="h-full w-full object-cover"
/>
</div>
</div>
</CardContent>
</Card>
))}
</div>

{filteredMenuItems.length === 0 && (

<div className="text-center py-16">
<p className="text-lg font-medium">No items found</p>
<p className="text-muted-foreground">Try a different search term or category</p>
</div>
)}
</TabsContent>
))}
</Tabs>
</div>
</div>

<div>
<div className="sticky top-20">
<Card>
<CardContent className="p-6 space-y-4">
<h3 className="font-semibold text-lg">Restaurant Info</h3>

<div>
<h4 className="text-sm font-medium mb-1">Address</h4>
<div className="flex items-start">
<MapPin className="h-4 w-4 mr-2 mt-0.5 text-muted-foreground flex-shrink-0" />
<span className="text-sm">{restaurant.address}</span>
</div>
26
 </div>

<div>
<h4 className="text-sm font-medium mb-1">Hours</h4>
<div className="flex items-start">
<Clock className="h-4 w-4 mr-2 mt-0.5 text-muted-foreground flex-shrink-0" />
<span className="text-sm">{restaurant.openingHours}</span>
</div>
</div>

<div>
<h4 className="text-sm font-medium mb-1">Contact</h4>
<div className="flex items-start mb-1">
<Phone className="h-4 w-4 mr-2 mt-0.5 text-muted-foreground flex-shrink-0" />
<span className="text-sm">{restaurant.phone}</span>
</div>
<div className="flex items-start">
<Globe className="h-4 w-4 mr-2 mt-0.5 text-muted-foreground flex-shrink-0" />
<span className="text-sm">{restaurant.website}</span>
</div>
</div>

<div>
<h4 className="text-sm font-medium mb-1">Delivery Info</h4>
<div className="grid grid-cols-2 gap-2 text-sm">
<div>Delivery Time:</div>
<div className="text-right">{restaurant.deliveryTime}</div>
<div>Delivery Fee:</div>
<div className="text-right">
{restaurant.deliveryFee === 0 ? 'Free' : '30'}
</div>
<div>Minimum Order:</div>
<div className="text-right">Rs.100.00</div>
</div>
</div>
</CardContent>
</Card>

{/* <div className="mt-4">

<Button
onClick={() => navigate('/restaurants')}
variant="outline"
className="w-full"
>
Rs.staurants
<ChevronRight className="h-4 w-4 ml-1" />
</Button>
</div> */}
</div>
</div>
</div>
</div>
27
 </MainLayout>
);
};

CODE FOR CART

import { Button } from "@/components/ui/button";

import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { useCart } from "@/hooks/use-cart";
import { Minus, Plus, ShoppingBag, X } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import MainLayout from "@/components/layout/MainLayout";

const Cart = () => {

const { items, removeItem, updateQuantity, getTotalPrice, clearCart } = useCart();
const [promoCode, setPromoCode] = useState("");
const [isPromoApplied, setIsPromoApplied] = useState(false);
const navigate = useNavigate();

const subtotal = getTotalPrice();

const deliveryFee = 2.99;
const serviceFee = subtotal > 0 ? 1.99 : 0;
const discount = isPromoApplied ? subtotal * 0.1 : 0;
const total = subtotal + deliveryFee + serviceFee - discount;

const handlePromoCode = () => {

if (promoCode.toLowerCase() === "save10") {
setIsPromoApplied(true);
toast.success("Promo code applied! 10% off your order.");
} else {
toast.error("Invalid promo code. Please try another code.");
}
};

const handleCheckout = () => {

28
 toast.success("Order placed successfully!");
clearCart();
navigate("/");
};

return (
<MainLayout>
<div className="container px-4 md:px-6 py-6 md:py-10">
<h1 className="text-3xl font-bold mb-6">Your Cart</h1>

{items.length === 0 ? (
<div className="text-center py-12">
<div className="mx-auto w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-
4">
<ShoppingBag className="h-8 w-8 text-muted-foreground" />
</div>
<h2 className="text-xl font-semibold mb-2">Your cart is empty</h2>
<p className="text-muted-foreground mb-6">
Add items to your cart to proceed with your order.
</p>
<Button
onClick={() => navigate("/restaurants")}
className="bg-food-primary hover:bg-food-dark text-white"
>
Browse Restaurants
</Button>
</div>
):(
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2">
<Card>
<CardContent className="pt-6">
<div className="space-y-4">
{items.map((item) => (
<div key={item.id} className="flex items-center gap-4">
<div className="h-20 w-20 rounded-md overflow-hidden flex-shrink-0">
<img
src={item.image}
alt={item.name}
className="h-full w-full object-cover"
/>
</div>
<div className="flex-1 min-w-0">
<h3 className="font-medium">{item.name}</h3>
<p className="text-sm text-muted-foreground">
From {item.restaurantName}
</p>
<div className="flex items-center gap-2 mt-2">
{item.options &&
item.options.map((option, index) => (
<div
key={index}
29
 className="text-xs bg-secondary px-2 py-0.5 rounded-full"
>
{option.name}: {option.choice}
</div>
))}
</div>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center border rounded-md">
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-r-none"
onClick={() =>
updateQuantity(
item.id,
Math.max(1, item.quantity - 1)
)
}
>
<Minus className="h-4 w-4" />
</Button>
<span className="w-8 text-center">
{item.quantity}
</span>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-l-none"
onClick={() =>
updateQuantity(item.id, item.quantity + 1)
}
>
<Plus className="h-4 w-4" />
</Button>
</div>
<div className="font-medium text-right min-w-[80px]">
Rs.{(item.price * item.quantity).toFixed(2)}
</div>
<Button
variant="ghost"
size="icon"
className="text-muted-foreground"
onClick={() => removeItem(item.id)}
>
<X className="h-5 w-5" />
</Button>
</div>
</div>
))}
</div>

30
 <div className="flex justify-end mt-6">
<Button
variant="outline"
className="text-muted-foreground"
onClick={clearCart}
>
Clear Cart
</Button>
</div>
</CardContent>
</Card>

<Card className="mt-6">
<CardContent className="p-6">
<h3 className="font-medium mb-4">Add Special Instructions</h3>
<textarea>
className="min-h-[100px] w-full border rounded-md p-3 text-sm"
placeholder="Add notes for the restaurant or delivery person..."
/>
</CardContent>
</Card>
</div>

<div>
<Card className="sticky top-24">
<CardContent className="p-6">
<h3 className="font-semibold text-lg mb-4">Order Summary</h3>

<div className="space-y-3">
<div className="flex justify-between">
<span className="text-muted-foreground">Subtotal</span>
<span>Rs.{subtotal.toFixed(2)}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Delivery Fee</span>
<span>Rs.{deliveryFee.toFixed(2)}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Service Fee</span>
<span>Rs.{serviceFee.toFixed(2)}</span>
</div>

{isPromoApplied && (
<div className="flex justify-between text-green-600">
<span>Discount (10%)</span>
<span>-Rs.{discount.toFixed(2)}</span>
</div>
)}
</div>

<Separator className="my-4" />

31
 <div className="flex justify-between font-semibold text-lg mb-6">
<span>Total</span>
<span>Rs.{total.toFixed(2)}</span>
</div>

{!isPromoApplied && (
<div className="mb-6">
<p className="text-sm font-medium mb-2">Promo Code</p>
<div className="flex gap-2">
<Input
value={promoCode}
onChange={(e) => setPromoCode(e.target.value)}
placeholder="Enter promo code"
/>
<Button onClick={handlePromoCode}>Apply</Button>
</div>
<p className="text-xs text-muted-foreground mt-1">
Try "SAVE10" for 10% off
</p>
</div>
)}

<Button
onClick={handleCheckout}
className="w-full bg-food-primary hover:bg-food-dark text-white"
disabled={items.length === 0}
>
Proceed to Checkout
</Button>
</CardContent>
</Card>
</div>
</div>
)}
</div>
</MainLayout>
);
};

32
 CODE FOR FUNCTIONALITY

import React, { useState } from 'react';

import MainLayout from

'@/components/layout/MainLayout';

import { Input } from '@/components/ui/input';

import { Button } from '@/components/ui/button';

import { Card, CardContent } from

'@/components/ui/card';

import { Badge } from '@/components/ui/badge';

import { Tabs, TabsContent, TabsList, TabsTrigger } from

'@/components/ui/tabs';

import { Plus, Search, Filter } from 'lucide-react';

import { useCart } from '@/hooks/use-cart';

const menuItems = [

id: '201',

name: 'Pepperoni Pizza',

image: 'https://images.unsplash.com/photo-
1628840042765-356cda07504e?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',

description: 'Classic pizza with tomato sauce,

mozzarella cheese, and pepperoni',

price: 9.99,

category: 'pizza',

tags: ['Popular', 'Spicy'],

restaurantId: '1',
33
 restaurantName: 'Campus Pizza'

},

id: '202',

name: 'Veggie Burger',

image: 'https://images.unsplash.com/photo-1550317138-
10000687a72b?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',

description: 'Plant-based patty with lettuce, tomato, and

vegan mayo on a whole wheat bun',

price: 8.49,

category: 'burger',

tags: ['Vegan', 'Healthy'],

restaurantId: '2',

restaurantName: 'Burger Junction'

},

id: '203',

name: 'Chicken Curry Bowl',

image: 'https://images.unsplash.com/photo-
1565557623262-b51c2513a641?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',

description: 'Aromatic curry with tender chicken pieces

served over steamed rice',

price: 10.99,

category: 'bowls',

tags: ['Spicy', 'Protein-rich'],

restaurantId: '3',

34
 restaurantName: 'Asian Fusion'

},

id: '204',

name: 'Caesar Salad',

image: 'https://images.unsplash.com/photo-1550304943-
4f24f54ddde9?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',

description: 'Crisp romaine lettuce with caesar dressing,

croutons, and parmesan cheese',

price: 7.99,

category: 'salad',

tags: ['Healthy', 'Classic'],

restaurantId: '4',

restaurantName: 'Fresh Greens'

},

id: '205',

name: 'Beef Burrito',

image: 'https://images.unsplash.com/photo-
1584031651118-4a588a83179e?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',

description: 'Flour tortilla filled with seasoned ground

beef, rice, beans, and cheese',

price: 9.49,

category: 'mexican',

tags: ['Filling', 'Protein'],

restaurantId: '5',

35
 restaurantName: 'Taco Haven'

},

id: '206',

name: 'Mango Smoothie',

image: 'https://images.unsplash.com/photo-
1623065422902-30a2d299bbe4?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',

description: 'Refreshing blend of ripe mango, yogurt,

and honey',

price: 4.99,

category: 'drinks',

tags: ['Refreshing', 'Sweet'],

restaurantId: '6',

restaurantName: 'Juice Bar'

},

id: '207',

name: 'Chocolate Brownie',

image: 'https://images.unsplash.com/photo-
1606313564200-e75d5e30476c?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',

description: 'Rich and fudgy chocolate brownie with

walnuts',

price: 3.99,

category: 'desserts',

tags: ['Sweet', 'Indulgent'],

restaurantId: '7',

36
 restaurantName: 'Sweet Treats'

},

id: '208',

name: 'Spicy Ramen',

image: 'https://images.unsplash.com/photo-
1626804475297-41608ea09aeb?ixlib=rb-
4.0.3&auto=format&fit=crop&w=500&q=80',

description: 'Japanese noodle soup with spicy broth,

soft-boiled egg, and pork belly',

price: 11.99,

category: 'noodles',

tags: ['Spicy', 'Hot'],

restaurantId: '8',

restaurantName: 'Noodle House'

];

const categories = [

{ id: 'all', name: 'All' },

{ id: 'pizza', name: 'Pizza' },

{ id: 'burger', name: 'Burgers' },

{ id: 'bowls', name: 'Bowls' },

{ id: 'salad', name: 'Salads' },

{ id: 'mexican', name: 'Mexican' },

{ id: 'noodles', name: 'Noodles' },

{ id: 'drinks', name: 'Drinks' },

{ id: 'desserts', name: 'Desserts' }

37
];

const Menu = () => {

const { addItem } = useCart();

const [searchQuery, setSearchQuery] = useState('');

const [activeCategory, setActiveCategory] =

useState('all');

const filteredMenuItems = menuItems.filter((item) => {

// First, filter by category

const categoryMatch =

activeCategory === 'all' ||

item.category === activeCategory;

// Then, filter by search query

const searchMatch =

searchQuery === '' ||

item.name.toLowerCase().includes(searchQuery.toLow
erCase()) ||

item.description.toLowerCase().includes(searchQuery.t
oLowerCase()) ||

item.restaurantName.toLowerCase().includes(searchQ
uery.toLowerCase());

return categoryMatch && searchMatch;

});

const handleAddToCart = (item: any) => {

38
 addItem({

id: item.id,

name: item.name,

price: item.price,

image: item.image,

restaurantId: item.restaurantId,

restaurantName: item.restaurantName

});

};

return (

<MainLayout>

<div className="container px-4 md:px-6 py-8">

<div className="mb-8 text-center">

<h1 className="text-3xl md:text-4xl font-bold mb-

2">Campus Menu</h1>

<p className="text-muted-foreground">Explore
our wide selection of delicious meals</p>

</div>

<div className="sticky top-16 pt-4 bg-background z-

10">

<div className="flex flex-col md:flex-row gap-4

mb-6">

{/* <div className="relative flex-1">

<Search className="absolute left-2 top-2.5 h-4 w-

4 text-muted-foreground" />

<Input

39
 value={searchQuery}

onChange={(e) =>
setSearchQuery(e.target.value)}

placeholder="Search menu items, restaurants..."

className="pl-8 bg-muted/50"

/>

</div> */}

{/* <Button variant="outline" className="flex

gap-2">

<Filter className="h-4 w-4" />

<span>Filter</span>

</Button> */}

</div>

<Tabs value={activeCategory}
onValueChange={setActiveCategory}>

<TabsList className="flex overflow-x-auto pb-1

w-full h-auto">

{categories.map((category) => (

<TabsTrigger

key={category.id}

value={category.id}

className="flex-shrink-0"

>

{category.name}

</TabsTrigger>

))}

</TabsList>

40
 </Tabs>

</div>

<div className="grid grid-cols-1 md:grid-cols-2

lg:grid-cols-3 gap-6 mt-8">

{filteredMenuItems.map((item) => (

<Card

key={item.id}

className="overflow-hidden hover:shadow-md
transition-shadow"

>

<div className="aspect-[16/10] overflow-

hidden">

<img

src={item.image}

alt={item.name}

className="h-full w-full object-cover"

/>

</div>

<CardContent className="p-4">

<div className="flex justify-between items-start

mb-2">

<div>

<h3 className="font-semibold text-

lg">{item.name}</h3>

<p className="text-sm text-muted-

foreground">{item.restaurantName}</p>

</div>

41
 <span className="font-
semibold">Rs.{item.price.toFixed(2)}</span>

</div>

<p className="text-sm text-muted-foreground

mb-3 line-clamp-2">

{item.description}

</p>

<div className="flex items-center justify-

between">

<div className="flex flex-wrap gap-1">

{item.tags.map((tag, index) => (

<Badge key={index} variant="outline"

className="text-xs">

{tag}

</Badge>

))}

</div>

<Button

size="sm"

onClick={() => handleAddToCart(item)}

className="bg-food-primary hover:bg-food-
dark text-white"

>

<Plus className="h-4 w-4 mr-1" /> Add

</Button>

</div>

42
 </CardContent>

</Card>

))}

</div>

{filteredMenuItems.length === 0 && (

<div className="text-center py-16">

<p className="text-lg font-medium">No items

found</p>

<p className="text-muted-foreground">Try a
different search term or category</p>

</div>

)}

</div>

</MainLayout>

);

};

CODES

#root {

max-width: 1280px;

margin: 0 auto;

padding: 2rem;

text-align: center;

}
43
.logo {

height: 6em;

padding: 1.5em;

will-change: filter;

transition: filter 300ms;

.logo:hover {

filter: drop-shadow(0 0 2em #646cffaa);

.logo.react:hover {

filter: drop-shadow(0 0 2em #61dafbaa);

@keyframes logo-spin {

from {

transform: rotate(0deg);

to {

transform: rotate(360deg);

@media (prefers-reduced-motion: no-preference) {

a:nth-of-type(2) .logo {

animation: logo-spin infinite 20s linear;

44
}

.card {

padding: 2em;

.read-the-docs {

color: #888;

CODE FOR PACKAGE

"name": "vite_react_shadcn_ts",

"private": true,

"version": "0.0.0",

"type": "module",

"scripts": {

"dev": "vite",

"build": "vite build",

"build:dev": "vite build --mode development",

"lint": "eslint .",

"preview": "vite preview"

45
},

"dependencies": {

"@hookform/resolvers": "^3.9.0",

"@radix-ui/react-accordion": "^1.2.0",

"@radix-ui/react-alert-dialog": "^1.1.1",

"@radix-ui/react-aspect-ratio": "^1.1.0",

"@radix-ui/react-avatar": "^1.1.0",

"@radix-ui/react-checkbox": "^1.1.1",

"@radix-ui/react-collapsible": "^1.1.0",

"@radix-ui/react-context-menu": "^2.2.1",

"@radix-ui/react-dialog": "^1.1.2",

"@radix-ui/react-dropdown-menu": "^2.1.1",

"@radix-ui/react-hover-card": "^1.1.1",

"@radix-ui/react-label": "^2.1.0",

"@radix-ui/react-menubar": "^1.1.1",

"@radix-ui/react-navigation-menu": "^1.2.0",

"@radix-ui/react-popover": "^1.1.1",

"@radix-ui/react-progress": "^1.1.0",

"@radix-ui/react-radio-group": "^1.2.0",

"@radix-ui/react-scroll-area": "^1.1.0",

"@radix-ui/react-select": "^2.1.1",

"@radix-ui/react-separator": "^1.1.0",

"@radix-ui/react-slider": "^1.2.0",

"@radix-ui/react-slot": "^1.1.0",

"@radix-ui/react-switch": "^1.1.0",

"@radix-ui/react-tabs": "^1.1.0",

"@radix-ui/react-toast": "^1.2.1",

46
 "@radix-ui/react-toggle": "^1.1.0",

"@radix-ui/react-toggle-group": "^1.1.0",

"@radix-ui/react-tooltip": "^1.1.4",

"@tanstack/react-query": "^5.56.2",

"class-variance-authority": "^0.7.1",

"clsx": "^2.1.1",

"cmdk": "^1.0.0",

"date-fns": "^3.6.0",

"embla-carousel-react": "^8.3.0",

"input-otp": "^1.2.4",

"lucide-react": "^0.462.0",

"next-themes": "^0.3.0",

"react": "^18.3.1",

"react-day-picker": "^8.10.1",

"react-dom": "^18.3.1",

"react-hook-form": "^7.53.0",

"react-resizable-panels": "^2.1.3",

"react-router-dom": "^6.26.2",

"recharts": "^2.12.7",

"sonner": "^1.5.0",

"tailwind-merge": "^2.5.2",

"tailwindcss-animate": "^1.0.7",

"vaul": "^0.9.3",

"zod": "^3.23.8"

},

"devDependencies": {

"@eslint/js": "^9.9.0",

47
 "@tailwindcss/typography": "^0.5.15",

"@types/node": "^22.5.5",

"@types/react": "^18.3.3",

"@types/react-dom": "^18.3.0",

"@vitejs/plugin-react-swc": "^3.5.0",

"autoprefixer": "^10.4.20",

"eslint": "^9.9.0",

"eslint-plugin-react-hooks": "^5.1.0-rc.0",

"eslint-plugin-react-refresh": "^0.4.9",

"globals": "^15.9.0",

"lovable-tagger": "^1.1.7",

"postcss": "^8.4.47",

"tailwindcss": "^3.4.11",

"typescript": "^5.5.3",

"typescript-eslint": "^8.0.1",

"vite": "^5.4.1"

48
 4.2 TESTING APPROACH

To build up our project we use software testing process for executing a program with the intent of
finding errors that is uncovering errors in a program makes it a feasible task and also trying to find the
error in a program as it is destructive process.

4.2.1 TYPE OF TESTING

Type of testing we Use in Our Project Here we just mentioned that how the testing is related to this
software and in which way we have test the software? In our project we have used 4 types of testing
these are listed below –

● Unit testing: Unit testing where individual program unit or object classes are tested here by using this
testing we have focused on testing the functionality of methods.
● Module Testing : Where this is the combination of unit is called module. Here we tested the unit
program is where the module program have dependency
● Sub- system Testing : The we combined some module for the preliminary system testing in our project
● System Testing : where it is the combination of two or more sub – system and then it is tested. Here
we tested and entire system as per the requirements.

4.2.2 USE CASE

A use case is a methodology used in system analysis to identify, clarify and organize system
requirements. The use case is made up of a set of possible sequences of interactions between systems
and users in a particular environment and related to a particular goal.

Every use case contains three essential elements:

● The actor. The system user -- this can be a single person or a group of people interacting with the
process.
● The goal. The final successful outcome that completes the process.
● The system. The process and steps taken to reach the end goal, including the necessary functional
requirements and their anticipated behaviours.

49
 The writing process includes:

● Identifying all system users and creating a profile for each one. This includes every role played by
a user who interacts with the system.
● Selecting one user and defining their goal -- or what the user hopes to accomplish by interacting
with the system. Each of these goals becomes a use case.
● Describing the course taken for each use case through the system to reach that goal.
● Considering every alternate course of events and extending use cases -- or the different courses that
can be taken to reach the goal.
● Identifying commonalities in journeys to create common course use cases and write descriptions of
each

50
 CHAPTER 5
RESULTS AND DISCUSSION

5.1 OUTPUT SCREEN

Home page

User Login Page

51
Canteen List page

Contact page

52
About page

Menu Page

53
OrderPage

Link page

54
Info page

55
 CHAPTER 6

CONCLUSION

Campus Bite (Food ordering System) has been computed successfully and was also tested successfully
by taking "Test Cases". It is user friendly, and has required options, which can be utilized by the user
to perform the desired operations.
Campus Bite – Online Canteen Food Ordering System is designed to revolutionize the traditional
campus canteen experience by introducing a digital, efficient, and user-friendly solution. By
leveraging technology, the system eliminates long queues, reduces waiting time, and provides a
seamless ordering experience for students, faculty, and staff.

With features like real-time order tracking, secure payments, menu customization, and feedback
integration, Campus Bite ensures convenience for users while improving operational efficiency for
canteen staff. The system’s scalability allows for future enhancements, such as multi-canteen
integration, AI-based recommendations, and delivery management.

By implementing Campus Bite, educational institutions can modernize their food services, enhance
user satisfaction, and optimize resource management. This project not only addresses current
challenges in campus canteens but also sets a foundation for smart, tech-driven dining solutions in the
future.

Campus Bite is developed using HTML, CSS, and Typescript on windows environment.

The goals that are achieved by the software are:

• User friendly
• Simplification of the operations
• Portable and flexible for further enhancement
• Less processing time and getting required information

56
 6.1 LIMITATION

● Registration Email Verification Not Available

● Portal is not SEO Friendly
● SMS Alert Facility Not available
● Risk Unauthorized Accessibility

6.2 FUTURE SCOPE

The Campus Bite online canteen food ordering system has significant potential for expansion and
enhancement. Here are some possible future upgrades:

1.AI & Personalization

AI Based Recommendations: Suggest meals based on user preferences, past orders, and dietary restrictions.
Smart Notifications: Remind users of meal times, discounts, and special offers.

2. Delivery Automation
Delivery Tracking: Live GPS tracking for orders delivered across the campus.

3. Multi-Canteen & Franchise Integration

Centralized Dashboard: Allow multiple canteens/food stalls to register and manage orders.
Franchise Partnerships: Enable external vendors to serve food on campus via the platform.

4. Enhanced Payment & Loyalty Programs

Reward Points System: Offer discounts or free meals based on order frequency.

5. IoT & Smart Inventory Management

Automated Stock Alerts: Notify canteen staff when ingredients are running low.

6. Voice & Chatbot Integration

Voice-Activated Ordering: Allow users to order via voice commands (e.g., Alexa, Google Assistant).
AI Chatbot Support: Handle FAQs, order modifications, and complaints in real-time.

7. Sustainability Features
Eco-Friendly Packaging Options: Let users choose biodegradable containers.
Food Waste Analytics: Track and reduce food wastage with data insights.

By implementing these advancements, Campus Bite can evolve into a smart, scalable, and futuristic food
ordering ecosystem, enhancing both user experience and operational efficiency.
57
 REFERENCES
1 . Campus Cafeterias Tech Up – The New Indian Express
An article highlighting the adoption of smart platforms in college and office cafeterias to reduce
food ordering errors, delivery issues, and wastage, showcasing real-world applications technology
in campus dining.

2. "HTML and CSS: Design and Build Websites" – Jon Duckett

A visually engaging guide for beginners.

3. "Responsive Web Design with HTML5 and CSS" – Ben Frain

Covers Flexbox, Grid, and responsive design principles.

4. "Programming TypeScript: Making Your JavaScript Applications Scale" – Boris Cherny

Best practices for TypeScript in large projects.

5. "Effective TypeScript: 62 Specific Ways to Improve Your TypeScript" – Dan Vanderkam

Practical tips for TypeScript developers.

6. "MySQL Crash Course" – Ben Forta

Quick and practical guide to MySQL.

7. "SQL in 10 Minutes, Sams Teach Yourself" – Ben Forta

Efficient SQL learning for database management.

8. Full-Stack React, TypeScript, and Node" – David Choi

Build full-stack apps with React, TypeScript, and Node.js.

9. "Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node"
– Vasan Subramanian.

58