Skip to content

A travel booking website where a user can plan their entire journey.

Notifications You must be signed in to change notification settings

MukulHowale/expedia-clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Expedia-clone - Flights booking Website

Expedia is a booking website which helps to book Flights, Cars, Stays, Holidays Travel.

Languages used

  1. HTML
  2. CSS
  3. JavaScript
  4. Rest API
  5. JSON server

Tools

  1. VS Code
  2. Git

Teamates

  1. Shubham Shegokar
  2. Mukul Howale
  3. Sandhya Maram

Libraries used

Google Fonts - (https://fonts.google.com/) Font awesome icons - (https://fontawesome.com/v4.7/)

Live Demo Link

https://expediaclone.netlify.app

Screenshots of flow of the website

Landing Page

Editing expedia-clone_README md at main · MukulHowale_expedia-clone - Google Chrome 10_3_2021 7_40_03 PM

The landing page has options for sign in and sign up to, search for flights. The navabr and footer is similar across all the webpages. After the userr signs in there will be option for logout and the user name will appear on top right of navbar

Sign in and Sign up pages

Editing expedia-clone_README md at main · MukulHowale_expedia-clone - Google Chrome 10_3_2021 7_40_14 PM Editing expedia-clone_README md at main · MukulHowale_expedia-clone - Google Chrome 10_3_2021 7_40_25 PM

The Sign in and Sign up pages give error if any of the fields is left empty or the login credentials don't match and we have used reast api and json server for authentication. After succesful login it is navigated to landing page. There we can search for flights.

Results Page

Editing expedia-clone_README md at main · MukulHowale_expedia-clone - Google Chrome 10_3_2021 7_40_56 PM

After searching for flights, the results will be shown here. There are various filter option based on airline, stoppings, and timing. There is also option for sorting the flights based on prices and we can also select no.of passengers.

Checkout Page

Editing expedia-clone_README md at main · MukulHowale_expedia-clone - Google Chrome 10_3_2021 7_41_06 PM

After clicking on one of the flights, all the information related to flight and prices are shown here. If we click on checout out button it will take us to payment checkout page.

Payment Page

Editing expedia-clone_README md at main · MukulHowale_expedia-clone - Google Chrome 10_3_2021 7_41_14 PM Editing expedia-clone_README md at main · MukulHowale_expedia-clone - Google Chrome 10_3_2021 7_41_47 PM

Here we can enter the details of travellers and payment details and on complete booking, it will show us a message of booking confirmation and then navigate to landing page.

Usage

To use the project

  1. Clone the repository.
  2. And then go inside the folder "expedia-clone" using "cd expedia-clone", Locate the file "index.html" and run it in the browser using live server.
  3. To start the JSON server go inside "server" folder using "cd server", run the command "npm install" which will download all the required node_modules, then run the command "node server.js" in terminal.

About

A travel booking website where a user can plan their entire journey.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published