Introducing React30: Master React.js in 30 Days by building 30 practical projects

Saurabh Mhatre
8 min readNov 27, 2023
Title image

Introduction

Welcome to React30, a journey where we will build 30 React projects in 30 days and learn core React.js fundamentals along the way. This series is designed to cover a wide range of topics, ensuring you master the complete React.js ecosystem and it’s related modules. Each project focuses on specific aspects, including all major React hooks, user authentication in MERN stack, how to build full-stack applications, Instagram Stories UI in web app, handling API calls, creating chart visualizations, media handling and building a developer portfolio.

I have personally tried to include all concepts I have learnt in the past 8 years in this series for learners who are trying to become better in frontend development.

Projects Overview

  1. Student ID Card generator
Project Image

In this project we walk through the process of creating an ID card generator using Vanilla JavaScript. This project serves as a great exercise to refresh and solidify our JavaScript fundamentals before diving into more complex libraries like React.

Article link: Project 1

2. Clicker App:

Project image

In this project we will build a clicker app using React.js. This project will help us understand the basics of JSX rendering and introduce us to the useState hook, an essential feature in React.

Article link: Project 2

3. Digital Clock App:

Project image

In this tutorial, we’ll create a simple digital clock app using React.js. This project will teach us how to utilize setInterval for real-time updates and introduce the useEffect hook to manage side effects in React applications.

Article link: Project 3

4. User Feed App:

Project image

In this tutorial, we’ll create a user feed app using React.js. We’ll make an API request using Axios to fetch user data and display it as a scrollable feed on the page. This project will help us understand how to use the useEffect hook to make API calls in React applications.

Article link: Project 4

5. Image Gallery App:

Project image

In this tutorial, we’ll create an image gallery app using React.js. We’ll make an API request using Axios to fetch a list of images and display them as a scrollable gallery on the page. This project will help us understand how to use the useEffect hook to make API calls in React applications.

Article link: Project 5

6. Quote Generation API

In this tutorial, we’ll create a backend API for generating quotes using Express.js. We’ll start by using local JSON data, and later replace it with data from a MongoDB database.

Article link: Project 6

7. Random Quote Generator with Redux Toolkit

Project image

In this tutorial, we’ll create a random quote generator using React.js, Redux Toolkit, and Redux Thunk. We’ll also learn how to use the useEffect hook to make API calls.

Article link: Project 7

8. Navbar using React Router

Project image

In this tutorial, we’ll create a navbar using React.js and React Router to navigate between different pages.

Article link: Project 8

9. User authentication using Express.js and MongoDB

Project image

In this tutorial, we’ll create a backend APIs for implementing user login/registration process using Express.js and MongoDB. We will learn how session creation works and how to validate user data on backend.

Article link: Project 9

10. User Authentication Forms in Frontend

Project image

In this tutorial, we’ll create login and registration forms using React.js and React Router to handle user authentication in frontend.

Article link: Project 10

11. Cryptocurrency listing app

Project image

In this tutorial, we’ll create a Cryptocurrency listing app using React.js. We’ll learn how to use the render table from JSON array fetched from API call.

Article link: Project 11

12. Instagram Stories feed

Project image

In this tutorial, we’ll create a Instagram Stories Feed using React.js. We’ll learn how to use the render categories grid and show stories with text to users.

Article link: Project 12

13. SpaceX Launch Info app

Project image

In this tutorial, we’ll build a SpaceX latest launch info app using React. The app will fetch data from the SpaceX API and display launch information along with a video player using the react-player npm package.

Article link: Project 13

14. Building charts visualisation

Project image

In this tutorial, we’ll build a React app that fetches India’s GDP data from the World Bank API and visualizes it using bar and area charts. We’ll use the axios library for API requests and the recharts npm package for chart visualization.

Article link: Project 14

15. Building developer portfolio

Project image

In this tutorial, we’ll build an online developer portfolio using React.js. We’ll take the static site resume code from the Start Bootstrap repository and convert the static HTML code to JSX for rendering in React. This will allow us to leverage the benefits of React’s component-based architecture for creating a dynamic and interactive developer portfolio.

Article link: Project 15

16. Implementing Theme Switching

Project image

In this tutorial, we’ll walk through the process of implementing theme switching (Dark theme/Light theme) in a basic web app using React and Bootstrap. We’ll use the useContext hook to manage the theme state, providing a seamless user experience with the ability to switch between different themes.

Article link:- Project 16

17. React Query Implementation

Project image

In this tutorial, we’ll explore how to integrate React Query into a basic web app.

Article link: Project 17

18. Shopping cart app by utilising useReducer hook

Project image

In this tutorial, we’ll create a simple Shopping Cart application demonstrating how useReducer simplifies state updates.

Article link: Project 18

19. Implementing Lazy Loading in React using Suspense API

Project image

In this tutorial, we’ll guide you through building a practical mini project that incorporates lazy loading using React’s Suspense API.
Article link: Project 19

20. Building a Game Release Website with Styled Components

Project image

In this article, we’ll guide you through the process of building a game release website using React and adding style to your components with the powerful Styled Components library.

Article link: Project 20

21. Building a Text-Only Social Media Website with useMemo in React

Project image

In this guide, we’ll explore the process of building a text-only social media website using React. To optimize performance, we’ll leverage the useMemo hook for efficient memoization of data.

Article link: Project 21

22. Building a Job Portal with useCallback in React

Project image

In this article, we’ll explore the process of building a job portal using React and optimizing its performance with the useCallback hook.

Article link: Project 22

23. Setting Up a React Project Using Webpack and Babel

Project image

In this tutorial, we’ll guide you through the process of setting up a React project using Webpack and Babel from scratch.

Article link: Project 23

Part 24:Writing test cases with react-testing-library

Project image

In this tutorial, we will set up and use react testing library for writing test cases in react.

Article link: Part 24

Part 25: Simulating user interactions with react-testing-library

Project image

In this guide, we’ll cover simulating clicks and events, testing input and forms, and navigating and routing.

Article link: Part 25

Part 26: Mocking data in API calls using react-testing-library

Project image

In this guide, we’ll cover how to mock API calls using react testing library.

Article link: Part 26

Project 27:Building a Home Decor Website with Material-UI in React

Project 27

In this article, we’ll explore how to build a home decor website using Material-UI in React.

Article link: Project 27

Project 28: Building a VR Headset Launch Website with Tailwind CSS in React

Project image

In this article, we’ll explore the creation of a VR headset launch website using Tailwind CSS in a React application.

Article link: Project 28

Project 29: Building a Markdown Editor in React

Project image

In this article, we’ll explore the steps to build a Markdown editor website in a React application

Article link: Project 29

Project 30: Building an Image Recognition App using TensorflowJS

Project image

In this article, we’ll explore the process of building an image recognition app in React.

Article link: Project 30

Benefits of React30

- Comprehensive Learning:

Covers the entire spectrum of React.js concepts and tools.
- Practical Application

Apply learned skills in real-world scenarios through diverse projects.
- Hands-On Experience:

Gain hands-on experience with APIs, charts, authentication, and more.
- Portfolio Development:

Complete your journey by building your developer portfolio.
- Problem-Solving Skills:

Tackle challenges and refine your problem-solving abilities.

Conclusion

Embark on the React30 journey to become a proficient React.js developer. Each project is a step toward mastering the React ecosystem. Follow the articles, build the projects, and witness your React skills flourish. Happy coding!

Check out my YouTube channel for more content:

SaurabhNative — YouTube

--

--