Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

React Marathon: 70 Hands-On React Web Development Projects

Name: React Marathon: 70 Hands-On React Web Development Projects
Rating: 4.0 (70 reviews)

Learn React Programming: Develop Web Applications Using Socket, REST APIs, Firebase, React Hooks, Bootstrap, React.js

Created bySufa Digital | 16,000+ Enrollments Worldwide

Last updated 10/2025

English

What you'll learn

Build web apps that are powerful, fast, user-friendly, and reactive.
Gain deep insights into the inner workings of the React library.
Create a stunning portfolio featuring real-world React projects.
See the step-by-step process of designing and assembling an advanced project
Master the foundational principles of React for efficient web development.
Understand lifecycle methods to control component behavior.
Learn to implement serverless functions in a React application.
Earn a course completion certificate to validate your React expertise.

Course content

72 sections • 769 lectures • 94h 7m total length

Introduction To The Course0:43
Outline of the course0:46

Introduction - React Photo Editor with CSS & React Filters5:44
Introduction1.20:44
CSS Filters2:10
Using CSS Filters7:21
Learn to apply css filters to images in React, using a range input to adjust brightness, contrast, blur, and grayscale and apply the filter via style.
Adding All CSS Filters6:01
Explore how to implement and combine css filters like brightness, contrast, grayscale, saturation, and blur in a React app, using input ranges and styling to create interactive image effects.
Updating Filter style of image2:54
Adding Announcement4:38
Adding onChange event to input3:38
Use the input onChange event to update a state string holding the image link and pass it as the background prop to dynamically change the image.
Adding CSS to navbar8:21
Apply CSS to the glass header to create an interactive navbar, using flex display, justify-content center or space-between, align-items center, color, font-weight, padding, and a border radius.
Adding CSS to image4:30
Learn to style an image with wrappers, flex layouts, a background color, padding, 95% width, object-fit: cover, and a thin 1px white border on the image and filters.
Adding CSS to our Filters3:58
Add CSS styling to filters in a React app by styling filter spans with inline-block display, black background, white text, padding and margins, and make the UI responsive across devices.

Introduction1:29
Introduction Demo4:33
Build a CodePen-style React editor with HTML, CSS, and JavaScript panels and a live output. Use useState to update the output as you type.
Creating a react app2:12
Creating textarea and adding useState hook4:08
Adding useEffect Hook4:11
What is an IFrame1:31
Discover how an iframe loads another HTML page within the document to separate code from output, enabling embedded content in the parent page during web development.
Adding IFrame to show output3:50
Add an iframe to display output while building a header with a logo and input and output sections, configuring class names and layout to render live code results.
Adding CSS to Header4:27
Adding CSS to Header Part 21:38
Adding CSS to textarea and output section11:16
Adding LocalStorage Object10:06
Add a local storage object to persist your input and output across refreshes using a localStorage key; initialize from storage, JSON.stringify, and useEffect to save changes.

Introduction2:38
Build a Game of Thrones app in React with a home, characters list, and character detail pages; learn routing with React Router DOM and consuming APIs for data and dialogues.
Introduction to Game of Thrones App3:48
Header(Home) Page4:39
CSS to Header4:26
Adding Background Image to our Header Page1:57
We add a background image to the header and animate it to preview the header design. Then we apply the image to the index page to see the result.
Adding Navbar to our App6:34
Making Api request using fetch method7:00
Using Map function to render our Api data list3:55
Giving proper layout to map items3:45
Adding styles to our map items6:21
Adding bootstrap row6:35
React-Router Dom Part-14:00
learn to use React Router Dom to enable routing in your app by installing react-router-dom, setting up browser router, wrapping your components, and defining routes for home and characters pages.
React-Router Dom Part-27:15
useParams Hook2:51
Displaying the data of searched characters2:09
Quotes Api3:58
Using Map function to display the Quotes1:22
Adding Layout _ CSS in a Search File6:39
Adding material-icons in our code3:02
Install the material UI icons package and import the icons into your code. Then display house icons beside character names to complete the Game of Thrones app.

Introduction - Birthday Reminder App Using React Js4:15
Build a React birthday reminder app, created with Create React App, that shows today's birthdays and upcoming ones this month using a contacts array and the date object.
Introduction to our Birthday Reminder App1:16
Build a responsive birthday reminder app using React and CSS only, displaying today's birthday and age, as well as upcoming birthdays this month, with interactive state changes powered by useState.
Creating React Birthday Reminder App1:05
Adding data array and additional file to our app3:00
Code to display the today_s birthday5:21
Code to display the upcoming birthday of a person1:57
Adding a Layout to our Card4:54
Adding Styles to our Card7:36
Adding Styles to our Image7:52
Adding Styles to click div and making our app responsive2:42
Adding layout to upcoming birthday file2:13
Adding styles to upcoming birthday file4:22
Download the project files0:01

Introduction - Search Book (Multipage Library app to search any book )3:18
Introduction to bookstore3:13
Creating our react app2:05
Create a React app with the template, prune unused files, configure app.js and index.js, run the development server on localhost 3000, and plan to integrate Google API and bootstrap.
Navbar2:51
Adding CSS to our Navbar4:25
Hero Section3:33
Adding CSS to our Hero section9:56
Learn to style the hero section with css on the home file, adding a gradient background, background image, and centered flex layout for text, inputs, and button.
React-Router-Dom Part 15:53
React-Router-Dom Part 24:21
How to get your Google API Key1:16
Google Books API1:40
How to use Google Books API in our app8:08
Fetch books from the Google Books API using axios, handle errors with catch, and store results in state to map thumbnails, titles, and authors for display.
What is useNavigate Hook1:24
Adding useNavigate Hook to our project3:23
useParams Hook2:26
Adding useParams Hook to our main file5:53
Adding styles to our main file7:00
Genre Page13:43
What is our Search Page2:25
Displaying different genres2:29
Reuse the same code for the main and search pages, using a subject in the get url to search genres via the google books api and apply css styling.
CSS to genre page9:21
Apply css techniques to style a genre page by configuring body background, positioning, image fitting, and hover animations for book cards, with responsive media queries and an interactive search input.

Introduction3:28
Introduction to our Travel_ Tour App2:54
Creating Our React App2:58
Creating Navbar for our App1:51
Create and style a navbar for our app by writing the component code, wiring a logo, and populating a two-item menu with driver and building links in React.
Creating Hero section for our App4:17
Create and style the app's hero section on the homepage by wiring hero, footer, video, and pricing components, and apply CSS to the hero area for a polished layout.
Adding CSS to our Hero section8:02
Learn to style the hero section with css, centering the heading and paragraph, applying a cover background, uppercase text, responsive typography, and interactive hover effects.
Adding Main section to our App6:22
Adding CSS to Main section8:09
Style the map page by targeting the section’s h4 with uppercase text, white color, 30px font, and 0.4 letter spacing, then adjust image and price button positioning with hover effects.
Making our Main section responsive1:55
Adding video in our Video section5:32
Adding CSS to Video section6:06
Adding Footer3:55
Code for our Travel Page3:13
React-Router-Dom13:00
Learn to install and integrate React Router DOM, wrap the app in BrowserRouter, define routes for home, travel, and price pages, and implement NavLink-based navigation.
Pricing Section in our app1:44
Code for our Pricing Section12:17
CSS to our Pricing Section7:46

Introduction2:40
Introduction to Admin Dashboard1:18
Creating a react App4:46
Theme5:33
Navbar13:29
Build a responsive navbar for a React app using app bar, toolbar, and input base, with a logo, dashboard title, a search input, and background color handling.
Adding style to navbar3:09
Stack3:58
FlexBox2:42
Rightbar6:52
Build the right bar with paper components and material design elevation to display the admin name and avatar, arranging text and image in a row stack with absolute positioning.
Sidebar7:03
Nightmode3:14
Add a dark mode toggle in the sidebar to switch between light and dark themes using mode and setMode, with a switch button changing the UI.
ProfileCard17:34
Build a material profile card in React by declaring a material card, setting width 310 and height 150, and composing icon, text, and image in stacked layouts with paper elevation.
ProfileCard27:25
ProfileCard34:36
Card15:13
rc-progress10:04
Chartjs12:48
Adding Charts in our app6:50
Circular Progress4:00
Adding more style to our App5:53

Requirements

Basic knowledge of React

Description

Step into the future of web development by mastering React, the JavaScript library that has revolutionized how we think about building web applications . React's component-based architecture simplifies UI development, making it easier to manage states and build dynamic, interactive user interfaces . Its virtual DOM ensures optimal rendering performance, making your applications not just functional but incredibly fast .

But that's not all—React's robust ecosystem, featuring tools like Redux for state management and React Router for navigation, offers a comprehensive suite of technologies that work seamlessly together . This makes it a one-stop-shop for all your front-end development needs .

Learning React also puts you in high demand in the job market . With companies like Facebook, Airbnb, and Netflix utilizing React, the library has proven its worth in solving real-world challenges in web development . Whether you're a complete beginner aiming to land your first tech job, or an experienced developer looking to stay ahead of the curve, mastering React is a surefire way to elevate your coding skills and career prospects .

Moreover, React's strong community support means you'll never be coding alone . From extensive documentation to a plethora of tutorials and third-party libraries, you'll have all the resources you need to tackle any project—big or small .

Don't miss out on the opportunity to become proficient in one of the most popular and versatile JavaScript libraries out there . Learn React and open doors to exciting projects, career growth, and a world of possibilities in web development .

In This Course, We Are Going To Work On 70 Real World React Development Projects Listed Below, Develop Real World Web Applications Using Socket, REST APIs, Firebase, React Hooks, Bootstrap, React . js, Webpack , HTML5 , CSS3 , React- Router .

Project-1: React Photo Editor with CSS & React Filters

Project-2: CodePen Code Editor Clone Using React . js

Project-3: Game Of Thrones App using React . js

Project-4: React Birthday Reminder App Using React Js

Project-5: Search Book (Multipage Library app to search any book ) using react . js, React-Router-Dom, Bootstrap, CSS, Google Books API

Project-6: Tours & Travel Multi Page Website using react . js, CSS, react-router-dom, React Hook

Project-7: React Admin Dashboard Using React . js, Material-Ui, react hooks, React Charts, rc progress

Project-8: Google Map Travel Advisor app using React . js, Geolocation, Google Maps API & Google Places API

Project-9: Interactive Timeline using React, React Hooks, CSS

Project-10: Using Charts in react and creating Different Clickable Links on Charts in React, using React, CSS, Chartjs, Bootstrap

Project-11: Meal Planner App using Spooncular API, React Hooks, CSS, Bootstrap

Project-12: Radio Player App in React using Radio-Browser API CSS, React Hooks

Project-13: Drum Kit using React, React Hooks, CSS, JavaScript, Material-UI

Project-14: Build Dice Game using React, React Hooks, CSS, Javascript

Project-15: Pokemon App using React, React Hooks, CSS, Api, Bootstrap

Project-16: Slot Matching Game using React, React Hooks, CSS, Javascript, Material UI

Project-17: Marvel Charcter App using React, React Hooks, Marvel Api, CSS, Bootstrap

Project-18: Meme Generator App using React, React Hooks, CSS, Bootstrap

Project-19: Photo Collage Maker using React, React Hooks, Bootstrap, CSS, Material-Ui

Project-20: News App using React, React Hooks, CSS, Bootstrap, Api

Project-21: E-Commerce Platform (Amazon Clone) with React & Firebase

Project-22: Real-time Chat Application with React ChatEngine & Socket

Project-23: Movies Streaming App (OTT) with React, Omdb API, and Bootstrap

Project-24: Video Sharing Website with React, YouTube API, and Material-UI

Project-25: To-Do List Web App with React, Material-UI, and State Management

Project-26: Blogging Platform with React, Material-UI, and GNews API

Project-27: Social Networking Site with Material-UI, React Hooks, and Google OAuth

Project-28: Portfolio Resume Website with React, Material-UI, and State Management

Project-29: Emoji Search App with React, React DOM, HTML5, and CSS3

Project-30: Breaking Bad Character Finder with React, React DOM, and React Context

Project-31: Random Quote Generator with React and Heroku Deployment

Project-32: Password Generator App with React, React DOM, HTML5, and CSS

Project-33: Quiz App with React, React DOM, HTML5, and SCSS

Project-34: UnSplash Image Gallery with React and ReactDOM

Project-35: React Router Demo Application with ReactJs, React Router Dom, and Context

Project-36: Book Shelf App with ReactJs, NPM, CSS, and State Management

Project-37: Note Taking App with React and Redux for State Management

Project-38: Contact Register App with React, NPM, and React Context

Project-39: Expense Tracking App with React and State Management

Project-40: Money Management App with React, NPM, and React Context

Project-41: Resort Booking App with React, NPM, and Hooks

Project-42: BMI Calculator with React, NPM, and React Context

Project-43: Furniture Store with React and Redux for State Management

Project-44: Scoreboard App with ReactJs, NPM, and React Context

Project-45: Food Ordering Web App with React, Material-UI, and React Router

Project-46: Weather Web App with React, Open Weather API, and CSS

Project-47: Food Recipe App with React, Edamam API, and Firebase Hosting

Project-48: Shopping Cart App with React, React Hooks, and External API

Project-49: Cafe Menu App with React, React Hooks, and Firebase

Project-50: Cocktail Hub Web App with React, React Hooks, and Context API

Project-51: Review Posting App with React, Material-UI, and CSS

Project-52: Pomodoro Timer App with React, Countdown Timer, and CSS

Project-53: Google Search App with React, Tailwind CSS, Google Search API

Project-54: Tic-Tac-Toe Game with React

Project-55: Word and Letter Counter with React, useState, and JavaScript

Project-56: Currency Converter with React

Project-57: Speech Recognition and Voice Assistant App with React

Project-58: Calculator App with React and Hooks

Project-59: Budget Tracking App with React, Custom Hooks, and Context

Project-60: Music Player (Spotify Clone) with React and Spotify API

Project-61: Calendar App with Scheduling Functionality

Project-62: Dictionary App with React

Project-63: YouTube Clone with React

Project-64: Candy Crush Game with React

Project-65: Astronomy Insights with React, CSS, and NASA APOD API

Project-66: Rock, Paper, Scissors Game with React, CSS, and Hooks

Project-67: Real-time Notification App with React, CSS, Hooks, and Socket

Project-68: COVID-19 Tracker App with React, CSS, and Hooks

Project-69: Random GIF Generator App with React, Hooks, CSS, API

Project-70: Wildfire Tracker App with React, CSS, Asynchronous JS, NASA Open API

Note (Read This): This Course Is Worth Of Your Time And Money, Enroll Now

Who this course is for:

Beginners in React

React Marathon: 70 Hands-On React Web Development Projects

What you'll learn

Explore related topics

Course content

Introduction to the course2 lectures • 1min

Download all 70 project code files.2 lectures • 1min

Project-1: React Photo Editor with CSS & React Filters11 lectures • 50min

Project-2: CodePen Code Editor Clone Using React.js11 lectures • 49min

Project-3: Game Of Thrones App using React.js19 lectures • 1hr 23min

Project-4: React Birthday Reminder App Using React Js13 lectures • 47min

Project-5: Search Book (Multipage Library app to search any book ) using react21 lectures • 1hr 39min

Project-6: Tours & Travel Multi Page Website using react.js,CSS,react-router-dom17 lectures • 1hr 33min

Project-7:React Admin Dashboard Using React.js Material-Ui, ReactHooks, React...20 lectures • 1hr 59min

Project-8: Google Map Travel Advisor app using React.js, Geolocation, Google Map13 lectures • 1hr 33min

Requirements

Description

Who this course is for: