Winter Semester ~2023-24

Web Programming (Lab)

Mini Project
(Single Member Mini Project)

School: SCOPE

Project Submitted by:

Name: Atul Mangla

Registration Number: 22BCE3515

Course Code: BCSE203E

Faculty Detail : Prof. Sathya K

1
INDEX

Table of contents

S. No Topics

1. Title page

2. Index

3. Abstract

4. Introduction

5. Technologies Used

6. Implementation

7. Deployement

8. References

2
 Abstract

In a world where mobility is essential, RideEase emerges as a

cutting-edge web-based car rental platform, meticulously crafted
using HTML, CSS, JavaScript, and React. Understanding the
pivotal role of transportation in daily life, RideEase redefines
how users interact with car rental services online.

RideEase is a modern and intuitive car rental website designed

to elevate the user's renting experience. Our mission is to
provide a seamless platform for users to discover, book, and
manage their rental cars effortlessly.

With a sleek and user-friendly interface, RideEase offers a

myriad of features including personalized rental options, smart
recommendations based on user preferences and location, and a
diverse fleet of vehicles to suit every need and budget.

RideEase ensures optimal performance across various devices

and screen sizes, ensuring a smooth and enjoyable experience
for users on the go. Through innovative features and robust
functionality, RideEase aims to transform the way users engage
with car rental services online, delivering a convenient and
hassle-free experience for all.

3
Problem Statement:
The current car rental industry faces challenges in providing a
seamless and user-friendly online booking experience. Users often
encounter issues such as limited vehicle availability, complex booking
processes, and lack of personalized recommendations based on their
preferences.

Project Overview:
The React-based car rental website aims to address these challenges
by creating a modern and intuitive platform for users to easily
discover, book, and manage rental vehicles. The website will offer a
diverse fleet of vehicles, personalized recommendations, and a user-
friendly interface for a hassle-free booking experience.

Objectives and Goals:

The primary objective of the project is to develop a robust and
scalable car rental website that enhances the user experience by
providing a seamless booking process, personalized
recommendations, and a responsive design for optimal
performance across devices.

To achieve this, my project aims to accomplish the following

goals:

1. Design a user-friendly interface with intuitive navigation for easy

vehicle selection and booking.
2. Implement a search and filter functionality to help users find
vehicles based on their preferences such as type, brand, price
range, and availability.

4
3. Integrate a recommendation system that suggests relevant
vehicles based on user history and preferences.
4. Develop a secure authentication system for user accounts and
a dashboard for managing bookings, payments, and profiles.
5. Ensure responsive design and compatibility across various
devices and screen sizes for a consistent user experience.
6. Optimize performance and loading times to provide a smooth
and efficient booking process.

Technologies Used

1. Visual Studio Code: Visual Studio Code (VS Code) is a

popular code editor that provides a rich set of features for
writing, debugging, and managing code. It offers
extensions for React.js development, syntax highlighting,
and version control integration, making it a preferred
choice for many developers working on Meloflow.

2. HTML (Hypertext Markup Language): HTML serves as

the foundation of web interface, providing the structural
framework for organizing content and elements within the
application. Through semantic markup, HTML ensures
accessibility and compatibility across different browsers
and devices.

3. CSS (Cascading Style Sheets): CSS is employed to

enhance the visual presentation , allowing for the
customization of colours, fonts, layouts, and other stylistic
aspects. By leveraging CSS, achieves a polished and
cohesive aesthetic that complements the user experience

4. React.js: React.js, a JavaScript library for building user

interfaces, powers the dynamic and interactive elements

5
 . Through its component-based architecture, React enables
the creation of reusable UI elements, facilitating modular
development and efficient rendering of user interface
elements.

5. npm : npm (Node Package Manager) are package

managers used to install, manage, and share JavaScript
packages and dependencies. They facilitate the integration
of third-party libraries, frameworks, and tools into the Car
rental project.

6. Git and GitHub: Git, a distributed version control system,

combined with GitHub, a web-based hosting service for
Git repositories, is utilized for collaborative development
and version management within the Car rental project.
Through Git and GitHub, developers can coordinate their
efforts, track changes, and manage codebase revisions
effectively.

The project will utilize HTML, CSS, JavaScript, React, and possibly
additional libraries or frameworks for enhanced functionality such as
Redux for state management, Firebase for authentication and database
storage, and Axios for handling API requests.

6
Implementation

7
1. Import Statements:
• import React from "react";: Imports the main React
object from the "react" package.
• import { Routes, Route, Navigate } from "react-router-
dom";: Imports the necessary components from the
react-router-dom package. Specifically, it imports
Routes, Route, and Navigate components for handling
routing in the application.
• Imports for various page components like Home, About,
CarListing, CarDetails, Blog, BlogDetails, and Contact
from their respective files in "../pages/" directory.
2. Routers Component:
• const Routers = () => { ... }: Defines a functional
component named Routers responsible for setting up
routing in the application.
• return ( ... ): Contains the JSX code representing the
routing configuration using <Routes> and <Route>
components.
3. Routes and Route Components:
• <Routes> ... </Routes>: This is the root component for
defining routes in the application. It wraps multiple
<Route> components that define specific routes and
their corresponding components.
• <Route path="/" element={<Navigate to="/home" />} />:
Redirects the root path "/" to "/home" using the
<Navigate> component from react-router-dom. This
ensures that when users visit the root URL, they are
redirected to the home page.
• Various <Route> components are used to map different
URL paths to their corresponding components:
• /home maps to the Home component.

• /about maps to the About component.

• /cars maps to the CarListing component.

• /cars/:slug maps dynamic URLs for individual car
details using the CarDetails component.
• /blogs maps to the Blog component.

8
 •/blogs/:slug maps dynamic URLs for individual blog
details using the BlogDetails component.
• /contact maps to the Contact component.

• The commented <Route> for "NotFound" is excluded

from the routing configuration but can be uncommented
and implemented if needed to handle 404 errors or
missing routes.
4. Export Statement:
• export default Routers;: Exports the Routers component
as the default export from this file, allowing other parts of
the application to import and use it for routing purposes.

Components

Header.jsx file

import React, { useRef } from "react";

import { Container, Row, Col } from "reactstrap";

import { Link, NavLink } from "react-router-dom";
import "../../styles/header.css";

const navLinks = [
{
path: "/home",
display: "Home",
},
{
path: "/about",
display: "About",
},
{
path: "/cars",
display: "Cars",
},

{
path: "/blogs",
display: "Blog",
},

9
 {
path: "/contact",
display: "Contact",
}
];

const Header = () => {

const menuRef = useRef(null);

const toggleMenu = () =>

menuRef.current.classList.toggle("menu__active");

return (
<header className="header">
{/* ============ header top ============ */}
<div className="header__top">
<Container>
<Row>
<Col lg="6" md="6" sm="6">
<div className="header__top__left">
<span>Need Help?</span>
<span className="header__top__help">
<i class="ri-phone-fill"></i> +1-202-555-0149
</span>
</div>
</Col>

<Col lg="6" md="6" sm="6">

<div className="header__top__right d-flex align-items-
center justify-content-end gap-3">
<Link to="#" className=" d-flex align-items-center gap-
1">
<i class="ri-login-circle-line"></i> Login
</Link>

<Link to="#" className=" d-flex align-items-center gap-

1">
<i class="ri-user-line"></i> Register
</Link>
</div>
</Col>
</Row>
</Container>
</div>

{/* =============== header middle =========== */}

<div className="header__middle">
<Container>

10
 <Row>
<Col lg="4" md="3" sm="4">
<div className="logo">
<h1>
<Link to="/home" className=" d-flex align-items-center
gap-2">
<i class="ri-car-line"></i>
<span>
Rent Car <br /> Service
</span>
</Link>
</h1>
</div>
</Col>

<Col lg="3" md="3" sm="4">

<div className="header__location d-flex align-items-center
gap-2">
<span>
<i class="ri-earth-line"></i>
</span>
<div className="header__location-content">
<h4>India</h4>
<h6>Saket City, India</h6>
</div>
</div>
</Col>

<Col lg="3" md="3" sm="4">

<div className="header__location d-flex align-items-center
gap-2">
<span>
<i class="ri-time-line"></i>
</span>
<div className="header__location-content">
<h6>9am - 7pm</h6>
</div>
</div>
</Col>

<Col
lg="2"
md="3"
sm="0"
className=" d-flex align-items-center justify-content-end
"
>
<button className="header__btn btn ">

11
 <Link to="/contact">
<i class="ri-phone-line"></i> Request a call
</Link>
</button>
</Col>
</Row>
</Container>
</div>

{/* ========== main navigation =========== */}

<div className="main__navbar">
<Container>
<div className="navigation__wrapper d-flex align-items-center
justify-content-between">
<span className="mobile__menu">
<i class="ri-menu-line" onClick={toggleMenu}></i>
</span>

<div className="navigation" ref={menuRef}

onClick={toggleMenu}>
<div className="menu">
{navLinks.map((item, index) => (
<NavLink
to={item.path}
className={(navClass) =>
navClass.isActive ? "nav__active nav__item" :
"nav__item"
}
key={index}
>
{item.display}
</NavLink>
))}
</div>
</div>

<div className="nav__right">
<div className="search__box">
<input type="text" placeholder="Search" />
<span>
<i class="ri-search-line"></i>
</span>
</div>
</div>
</div>
</Container>
</div>

12
 </header>
);
};

export default Header;

Key components of the website include:

• Header: The header section includes contact information,

login and registration options, and a logo linking to the
home page.
• Main Navigation: A responsive navigation menu allows
users to explore different sections of the website, including
Home, About, Cars, Blog, and Contact.
• Location and Hours: Information about the company's
location and operating hours is prominently displayed for
user convenience.
• Call to Action: A prominent call-to-action button
encourages users to request a call for further assistance.
• Search Functionality: The website provides a search box
for users to search for specific information or cars.

Footer.jsx file
import React from "react";

import { Container, Row, Col, ListGroup, ListGroupItem } from

"reactstrap";
import { Link } from "react-router-dom";
import "../../styles/footer.css";

const quickLinks = [
{
path: "/about",
display: "About",
},

{
path: "#",
display: "Privacy Policy",

13
 },

{
path: "/cars",
display: "Car Listing",
},
{
path: "/blogs",
display: "Blog",
},

{
path: "/contact",
display: "Contact",
},
];

const Footer = () => {

const date = new Date();
const year = date.getFullYear();
return (
<footer className="footer">
<Container>
<Row>
<Col lg="4" md="4" sm="12">
<div className="logo footer__logo">
<h1>
<Link to="/home" className=" d-flex align-items-center
gap-2">
<i class="ri-car-line"></i>
<span>
Rent Car <br /> Service
</span>
</Link>
</h1>
</div>
<p className="footer__logo-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur, distinctio, itaque reiciendis ab cupiditate
harum ex
quam veniam, omnis expedita animi quibusdam obcaecati
mollitia?
Delectus et ad illo recusandae temporibus?
</p>
</Col>

<Col lg="2" md="4" sm="6">

<div className="mb-4">

14
 <h5 className="footer__link-title">Quick Links</h5>
<ListGroup>
{quickLinks.map((item, index) => (
<ListGroupItem key={index} className="p-0 mt-3
quick__link">
<Link to={item.path}>{item.display}</Link>
</ListGroupItem>
))}
</ListGroup>
</div>
</Col>

<Col lg="3" md="4" sm="6">

<div className="mb-4">
<h5 className="footer__link-title mb-4">Head Office</h5>
<p className="office__info">Saket Rd, Block E, Saket, New
Delhi, Delhi 110017</p>
<p className="office__info">Phone: +91 8307387430</p>

<p className="office__info">Email:
atulmangla210503@gmail.com</p>

<p className="office__info">Office Time: 10am - 7pm</p>

</div>
</Col>

<Col lg="3" md="4" sm="12">

<div className="mb-4">
<h5 className="footer__link-title">Newsletter</h5>
<p className="section__description">Subscribe our
newsletter</p>
<div className="newsletter">
<input type="email" placeholder="Email" />
<span>
<i class="ri-send-plane-line"></i>
</span>
</div>
</div>
</Col>

<Col lg="12">
<div className="footer__bottom">
<p className="section__description d-flex align-items-
center justify-content-center gap-1 pt-4">
<i class="ri-copyright-line"></i>Copyright {year},
Developed by
Atul Mangla. All rights reserved.
</p>

15
 </div>
</Col>
</Row>
</Container>
</footer>
);
};

export default Footer;

The footer component of our car rental website provides

essential information and quick access to key sections. It
includes:
• Logo and About Section: Featuring our logo and a brief

description of our services.

• Quick Links: Direct links to important pages like About,

Privacy Policy, Car Listing, Blog, and Contact.

• Head Office Information: Details about our main office

location, contact number, email, and office hours.

• Newsletter Subscription: A section for users to subscribe

to our newsletter by providing their email address.

• Copyright Information: Displays the copyright year and

credits the website's development to Atul Mangla.

•

The footer enhances user experience by offering easy

navigation, contact details, and the option to stay updated
through newsletters.

16
UI components:

Aboutsection.jsx

import React from "react";

import { Container, Row, Col } from "reactstrap";
import "../../styles/about-section.css";
import aboutImg from "../../assets/all-images/cars-img/bmw-offer.png";

const AboutSection = ({ aboutClass }) => {

return (
<section
className="about__section"
style={
aboutClass === "aboutPage"
? { marginTop: "0px" }
: { marginTop: "280px" }
}
>
<Container>
<Row>
<Col lg="6" md="6">
<div className="about__section-content">
<h4 className="section__subtitle">About Us</h4>
<h2 className="section__title">Welcome to car rent
service</h2>
<p className="section__description">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
Voluptatum blanditiis esse accusantium dignissimos
labore
laborum. Veniam, corporis mollitia temporibus, in
quaerat vero
deleniti amet dolorem repudiandae, pariatur nam dolore!
Impedit
neque sit ad temporibus quam similique dolor ipsam
praesentium
sunt.
</p>

<div className="about__section-item d-flex align-items-

center">
<p className="section__description d-flex align-items-
center gap-2">
<i class="ri-checkbox-circle-line"></i> Lorem ipsum
dolor sit

17
 amet.
</p>

<p className="section__description d-flex align-items-

center gap-2">
<i class="ri-checkbox-circle-line"></i> Lorem ipsum
dolor sit
amet.
</p>
</div>

<div className="about__section-item d-flex align-items-

center">
<p className="section__description d-flex align-items-
center gap-2">
<i class="ri-checkbox-circle-line"></i> Lorem ipsum
dolor sit
amet.
</p>

<p className="section__description d-flex align-items-

center gap-2">
<i class="ri-checkbox-circle-line"></i> Lorem ipsum
dolor sit
amet.
</p>
</div>
</div>
</Col>

<Col lg="6" md="6">

<div className="about__img">
<img src={aboutImg} alt="" className="w-100" />
</div>
</Col>
</Row>
</Container>
</section>
);
};

export default AboutSection;

18
 Becomedriversection.jsx

import React from "react";

import "../../styles/become-driver.css";
import { Container, Row, Col } from "reactstrap";

import driverImg from "../../assets/all-images/toyota-offer-2.png";

const BecomeDriverSection = () => {

return (
<section className="become__driver">
<Container>
<Row>
<Col lg="6" md="6" sm="12" className="become__driver-img">
<img src={driverImg} alt="" className="w-100" />
</Col>

<Col lg="6" md="6" sm="12">

<h2 className="section__title become__driver-title">
Do You Want to Earn With Us? So Don't Be Late
</h2>

<button className="btn become__driver-btn mt-4">

Become a Driver
</button>
</Col>
</Row>
</Container>
</section>
);
};

export default BecomeDriverSection;

Bloglist.jsx
import React from "react";
import { Col } from "reactstrap";
import "../../styles/blog-item.css";
import { Link } from "react-router-dom";
import blogData from "../../assets/data/blogData";

const BlogList = () => {

return (
<>
{blogData.map((item) => (

19
 <BlogItem item={item} key={item.id} />
))}
</>
);
};

const BlogItem = ({ item }) => {

const { imgUrl, title, author, date, description, time } = item;

return (
<Col lg="4" md="6" sm="6" className="mb-5">
<div className="blog__item">
<img src={imgUrl} alt="" className="w-100" />
<div className="blog__info p-3">
<Link to={`/blogs/${title}`} className="blog__title">
{title}
</Link>
<p className="section__description mt-3">
{description.length > 100
? description.substr(0, 100)
: description}
</p>

<Link to={`/blogs/${title}`} className="read__more">

Read More
</Link>

<div className="blog__time pt-3 mt-3 d-flex align-items-center

justify-content-between">
<span className="blog__author">
<i class="ri-user-line"></i> {author}
</span>

<div className=" d-flex align-items-center gap-3">

<span className=" d-flex align-items-center gap-1
section__description">
<i class="ri-calendar-line"></i> {date}
</span>

<span className=" d-flex align-items-center gap-1

section__description">
<i class="ri-time-line"></i> {time}
</span>
</div>
</div>
</div>
</div>
</Col>

20
 );
};

export default BlogList;

Bookingform.jsx
import React from "react";
import "../../styles/booking-form.css";
import { Form, FormGroup } from "reactstrap";

const BookingForm = () => {

const submitHandler = (event) => {
event.preventDefault();
};
return (
<Form onSubmit={submitHandler}>
<FormGroup className="booking__form d-inline-block me-4 mb-4">
<input type="text" placeholder="First Name" />
</FormGroup>
<FormGroup className="booking__form d-inline-block ms-1 mb-4">
<input type="text" placeholder="Last Name" />
</FormGroup>

<FormGroup className="booking__form d-inline-block me-4 mb-4">

<input type="email" placeholder="Email" />
</FormGroup>
<FormGroup className="booking__form d-inline-block ms-1 mb-4">
<input type="number" placeholder="Phone Number" />
</FormGroup>

<FormGroup className="booking__form d-inline-block me-4 mb-4">

<input type="text" placeholder="From Address" />
</FormGroup>
<FormGroup className="booking__form d-inline-block ms-1 mb-4">
<input type="text" placeholder="To Address" />
</FormGroup>

<FormGroup className="booking__form d-inline-block me-4 mb-4">

<select name="" id="">
<option value="1 person">1 Person</option>
<option value="2 person">2 Person</option>
<option value="3 person">3 Person</option>
<option value="4 person">4 Person</option>
<option value="5+ person">5+ Person</option>
</select>
</FormGroup>

21
 <FormGroup className="booking__form d-inline-block ms-1 mb-4">
<select name="" id="">
<option value="1 luggage">1 luggage</option>
<option value="2 luggage">2 luggage</option>
<option value="3 luggage">3 luggage</option>
<option value="4 luggage">4 luggage</option>
<option value="5+ luggage">5+ luggage</option>
</select>
</FormGroup>

<FormGroup className="booking__form d-inline-block me-4 mb-4">

<input type="date" placeholder="Journey Date" />
</FormGroup>
<FormGroup className="booking__form d-inline-block ms-1 mb-4">
<input
type="time"
placeholder="Journey Time"
className="time__picker"
/>
</FormGroup>

<FormGroup>
<textarea
rows={5}
type="textarea"
className="textarea"
placeholder="Write"
></textarea>
</FormGroup>
</Form>
);
};

export default BookingForm;

CarItem.jsx
import React from "react";
import { Col } from "reactstrap";
import { Link } from "react-router-dom";
import "../../styles/car-item.css";

const CarItem = (props) => {

const { imgUrl, model, carName, automatic, speed, price } =
props.item;

return (

22
 <Col lg="4" md="4" sm="6" className="mb-5">
<div className="car__item">
<div className="car__img">
<img src={imgUrl} alt="" className="w-100" />
</div>

<div className="car__item-content mt-4">

<h4 className="section__title text-center">{carName}</h4>
<h6 className="rent__price text-center mt-">
${price}.00 <span>/ Day</span>
</h6>

<div className="car__item-info d-flex align-items-center

justify-content-between mt-3 mb-4">
<span className=" d-flex align-items-center gap-1">
<i class="ri-car-line"></i> {model}
</span>
<span className=" d-flex align-items-center gap-1">
<i class="ri-settings-2-line"></i> {automatic}
</span>
<span className=" d-flex align-items-center gap-1">
<i class="ri-timer-flash-line"></i> {speed}
</span>
</div>

<button className=" w-50 car__item-btn car__btn-rent">

<Link to={`/cars/${carName}`}>Rent</Link>
</button>

<button className=" w-50 car__item-btn car__btn-details">

<Link to={`/cars/${carName}`}>Details</Link>
</button>
</div>
</div>
</Col>
);
};

export default CarItem;

HeroSlider.jsx
import React from "react";

import Slider from "react-slick";

import { Container } from "reactstrap";
import { Link } from "react-router-dom";

23
import "../../styles/hero-slider.css";

const HeroSlider = () => {

const settings = {
fade: true,
speed: 2000,
autoplaySpeed: 2000,
infinite: true,
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
pauseOnHover: false,
};
return (
<Slider {...settings} className="hero__slider">
<div className="slider__item slider__item-01 mt0">
<Container>
<div className="slider__content ">
<h4 className="text-light mb-3">For Rent Rs.2k Per Day</h4>
<h1 className="text-light mb-4">Reserve Now and Get 50%
Off</h1>

<button className="btn reserve__btn mt-4">

<Link to="/cars">Reserve Now</Link>
</button>
</div>
</Container>
</div>

<div className="slider__item slider__item-02 mt0">

<Container>
<div className="slider__content ">
<h4 className="text-light mb-3">For Rent Rs.2k Per Day</h4>
<h1 className="text-light mb-4">Reserve Now and Get 50%
Off</h1>

<button className="btn reserve__btn mt-4">

<Link to="/cars">Reserve Now</Link>
</button>
</div>
</Container>
</div>

<div className="slider__item slider__item-03 mt0">

<Container>
<div className="slider__content ">
<h4 className="text-light mb-3">For Rent Rs.2k Per Day</h4>

24
 <h1 className="text-light mb-4">Reserve Now and Get 50%
Off</h1>

<button className="btn reserve__btn mt-4">

<Link to="/cars">Reserve Now</Link>
</button>
</div>
</Container>
</div>
</Slider>
);
};

export default HeroSlider;

ServiceList.jsx
import React from "react";
import { Col } from "reactstrap";
import "../../styles/services-list.css";
import servicesData from "../../assets/data/serviceData";

const ServicesList = () => {

return (
<>
{servicesData.map((item) => (
<ServiceItem item={item} key={item.id} />
))}
</>
);
};

const ServiceItem = ({ item }) => (

<Col lg="4" md="4" sm="6" className="mb-3">
<div className="service__item">
<span className="mb-3 d-inline-block">
<i class={item.icon} />
</span>

<h6>{item.title}</h6>
<p className="section__description">{item.desc}</p>
</div>
</Col>
);

export default ServicesList;

25
 Testimonial .jsx
import React from "react";
import Slider from "react-slick";

import "../../styles/testimonial.css";

import ava01 from "../../assets/all-images/ava-1.jpg";

import ava02 from "../../assets/all-images/ava-2.jpg";
import ava03 from "../../assets/all-images/ava-3.jpg";
import ava04 from "../../assets/all-images/ava-4.jpg";

const Testimonial = () => {

const settings = {
dots: true,
infinite: true,
autoplay: true,
speed: 1000,
swipeToSlide: true,
autoplaySpeed: 2000,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};

return (
<Slider {...settings}>
<div className="testimonial py-4 px-3">
<p className="section__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ducimus magni

26
 explicabo molestias recusandae repudiandae, dolor, sapiente
placeat
ab, animi eum minima nulla facere aliquam aut vitae quo
pariatur
voluptate odit?
</p>

<div className="mt-3 d-flex align-items-center gap-4">

<img src={ava01} alt="" className="w-25 h-25 rounded-2" />

<div>
<h6 className="mb-0 mt-3">Jhon Doe</h6>
<p className="section__description">Customer</p>
</div>
</div>
</div>

<div className="testimonial py-4 px-3">

<p className="section__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ducimus magni
explicabo molestias recusandae repudiandae, dolor, sapiente
placeat
ab, animi eum minima nulla facere aliquam aut vitae quo
pariatur
voluptate odit?
</p>

<div className="mt-3 d-flex align-items-center gap-4">

<img src={ava02} alt="" className="w-25 h-25 rounded-2" />

<div>
<h6 className="mb-0 mt-3">Jhon Doe</h6>
<p className="section__description">Customer</p>
</div>
</div>
</div>

<div className="testimonial py-4 px-3">

<p className="section__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ducimus magni
explicabo molestias recusandae repudiandae, dolor, sapiente
placeat
ab, animi eum minima nulla facere aliquam aut vitae quo
pariatur
voluptate odit?
</p>

27
 <div className="mt-3 d-flex align-items-center gap-4">
<img src={ava03} alt="" className="w-25 h-25 rounded-2" />

<div>
<h6 className="mb-0 mt-3">Jhon Doe</h6>
<p className="section__description">Customer</p>
</div>
</div>
</div>

<div className="testimonial py-4 px-3">

<p className="section__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ducimus magni
explicabo molestias recusandae repudiandae, dolor, sapiente
placeat
ab, animi eum minima nulla facere aliquam aut vitae quo
pariatur
voluptate odit?
</p>

<div className="mt-3 d-flex align-items-center gap-4">

<img src={ava04} alt="" className="w-25 h-25 rounded-2" />

<div>
<h6 className="mb-0 mt-3">Jhon Doe</h6>
<p className="section__description">Customer</p>
</div>
</div>
</div>
</Slider>
);
};

export default Testimonial;

28
 React pages
About.jsx
import React from "react";

import CommonSection from "../components/UI/CommonSection";

import Helmet from "../components/Helmet/Helmet";
import AboutSection from "../components/UI/AboutSection";
import { Container, Row, Col } from "reactstrap";
import BecomeDriverSection from "../components/UI/BecomeDriverSection";

import driveImg from "../assets/all-images/drive.jpg";

import OurMembers from "../components/UI/OurMembers";
import "../styles/about.css";

const About = () => {

return (
<Helmet title="About">
<CommonSection title="About Us" />
<AboutSection aboutClass="aboutPage" />

<section className="about__page-section">
<Container>
<Row>
<Col lg="6" md="6" sm="12">
<div className="about__page-img">
<img src={driveImg} alt="" className="w-100 rounded-3"
/>
</div>
</Col>

<Col lg="6" md="6" sm="12">

<div className="about__page-content">
<h2 className="section__title">
We Are Committed To Provide Safe Ride Solutions
</h2>

<p className="section__description">
Lorem ipsum dolor sit, amet consectetur adipisicing
elit.
Eveniet veniam assumenda aperiam accusantium ex autem
perferendis repellendus nostrum delectus. Nemo et
dolore est
tempore rem minima adipisci magni dolorum ipsam.
</p>

29
 <p className="section__description">
Lorem ipsum dolor sit, amet consectetur adipisicing
elit.
Eveniet veniam assumenda aperiam accusantium ex autem
perferendis repellendus nostrum delectus. Nemo et
dolore est
tempore rem minima adipisci magni dolorum ipsam.
</p>

<div className=" d-flex align-items-center gap-3 mt-4">

<span className="fs-4">
<i class="ri-phone-line"></i>
</span>

<div>
<h6 className="section__subtitle">Need Any
Help?</h6>
<h4>+00123456789</h4>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</section>

<BecomeDriverSection />

<section>
<Container>
<Row>
<Col lg="12" className="mb-5 text-center">
<h6 className="section__subtitle">Experts</h6>
<h2 className="section__title">Our Members</h2>
</Col>
<OurMembers />
</Row>
</Container>
</section>
</Helmet>
);
};

export default About;

30
 Blog.jsx
import React from "react";
import { Container, Row } from "reactstrap";
import Helmet from "../components/Helmet/Helmet";
import CommonSection from "../components/UI/CommonSection";
import BlogList from "../components/UI/BlogList";

const Blog = () => {

return (
<Helmet title="Blogs">
<CommonSection title="Blogs" />
<section>
<Container>
<Row>
<BlogList />
<BlogList />
</Row>
</Container>
</section>
</Helmet>
);
};

export default Blog;

BlogDetail.jsx
import React, { useEffect } from "react";
import { Container, Row, Col, Form, FormGroup, Input } from
"reactstrap";

import { useParams } from "react-router-dom";

import blogData from "../assets/data/blogData.js";
import Helmet from "../components/Helmet/Helmet";
import { Link } from "react-router-dom";

import commentImg from "../assets/all-images/ava-1.jpg";

import "../styles/blog-details.css";

const BlogDetails = () => {

const { slug } = useParams();
const blog = blogData.find((blog) => blog.title === slug);

useEffect(() => {

31
 window.scrollTo(0, 0);
}, [blog]);

return (
<Helmet title={blog.title}>
<section>
<Container>
<Row>
<Col lg="8" md="8">
<div className="blog__details">
<img src={blog.imgUrl} alt="" className="w-100" />
<h2 className="section__title mt-
4">{blog.title}</h2>

<div className="blog__publisher d-flex align-

items-center gap-4 mb-4">
<span className="blog__author">
<i class="ri-user-line"></i> {blog.author}
</span>

<span className=" d-flex align-items-center gap-

1 section__description">
<i class="ri-calendar-line"></i> {blog.date}
</span>

<span className=" d-flex align-items-center gap-

1 section__description">
<i class="ri-time-line"></i> {blog.time}
</span>
</div>

<p
className="section__description">{blog.description}</p>
<h6 className="ps-5 fw-normal">
<blockquote className="fs-
4">{blog.quote}</blockquote>
</h6>
<p
className="section__description">{blog.description}</p>
</div>

<div className="comment__list mt-5">

<h4 className="mb-5">3 Comments</h4>

<div className="single__comment d-flex gap-3">

<img src={commentImg} alt="" />

32
 <div className="comment__content">
<h6 className=" fw-bold">David Visa</h6>
<p className="section__description mb-0">14
July, 2022</p>
<p className="section__description">
Lorem ipsum dolor sit amet consectetur
adipisicing elit.
Eos nobis totam eius laborum molestias
itaque minima
distinctio, quae velit tempore!
</p>

<span className="replay d-flex align-items-

center gap-1">
<i class="ri-reply-line"></i> Replay
</span>
</div>
</div>

{/* =============== comment form ============ */}

<div className="leave__comment-form mt-5">
<h4>Leave a Comment</h4>
<p className="section__description">
You must sign-in to make or comment a post
</p>

<Form>
<FormGroup className=" d-flex gap-3">
<Input type="text" placeholder="Full name"
/>
<Input type="email" placeholder="Email" />
</FormGroup>

<FormGroup>
<textarea
rows="5"
className="w-100 py-2 px-3"
placeholder="Comment..."
></textarea>
</FormGroup>

<button className="btn comment__btn mt-3">

Post a Comment
</button>
</Form>
</div>

33
 </div>
</Col>

<Col lg="4" md="4">

<div className="recent__post mb-4">
<h5 className=" fw-bold">Recent Posts</h5>
</div>
{blogData.map((item) => (
<div className="recent__blog-post mb-4"
key={item.id}>
<div className="recent__blog-item d-flex gap-3">
<img src={item.imgUrl} alt="" className="w-25
rounded-2" />
<h6>
<Link
to={`/blogs/${item.title}`}>{blog.title}</Link>
</h6>
</div>
</div>
))}
</Col>
</Row>
</Container>
</section>
</Helmet>
);
};

export default BlogDetails;

CarDetail.jsx
import React, { useEffect } from "react";

import carData from "../assets/data/carData";

import { Container, Row, Col } from "reactstrap";
import Helmet from "../components/Helmet/Helmet";
import { useParams } from "react-router-dom";
import BookingForm from "../components/UI/BookingForm";
import PaymentMethod from "../components/UI/PaymentMethod";

const CarDetails = () => {

const { slug } = useParams();

34
 const singleCarItem = carData.find((item) => item.carName ===
slug);

useEffect(() => {
window.scrollTo(0, 0);
}, [singleCarItem]);

return (
<Helmet title={singleCarItem.carName}>
<section>
<Container>
<Row>
<Col lg="6">
<img src={singleCarItem.imgUrl} alt="" className="w-
100" />
</Col>

<Col lg="6">
<div className="car__info">
<h2
className="section__title">{singleCarItem.carName}</h2>

<div className=" d-flex align-items-center gap-5

mb-4 mt-3">
<h6 className="rent__price fw-bold fs-4">
${singleCarItem.price}.00 / Day
</h6>

<span className=" d-flex align-items-center gap-

2">
<span style={{ color: "#f9a826" }}>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
</span>
({singleCarItem.rating} ratings)
</span>
</div>

<p className="section__description">
{singleCarItem.description}
</p>

<div

35
 className=" d-flex align-items-center mt-3"
style={{ columnGap: "4rem" }}
>
<span className=" d-flex align-items-center gap-
1 section__description">
<i
class="ri-roadster-line"
style={{ color: "#f9a826" }}
></i>{" "}
{singleCarItem.model}
</span>

<span className=" d-flex align-items-center gap-

1 section__description">
<i
class="ri-settings-2-line"
style={{ color: "#f9a826" }}
></i>{" "}
{singleCarItem.automatic}
</span>

<span className=" d-flex align-items-center gap-

1 section__description">
<i
class="ri-timer-flash-line"
style={{ color: "#f9a826" }}
></i>{" "}
{singleCarItem.speed}
</span>
</div>

<div
className=" d-flex align-items-center mt-3"
style={{ columnGap: "2.8rem" }}
>
<span className=" d-flex align-items-center gap-
1 section__description">
<i class="ri-map-pin-line" style={{ color:
"#f9a826" }}></i>{" "}
{singleCarItem.gps}
</span>

<span className=" d-flex align-items-center gap-

1 section__description">
<i
class="ri-wheelchair-line"

36
 style={{ color: "#f9a826" }}
></i>{" "}
{singleCarItem.seatType}
</span>

<span className=" d-flex align-items-center gap-

1 section__description">
<i
class="ri-building-2-line"
style={{ color: "#f9a826" }}
></i>{" "}
{singleCarItem.brand}
</span>
</div>
</div>
</Col>

<Col lg="7" className="mt-5">

<div className="booking-info mt-5">
<h5 className="mb-4 fw-bold ">Booking
Information</h5>
<BookingForm />
</div>
</Col>

<Col lg="5" className="mt-5">

<div className="payment__info mt-5">
<h5 className="mb-4 fw-bold ">Payment
Information</h5>
<PaymentMethod />
</div>
</Col>
</Row>
</Container>
</section>
</Helmet>
);
};

export default CarDetails;

37
 Contact.jsx
import React from "react";
import { Link } from "react-router-dom";
import { Container, Row, Col, Form, FormGroup, Input } from
"reactstrap";
import Helmet from "../components/Helmet/Helmet";
import CommonSection from "../components/UI/CommonSection";

import "../styles/contact.css";

const socialLinks = [
{
url: "#",
icon: "ri-facebook-line",
},
{
url: "#",
icon: "ri-instagram-line",
},
{
url: "#",
icon: "ri-linkedin-line",
},
{
url: "#",
icon: "ri-twitter-line",
},
];

const Contact = () => {

return (
<Helmet title="Contact">
<CommonSection title="Contact" />
<section>
<Container>
<Row>
<Col lg="7" md="7">
<h6 className="fw-bold mb-4">Get In Touch</h6>

<Form>
<FormGroup className="contact__form">
<Input placeholder="Your Name" type="text" />
</FormGroup>
<FormGroup className="contact__form">
<Input placeholder="Email" type="email" />
</FormGroup>

38
 <FormGroup className="contact__form">
<textarea
rows="5"
placeholder="Message"
className="textarea"
></textarea>
</FormGroup>

<button className=" contact__btn" type="submit">

Send Message
</button>
</Form>
</Col>

<Col lg="5" md="5">

<div className="contact__info">
<h6 className="fw-bold">Contact Information</h6>
<p className="section__description mb-0">
123 New Bazar, Saket, India
</p>
<div className=" d-flex align-items-center gap-2">
<h6 className="fs-6 mb-0">Phone:</h6>
<p className="section__description mb-0">+91
8306387462</p>
</div>

<div className=" d-flex align-items-center gap-2">

<h6 className="mb-0 fs-6">Email:</h6>
<p className="section__description mb-
0">xyz@gmail.com</p>
</div>

<h6 className="fw-bold mt-4">Follow Us</h6>

<div className=" d-flex align-items-center gap-4

mt-3">
{socialLinks.map((item, index) => (
<Link
to={item.url}
key={index}
className="social__link-icon"
>
<i class={item.icon}></i>
</Link>
))}
</div>

39
 </div>
</Col>
</Row>
</Container>
</section>
</Helmet>
);
};

export default Contact;

Home.jsx
import React from "react";

import HeroSlider from "../components/UI/HeroSlider";

import Helmet from "../components/Helmet/Helmet";

import { Container, Row, Col } from "reactstrap";

import FindCarForm from "../components/UI/FindCarForm";
import AboutSection from "../components/UI/AboutSection";
import ServicesList from "../components/UI/ServicesList";
import carData from "../assets/data/carData";
import CarItem from "../components/UI/CarItem";
import BecomeDriverSection from
"../components/UI/BecomeDriverSection";
import Testimonial from "../components/UI/Testimonial";

import BlogList from "../components/UI/BlogList";

const Home = () => {

return (
<Helmet title="Home">
{/* ============= hero section =========== */}
<section className="p-0 hero__slider-section">
<HeroSlider />

<div className="hero__form">
<Container>
<Row className="form__row">
<Col lg="4" md="4">
<div className="find__cars-left">
<h2>Find your best car here</h2>
</div>
</Col>

40
 <Col lg="8" md="8" sm="12">
<FindCarForm />
</Col>
</Row>
</Container>
</div>
</section>
{/* =========== about section ================ */}
<AboutSection />
{/* ========== services section ============ */}
<section>
<Container>
<Row>
<Col lg="12" className="mb-5 text-center">
<h6 className="section__subtitle">See our</h6>
<h2 className="section__title">Popular Services</h2>
</Col>

<ServicesList />
</Row>
</Container>
</section>
{/* =========== car offer section ============= */}
<section>
<Container>
<Row>
<Col lg="12" className="text-center mb-5">
<h6 className="section__subtitle">Come with</h6>
<h2 className="section__title">Hot Offers</h2>
</Col>

{carData.slice(0, 6).map((item) => (

<CarItem item={item} key={item.id} />
))}
</Row>
</Container>
</section>
{/* =========== become a driver section ============ */}
<BecomeDriverSection />

{/* =========== testimonial section =========== */}

<section>
<Container>
<Row>
<Col lg="12" className="mb-4 text-center">

41
 <h6 className="section__subtitle">Our clients
says</h6>
<h2 className="section__title">Testimonials</h2>
</Col>

<Testimonial />
</Row>
</Container>
</section>

{/* =============== blog section =========== */}

<section>
<Container>
<Row>
<Col lg="12" className="mb-5 text-center">
<h6 className="section__subtitle">Explore our
blogs</h6>
<h2 className="section__title">Latest Blogs</h2>
</Col>

<BlogList />
</Row>
</Container>
</section>
</Helmet>
);
};

export default Home;

42
Website Screenshots

43
44
45
46
Payment page

47
 Deployment

The deployment environment for Meloflow, your

webbased music player, can vary depending on factors
such as scalability requirements, budget, and
development preferences.
We can use Static hosting platforms like Netlify or
GitHub pages.
• Netlify: Netlify provides an easy-to-use platform for
hosting static websites and web applications. It
supports continuous deployment from Git, custom
domains, HTTPS, and serverless functions.
• GitHub Pages: GitHub Pages allows you to host
static websites directly from your GitHub
repositories. It supports custom domains and
automatic publishing via Git commits.

Conclusion
In conclusion, Meloflow represents a promising
webbased music player application designed to provide
users with a seamless and enjoyable music streaming
experience. Throughout its development, several key
features and functionalities have been implemented to
deliver on this goal.

The application boasts an intuitive user interface,

allowing users to easily navigate through their music
library, create playlists, and control playback. Meloflow

48
caters to the diverse needs of music enthusiasts across
different devices and platforms.

Furthermore, Meloflow leverages modern web

technologies such as React.js for dynamic user interface
components, Node.js for backend server logic, and
various third-party libraries to enhance functionality and
user experience.
Looking ahead, there are numerous opportunities for
future enhancements and refinements, including user
authentication, social features, offline support,
accessibility improvements, and integration with external
music APIs.
By continuously iterating and incorporating user
feedback, Meloflow can evolve into a more feature-rich
and user-centric music streaming platform.

References

• W3School:https://www.w3schools.com/REACT/D
EFAULT.ASP
• External Library used
•animate.css
• Took references from Websites:
Car dekho

49
• GFG

GitHub link:
https://github.com/atul21mangla/WEB-programming-lab-tasks.git

50