Flights

A Fullstack Airport Viewer that allows a user to upload a CSV containing their favorite airports built with React and Ruby on Rails.

Table of Contents 📖

• General Info
• Built With
• Features
• Screenshots
• Setup
• Usage
• Final Thoughts/Things to share with Client

General Info 📝

For simplicity, both the backend and front end will be contained in the same GitHub. If this were a larger project I would most definitely separate the Front and Backend.

Time Spent:

• Design Doc/Planning: 1 hour

• Messing Google Cloud Billing/Troubleshooting to get Google Maps working : 1.5 hours

• Frontend: 3.5 hours

• Backend: 2 hours

• README: .75 hours

• TOTAL: 8.75 hours

Here is a link to the design doc that helped guide me through the project.

Built With ⚡️

Project is created with:

• Ruby version: 3.1.2
• Rails version: 7.0.4
• React version: 18.2.0

Gems:

• rack-cors

React Libraries:

• axios
• uuidv4

Features 🎯

• Import CSV with aiport data
• Shareable public map with unique ID

Screenshots 📸

• Base page

• After you upload a csv successfully this text will appear with a link to view your map

• A map with 1 airport from this sample data

• A map with 4 airports from this sample data

• Info window for a clicked airport

• When you upload a csv with 8107 airports, things get a little messy

Setup ⚙️

To clone and run this application, you'll need Git, Ruby on Rails, and Node.js (which comes with npm) installed on your computer.

# Clone this repository
$ git clone https://github.com/Nhendy12/flights.git

# Go into the repository
$ cd flights

Usage 🚂

#for Backend

# to install all req'd dependencies
$ bundle install
# to make all database migrations
$ rake db:migrate
# start the local server (http://localhost:3000)
$ rails s

# for Frontend

# cd into frontend directory
$ cd flight-viewer  
# Install dependencies
$ npm install
# Run the app
$ npm start

Final Thoughts/Things to share with Client 🔔

• Add clustering of points so the map isn't messy when there is a ton of airports
• Ask for exact colors rgb's (I tried to match it as close as I could)
• Possibly move to csv parser to a worker if files are too big. I would ask the client for expected file sizes
• There is no error handling if uploaded csv is not the expected format