Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beckiemorton/final-project-airportfinder
An airport search engine, discover information about any airport in the world! Includes search functionality for name, IATA Code and country. Uses several APIs and react libraries. My final Technigo project.
https://github.com/beckiemorton/final-project-airportfinder
css html javascript mongodb mongoosejs node-js react react-router react-router-dom
Last synced: 6 days ago
JSON representation
An airport search engine, discover information about any airport in the world! Includes search functionality for name, IATA Code and country. Uses several APIs and react libraries. My final Technigo project.
- Host: GitHub
- URL: https://github.com/beckiemorton/final-project-airportfinder
- Owner: BeckieMorton
- Created: 2023-12-01T09:28:09.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2024-03-07T03:40:36.000Z (9 months ago)
- Last Synced: 2024-11-12T00:38:28.795Z (6 days ago)
- Topics: css, html, javascript, mongodb, mongoosejs, node-js, react, react-router, react-router-dom
- Language: JavaScript
- Homepage: https://airportfinder.netlify.app/
- Size: 3.37 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Technigo Web Development Bootcamp - FINAL PROJECT
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)
### Technologies used
HTML5, CSS3, React, React Router, with Editor: VS Code
### React Libraries/Dependencies
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
### API's
My Backend: My MongoDB Database has 3 collections for 3 datasets: airports, airlines and busiestairports.
1. My API for the main airport data: https://final-project-airportfinder.onrender.com/airports/
2. My API for airlines (dataset I created): https://final-project-airportfinder.onrender.com/airlines/
3. 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
### Resources
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
### If I had more time...
Create sortable table functionality for every column in the airport country list. Perfect mobile view.
### View it live
Frontend: https://airportfinder.netlify.app/
Backend: https://final-project-airportfinder.onrender.com/
### Responsiveness
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
### Screenshots
### Requirements
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!