FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

Take At home
React Coding Challenge

blog hero image

Here are the instructions for the React Coding Challenge. Please note that you have 36 hours from the time the email was sent to complete and submit the challenge. Please ensure that you capture a screen recording with audio as you complete the challenge using programs such as Loom or other screen recording software. The recording should be at least the full length of the challenge (1 hour and 15 mins). The recording must be on a streaming site - we cannot download large files. The video must include audio of you explaining what you are doing. We will review the recording to grade the challenge.

Here are the links you will need for the challenge:

React Challenge
Figma Link

(You can use “Open in editor” to see the CSS values)

Instructions:
The current application is displaying a list of nodes. Don’t worry about naming convention here, the names don’t matter. Each node represents a server. Each server implements the same API but returns different data. The important endpoints you will need to know for each server are:

  • /api/v1/status
  • /api/v1/blocks

Each node has many blocks and the blocks for each node are returned from the blocks endpoint.

Currently, the application is getting the status for each node and updating the state. We would like you to retrieve the blocks from the endpoint, place them in the state and render them into a list that matches the design.

Acceptance criteria:

  1. Blocks are displayed when opening up the card
  2. Loading, error, empty states are displayed when appropriate
  3. Tests pass and coverage has been added to cover the changes
  4. Implementation matches the design

Tests are a mandatory part of the challenge!

At the end of the challenge please go through and explain everything you have done and show your UI work. You have 75 minutes to complete the challenge from the time you begin.

Once you have completed the challenge, please email the file/link back.
If you are having difficulties with the challenge, please email mike@fullstacklabs.co for assistance.

Again, please submit the recording within 36 hours of receiving the email with the challenge.