top of page

Junior React Dev Test

Here is a well-structured task for a junior software developer that involves building a simple React application. The task will help them understand the basics of React components, state management, and event handling.

Task: Build a To-Do List Application

Create a simple To-Do List application using React where users can add, delete, and mark tasks as completed.


1. Setup

  • Initialize a new React project using create-react-app.

  • Ensure the project runs locally without any errors.

2. Components

  • Create the following components:

    • App: The main component that holds the state and other components.

    • Header: Displays the title of the application.

    • TodoList: Displays the list of to-dos.

    • TodoItem: Represents a single to-do item.

    • AddTodo: Contains the form to add new to-dos.

3. State Management

  • Use React state to manage the list of to-dos in the App component.

  • Each to-do item should have a unique ID, a description, and a completed status.

4. Functionality

  • Add a new to-do:

    • Implement a form in the AddTodo component that allows the user to input a new to-do item.

    • When the form is submitted, add the new to-do item to the list.

  • Display the to-do list:

    • Display the list of to-dos in the TodoList component.

    • Each to-do item should be displayed using the TodoItem component.

  • Mark a to-do as completed:

    • Add a button or checkbox to each TodoItem that allows the user to mark it as completed.

    • When marked as completed, the to-do item should be visually different (e.g., with a line-through or different color).

  • Delete a to-do:

    • Add a delete button to each TodoItem that allows the user to remove it from the list.

5. Styling

  • Add basic CSS to make the application visually appealing.

  • Ensure that the completed tasks have a distinct style.

6. Bonus (Optional)

  • Implement local storage so that the to-do list persists even after the page is refreshed.

  • Add a filter to show all tasks, only completed tasks, or only pending tasks.


  • Have the developer push their code to a GitHub repository.

  • Ensure the repository has a README file with instructions on how to run the project.

bottom of page