SWAMI VIVEKANAND INSTITUTE OF ENGINEERING AND

TECHNOLOGY

Department of computer science

SESSION: -2022-24

Project Report

Submitted In Partial Fulfilment for Award of Degree Of Masters Of Computer Application

Ik Gujral Punjab Technical University, Jalandhar (Punjab)

“Food Delivery APPLICATION”

Submitted to: Submitted by:

Astt.Prof. Priyanka Sharma Ritesh Kumar(2022MCA016)
Jyoti Kumari(2022MCA004)

1. Introduction(Organization)-
 1.1 Apptunix started its journey as a small mobile app development company.
1.2 Initially exploiting the art of impressive iOS app development, it soon spread its
wings and started offering Android and Hybrid App development services.
1.3 Now fully established as an expert mobile app development firm, Apptunix is
catering to the mobile needs of businesses around the world.
1.4 We offer top-notch services to build healthy and lasting client-relations.
1.5 Our ultimate goal is to become the most innovative and trend-setting mobile app
development company.

2. Introduction of Tasks/Subtasks assigned-

In today's fast-paced world, food delivery services have become an integral part of our
daily lives. With the convenience of ordering food online and having it delivered to our
doorstep, more people are turning to food delivery websites and apps for their meals. In
this article, we'll explore the concept of building a food delivery website using React—a
popular JavaScript library for building user interfaces.

A food delivery website is an online platform that allows users to browse a variety of
food options, place orders, and have meals delivered to their desired location. These
websites typically feature:

 Menu Selection: A wide range of food items categorized by cuisine, type, or

dietary preferences.

 User Authentication: Registration and login functionalities to manage user

accounts and track order history.
 Shopping Cart: A virtual cart to add selected items before proceeding to
checkout.
 Order Placement: Seamless ordering process with options for customization
(e.g., specifying delivery address, special instructions).
  Payment Integration: Secure payment gateways to facilitate transactions.
 Order Tracking: Real-time updates on order status from preparation to
delivery.
 Customer Support: Contact options for customer assistance and feedback.

3. Short Briefing: Activities performed by you till previous

evaluation:-

At that time, it was only a one day since we joined the company. We were just revising
the basics which we had done in the university. We were revising the concepts of HTML
and CSS during a week and also get brief knowledge about JavaScript.

4. Hardware/Software Requirements

● Laptop
● Internet
● VS Code
● RAM :- 4GB
5. Design
 6. Detailed Description of New Functionality(ies) added
or activity(ies) underwent
To provide a detailed description of the new functionalities or activities undergone in
developing a food delivery website using the provided React application structure, we'll outline
specific features and improvements that enhance the functionality and user experience of the
website.

6.1 New Functionalities Added:-

Login Popup Integration:
 Implemented a login popup (Login Popup) that appears conditionally based on the show
Login state.
 Allows users to log in or register within the application for personalized services and
order tracking.

Navigation Bar (Navbar):

 Added a navigation bar at the top of the website (Navbar) to facilitate navigation
between different sections/pages.
 Includes links or buttons for accessing home page, cart, order placement, and possibly
other sections of the website.

Routing Setup with react-router-dom:

 Configured routing using react-router-dom (Routes, Route) to enable multi-page
functionality within a single-page application (SPA) architecture.
 Defined routes for key sections/pages like home (/), cart (/cart), and order placement
(/order), ensuring proper rendering of components based on URL paths.

Page Components:
 Created separate page components (Home, Cart, PlaceOrder) to encapsulate
specific functionalities and content for each section of the website.
  Each page component is responsible for rendering relevant UI elements and interacting
with data specific to its functionality (e.g., displaying food items, managing cart,
processing orders).

Footer Component:
 Added a footer component (Footer) at the bottom of the website to provide additional
information, links, and contact details.
 Enhances website usability by offering supplementary content and navigation options.

6.2 Activities Underwent:-

State Management with useState:
 Utilized React's useState hook to manage local component state (showLogin) for
controlling the visibility of the login popup.
 State management ensures dynamic rendering and interaction based on user actions.
Context API Integration (StoreContext):
 Integrated React Context API (e.g., StoreContext) to share global state/data across
components without prop drilling.
 Used useContext hook to consume context values (e.g., cartItems, getTotalCartAmount)
in child components like Cart and PlaceOrder.
Event Handling and Interactions:
 Implemented event handling within components to respond to user interactions (e.g.,
clicking buttons, form submissions).
 Used event callbacks (e.g., setShowLogin) to update state and trigger UI updates based
on user actions.

Component Composition and UI Design:

 Composed the application by nesting components (Navbar, Routes, Footer) to structure
the layout and functionality of the website.
 Applied CSS styling (Home.css, Cart.css, PlaceOrder.css) for responsive and visually
appealing UI design, ensuring consistency and usability across different screen sizes.

7. Code or Algorithm
 Home:-
import React, { useState } from 'react'
import './Home.css'
import Header from '../../Components/Navbar/Header/Header'
import ExploreMenu from '../../Components/ExploreMenu/ExploreMenu'
import FoodDisplay from '../../Components/FoodDisplay/FoodDisplay'
import AppDownload from '../../Components/AppDownload/AppDownload'
const Home = () => {
const [category, setCategory] = useState('All')
return (
<div>
<Header />
<ExploreMenu category={category} setCategory={setCategory} />
<FoodDisplay category={category} />
<AppDownload />
</div>
)
}

export default Home

Cart:-
import React, { useContext } from 'react'
import './Cart.css'
import { StoreContext } from '../../context/StoreContext'
import { useNavigate } from 'react-router-dom'
const Cart = () => {
const { cartItems, food_list, removeFromCart, getTotalCartAmount } =
useContext(StoreContext)

const navigate = useNavigate()

return (
<>
<div className='cart'>
<div className='cart-items'>
<div className='cart-items-title'>
<p>Items</p>
<p>Title</p>
<p>Price</p>
<p>Quantity</p>
<p>Total</p>
<p>Remove</p>
</div>
<br />
<hr />
{food_list.map(item => {
if (cartItems[item._id] > 0)
{ return (
<>
<div className='cart-items-title cart-items-item'>
<img src={item.image} alt='' />
<p>{item.name}</p>
<p>${item.price}</p>
<p>{cartItems[item._id]}</p>
<p>${item.price * cartItems[item._id]}</p>
<p
onClick={() => removeFromCart(item._id)}
className='cross'
>
x
</p>
</div>
<hr />
 </>
)
}
})}
</div>
<div className='cart-bottom'>
<div className='cart-total'>
<h2>Cart Totals</h2>
<div>
<div className='cart-total-details'>
<p>SubTotal</p>
<p>${getTotalCartAmount()}</p>
</div>
<hr />
<div className='cart-total-details'>
<p>Delivery Fee</p>
<p>${2}</p>
</div>
<hr />
<div className='cart-total-details'>
<b>Total</b>
<b>${getTotalCartAmount() + 2}</b>
</div>
<hr />
</div>
<button onClick={() => navigate('/order')}>
Proceed To Checkout
</button>
</div>
 <div className='cart-promocode'>
<div>
<p>if You Have A promo code ,Enter It here</p>
<div className='cart-promocode-input'>
<input type='text' placeholder='promo code' />
<button>Submit</button>
</div>
</div>
</div>
</div>
</div>
</>
)
}

export default Cart;

8. References
https://www.w3schools.com/

https://www.simform.com/blog/react-libraries/

https://legacy.reactjs.org/

https://react.dev/