> ## Content Index > Fetch the complete content index at: https://reactpractice.dev/llms.txt > Use this file to discover other available public pages before exploring further. # 7 challenges to do before a React interview - URL: https://reactpractice.dev/articles/7-challenges-to-do-before-a-react-interview/ - Published: 2024-11-25T09:35:54.000Z - Updated: 2026-06-01T01:59:12.000Z - Author: Corina Udrescu - Tags: Articles, #corina-2, Interviews, #Import 2026-06-09 12:07 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 NewsBuild 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![](https://reactpractice.dev/favicon.ico)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/06/Pasted-image-20240612080216-1.png)](https://reactpractice.dev/exercise/show-top-10-articles-from-hacker-news/) ### 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 gameBuild 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![](https://reactpractice.dev/favicon.ico)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/04/memory-game-example.png)](https://reactpractice.dev/exercise/build-a-memory-game/) ### 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 stoppedCreate 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![](https://reactpractice.dev/favicon.ico)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/01/timer-exercise.png)](https://reactpractice.dev/exercise/create-a-timer-that-can-be-started-and-stopped/) ### 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 appHere’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![](https://reactpractice.dev/favicon.ico)reactpractice.devCorina Udrescu![](https://static.ghost.org/v4.0.0/images/publication-cover.jpg)](https://reactpractice.dev/exercise/add-persistence-to-local-storage-for-an-existing-app/) ### 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 appCreate 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,![](https://reactpractice.dev/favicon.ico)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2023/01/contact-book.png)](https://reactpractice.dev/exercise/create-a-simple-contact-book-app/) ### 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 componentGiven 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![](https://reactpractice.dev/favicon.ico)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/06/Pasted-image-20240612082440.png)](https://reactpractice.dev/exercise/build-a-typewriter-effect-component/) ### 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 listBuild 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![](https://reactpractice.dev/favicon.ico)reactpractice.devCorina Udrescu![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/06/React-2024-22.jpg)](https://reactpractice.dev/exercise/build-a-drag-and-drop-to-do-list/) --- How did you find the challenges? What exercises did you receive in your React interviews? Share your thoughts in the comments below!