Skip to content

Latest commit

 

History

History
53 lines (28 loc) · 4.41 KB

README.md

File metadata and controls

53 lines (28 loc) · 4.41 KB

Flight Companion - A flight Status and live Notification web App

In the case study, I created a web app using react.js, node.js, express.js, MongoDB, AviationStack for flight data, and AWS S3 bucket for Storage.

For a video demo of the project click the link .... https://goodwill-ngo.s3.ap-south-1.amazonaws.com/flight-status/flight-site-video.mp4

In front-end, I have created a very appealing, easy-to-understand, simple, and responsive UI So, that users can easily use the website as needed, in front-end there are 3 pages home, notification, and flight status. For this, I have used HTML, CSS, react.js, fontAwesome for icons, and react-bootstrap for better UI.

In the back end, I have created very clean, proper, and well-structured APIs, So, that our developer can easily understand and update the code easily in the future. in the backend, I have created 2 main APIs first for fetching flight status from 3rd party and second for storing user info and sending email notifications as needed. for this, I have used node.js, express.js, and nodemailer for emails. In the database, I have used MongoDB Atlas which is a cloud-based non-relational database in which I have created a well-structured schema with all the necessary details.

I have used AWS S3 to store a few images and videos that I want to access quickly and easily.

I have also created custom Email templates with the help of plane HTMl and Internal CSS then Passed these templates as a response to the user for notification purposes. These email templates consist of live dynamic data on flight schedules, airport names, departure/arrival times delays, etc. Like these...

Screenshot 2024-07-30 220603

Now, Working........... For status, I take the Flight number from the user and pass it to my node Api where I run the query on 3rd third-party database to fetch the current data, once I receive the data from the 3rd party Api then I need to clean the data and send back as a response in my front-end. where I further filter the data and arrange it then show it to the user. At every stage of my Apis, I tried to handle every possible error and exception that I could think of this step.

For Notification, I take a few details from the user and then pass these details to my backend where first I store them in my database and then filter the flight number from the monogoDB return object then pass that flight Number to my getFlightDetailsByNumber function which fetches me the details from the 3rd party database, then pass that information to my nodeMailer API(sendmail) which takes the user data from mongoDB return data then fill these data in the html template and send the email to the user and also send a response back to front-end where I show the flight-status to the user in the form of alert box.

I have also implemented form validation to validate the user input.

and some more minor functionality to improve the site's overall experience once I fill out the notification form then the button text changes from "I want notification" to "fetching please wait...." and I also disable the button until I get a response from the backend, once I get a response than I showcase the flight_status in the alert box.

Some Screen Shots of the Project...

Screenshot 2024-07-30 203747

Screenshot 2024-07-30 203812

Screenshot 2024-07-30 203836

Screenshot 2024-07-30 204112

Screenshot 2024-07-30 204143

Screenshot 2024-07-30 204202

Screenshot 2024-07-30 230500

Screenshot 2024-07-31 083039

Screenshot 2024-07-31 083333

Flight Data received from 3rd Party API

Screenshot 2024-08-03 113202