- Build a small React application. This is your chance to show us the kind of code you'd write on the job. Please balance execution speed and code quality.
- We will evaluate your submission based on correctness, completeness, readability, and performance.
- Fork this repository into a private repository. We do not want your answers to be publicly available.
- When you are complete, notify your point of contact at Forage. The point of contact will share with you the interviewer's github handle. Please share access to your private repo.
- We will immediately schedule a live code review.
Build a wallet and allow a user to add their cards to that wallet. The wire frames below explain the flow and components we'd like to see in your application. Feel free to get creative and modify the interactions. Also, feel free to implement whatever styling you like.
Extra credit: add your component library to a locally run Storybook.
Hook up your "add a card" component to the server contained in this repository. (See instructions in a section below on how to run the server on your local machine). Save the card(s) to local state. Do not assume the server will store the cards the user adds to their wallet. Moreover, ensure your application can handle errors returned by the server. Invalid parameters in the HTTP request will yield an error response. For example, a card number that is less than 16 characters will produce an error. Make sure to display errors to the user.
Method: POST
Endpoint: /api/payment_methods
URL: http://localhost:8080
Request body (content/json): { "type": enum[ "ebt", "credit", "debit"], "number": string }. Example: { "type": "ebt", "number": "1234567890123456" }
Tests are required for this coding challenge.
We have included a server in the folder /server. It contains only one endpoint: to save a payment method (card). We have included this reference video where Victor runs through the setup commands below. Video: how to run the server & access API documentation
- Download docker. Move onto the next step after docker is available to your command line.
- Open up your terminal.
- Change your current directory to
/server:cd <path to>/server - Run the command:
docker pull stoplight/prismto download the application Prism. It will run the mock server on your local computer. - Run the command:
docker run -v $PWD/oas.yml:/app/oas.yml -p 8080:8080 stoplight/prism mock -h 0.0.0.0 -p 8080 -d /app/oas.ymlto run the server. The server is available to your react app athttp://localhost:8080/.
- Move onto the next step after docker is available to your command line.
- Open up your terminal.
- Change your current directory to
/server:cd <path to>/server - Run the command:
docker pull swaggerapi/swagger-editorto download the application Swagger-Editor. It will run the API documentation. - Run the command:
docker run -p 8000:8080 -v $(pwd):/tmp -e SWAGGER_FILE=/tmp/oas.yml swaggerapi/swagger-editorto run the API documentation server. You can access the documentation athttp://localhost:8000/