React Baseline Frontend Assessment

What You’ll Be Making

Provided in the in this repo is the shell of a very basic Task Tracker application. You’ll notice that the React code is written in Typescript. If you’re not familiar with Typescript, don’t worry, we’ve already provided all the types you’ll need during the assessment so that you can focus on just the React code. The existing components in the assessment shell are there as a guide, but you can do anything you like to make the tests pass as long as you use React functional components and hooks when necessary. We'll be using the Vitest runner to guide the progression through the assessment. There will be ordered comments in the code that will indicate the recommended steps to complete the exercise.

Outcomes

A successful completion of the assessment will demonstrate:

1. A solid baseline proficiency in React
2. Some exposure to working in Test Driven Development

Setup

• Install Node 18+ on your local machine
• Clone this repository
• cd react-frontend-assessment and run npm install
• Use the search feature of VS Code to find all instances of "Step: " to get a list of the steps required to complete the assessment.
• Run npm run test in your terminal from the root of the project directory to get the Vitest runner started

Follow the Steps

• Using your IDE's search feature, locate the test file that has // Step: 1 above it
• Explain to the assessor what you think the test is asking you to do
• Open the file containing the component being rendered for that test, and take a look at the implementation
• If the test is failing, explain to the assessor what you believe you could do in the implmentation to make the test pass
• Proceed to fix the test by implementing the component. The test runner that was started in the Setup steps should still be running in your terminal and watching that file for changes. It will provide feedback about the state of the test automatically every time you make a change.
• Once the test is passing, you can move on to the next step using your IDE's search feature and locating the next number in the // Step: [1-15] comments above the test. Make sure to delete the .skip portion of the it block of the test before attempting to implement the component.
• Rinse and repeat!

What You’ll Need to Succeed

• Communicate often! This is as much about assessing your communication skills as it is about your technical skills.
• Experience with functional components in React.
• Some familiarity with React hooks (useState in particular)
• Knowledge of how to pass props to child components
• Some familiarity with unit testing in React