/project-m4-slingair

Primary LanguageJavaScript

Module 4 - Project: SlingAir!

You just accepted a web developer position at Slingshot Airlines!

They were really impressed with the work you did at Concordia Bootcamps. After a conversation with the CEO at the job fair, they hired you on the spot! They have project that they need to ship asap and are confident that you can deliver.

They have a new seat-booking app that is set to be released next week. You were told that most of the work is already done. And that all that remains is just to connect the different pieces to get it working. Because you worked on similar functionality during your bootcamp, you're confident that you can pull it off.

You have been provided with a GitHub repo and little else.

You ask if it is possible to speak to the dev that worked on the project thus far. Nope. Not possible. He left without notice and on bad terms.

Looks like you're on your own...

mvp gif

The App

Screenshots

Functionality

  • When a user navigates to http://localhost:3000, they are presented with an input to enter the flight number.
  • With the flight number, make a request to the server for the seating availability on that flight.
  • When a response with seating is received, display the seating input as well as the form requesting user's information.
  • User selects a seat, enters information and clicks 'Confirm'.
  • Contact the server with the data, and wait for a success response to redirect to the /confirmed page.
  • The confirmed page should display a confirmation message to the user with the info that they entered on the previous screen.
  • Consider using localStorage to save the reservation id, to allow for retrieval if the user closes and reopens the browser.

Project Setup

The Frontend

  1. Open a terminal in VS Code
  2. Type cd frontend
  3. Type yarn install

Use yarn dev:frontend to start the frontend dev environment.

The Backend

  1. Open another terminal in VS Code
  2. Type cd backend
  3. Type yarn install

Use yarn dev:backend to start the backend dev environment.

dual terminal

Developer Notes

There is a folder called notes that contains possible hints on what to do next...

Requirements for Project Completion

In order for your project to be considered DONE (passing grade), you should have a working MVP of the app.

Backend

  1. Server endpoints are RESTful.
  2. There are endpoints for the following actions:
    • retrieve all flight numbers
    • retrieve single flight data (seating)
    • retrieve all reservations
    • retrieve a single reservation
    • create a reservation
    • delete a reservation This is a requirement, even though the FE of this is a stretch goal.
    • update a reservation This is a requirement, even though the FE of this is a stretch goal.
  3. server should respond in a complete fashion.
    • Send the status and the json separately.
    • send the status in the json object as well.
    • when a request succeeds respond with requested data.
    • when a request fails, respond with the data that was sent to the server. This makes it easier for FE developers to debug their code.
    • when a request does not need any data to be returned, provide a message explaining the status: i.e. "reservation deleted."
res.status(200).json({ status: 200, data: {}, message: {} });

Frontend

  1. user can select a flight from a dropdown. Current implementation of an input field is not ideal.
  2. user can select an available seat.
  3. user can enter their personal information.
  4. user can view the flight confirmation page.
  5. given a reservation id, user should be able to view her reservation.

Note that mutated test data will be preserved as long as your server is running. It stays in memory. The changes will only be reset when the server is restarted.

Stretch

  • Create an interface for users to modify their personal information and/or cancel their reservation at /profile.
  • Create an admin interface at /admin to view all of the reservation. (The design is up to you.)
  • Any other improvements that you would like to make! Go wild!

Stretch: Connect to the SlingAir API

There is a Slingair API! If you have completed all of the work for the MVP and any other FE goals you had, feel free to ask your instructor for the API Documentation.

In order to incorporate the API, you will need to modify your backend as it will no longer modify the data in memory, but will use the API to complete all of the requests it receives from the frontend. Do not access the API directly from the frontend. The API should have some security that would prevent that, but it hasn't been setup yet.

  • NOTE: The API is hosted on a free heroku plan at the moment, so first call of the day will fail.