7 challenges to do before a React interview

Most interviews nowadays have some sort of coding challenge - either a live test or a take home assignment. It's common to blow these up if you don't "warm up" before hand.

Here are 7 challenges perfect to prepare for an interview! Set aside about 1h for each (though you'll probably finish them sooner!).

Show top 10 articles from Hacker News

This is great to recap data fetching, error handling and general React concepts. Might seem trivial, but it's actually great to check your abilities to figure out the API docs, to merge data from multiple endpoints and to handle loading states.

Show top 10 articles from Hacker News

Build a React component that shows a list of 10 articles from the Hacker News API. * use the Hacker News “Top Articles” API * * for each article, display its score, title, url and author * do not display the article details until all the data is loaded * you’ll notice I did not

reactpractice.devCorina Udrescu

Build a memory game

This is a rather simple challenge, as it doesn't involve any data fetching or such, but it's great to check the fundamental knowledge of using state, rendering lists and structuring components.

Build a memory game

Build a memory game in React. You start with 6 images that you will display as 12 cards. By default, they are “flipped” - you only get a placeholder instead of the image. As the user clicks a “card”, flip it around, revealing the image. When the user clicks the

reactpractice.devCorina Udrescu

Create a timer that can be started and stopped

This is great to check your knowledge of working with intervals in React. It can be surprisingly tricky and trips up a lot of people.

Create a timer that can be started and stopped

Create a 5 minute countdown timer that can be started and stopped. 1. When the page is first loaded, the counter displays 5 minutes (i.e. 5:00) 2. When the user clicks “Start”, the counter starts counting down. 3. When the user clicks “Stop”, the timer should stop elapsing

reactpractice.devCorina Udrescu

Add persistence to local storage for an existing app

Many times the interview challenge will be about adding a feature to an existing app. This challenge can help you practice that and it's also a good review of using useEffect and , optionally, custom hooks:

Add persistence to local storage for an existing app

Here’s a simple shopping list app - https://codesandbox.io/p/sandbox/shopping-list-local-storage-76f46c. Right now if the user refreshes the page, all the data is lost. Improve the app by saving the data to local storage, so the user doesn’t lose his items. Acceptance criteria: * When the user changes the

reactpractice.devCorina Udrescu

Create a Contact Book app

Another area commonly checked in interviews: working with forms! This challenge is about adding CRUD for a list of persons, and checks your knowledge of forms and editing items in a collection.

Create a simple Contact Book app

Create a simple Contact Book app that allows users to manage a collection of friends’ contact details. For each Person, the user should be able to save the name and city where they live. All contact details should be displayed on one page, as person “cards”. Next to each person,

reactpractice.devCorina Udrescu

Build a Typewriter effect component

This is another challenge that tests your knowledge of working with intervals in React, but since it also has forms and the timer is started on page load, it's actually a bit trickier than the "countdown timer". Give it a shot!

Build a Typewriter effect component

Given a sentence, display it with half a second delay between each character. Start showing nothing and then display characters one by one until the full sentence is displayed. No style is required. To get started, clone the starter repo: https://github.com/reactpractice-dev/typewriter-effect It comes with a TypewriterEffect

reactpractice.devCorina Udrescu

Build a drag and drop to-do list

A spin off of the typical todo list app, this is great to check your knowledge of structuring components, sharing the state and just overall React fundamentals. To keep things simple, the challenge uses a 3rd party library for the actual drag and drop functionality.

Build a drag and drop to-do list

Build a Kanban-style to do list, where you can drag the cards from one column to the other to mark them as “To do”, “In Progress” or “Done”. * app should have three columns: “To do”, “In progress”, “Done” * users can drag and drop cards from one column to the other

reactpractice.devCorina Udrescu

How did you find the challenges?
What exercises did you receive in your React interviews?
Share your thoughts in the comments below!