10 Project Ideas from Beginner to Advanced for Learning React JS
1. Layout to Components
Components are the most fundamental part of a React app. Having a good understanding of how to divide a layout into components is a very important skill to have as a React developer.
What to do?
Re-create this layout (live demo) using React by breaking it down into multiple components. You can get access to the HTML/CSS of the above demo using this link here. Clone the github repo and re-create it using React.
Topics you will learn doing this:-
- Breaking a layout down into components
- Understanding JSX
- Rendering elements to the DOM
Difficulty: Beginner
Time Taken: 2 Hours
2. Button Component
You can make a component more powerful using props. Props are read-only pieces of information that you can pass to a component.
What to do?
For this project, you will need to use props in your components. Using props you can add different properties to the component. Go through this link, read the requirements and complete the project.
Topics you will learn doing this:-
- Making components powerful using props
- Using props
- Conditional rendering
Difficulty: Beginner
Time Taken: 3 Hours
3. User Activity Tracker
This app can help a user to track their daily activities. It works like this:
- You can add a new activity
- Each activity will have 30 days to complete
- Each day represents if the task has been completed or not
- Select the day if you have completed it
- Unselect the day if you haven't
- Supports local storage
What to do?
Creating an activity tracker will help you understand how to use state in React. Take a look at this project (live demo) properly and re-create it using React. Don't forget to add localStorage support.
Topics you will learn doing this:-
- Managing state
- Conditional rendering
- Lifecycle methods
Difficulty: Beginner
Time Taken: 4 Hours
4. TicTacToe Game
If you prefer to learn by doing you can follow this awesome tutorial. Just by following this tutorial you will understand all the basic concepts in React and can create this game.
What to do?
Go through this link, follow the instructions step-by-step and create the game. This tutorial will be a good recap of all React concepts - starting from setup, what is React, components, props, state and lifecycle methods etc. Completing this tutorial will give a huge boost to your confidence when making web apps using React.
Topics you will learn by doing this:-
- State
- Props
- Conditional rendering
- Lifecycle methods
- Lifting state up
Difficulty: Intermediate
Time Taken: 5 Hours
5. Memory Game
Making memory game will help you understand ways of managing compex state in React.
What to do?
Go through this link, play around, understand the game and re-create it. You can use different characters from Font Awesome of any other set of images/icons.
Topics you will learn by doing this:-
- Managing Complex State
- Lifecycle Methods
- Conditional rendering
Difficulty: Intermediate
Time Taken: 7 Hours
6. Shopping Cart
We will be building a basic shopping cart application using React. It will have the following features:
- Add and remove products from the cart
- Sort products by highest to lowest (and lowest to highest) price
- Filter products by available sizes
- Products persist in the cart even after the page reloads (localStorage)
What to do?
Go through this live demo of the application. You can get all the images and data you need to make this application by going through this link.
Topics you will learn doing this:-
- Managing state
- Props
- Handling events
- List and keys
- Conditional rendering
- Lifecycle methods
Difficulty: Intermediate
Time Taken: 6-8 Hours
Once you have completed this project, you can also watch this video link to refactor your code.
7. People of GOT
It's time to fetch data from external sources to make this application. The app that we are going to make is called People of GOT. It will have the following features:
- Displays a list of people
- Displays a list of all the house names
- Clicking on any house name should display the people from that specific house
What to do?
You can take a look at this (live demo) of the application. Fetch data from this url and complete this app.
Topics you will learn doing this:-
- Managing state
- Fetching data
- Displaying List
- Conditional rendering
Difficulty: Intermediate
Time Taken: 4 Hours
8. Todo App
It's time to build the old classic todo app. Making a todo application is really helpful because you can perform CRUD (Create, Read, Update and Delete) operations while making this app. This app will have the following features:
- Users can add a todo
- Users can delete a todo
- Users can edit the added todo by double clicking on the list
- Users can filter todos based on completed or not completed
What to do?
You can take a look at this (live demo) of the application and re-create it.
Topics you will learn doing this:-
- Managing state
- Handling state updation
- Displaying list
- Lifecycle methods
- Conditional rendering
Difficulty: Intermediate
Time Taken: 6-7 Hours
9. Quiz App Using External API
The quiz app will have the following features:
- The quiz app will first display a collection of categories (https://opentdb.com/api_category.php)
- User can select a category from the list
- Once the category is selected display question one after another (https://opentdb.com/api.php?amount=10&category=10&difficulty=medium)
- Show the progress of the quiz like (2/10)
- At the end of 10 questions display the score card
- The score card will contain percentage of right answers.
- It will alco contain all the questions with user selected answer and the right answer
What to do?
You can take a look at this (live demo) of the application. Go through the API documentation and create the quiz app.
Topics you will learn doing this:-
- Managing state
- Fetching data
- Conditional rendering
- Handling multiple routes
Difficulty: Advanced
Time Taken: 8 Hours
10. Medium Clone
Now it's time to use all the concepts that we have learned by making an entire blog app, just like Medium. This app will have all the features of a modern web application. Things like login, signup, adding articles, etc.
This app will contain the following features:
- Users can login and sign-up
- Users can see a list of articles
- Users can filter articles based on tags
- Users can add new articles
- Users can follow other users
- Users can 'like' an article
- Users can change their settings
What to do?
You can go through this live demo and use this backend to create the application. You can also check the API specs here for using the API endpoints.
Topics you will learn doing this:-
- Components and props
- Managing state
- Conditional rendering
- Lifecycle methods
- Routing in react
- Authentication
Difficulty: Advanced
Time Taken: 30 Hours
If you are someone new to all of this, take a look at our course which takes you from absolute beginner to becoming a full-stack developer and getting your first developer job. It includes everything (assignments, video lectures, quizzes, interview questions and job prepration) you will need for your journey of becoming a full-stack developer.