Fitshipper Front End Hiring Challenge

NOTE: YOU CANNOT MODIFY (EDIT, DELETE) THE SEED DATA BY ID. YOU CAN READ, UPDATE, AND DELETE RECORDS YOU CREATE.

Instructions:

You will be building a UI to CREATE, READ, UPDATE, and DELETE US based addresses.

There is an Addresses API available at https://fsl-candidate-api-vvfym.ondigitalocean.app.

You can view the API docs here.

You should use modern React (hooks, not Classes) and Tailwind CSS to style the application.

We ask that you spend no more than 2 hours on the challenge. It is not expected you will finish the entire challenge, but we'd like to see how far you can get in the allotted time.

Your work should be in a Github repo. When you are done, email the link with the repo to: candidates@fitshipper.com

Task 1

Retrieve all addresses and display them in a table. The addresses table should be filterable and sortable by the Address 1, City, and State fields.

The table with addresses should be paginated. Every page should display 5 records from the API.

• (Bonus:) Change the number of records displayed to 5, 10 and 25 records per page.

We recommend you use react-table.

Task 2

Clicking on an address should bring you to a form which allows you to UPDATE the address. The form will have 2 views, a Fields view and a Freeform view. You should be able to toggle between the 2 views, and the same data should be available in both views even without saving.

Clicking the Save Address Button will UPDATE the address.

The textbox format will always be as follows:

name
address1 address2
city, state zip

Task 3

Reusing as much of the component/code as possible from the previous task (Updating an address), create a form for a user to CREATE a new address.

Task 4

From the table view, you should be able to DELETE an address.

License

Copyright © Fitshipper