Complete the two stories below to finalize a fictitious SpotHero checkout flow.
- node/npm
Users want to see details about a spot before purchasing it.
Implement a modal that shows the spot details. Follow the design provided by the product team.
- The modal should animate in and out gracefully, not just appear/disappear.
Users should be able to purchase a spot.
Add a form that takes user input, verifies it, and allows the user to hit the confirmation page. Follow the design provided by the product team.
- Email and Phone Number fields are required and should display errors if not filled out correctly.
- Phone Number should only allow entry of digits. Bonus points for auto-formating to a US phone number (such as (xxx) xxx-xxxx).
- Adjust the confirmation page (if necessary) to ensure it works and renders correctly.
- Make sure that a second run through the flow and booking another spot updates all UI correctly.
You may use any additional open source tools you wish to satisfy the requirements.
- Fork this repository to your own GitHub account.
- Run
npm install
to download all necessary dependencies. - Run
npm start
to serve the API (see API notes below) and spin up the local development environment. - Implement your solution.
- Download your fork as a zip file and upload it to the relevant location within Greenhouse.
The API lives at http://localhost:8000/api
.
Available routes include:
GET /spots
- Get a list of available spots.GET /spots/:id
- Get a spot byid
.POST /reservations
- Purchase a spot.{ spotId: int, firstName: string (optional), lastName: string (optional), email: string, phone: string }
- Would anything here make sense to unit/integration test?
- Remember, the devil is in the details :)