OverReact is an Airline Reservation System through which users can reserve and pay for flights in order to travel to various countries and cities. 🌎 ✈️

Motivation 🔥

The purpose of this project is to learn how to work as a team on a large-scale MERN Stack project and meet specific Functional and Non-Functional Requirements. Learn how to deal with various APIs and write code in a consistent style.

Build Status 🔨

• The website currently offers round trips only. However, in the future we intend to offer one-way trips.

• The website allows you to choose one cabin class per reservation, in the future we may allow the same reservation to have different cabin classes.

• For reporting bugs or offering contributions or enhancements please check our Contributions section below.

Code Style 📜

We are following this Code Style for consistency. This .editorconfig file specifies our coding practices and ensures they are maintained throughout the entire project.

Examples of Coding Standards We are Maintaining in Our Project:

• Indentation style
• Indentation size
• How we deal with trailing whitespaces
• Whether or not we insert a final newline

Tech/Frameworks used

MERN Stack was used to create this project.

MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

MongoDB - document database

Express(.js) - Node.js web framework

React(.js) - a client-side JavaScript framework

Node(.js) - the premier JavaScript web server

Features ✨

• Interesting news about the world's top travel destinations are featured at the Home page. 📍
• Users can personalize their experience by adding their favourate quote and profile photo. 👦
• Users can update their personal information any time.
• Users can search for flights and reserve them. ✈️
• Auto-complete of textboxes is supported to ease the search experience. 🔍
• Online payments are supported.
• Users are emailed with any changes the make in their resrevations or if a flight is edited or cancelled. 📫

Installation ⬇️

A) Clone the Repository to your device 💻

B) Open 2 Terminals

C) In the first terminal, run the front end by running the following commands in order:

cd client/myapp 

npm install

npm start

D) In the second terminal, run the back end by running the following commands in order:

cd server 

node App.js

API Reference 📑

Axios for communication between the front end and back end

Stripe for online payments

Nodemailer for sending emails to clients 📫

How to Use?

Open http://localhost:3000/home to view the homepage in your browser.

In the Home Page, you can:

A) Specify your Round Trip Details: ✈️ 🔍

In the home page you can specify the dates of your departure and return, cabin class, number of travellers, and then click "Search" in order to find departure flights that match your preferences.

B) Choose Departure Flight: ✈️

After clicking search, a list of all departure flights matching your search criteria will be displayed, from which you can choose your preferred departure flight.

C) Choose Return Flight: ✈️

After choosing a departure flight, click 'return flight' to view the list of return flights that match your search criteria, from which you can choose your preferred return flight.

D) Reserve The Trip:

You can now reserve a flight by clicking 'Confirm Reservation'.

D) Choose Seats: 💺

• You can then choose the seats you prefer both the departure plane and the return plane.

• If you are not logged in, you will be prompted your username and password first.

• If you do not have an account click "I Don't Have an Account" so you can sign up.

E) Pay Using Credit Card: 💳

Finally, you can pay using a credit card (Do not enter real credit card information, this is only a demo). 💰

If you get this page, your transaction was successful. You should expect a confirmation email.

If you get this page, your transaction has failed. You need to revise your card details and try again.

In My Profile Page, you can:

A) Change Your Personal Details 👦

b) Change Your Password

C) View Your Upcoming Flights:

After cicking 'Upcoming Flights' in your Profle, you'll have a list of all your upcoming flights.

a) Cancel Reservation ❌

b) Edit Reservation

1) Change Seats 💺

2) Change Departure Flight

3) Change Return Flight

c) Email Yourself With Your Trip Itenrary 📫

Admins can:

A) View All Flights

B) Edit Flights

If you wish to edit a flight, click the 'update' button in the All Flights Page on the right of the row of the flight you wish to update.

C) Delete Flights

If you wish to delete a flight, click the 'delete' button in the All Flights Page on the right of the row of the flight you wish to delete.

D) Create New Flights

E) Search for a Flight 🔍

In the About Us Page:

You can find out more about us, OverReact Team. You can find different social media platforms through which you can contact us. 😀

Code Example:

Tests

If you'd like to test the website:

• try signing up
• try opening your profile
• try searching for a trip form Cairo to Berlin, with Check In on 11th of January 2022 and Check Out on the 14th of April 2022.
• try reserving a flight
• try editing your reservation
• try deleting your reservation
• try changing your password

Contribute 🤝

If you would like to contribute to our website, check our Contribution Guidelines

Credits 🌟

The main resources we used in creating this project are:

https://blog.logrocket.com/mern-stack-tutorial/

https://www.youtube.com/watch?v=leNCfU5SYR8

https://www.freecodecamp.org/news/use-nodemailer-to-send-emails-from-your-node-js-server/

https://www.youtube.com/watch?v=mI_-1tbIXQI

https://www.youtube.com/watch?v=71wSzpLyW9k

https://www.youtube.com/watch?v=lbEFSP1WAv0

https://www.youtube.com/watch?v=7CqJlxBYj-M

https://ant.design/components/auto-complete/

License ©️

MIT License