React Marathon: 70 Hands-On React Web Development Projects

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

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.

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 FiltersProject-2: CodePen Code Editor Clone Using React . jsProject-3: Game Of Thrones App using React . jsProject-4: React Birthday Reminder App Using React JsProject-5: Search Book (Multipage Library app to search any book ) using react . js, React-Router-Dom, Bootstrap, CSS, Google Books APIProject-6: Tours & Travel Multi Page Website using react . js, CSS, react-router-dom, React HookProject-7: React Admin Dashboard Using React . js, Material-Ui, react hooks, React Charts, rc progressProject-8: Google Map Travel Advisor app using React . js, Geolocation, Google Maps API & Google Places APIProject-9: Interactive Timeline using React, React Hooks, CSSProject-10: Using Charts in react and creating Different Clickable Links on Charts in React, using React, CSS, Chartjs, BootstrapProject-11: Meal Planner App using Spooncular API, React Hooks, CSS, BootstrapProject-12: Radio Player App in React using Radio-Browser API CSS, React HooksProject-13: Drum Kit using React, React Hooks, CSS, JavaScript, Material-UIProject-14: Build Dice Game using React, React Hooks, CSS, JavascriptProject-15: Pokemon App using React, React Hooks, CSS, Api, BootstrapProject-16: Slot Matching Game using React, React Hooks, CSS, Javascript, Material UIProject-17: Marvel Charcter App using React, React Hooks, Marvel Api, CSS, BootstrapProject-18: Meme Generator App using React, React Hooks, CSS, BootstrapProject-19: Photo Collage Maker using React, React Hooks, Bootstrap, CSS, Material-UiProject-20: News App using React, React Hooks, CSS, Bootstrap, ApiProject-21: E-Commerce Platform (Amazon Clone) with React & FirebaseProject-22: Real-time Chat Application with React ChatEngine & SocketProject-23: Movies Streaming App (OTT) with React, Omdb API, and BootstrapProject-24: Video Sharing Website with React, YouTube API, and Material-UIProject-25: To-Do List Web App with React, Material-UI, and State ManagementProject-26: Blogging Platform with React, Material-UI, and GNews APIProject-27: Social Networking Site with Material-UI, React Hooks, and Google OAuthProject-28: Portfolio Resume Website with React, Material-UI, and State ManagementProject-29: Emoji Search App with React, React DOM, HTML5, and CSS3Project-30: Breaking Bad Character Finder with React, React DOM, and React ContextProject-31: Random Quote Generator with React and Heroku DeploymentProject-32: Password Generator App with React, React DOM, HTML5, and CSSProject-33: Quiz App with React, React DOM, HTML5, and SCSSProject-34: UnSplash Image Gallery with React and ReactDOMProject-35: React Router Demo Application with ReactJs, React Router Dom, and ContextProject-36: Book Shelf App with ReactJs, NPM, CSS, and State ManagementProject-37: Note Taking App with React and Redux for State ManagementProject-38: Contact Register App with React, NPM, and React ContextProject-39: Expense Tracking App with React and State ManagementProject-40: Money Management App with React, NPM, and React ContextProject-41: Resort Booking App with React, NPM, and HooksProject-42: BMI Calculator with React, NPM, and React ContextProject-43: Furniture Store with React and Redux for State ManagementProject-44: Scoreboard App with ReactJs, NPM, and React ContextProject-45: Food Ordering Web App with React, Material-UI, and React RouterProject-46: Weather Web App with React, Open Weather API, and CSSProject-47: Food Recipe App with React, Edamam API, and Firebase HostingProject-48: Shopping Cart App with React, React Hooks, and External APIProject-49: Cafe Menu App with React, React Hooks, and FirebaseProject-50: Cocktail Hub Web App with React, React Hooks, and Context APIProject-51: Review Posting App with React, Material-UI, and CSSProject-52: Pomodoro Timer App with React, Countdown Timer, and CSSProject-53: Google Search App with React, Tailwind CSS, Google Search APIProject-54: Tic-Tac-Toe Game with ReactProject-55: Word and Letter Counter with React, useState, and JavaScriptProject-56: Currency Converter with ReactProject-57: Speech Recognition and Voice Assistant App with ReactProject-58: Calculator App with React and HooksProject-59: Budget Tracking App with React, Custom Hooks, and ContextProject-60: Music Player (Spotify Clone) with React and Spotify APIProject-61: Calendar App with Scheduling FunctionalityProject-62: Dictionary App with ReactProject-63: YouTube Clone with ReactProject-64: Candy Crush Game with ReactProject-65: Astronomy Insights with React, CSS, and NASA APOD APIProject-66: Rock, Paper, Scissors Game with React, CSS, and HooksProject-67: Real-time Notification App with React, CSS, Hooks, and SocketProject-68: COVID-19 Tracker App with React, CSS, and HooksProject-69: Random GIF Generator App with React, Hooks, CSS, APIProject-70: Wildfire Tracker App with React, CSS, Asynchronous JS, NASA Open APINote (Read This): This Course Is Worth Of Your Time And Money, Enroll Now

Overview

Section 1: Introduction to the course

Lecture 1 Introduction to the course

Lecture 2 Outline of the course

Section 2: All First 35 Project Code Files

Lecture 3 All 70 Project Code FIles - Part-1

Lecture 4 All 70 Project Code FIles - Part-2

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

Lecture 5 Introduction

Lecture 6 Introduction1.2

Lecture 7 CSS Filters

Lecture 8 Using CSS Filters

Lecture 9 Adding All CSS Filters

Lecture 10 Updating Filter style of image

Lecture 11 Adding Announcement

Lecture 12 Adding onChange event to input

Lecture 13 Adding CSS to navbar

Lecture 14 Adding CSS to image

Lecture 15 Adding CSS to our Filters

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

Lecture 16 Introduction

Lecture 17 Introduction1.2

Lecture 18 Creating a react app

Lecture 19 Creating textarea and adding useState hook

Lecture 20 Adding useEffect Hook

Lecture 21 What is an IFrame

Lecture 22 Adding IFrame to show output

Lecture 23 Adding CSS to Header

Lecture 24 Adding CSS to Header Part 2

Lecture 25 Adding CSS to textarea and output section

Lecture 26 Adding LocalStorage Object

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

Lecture 27 Introduction

Lecture 28 Introduction to Game of Thrones App

Lecture 29 Header(Home) Page

Lecture 30 CSS to Header

Lecture 31 Adding Background Image to our Header Page

Lecture 32 Adding Navbar to our App

Lecture 33 Making Api request using fetch method

Lecture 34 Using Map function to render our Api data list

Lecture 35 Giving proper layout to map items

Lecture 36 Adding styles to our map items

Lecture 37 Adding bootstrap row

Lecture 38 React-Router Dom Part-1

Lecture 39 React-Router Dom Part-2

Lecture 40 useParams Hook

Lecture 41 Displaying the data of searched characters

Lecture 42 Quotes Api

Lecture 43 Using Map function to display the Quotes

Lecture 44 Adding Layout _ CSS in a Search File

Lecture 45 Adding material-icons in our code

Section 6: Project-4: React Birthday Reminder App Using React Js

Lecture 46 Introduction - Birthday Reminder App Using React Js

Lecture 47 Introduction to our Birthday Reminder App

Lecture 48 Creating React Birthday Reminder App

Lecture 49 Adding data array and additional file to our app

Lecture 50 Code to display the today_s birthday

Lecture 51 Code to display the upcoming birthday of a person

Lecture 52 Adding a Layout to our Card

Lecture 53 Adding Styles to our Card

Lecture 54 Adding Styles to our Image

Lecture 55 Adding Styles to click div and making our app responsive

Lecture 56 Adding layout to upcoming birthday file

Lecture 57 Adding styles to upcoming birthday file

Lecture 58 Download the project files

Section 7: Project-5: Search Book (Multipage Library app to search any book ) using react

Lecture 59 Introduction - Search Book (Multipage Library app to search any book )

Lecture 60 Introduction to bookstore

Lecture 61 Creating our react app

Lecture 62 Navbar

Lecture 63 Adding CSS to our Navbar

Lecture 64 Hero Section

Lecture 65 Adding CSS to our Hero section

Lecture 66 React-Router-Dom Part 1

Lecture 67 React-Router-Dom Part 2

Lecture 68 How to get your Google API Key

Lecture 69 Google Books API

Lecture 70 How to use Google Books API in our app

Lecture 71 What is useNavigate Hook

Lecture 72 Adding useNavigate Hook to our project

Lecture 73 useParams Hook

Lecture 74 Adding useParams Hook to our main file

Lecture 75 Adding styles to our main file

Lecture 76 Genre Page

Lecture 77 What is our Search Page

Lecture 78 Displaying different genres

Lecture 79 CSS to genre page

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

Lecture 80 Introduction

Lecture 81 Introduction to our Travel_ Tour App

Lecture 82 Creating Our React App

Lecture 83 Creating Navbar for our App

Lecture 84 Creating Hero section for our App

Lecture 85 Adding CSS to our Hero section

Lecture 86 Adding Main section to our App

Lecture 87 Adding CSS to Main section

Lecture 88 Making our Main section responsive

Lecture 89 Adding video in our Video section

Lecture 90 Adding CSS to Video section

Lecture 91 Adding Footer

Lecture 92 Code for our Travel Page

Lecture 93 React-Router-Dom

Lecture 94 Pricing Section in our app

Lecture 95 Code for our Pricing Section

Lecture 96 CSS to our Pricing Section

Section 9: Project-7:React Admin Dashboard Using React.js Material-Ui, ReactHooks, React…

Lecture 97 Introduction

Lecture 98 Introduction to Admin Dashboard

Lecture 99 Creating a react App

Lecture 100 Theme

Lecture 101 Navbar

Lecture 102 Adding style to navbar

Lecture 103 Stack

Lecture 104 FlexBox

Lecture 105 Rightbar

Lecture 106 Sidebar

Lecture 107 Nightmode

Lecture 108 ProfileCard1

Lecture 109 ProfileCard2

Lecture 110 ProfileCard3

Lecture 111 Card1

Lecture 112 rc-progress

Lecture 113 Chartjs

Lecture 114 Adding Charts in our app

Lecture 115 Circular Progress

Lecture 116 Adding more style to our App

Section 10: Project-8: Google Map Travel Advisor app using React.js, Geolocation, Google Map

Lecture 117 Introduction

Lecture 118 Introduction to our Travel Advisor App

Lecture 119 Creating React App

Lecture 120 Home Page

Lecture 121 Adding CSS to our Home Page

Lecture 122 React-Router-Dom Part 1

Lecture 123 React-Router-Dom Part 2

Lecture 124 Open Trip Map API

Lecture 125 Adding Code to the Main file

Lecture 126 Adding Code to the Detail file

Lecture 127 Adding Layout to our Main page using MUI

Lecture 128 Rendering our Places List using Map

Lecture 129 Adding Map to our App

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

Lecture 130 Introduction

Lecture 131 Introduction to our Timeline App

Lecture 132 React-Vertical-Timeline package

Lecture 133 Adding events in our timeline

Lecture 134 Adding CSS to our App

Section 12: Project-10: Using Charts in react and creating Different Clickable Links on Char

Lecture 135 Introduction

Lecture 136 Introduction to our app

Lecture 137 Using Chartjs

Lecture 138 Creating different types of chart

Lecture 139 Adding layout to our Chart

Lecture 140 Adding CSS to our Char

Lecture 141 Adding clickable links to the chart

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

Lecture 142 Introduction

Lecture 143 Creating React App _ adding Homepage

Lecture 144 How to use Api in our app

Lecture 145 Bootstrap Layout and Card

Lecture 146 Adding Main section to our App

Lecture 147 Getting Nutritional data and cooking instructions from api

Lecture 148 Working of a model section

Lecture 149 Model Section Part-1

Lecture 150 Model Section Part-2

Lecture 151 Adding Navbar(Calorie Tracker)

Lecture 152 Adding Functionality to our tracker

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

Lecture 153 Introduction

Lecture 154 Intro to Radio Player

Lecture 155 Installing all dependencies and packages

Lecture 156 How to get data from the api

Lecture 157 Adding genre Button and changing the state of stationType

Lecture 158 Adding Different station Cards

Lecture 159 Adding Audio Player

Lecture 160 Adding styles to our Radio Player

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

Lecture 161 Introduction

Lecture 162 Introduction to Drum Kit App

Lecture 163 Creating Layout for our Drum Kit

Lecture 164 Adding Drum Button to out Drum Kit

Lecture 165 CSS Drum

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

Lecture 166 Introduction

Lecture 167 Introduction to Dice Game

Lecture 168 Adding Layout to our App

Lecture 169 Generating random numbers on Dice

Lecture 170 Displaying our Game Result.

Lecture 171 Adding Instructions to our game

Lecture 172 Adding CSS to our App

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

Lecture 173 Introduction

Lecture 174 Introduction to Pokémon App

Lecture 175 Adding Hero section in Pokemon App

Lecture 176 Fetching Data from Poke Api

Lecture 177 Rendering our Pokémon List

Lecture 178 Adding Previous _ Next Button

Lecture 179 Adding CSS to Pokémon Cards

Lecture 180 Creating Pokémon Component

Lecture 181 Creating Pokémon Component Part 2

Lecture 182 Adding CSS to our App

Section 18: Project-16: Slot Matching Game using React, React Hooks, CSS, Javascript

Lecture 183 Introduction

Lecture 184 Introduction to Slot Machine

Lecture 185 Adding MUI Layout to our app

Lecture 186 Adding Layout Part 2

Lecture 187 Adding Css to our Slot Machine

Lecture 188 Adding Functionality to our Slot Machine

Lecture 189 Adding Navbar(Header)

Lecture 190 Adding Functionality to our Navbar

Section 19: Project-17: Marvel Charcter App using React, React Hooks, Marvel Api, CSS, Boots

Lecture 191 Introduction

Lecture 192 Introduction to our Marvel App

Lecture 193 Get Api Key

Lecture 194 Bootstrap Row, Column _ Card

Lecture 195 Fetch Data from Marvel Api

Lecture 196 Rendering Our Marvel Characters List

Lecture 197 Adding styles to our Marvel cards

Lecture 198 Adding description to every characters

Lecture 199 Adding Style to our Character Description

Lecture 200 Adding Searchbar to our Marvel App

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

Lecture 201 Introduction

Lecture 202 Introduction to our Meme Generator App

Lecture 203 Fetch data from meme api

Lecture 204 Adding Bootstrap layout to our memes

Lecture 205 Adding Functionality to View button

Lecture 206 Adding Header to our app

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

Lecture 207 Introduction

Lecture 208 Introduction to Collage Maker App

Lecture 209 Creating Input bars in our App

Lecture 210 Creating Input bar Part-2

Lecture 211 Creating Image list

Lecture 212 Adding Functional Buttons to our App

Lecture 213 Adding CSS to our Collage Maker

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

Lecture 214 Introduction

Lecture 215 Introduction to News App

Lecture 216 Adding Hero section to our app

Lecture 217 Fetching data from the api

Lecture 218 Creating news cards

Lecture 219 Adding styles to our Card

Lecture 220 Adding Categories to our News App

Lecture 221 Adding Search bar to our App

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

Lecture 222 Intro To The Project

Lecture 223 Getting Started With React

Lecture 224 eShop Header

Lecture 225 eShop Home Page

Lecture 226 React Props

Lecture 227 React Routing

Lecture 228 eShop Checkout Page

Lecture 229 React Context API

Lecture 230 Add To Basket

Lecture 231 Remove From Basket

Lecture 232 Authentication Using Firebase

Lecture 233 Deploying The App

Section 24: Project-22: Real-time Chat Application with React ChatEngine & Socket.io

Lecture 234 Intro To The Project

Lecture 235 Getting Started

Lecture 236 React Chat Engine

Lecture 237 Components

Lecture 238 Chat Feed

Lecture 239 My Message Component

Lecture 240 Their Message Component

Lecture 241 Render Read Receipts

Lecture 242 Message Form

Lecture 243 Login Form

Lecture 244 Finishing Up The Project

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

Lecture 245 Intro To The Project

Lecture 246 Getting Started

Lecture 247 OMDb API

Lecture 248 Movie List

Lecture 249 MovieListHeading and Searchbox

Lecture 250 Implementing Search Feature

Lecture 251 Add To Favourite

Lecture 252 Remove From Favourites

Lecture 253 Local Storage

Lecture 254 Finishing Up The Project

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

Lecture 255 Into To The Project

Lecture 256 Getting Started

Lecture 257 React Material-UI

Lecture 258 Youtube API

Lecture 259 SearchBar Component

Lecture 260 React State Hooks

Lecture 261 VideoDetail Component

Lecture 262 VideoList Component

Lecture 263 VideoItem Component

Lecture 264 Finishing Up

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

Lecture 265 Intro To The Project

Lecture 266 Getting Started With React

Lecture 267 Header Component

Lecture 268 CreateArea Component

Lecture 269 Add Note

Lecture 270 Add Note Continuation

Lecture 271 CreateArea CSS

Lecture 272 Note Component

Lecture 273 Deleting Note

Lecture 274 Footer Component

Lecture 275 Completing CSS

Lecture 276 Finishing Up

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

Lecture 277 Intro To The Project

Lecture 278 Getting Started

Lecture 279 userSlice.js

Lecture 280 store.js _ index.js

Lecture 281 Homepage Component

Lecture 282 Navbar Component

Lecture 283 Finishing Navbar

Lecture 284 Gnews API

Lecture 285 Blogs Component

Lecture 286 Finishing Up The Project

Section 29: Project-27:Social Networking Site with Material-UI, React Hooks, and GoogleOAuth

Lecture 287 Intro To The Project

Lecture 288 Getting Started

Lecture 289 Authentication and Security

Lecture 290 Database Encryption

Lecture 291 Environment Variables

Lecture 292 Hashing

Lecture 293 Salting and Hashing

Lecture 294 Cookies

Lecture 295 Sessions

Lecture 296 Google OAuth

Section 30: Project-28:Portfolio Resume Website with React, Material-UI, & State Management

Lecture 297 Intro To The Project

Lecture 298 Getting Started

Lecture 299 Dependencies and Components

Lecture 300 React-Router-DOM

Lecture 301 Props and Home Component

Lecture 302 Navbar Component

Lecture 303 About Component

Lecture 304 Destructuring Assignment

Lecture 305 Finishing Component

Lecture 306 Finishing Up The Project

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

Lecture 307 App Introduction

Lecture 308 Creating Our React App

Lecture 309 Adding Folder Structure

Lecture 310 Populating App.jsx

Lecture 311 Creating Header

Lecture 312 Adding CSS to Header

Lecture 313 Adding Search Bar

Lecture 314 Adding State

Lecture 315 Results.jsx

Lecture 316 EmojiResults

Lecture 317 Error

Lecture 318 Adding Styles

Lecture 319 Adding Functions

Lecture 320 Modifying Filter.js

Lecture 321 Final Refactor

Lecture 322 Deployment

Section 32: Project-30: Breaking Bad Character Finder with React, React DOM, and React Conte

Lecture 323 App Introduction

Lecture 324 Creating React Application

Lecture 325 House Keeing

Lecture 326 Refactoring The Code in Our App

Lecture 327 Adding State

Lecture 328 Creating SearchBar

Lecture 329 Fetching Data from API

Lecture 330 Adding Code to CharacterList

Lecture 331 Rendering CharcterListItem

Lecture 332 Error Handling

Lecture 333 Configuring Loading Screen

Lecture 334 Adding Styles Part 1

Lecture 335 Adding Styles part-2

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

Lecture 336 App Introduction.

Lecture 337 Creating React Application

Lecture 338 Hello World Component

Lecture 339 Folder Structure

Lecture 340 Configuring Quotes.jsx

Lecture 341 Destructuring Data

Lecture 342 Adding Styles Part 1

Lecture 343 Adding Button

Lecture 344 Adding Styles Part 2

Lecture 345 Adding API

Lecture 346 Adding Click Handler

Lecture 347 Error Handling

Lecture 348 Adding Footer

Lecture 349 Adding Font Family

Lecture 350 Pushing Code to Github

Lecture 351 Deployment on Heroku

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

Lecture 352 App Inroduction

Lecture 353 Creating React Application

Lecture 354 First Run

Lecture 355 Installing Dependencies

Lecture 356 Creating HTML

Lecture 357 Adding Sass -1

Lecture 358 Adding Sass-2

Lecture 359 Adding Sass-3

Lecture 360 Initializing States

Lecture 361 Structure of Methods

Lecture 362 Creating the Methods

Lecture 363 Explanation

Lecture 364 Initializing Properties

Lecture 365 Creating Copy Methods

Lecture 366 Adding Toast

Lecture 367 Final Refactor

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

Lecture 368 App Introduction

Lecture 369 Creating React App

Lecture 370 older Structure

Lecture 371 Setting up Form.jsx

Lecture 372 Adding Code to Other Components

Lecture 373 Creating App.js

Lecture 374 Adding State

Lecture 375 Configuring Context.jsx

Lecture 376 Adding Methods

Lecture 377 Adding Other Methods

Lecture 378 Managing DataFlow

Lecture 379 Refactoring Data

Lecture 380 Settings Data in Our App

Lecture 381 Restructuring Modal

Lecture 382 Restructuring SetupForm

Lecture 383 Final Adjustements

Section 36: Project-34: UnSplash Image Gallery with React and ReactDOM

Lecture 384 App Introduction

Lecture 385 Creating React App

Lecture 386 Creating App.js

Lecture 387 Creating States

Lecture 388 Tour of API

Lecture 389 Fetching Data into Applicaton

Lecture 390 Pouring Data Into Application

Lecture 391 Infinite Scroll

Lecture 392 Populating Photo.jsx

Lecture 393 Adding Handle Submit

Lecture 394 Error Handling

Lecture 395 Adding Styles

Lecture 396 Adding styles part 2

Lecture 397 Adding Styles 3

Lecture 398 Fixing Typos

Lecture 399 Healthy Practices

Section 37: Project-35: React Router Demo Application with ReactJs, React Router Dom

Lecture 400 App Introduction

Lecture 401 Creating React App

Lecture 402 House Keeping

Lecture 403 Hello World

Lecture 404 Context part1

Lecture 405 Context Part2

Lecture 406 Homepage

Lecture 407 About Page

Lecture 408 Validation of Form

Lecture 409 Contact Form Part 1

Lecture 410 Contact Form Part 2

Lecture 411 Contact Form Part 3

Lecture 412 User Component Part 1

Lecture 413 User Component Part 2

Lecture 414 Creating User Component Part 1

Lecture 415 User Component Part 2

Lecture 416 Error Page

Lecture 417 Necessary Imports

Lecture 418 Navabar

Lecture 419 Final Fix

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

Lecture 420 App Intro

Lecture 421 CRA

Lecture 422 First Run

Lecture 423 House Keeping

Lecture 424 Fonts

Lecture 425 Creating Context

Lecture 426 How to use Create Context

Lecture 427 Creating Theme Context

Lecture 428 Content Context

Lecture 429 Creating Components

Lecture 430 Next Part

Lecture 431 Creacting BookList

Lecture 432 Creating Book

Lecture 433 Final Fix

Lecture 434 Deployment.

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

Lecture 435 App Intro

Lecture 436 CRA

Lecture 437 First Run

Lecture 438 Extensions For React

Lecture 439 Creating Components

Lecture 440 Components Part 2

Lecture 441 Adding Components Part 3

Lecture 442 Adding Redux

Lecture 443 Creating Store

Lecture 444 Making Store Available

Lecture 445 Adding Store Part 2

Lecture 446 Connecting

Lecture 447 Creating Search Component

Lecture 448 Creating NoteItem

Lecture 449 App Completion

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

Lecture 450 App Introduction

Lecture 451 CRA

Lecture 452 Folder Structure

Lecture 453 Extensions

Lecture 454 Creating Components

Lecture 455 Creating ContactList

Lecture 456 Creating Contact Form

Lecture 457 Styles

Lecture 458 Styles 2

Section 41: Project-39: Money Management App with React, NPM, and React Context

Lecture 459 App Introduction

Lecture 460 Creating React Application

Lecture 461 First Run

Lecture 462 Extensions For React

Lecture 463 Creating Components

Lecture 464 Making Required Components

Lecture 465 Creating App.jsx

Lecture 466 Creating A Component

Lecture 467 CardItem

Lecture 468 Add Basket

Lecture 469 Remove Item

Lecture 470 Final Touch

Section 42: Project-40: Resort Booking App with React, NPM, and Hooks

Lecture 471 App Intro

Lecture 472 CRA

Lecture 473 First Run

Lecture 474 Extensions

Lecture 475 Creating State

Lecture 476 Creating State 2

Lecture 477 Adding Methods

Lecture 478 Defining Methods

Lecture 479 Completing Booking.js

Lecture 480 Creating Billing.js

Lecture 481 Creating Methods in Billing

Lecture 482 Billing.js Part 1

Lecture 483 Billing.jsx Part 2

Lecture 484 DateSelector.js

Lecture 485 RoomDetails.js

Lecture 486 Adding Dynamics to RoomDetails.js

Section 43: Project-41: BMI Calculator with React, NPM, and React Context

Lecture 487 App Intro

Lecture 488 Create React Application

Lecture 489 First Run

Lecture 490 Extensions

Lecture 491 Using useState

Lecture 492 Creating Structure

Lecture 493 Creating Structure Part 2

Lecture 494 Creating Constants

Lecture 495 Creating Methods

Lecture 496 Methods Part 2

Lecture 497 Creating Methods Final Part

Lecture 498 Final Fix

Section 44: Project-42: Furniture Store with React and Redux for State Management

Lecture 499 App Intro

Lecture 500 CRA

Lecture 501 Configuring Application

Lecture 502 Index.js

Lecture 503 Creating App.js

Lecture 504 Creating Reducer

Lecture 505 Actions Creators

Lecture 506 Using connect

Lecture 507 MapStatetoProps

Lecture 508 Creating Components Part 1

Lecture 509 Creating Components Part 2

Lecture 510 Creating Component Part 3

Lecture 511 Connecting Components

Section 45: Project-43: Scoreboard App with ReactJs, NPM, and React Context

Lecture 512 App Intro

Lecture 513 CRA

Lecture 514 Extensions

Lecture 515 Creating Components

Lecture 516 Creating Methods

Lecture 517 Creating Methods Part 2

Lecture 518 Adding Player.js

Lecture 519 Creating Counter.ks

Lecture 520 Creating Stats

Lecture 521 Creating StopWatch

Lecture 522 Final Component

Section 46: Project-44: Meta Tag Generator Application made with React-React Js

Lecture 523 App Introduction

Lecture 524 CRA

Lecture 525 Extensions

Lecture 526 Creating Components

Lecture 527 Configuring Components

Lecture 528 Creating Structure

Lecture 529 Creating Structure Part 2

Lecture 530 Creating Generator.js

Lecture 531 Finishing MetaAtgs

Lecture 532 Final Fix

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

Lecture 533 Introduction To The Project

Lecture 534 Project Installation And Setup

Lecture 535 Applying React Router

Lecture 536 Creating & Styling The Nav Bar

Lecture 537 Finishing Up The Nav bar

Lecture 538 Creating the Homepage and Footer

Lecture 539 Menu Page And Mapping The Data

Lecture 540 About _ Contact Page - Finishing Up The Project

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

Lecture 541 Introduction To The Project

Lecture 542 Generating the API Key

Lecture 543 Creating the Search Component

Lecture 544 Search Component Continuation

Lecture 545 Creating Weather Card

Lecture 546 Styling The Weather Card.

Lecture 547 The useEffect Hook

Lecture 548 Promises, Async, Await Try and Catch

Lecture 549 Configuring the API Endpoint

Lecture 550 Grabbing The Data From API

Lecture 551 Fetching Data To The UI

Lecture 552 Making The Icons Dynamic And Finishing Up The Project

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

Lecture 553 Introduction To The Project

Lecture 554 Generationg API ID _ Key

Lecture 555 React Project Installation

Lecture 556 Creating the Basic Structure

Lecture 557 Styling The Input And Search Field

Lecture 558 Calling the API Through Endpoint

Lecture 559 Implementing Custom Search

Lecture 560 The Category Dropdown

Lecture 561 Mapping The Data From The API.

Lecture 562 he RecipeTile Component

Lecture 563 Adding RegEx To Filter Images

Lecture 564 Hosting The Website on Firebase

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

Lecture 565 Introduction To The Poject

Lecture 566 Project Setup And Installation

Lecture 567 Creating The Navbar

Lecture 568 Styling The Navbar

Lecture 569 Creating The Context

Lecture 570 Creating CartContainer

Lecture 571 Creating CartItem Component

Lecture 572 The useReducer Hook

Lecture 573 Implementing The useReducer

Lecture 574 Clear Cart

Lecture 575 Adding And Removing Items From Cart

Lecture 576 Creating The Actions In Reducer

Lecture 577 Dispatch And Actions Final

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

Lecture 578 Introduction To The Project

Lecture 579 Initialising The Project

Lecture 580 Styling The Title

Lecture 581 Creating The Category Component

Lecture 582 The Menu Component

Lecture 583 Styling The Menu Component

Lecture 584 Working On The Category Component

Lecture 585 Passing And Mapping Data To Menu Component

Lecture 586 Redering The Data In The App Component

Lecture 587 Hosting Application On Firebase

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

Lecture 588 Introduction To The Project

Lecture 589 Creating Navbar

Lecture 590 Linking Components To Navbar

Lecture 591 Creating The Context

Lecture 592 The API We Are Going To Use

Lecture 593 Setting Up Global Context

Lecture 594 Fetching Data From Try And Catch

Lecture 595 Creating Global Context

Lecture 596 Creating Search Component

Lecture 597 Loader,Cocktails,CocktailList Components

Lecture 598 SingleCocktail Component

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

Lecture 599 Introduction To The Project

Lecture 600 Setting Up The Project

Lecture 601 Using Material-UI and Navbar

Lecture 602 Dark Mode Feature

Lecture 603 The Search Component

Lecture 604 Posting The Review Component

Lecture 605 Adding JS To The AddNote

Lecture 606 Creating The Review(Note) Component

Lecture 607 Creating The Review List (NoteList)

Lecture 608 Configuring The App-js

Lecture 609 Finishing Up The Project

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

Lecture 610 Introduction To The Project

Lecture 611 Setting Up The Project

Lecture 612 Creating The Button Component

Lecture 613 Styling The Button

Lecture 614 SetPomodoro Component

Lecture 615 Configuring The SetPomodoro

Lecture 616 CountDown Animation Component

Lecture 617 Creating The GlobalContext

Lecture 618 Configuring The Global Context

Lecture 619 Configuring The App-js

Lecture 620 Finishing Up the Project with App-Js

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

Lecture 621 Introduction To The Project

Lecture 622 Setting Up The Project

Lecture 623 Installing Tailwind And Craco

Lecture 624 Creating The Navbar

Lecture 625 Creating The Search Component

Lecture 626 Completing The Search And Creating Links

Lecture 627 Creating Loading And Footer Component

Lecture 628 Creating The Global Context

Lecture 629 Creating The Results Component Structure.

Lecture 630 Distributing Data According To Search Field

Lecture 631 Setting Up The Routes And App-Js

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

Lecture 632 Introduction to Tic tac Toe game Project

Lecture 633 Environment Setup for the project

Lecture 634 Getting started with React Component and Understanding Folder Structure

Lecture 635 Introduction to react props and passing function to componnennts

Lecture 636 Rendering our player using useState Hooks.

Lecture 637 Toggle between player_s X and O using useEffect hooks

Lecture 638 Giving action to the restart button

Lecture 639 Making condition for a tie match

Lecture 640 Adding sound effect to our project

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

Lecture 641 Introduction to Word Counter using React js

Lecture 642 What we are going to make

Lecture 643 Getting started with our user Interface for word counter

Lecture 644 Completing our counter letters and words

Lecture 645 Completing with our buttons

Section 58: Project-56: Currency Converter with React

Lecture 646 Introduction to currency converter

Lecture 647 What we are going to make

Lecture 648 Get started with our project user Interface

Lecture 649 Our final result with convert api

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

Lecture 650 Introduction to the project

Lecture 651 Let_s see what we are going to make and how it work

Lecture 652 Rendering HTML elements inside browser and applying CSS

Lecture 653 Rendering HTML elements inside browser and applying CSS

Section 60: Project-58: Calculator App with React and Hooks

Lecture 654 Introduction to calculator presentation

Lecture 655 Getting started with the html

Lecture 656 Handling the buttons with click

Lecture 657 Making our delete button functional

Lecture 658 Error Handling and the Equal button

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

Lecture 659 Introduction to the Budget App using react js with presentation

Lecture 660 Getting started with initialization of our react application

Lecture 661 Rendering our header for budget app

Lecture 662 Making Budget Card component

Lecture 663 Completing Budget Card Header.

Lecture 664 Completing Budget Card component

Lecture 665 Completing Budget Card component

Lecture 666 Calling the functions for budget card funtionality

Lecture 667 Completing add Budget and add Expenses function

Lecture 668 Learn how to use Local Storage

Lecture 669 Handling Budget Modal

Lecture 670 Maping through budgets

Lecture 671 Add expenses modal and Uncategorized section

Lecture 672 Completing the application

Lecture 673 Download the project files

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

Lecture 674 Introduction to Schedule Application using react JS

Lecture 675 Getting startded with ur project

Lecture 676 Installing Bootstrap using terminal

Lecture 677 Redirectig to authorization

Lecture 678 Creating Server for our application

Lecture 679 Modifying the server

Lecture 680 Managing the Authentication of user

Lecture 681 Completing authorisation

Lecture 682 Making the song component

Lecture 683 Concluding the project

Section 63: Project-61: Calendar App with Scheduling Functionality

Lecture 684 Introduction to our project Callender App using React Js

Lecture 685 Getting Started With Project Initialization

Lecture 686 Lets Make the application more handy

Lecture 687 Binding more additional fields and restricting user

Lecture 688 Customizing Views

Lecture 689 Let_s make a proper css view now

Lecture 690 Learining about some new components

Lecture 691 Initializing second half modules

Lecture 692 Handling Event for the calender

Lecture 693 Concluding our application

Section 64: Project-62: Dictionary App with React

Lecture 694 Introduction to Dictionary App Using React Js

Lecture 695 Getting started with our project Initialization

Lecture 696 Learn about hooks in react

Lecture 697 Finishing with css in component

Lecture 698 Working with functional components and UI

Lecture 699 Rendering Definition component

Lecture 700 Styling Definition Component

Lecture 701 Completing Definition Component

Section 65: Project-63: YouTube Clone with React

Lecture 702 Introduction to Youtube Clone

Lecture 703 Getting started with our project

Lecture 704 Initializing fetch and learning Api

Lecture 705 Setting sate for using hooks

Lecture 706 Fetching api data to log and render

Lecture 707 Arranging Video Components

Lecture 708 Concluding with our project

Section 66: Project-64: Candy Crush Game with React

Lecture 709 Introduction to Candy Crush app using react js

Lecture 710 Getting started with our project initialization

Lecture 711 Initializing array of colors in our project.

Lecture 712 Arranging array with colors and images

Lecture 713 Getting the drag and drop event

Lecture 714 Putting Images instead of colors

Lecture 715 Concluding with the game

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

Lecture 716 The introduction to the project

Lecture 717 Setting up the react project and environment

Lecture 718 Setting up the components

Lecture 719 Introduction to Hooks and useState hook

Lecture 720 Getting started with the axios , asynchronous Javscript

Lecture 721 Using useState to render data from the API and showing on the main page

Lecture 722 The designing of the whole application Part-1

Lecture 723 The designing of the whole application Part-2

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

Lecture 724 introduction to the project

Lecture 725 Getting started with the project and creating the development enviornment.

Lecture 726 Setting up the three main components for the project

Lecture 727 creation of the main body part-1

Lecture 728 setting up the functionality using useState() andcreation of the main body part

Lecture 729 working with the functionality using useEffect() and creation of the main body

Lecture 730 Complete functionality of the project

Lecture 731 Designing the whole application part-1

Lecture 732 Designing the whole application part-2

Lecture 733 Designing the whole application part-3

Section 69: Project-67: Real-time Notification App with React, CSS, Hooks, and Socket.io

Lecture 734 Getting started with the project and setting the development enviornment

Lecture 735 Designing the components part-1

Lecture 736 Designing of the components part-2 and setting up useState Hook

Lecture 737 Designing of the components part-3

Lecture 738 Designing of the Navbar component

Lecture 739 Writing the functionality of the components using the json data

Lecture 740 Writing the functionality and Dasigning of all the components

Lecture 741 Introduction and connection with socket.io

Lecture 742 Functionality of socket.io part-1

Lecture 743 Functionality of socket.io part-2

Lecture 744 Functionality of socket.io part-3

Lecture 745 Writing the functionality of displaying the notifications

Lecture 746 Completion project

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

Lecture 747 Introduction to the project

Lecture 748 Setting tup the development enviornment and components

Lecture 749 Extraction of the data from the API and useEffect() Hook

Lecture 750 Using the data from the API with the help of useState() Hook

Lecture 751 Creating the JSX for the main page and designing part-1

Lecture 752 Designing of the project part-2

Lecture 753 Completion of the project

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

Lecture 754 Introduction to the project

Lecture 755 Setting up the development environment and creating the React app

Lecture 756 Fetching the data from the API and using useEffect hook

Lecture 757 Setting up the GIF by the JSON data of the API for the random component

Lecture 758 Creating the Tag component for a specific type of GIF based on the users query

Lecture 759 Creation and working with the custom hook useGif

Lecture 760 Complete functionality of the project by using useGif custom hook

Lecture 761 Designing the whole application part-1

Lecture 762 Designing the whole application part-2

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

Lecture 763 Introduction to the project

Lecture 764 Setting up the development environment and creating the react app

Lecture 765 Integrating the Google maps API and setting the icons

Lecture 766 Fetching the data from the API and using the icons for the google map

Lecture 767 Using the JSON data from the API and using it in the google map.

Lecture 768 Creating the info box for additional info regarding every wildfire

Lecture 769 Completion of the project

Beginners in React