1. Hello World App
Difficulty: Easy (1/10)
Resume Value: 1/10
It is a very basic starter project and hardly adds any value to a resume.
Summary:
You will install Node on your computer and learn how to initialize a new React App using the “Create React App” command-line interface. Once the new app is created we make minor modifications to display “Hello world” text on the page.
Topics covered:
React setup, modifying app.js file
2. Simple Counter
Difficulty: Easy (2/10)
Resume Value: 1/10
Summary:
You will build a simple React App which increment/decrements count on-screen when buttons are clicked using React State.
Topics covered:
React class-based components, props, state.
3. Temperature Control App
Difficulty: Easy (3/10)
Resume Value: 2/10
Summary:
You will build a temperature control app where users can increment/decrement temperature and the background color changes based on temperature.
Topics covered:
React basics like Hooks, components, useState().
4. Search Filter
Difficulty: Easy (3/10)
Resume Value: 2/10
Summary:
You will build an app that allows users to enter search keys and it filters the user list from the hardcode list based on the entered key.
Topics covered:
React components, useState(), using controlled HTML input field in React.
5. Basic Registration Form
Difficulty: Easy (3/10)
Resume Value: 3/10
Summary:
You will build a basic registration form in React where users can enter first name, last name, and email. Post-registration, an error message is displayed for each field if validation fails else a success message is shown.
Topics covered:
React Hooks, components, useState(), using controlled HTML form in React.
6. React Quiz App
Difficulty: Easy (3/10)
Resume Value: 3/10
Summary:
You will build a simple React quiz app where users can click on option buttons to answer questions, next question rendered each time option is selected and at the end, the final score is displayed.
Topics covered:
React Hooks, components, props, useState().
7. React Navbar
Difficulty: Easy (3/10)
Resume Value: 3/10
Summary:
You will create a fully responsive navbar on React using CSS grid and flexbox. Additionally, display breadcrumbs with the menu dropdown on mobile screen size.
Topics covered:
CSS styling along with flex and grid. React basics like components, state, etc.
8. User Login app using Auth0
Difficulty: Easy (4/10)
Resume Value: 4/10
Summary:
You will simple authentication app where users can log in using Auth0 and view the user data with an option to log out.
Topics covered:
React basics like Hooks, components, props, useState().
9. Todo List
Difficulty: Easy (4/10)
Resume Value: 3/10
It is a very common app which most React developers can build, demonstrates basic knowledge of React.
Summary:
You will build a simple to-do app where users can add different types of notes. In addition, users can approve or delete notes from the list.
Topics Covered:
React basics such as components, state, props. React Hooks lifecycle ie useEffect() and using controlled HTML form in React.
10. React Shopping Cart with Deployment
Difficulty: Easy (4/10)
Resume Value: 6/10
Summary:
You will build an e-commerce website where users can view products for sale and add them to their cart. Unlike other projects where your code only stays in your local computer, here you also deploy the result on the hosting platform.
Topics covered:
React state, useContext() api, React forms, react-router-dom and basic CSS styles
11. Calculator with React and Flexbox
Difficulty: Easy (4/10)
Resume Value: 4/10
Summary:
You will build a calculating app that allows the number to be entered by a click of buttons and perform operations like addition, subtraction, multiplication, etc to produce results.
Topics covered:
React class-based components, state. CSS styles with grid and flexbox
12. Simple Contact List
Difficulty: Easy (4/10)
Resume Value: 4/10
Summary:
You will build a contact list app that fetches the list of all users from API and renders each user’s details on a component with “show age” button which displays the age on click.
Topics covered:
React Hooks, components, props, useState(), useEffect(). Fetch API, JS Promises, and callback.
13. Recipe App With React
Difficulty: Easy (4/10)
Resume Value: 4/10
Summary:
You will build a simple recipe app that fetches a list of all recipes from external API and provide dynamic search functionality.
Topics covered:
React Hooks, components, props, useState(), useEffect() with managing dependencies, handling HTML input in React. Fetch API, JS Promises, and callback. CSS styling with flexbox and grid.
14. Shopping list app
Difficulty: Easy (4/10)
Resume Value: 4/10
Summary:
You will build a shopping list app where users can add new items to the list, increment/decrement each item and the change will reflect in the total
Topics covered:
React Hooks, components, props, useState(), handling HTML input in React.
15. Weather App in React JS
Difficulty: Easy (4/10)
Resume Value: 5/10
Summary:
You will build a Weather app user can enter a city name and then it displays the data related to the Weather of the city through an external API.
Topics covered:
React Hooks, components, props, useState(), Fetch API, handling HTML input in React. Basic CSS styles like margin, border, padding, etc.
16. React Fully Responsive website
Difficulty: Intermediate (5/10)
Resume Value: 5/10
Summary:
You will build a fully responsive website using react with multiple pages. The website will have various animations and support mobile, desktop, and tablet screen sizes.
Topics covered:
React Hooks, components, props, useState(), react-router. CSS styles with Grid and flexbox.
17. Random Quote Generator
Difficulty: Advanced (5/10)
Resume Value: 5/10
Summary:
You will build a random quote generator app in React where the user can see randomly generated quotes through external API and generates a new quote the button is clicked.
Topics covered:
React Hooks, components, props, useState(). Javascript Promises and callback.
18. React notes App
Difficulty: Intermediate (5/10)
Resume Value: 6/10
Summary:
You will build a notes app where users can enter text to each note and save it in local storage, delete an existing note, dynamically search among the notes and add character limit.
Topics covered:
React Hooks, components, props, useState(), useffect(), handling HTML input in React. CSS styles with Grid and flexbox. Local storage API.
19. Hangman Game in React
Difficulty: Intermediate (6/10)
Resume Value: 6/10
Summary:
You will implement a hangman game in React where users will guess a hidden word within a set of attempts. The user is shown a “You won” or “Game Over” message based on whether the word is guessed within the given number of attempts.
Topics covered:
React Hooks, components, props, useState(), useffect(). JS events, HTML 2D canvas.
20. Instagram Clone
Difficulty: Intermediate (6/10)
Resume Value: 7/10
Summary:
You will build an Instagram clone which displays stories, suggested profile, card images with comments. The page will be fully responsive supporting all device screen sizes.
Topics covered:
React Hooks, components, props, useState(). CSS styles with Grid and flexbox.
21. Chat App in React & Firebase
Difficulty: Advanced (7/10)
Resume Value: 7/10
Summary:
You will build a chat app where users have to log in through Google through Firebase Auth and access the chat application where they can see existing chats and type new messages which will be stored in Firebase’s real-time database.
Topics covered:
React Hooks, components, props, useState(), useRef(), handling HTML input in React. FIrebase basics like setting up, auth, write, rules, filter, etc. JavaScript async wait, API.
22. COVID-19 Tracker
Difficulty: Advanced (7/10)
Resume Value: 8/10
Summary:
You will build the Covid-19 tracker app which displays graphs for infected, recover cases, and deaths of a country from external API. The country can be changed by selecting another option from the dropdown.
Topics covered:
React class-based components, props, state, lifecycle methods handling HTML input in React. JavaScript async/await, promises. CSS styles combined with Material UI.
23. Slack Clone
Difficulty: Advanced (7/10)
Resume Value: 7/10
Summary:
You will build a Slack clone where users can enter the existing usernames or add usernames to access the chat page where a list of users with status (online/offline) is displayed with chat room messages. Further, you can add new messages to the chat room.
Topics covered:
React Hooks, components, props, useState(), handling HTML input in React.
Code GitHub repo: github.com/pusher/build-a-slack-clone-with-react-and-pusher-chatkit
24. Photo Gallery App
Difficulty: Advanced (7/10)
Resume Value: 7/10
Summary:
You will build a photo gallery app where users can upload a new file that is stored in the Firebase Realtime database and view a list of uploaded files in a grid format. Users can click on any image to view it as a popup along with animations added to all the transitions.
Topics covered:
React Hooks, components, props, useState(), handling form File input in React. FIrebase basics like setting up, storage hook, snapshot, etc. JavaScript async wait, API. CSS styles with grid and flexbox.
25. Lyric Search App
Difficulty: Advanced (7/10)
Resume Value: 7/10
Summary:
You will build a Lyric Search app that allows users to type lyrics and search for music based on it using an external API.
Topics covered:
React class-based components, props, state, life cycle methods, context, React-router, handling HTML input in React. JavaScript promises and callback.
26. Budget Management App
Difficulty: Advanced (8/10)
Resume Value: 8/10
Summary:
You will build a budget Management app that shows the total budget, remaining and sent so far along with the list of expenses. It also has the functionality to add new expenses and delete the existing expense.
Topics covered:
React Hooks, components, props, useState(), useffect(), useContext(), createContext() handling HTML input in React. Redux useReducer(), action, dispatch. CSS styles with Grid and flexbox.
27. Build an Expense Tracker
Difficulty: Advanced (8/10)
Resume Value: 8/10
Summary:
You will build an expense Tracer app that shows the net balance, income, expense, and list of all transactions so far. It also has the functionality to add new transactions and delete the existing transaction along with reflecting the new changes. Additionally, the hangman figure is shown using HTML canvas based on the progress of the user.
Topics covered:
React Hooks, components, props, useState(), useffect(), useContext(), createContext() handling HTML input in React. Redux useReducer(), action, dispatch. CSS styles with Grid and flexbox.
28. Responsive Flight Booking Website
Difficulty: Advanced (8/10)
Resume Value: 9/10
Summary:
You will build a Flight booking app using React along with CSS animation. The pages are responsive and support mobile and tablet screens. This project suits you the most If you want to practise building professional looking websites in React JS.
Topics covered:
React Hooks, components, props, useState(), CSS animations,SCSS, CSS styles with Grid and flexbox.
29. Responsive Portfolio Website with Animations
Difficulty: Advanced (8/10)
Resume Value: 10/10
Summary:
You will build a professional-looking portfolio website with all fancy CSS animation. In addition, the website scales to mobile and tablet screens through CSS grids. Further, the website form is integrated with a real Mailchimp server which collects user form inputs.
Unlike previous projects, you can use this project as your portfolio site for job applications and resumes.
Topics covered:
React Hooks, components, props, useState(), useEffect(), react-bootstrap, CSS animations, Mailchimp, CSS styles with Grid and flexbox.
30. Building Tetris in React
Difficulty: Advanced (8/10)
Resume Value: 8/10
Summary:
You will build a Tetris game using React where you can start the game, rearrange incoming blocks using the keyboard inputs and display “Game over” if the block collides with the top. Additionally functionality to clear blocks if 2 same colors of blocks are aligned correctly.
Topics covered:
React Hooks, components, props, useState(), useffect(), useCallback(), useMemo(). JavaScript events, CSS styles with Grid and flexbox.
31. GitHub Jobs React App
Difficulty: Advanced (8/10)
Resume Value: 8/10
Summary:
You will build a Github Jobs App where users can view the list of all jobs sent from Github Jobs API and expand each selected job. In addition, they can search for jobs by description and location.
Topics covered:
React Hooks, components, props, useState(), useffect(), handling HTML input in React. JavaScript promises and callback. Redux useReducer(), action, dispatch. React-bootstrap to style components.
32. YouTube Clone
Difficulty: Advanced (9/10)
Resume Value: 9/10
Summary:
You will build a YouTube clone on React with a YouTube homepage, trending tabs, video watch page with comments. All the information for the project is real data sent from YouTube Data API V3.
1st article of 45 articles on building YouTube Clone productioncoder.com/build-youtube-in-react-part-1/
Code GitHub repo: github.com/productioncoder/youtube-react
33. Voice Assistant App
Difficulty: Advance (9/10)
Resume Value: 10/10
Summary:
You will build a Voice Assistant App using React with Alan AI which allows users to search for the latest news, news by terms, categories, and source by voice control. Additionally, the AI in the app will read each news, scroll by itself, and allow you to open news article links by voice control. The page will be fully responsive to support desktop, tablet, and mobile screen sizes.
Topics covered:
React Hooks, components, props, useState(), useffect(), React form. JavaScript promises and callback. CSS styles combined with Material UI. Alan AI documentation.
Github links: github.com/adrianhajdin/project_news_alan_ai,
gist.github.com/adrianhajdin/bab49eac7dcf9c095fce37ae1167dd87
Live Site: voice.alan.app/JSMasteryNewsApp
Bonus: 15 React Projects
Practice more React beginner projects from Code 15 React Projects – Complete Course.
