For my final project I have built a search engine to search for details about airports around the world. It has functionality to search for any airport in the world using search by: name, city, country and iata code. It uses 3 APIs I have created (2 with data I created) as well as several other external APIs. It uses Zustand for state management as well as several react libraries, including lottie animations, leaflet maps, pagination and flags. It has been created with responsiveness and accessibility in mind and includes user input and data validation on front and backends.
(See assignment requirements at the end of this readme)
HTML5, CSS3, React, React Router, with Editor: VS Code
zustand: for global state management
moment.js: for data and time
geolib: (https://github.com/manuelbieh/geolib) - to convert User IP address to latitude and longitude
intl.DisplayNames: for country names
Lottie files: animations for loading page animations
react-paginate: for pagination of country airport list
My Backend: My MongoDB Database has 3 collections for 3 datasets: airports, airlines and busiestairports.
-
My API for the main airport data: https://final-project-airportfinder.onrender.com/airports/
-
My API for airlines (dataset I created): https://final-project-airportfinder.onrender.com/airlines/
-
MY API from busiest airports (dataset I created): https://final-project-airportfinder.onrender.com/busiestairports/
Weather API: https://openweathermap.org - weather information for airport page
Pexel API: https://www.pexels.com/api/ - displays an image for each country (UPDATE: removed this component and replaced it with busiest airports information)
Flag API: https://flagsapi.com
Map API: Leaflet uses openstreetmap
Nearest airport data: Lufthansa API
Country search data: http://restcountries.com
Continent codes: created my own json file in data folder
Logo: created using Canva and GIMP
Fonts: Bebas Neue (for logo), Montserrat, Poppins
Colour scheme: white background: #fbfbfbfb text dark blue: #363062 medium blue: #4D4C7D orange: #F99417
Create sortable table functionality for every column in the airport country list. Perfect mobile view.
Frontend: https://airportfinder.netlify.app/
Backend: https://final-project-airportfinder.onrender.com/
Mobile view testing: Pixel 7 (412 x 915), iPhone 12 Pro (390 x 814)
Tablet view testing: Apple ipad mini
Desktop testing: chrome, firefox, edge
Minimal requirements:
👾 **Technical requirements**✓ Frontend in React
✓ Backend in Node.js
✓ MongoDB database
✓ Navigation using React Router
✓ Should work in Chrome, Firefox & Safari
✓ Be responsive and work well on mobile, tablet and desktop
✓ Follow the accessibility guidelines
🎨 **Visual requirements**✓ Your application should have a clear structure, using the box model as a reference, with consistent margins/paddings.
✓ You should use consistent h1-h6 styles and sizes throughout your site and for multiple devices.
✓ You should use a colour scheme based on one or a few colours.
✓ You should have a design that can be adjusted to fit devices of all sizes. Remember that 58.43% (Mar 2023) of all users will visit your page from a mobile device and that the page should therefore be optimised for these users too!