Code Monkey home page Code Monkey logo

fe-code-challenge's Introduction

SpotHero FE Coding Challenge

Complete the two stories below to finalize a fictitious SpotHero checkout flow.

Prerequisites

  • node/npm

Story #1

Background

Users want to see details about a spot before purchasing it.

Requirements

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.

Story #2

Background

Users should be able to purchase a spot.

Requirements

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.

Directions

You may use any additional open source tools you wish to satisfy the requirements.

  1. Fork this repository to your own GitHub account.
  2. Run npm install to download all necessary dependencies.
  3. Run npm start to serve the API (see API notes below) and spin up the local development environment.
  4. Implement your solution.
  5. Download your fork as a zip file and upload it to the relevant location within Greenhouse.

API

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 by id.
  • POST /reservations - Purchase a spot.
    {
        spotId: int,
        firstName: string (optional),
        lastName: string (optional),
        email: string,
        phone: string
    }
    

Notes

  • Would anything here make sense to unit/integration test?
  • Remember, the devil is in the details :)

fe-code-challenge's People

Contributors

boiarqin avatar reintroducing avatar vinniewrote avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.