Build a clone of Redbus with Html Css Javascript

Build a clone of Redbus with Html Css Javascript

construct-week-project-unit5

Ā·

2 min read

NamastešŸ™ I'm pursuing a Full Stack Web Development. Building scalable and performant Webapps with JavaScript.

About Project

We were given a Project that was to clone a RedBus website. It was a pretty good project and challenging project to work upon.

RedBus offers an online bus ticket booking option and also promotes hassle-free bus travel across India. Undergo a quick bus ticketing procedure, choose suitable bus seats, bus type and bus operator then complete your online payment in just a few seconds.

I was complete project with my team mates. we have to task create pixel-perfect clone of Redbus website.

Home Page

2022-08-10 09 48 01.png

LANDINGBottom2022-08-10 09 52 39.gif

Ryde Page

Ryde2022-08-10 09 54 48.gif

RaidRail Page

RaideRail2022-08-10 12 02 18.png

SignUp/Login

You have to firstly Signup yourself. Enter Number and after you get OTP put here click on verify OTP.

Signup888888888888882022-08-10 17 27 00.png

OTP34325425252552022-08-10 17 53 48.png

Profile

Here user add their profile Name, Email.

UserDetail2022-08-10 17 28 40.png

On the successful login, the user will be directed to the landing page there we have implemented a search functionality where users will be able to search through put their information of start and destination and the date of departure.

Bus Booking Section

BookingSection2022-08-10 10 18 39.gif

User can select the bus according to his there time. And on this page user can see Arrival, Departure time, also here user can see travel of time, buses rating, bus company, bus type, seat availability and many more. also user use filter functionality.

Check seat availability and choose seat

Bookkkkiiiinnggg2022-08-10 17 52 27.png

When you click on view seat user can see available seat and select your seat. you can see here booked seat.

Passenger Detail

PasengerDetails2022-08-10 10 22 09.gif

After filing all info user redirect to payment page. on successful payment. You will get Ticket Number.

Ticket-number-get2022-08-10 10 27 39.gif

Show Ticket Page

If you enter here ticket number. You can print ticket from here.

After-ShowTicket=2022-08-10 10 30 01.gif

Cancel Ticket

From here you can cancel your Ticket.

after-cancel-Ticket-2022-08-10 10 30 42.gif

My Trips

In this page you can see your booked trips plans. If you cancel the ticket, it is also deleted from here

After-Paytment-myticket2022-08-10 10 28 49.gif

** Project Link** - Netlify Link

Challenges:

ā€¢ Team Coordination.

ā€¢ Git handling.

ā€¢ Implementation of dynamic pages.

Technology Used

ā€¢ HTML

ā€¢ CSS

ā€¢ JAVASCRIPT

ā€¢ DOM

ā€¢ JSON Server

ā€¢ Local Storage

Tools

ā€¢ VS Code

ā€¢ Github

ā€¢ Postman

Did you find this article valuable?

Support Akash jadhav by becoming a sponsor. Any amount is appreciated!

Ā