Hands-On React Bootcamp: Build 30 Real World Projects

Build an e-commerce site from scratch with React, covering header, homepage, checkout, and login. Implement add to cart with state hooks and context, authenticate via Firebase, and deploy with Firebase.

Create a project folder, run npx create-react-app . to set up React, and launch npm start to view your app on localhost:3000, then delete boilerplate for a fresh start.

Build the complete eShop header in a React app by dividing it into logo, search bar, and navigation with sign in and basket, using components, props, and context.

Build a React homepage by composing a home component with an image, rows of product components, and styled product cards featuring title, price, rating, and add to basket button.

Learn to render dynamic product data with props in React by passing title, price, rating, and image to a reusable component, and build ratings with map.

Learn to set up react router dom, create routes for home and checkout, and navigate with link in the header and basket to render the checkout page.

Build an eShop checkout page with a left shopping basket and a right total panel, using a checkout product and a subtotal with currency format, and add to basket functionality.

Using the React Context API, build a state provider and reducer to manage a basket, enabling add to basket, remove from basket, and cross-component data sharing via a data layer.

Learn to render checkout items from the basket by mapping the data layer with useStateValue and dispatch, and update the total basket price dynamically as items are added.

Learn to implement remove from basket in a React app by dispatching remove actions, locating items by id, updating the basket immutably, and reflecting changes in the subtotal.

Master building user authentication with Firebase by implementing email and password sign in and sign up in a React web app, configuring Firebase database and authentication, and deploying the app.

Deploy your ecommerce project by configuring Firebase hosting, building with npm run build, and publishing with firebase deploy after logging in and selecting the project.

Build a chat app from scratch with the React chat engine, including login, groups, and messages. Use Axios for API calls and local storage authentication, and leverage useState and useEffect.

Start a React project by creating a lowercase folder and using npx create-react-app, remove boilerplate, render hello world, and run localhost:3000 to prep for a chat app.

Build a chat engine in a React app using the React Chat Engine library, from setup and installation to creating users, chats, and authentication concepts via sockets and props.

Build and render a chat feed component in a React chat engine using the props spread operator, add new message audio, and create message and login components.

Build a chat feed using the chart engine UI docs, render chat headers and messages, map props, distinguish your messages from others, and implement read receipts and a message form.

Learn to build the my message and their message components in a React chat app by handling message props, distinguishing images from text via attachments, and rendering accordingly.

Build their message component in React using two props (messages and last message) to detect the first user message, render an avatar, and switch between image or text with margins.

Implement read receipts in a React chat app by rendering messages on the left or right using a JavaScript function that maps over chat participants and shows avatars.

Build a functional message form in React by using state hooks, input handling, and upload capabilities to send text and attachments through a chat engine.

Build a login form component in React using Axios for API calls, manage username and password state, handle submission, store credentials in localStorage, and implement error handling for invalid credentials.

Finish the project by validating the chat app, debugging the login flow with local storage, and finalizing messages, images, and chart features so users can chat and interact.

Build a real-world movies app with React featuring search, add to favorites with local storage persistence, and a responsive bootstrap UI using the IMDb API to fetch multilingual film data.

Scaffold a React project using Create React App in a new lowercase folder, clean the boilerplate, render a hello world component, and run the dev server on localhost:3000.

Learn to integrate the OMDb API in a React project by obtaining an API key, activating it, and querying movie data across languages using Postman for search and detail data.

learn to set up a React project with Bootstrap, manage movies using useState, and render a movie list component that displays posters via props with Bootstrap styling.

Learn to render movies dynamically from the IMDb API, implement a search box with a movie list heading component, and toggle between movies and favorites using React, props, and hooks.

Implement a search feature by fetching movie data from an API as the user types, updating the movies list with posters rendered via useEffect and dynamic state.

Add and remove favorites in a React app with a heart icon, persist via local storage, and render the favorites list alongside the movies.

Learn to remove from favorites in a React app by creating a remove component, updating the favorites via filter, and persisting changes to local storage.

Use local storage to manage movie favorites in a React app by creating a data structure, saving updates on add and remove, and reflecting changes in the favorites list.

Finish a React movie app by building a search interface that fetches data from the imdb api, displays five hardcoded movies, and updates dynamically with favorites stored in local storage.

Build a YouTube-like video sharing platform from scratch using React, the YouTube API, and Material UI grid, creating components and handling API requests.

Open a project folder, run the create-react-app script from npm, and create the React app. Start the app with npm start, then remove boilerplate to reveal a plain white screen.

Explore building a Material UI grid layout to structure a YouTube-style interface, with a search bar, video detail, and video list, using non-default grid exports and responsive styling.

Set up the YouTube Data API in a React project by installing axios and Material UI, creating an API folder, and obtaining and storing the API key.

Build and integrate a search bar in a React app using useState and Material UI, pass on submit via props, handle input events, and fetch YouTube API results.

Store YouTube API results in a useState hook named videos and manage a selected main video for display.

Builds a React video detail component that receives a selected video, uses id and snippet to display title, channel, and description, and renders a YouTube iframe in Material UI paper.

Build a video list and video item components to display a right-side gallery and left-side iframe, handling video selection with props and Material UI grid.

Build a video item component in a React app, wiring props from the video list to the parent. Enable click to update selected video and render its detail via iframe.

Build a video sharing app with React, axios for API handling, and Material UI styling, featuring a search bar, YouTube API data, video detail, and a five-item video list.

Learn to build a to-do list app in React from scratch, using header, create area, node, and footer components, manage state with useState and useEffect, and store data locally.

Learn to set up a React app with the create React script, organize components like header and create area, and run the app with npm start to view the page.

learn to build a header component in a React app using Material UI icons, create a components folder, export the header, and style it with CSS.

Create a create area component that captures a note title and content via a stateful note object, updates on change, and uses the spread operator to preserve previous values.

Use state hooks to store notes, handle input changes, and submit new notes through a prop to trigger the add action and update the notes array without page reload.

Create and manage a notes array with useState, implement a submit handler to add notes, and pass onAdd as a prop to update the list.

Create area css styling for to-do list, featuring relative positioning, width 100 percent input, padding, border radius, box shadow, and an absolutely positioned create button refined by trial and error.

Build a node component in React that renders note items by mapping an array with title and content props, and displays a delete icon from material icons.

See how to delete a todo item by turning the delete icon into a button, passing the item id via props, and filtering it out with setNotes so it disappears.

Build a reusable footer component in React. Use the date function to get the full year with getFullYear and display it dynamically in the footer.

Learn css styling for the footer and node components while reinforcing React concepts like state management, props, use effect, and use state hooks, plus map, filter, and reduce for logic.

Finish the React bootcamp project by implementing an expandable form controlled by a boolean, and building a to-do list with add, delete, and map rendering, plus styling tips.

Build a blog website from scratch with a landing page, Google authentication, sports blogs filter, blocks component, and axios-powered data via Genius API using Redux Toolkit and Material UI.

get started with a React app by creating a project folder and running create-react-app script. remove boilerplate and render to root with React DOM, as you learn props and hooks.

Create a Redux Toolkit user slice to manage isSignedIn, userData, searchInput, and blockData with reducers and actions, then wire components through the features folder.

Learn to set up a Redux store using configureStore, connect the user slice, and integrate the Provider and Google login in index.js to enable Google sign-in.

Build the homepage component in a React Redux project, using AFC for functional components and Google login with useDispatch and useSelector. Style with home.css and render content by sign-in state.

Finish the navbar component with Google login, avatar, and search; wire up Redux (useDispatch, useSelector) for user state, and implement a controlled search input with prevent default handling.

Learn to render content blocks by fetching news data from the Genius API, using Axios and React hooks, to build a blog-like blocks page with API keys and JSON data.

Build a blogs component that fetches data from an API with axios, supports a dynamic search input, login-driven rendering, and displays blog items with title, image, and description.

Finish strong by wiring packages for Material UI, React Redux, React JS Toolkit, and Google Login, configure the user slice and store, and explore API endpoints and the blog component.

Set up a Node/Express project by initializing npm, installing express and body-parser, configuring public and views folders, and creating routes for home, login, and register with basic post handling.

Learn authentication and security by building a basic login using a body parser to read username and password from post requests, storing credentials in MongoDB with Mongoose schemas.

Explore database encryption with Mongoose encryption, encrypting the password field using a secret key and a plugin, while keeping usernames visible; learn how encryption handles saving and decrypting on query.

Learn to protect sensitive keys with environment variables using dotenv, create a .env file, access keys via process.env, and ignore the file in git to keep secrets safe.

Explore password hashing with a one-way hash function, storing hashes (not passwords) and validating logins by hashing input with md5; discuss dictionary attacks and salting.

Learn to salt and hash passwords with a script, store the salt and hash in the database, and defend against dictionary attacks by using multiple salt rounds and longer passwords.

Learn how cookies establish and maintain user sessions, enabling cart data to persist across visits and identify returning users, via server-set cookies in responses.

Understand how cookies and sessions enable authentication. Set up passport with local strategies and passport local mongoose to manage user sessions, and prepare for Google authentication in a future video.

Implement Google and Facebook sign-in using OAuth and Passport, configuring Google Developer Console credentials, client IDs, and redirect URLs for secure token-based authentication with granular access control.

learn to build a complete resume and portfolio site from scratch with React, creating reusable components for personal info, education, experience, skills, certificates, and linking GitHub projects.

Create a react app in the current folder with npm, install dependencies, and start the project on port 3000; then remove boilerplate and begin building components.

Learn to set up react-router-dom routing, import and export components, and organize a components and pages structure to render home, skills, experiences, and education routes.

Learn how props pass data to components, render the home component, and compose a React page with routing, HTML attributes, and a two-column layout using divisions.

Explore the about component in a React project, detailing HTML structure, Bootstrap cards, and personal data blocks, while focusing on object structuring and how to work with APIs.

Learn the basics of destructuring assignment in JavaScript, extracting values from arrays and objects into variables and using the spread operator, with API examples and documentation guidance.

Navigate between pages with React Router, toggle dark and light themes with a theme provider, and explore mock JSON placeholder user data and a form with validation.

Learn to create a React app quickly with the Sierra Utility of Facebook, using three commands, and set up Node and Visual Studio Code with the Sierra Utilities documentation.

Create a basic React app by building a functional component named App, importing React, returning a hello world message, and exporting it as default with hot module replacement.

Create a components folder with home, about, form, and error pages, plus user pages. Implement a React context to share theme and user data across components via a provider.

Create and wire a React context using createContext, build a theme state with useState and useEffect, persist it in local storage, and expose it via a provider for components.

Wrap the app in a context provider, import and expose it to all components, then build a functional homepage using bootstrap 5.1.0 with containers, rows, images, and placeholder content.

Build an about page as a React functional component, using bootstrap-like container, row, and column layouts. Include a heading, image, and descriptive paragraphs with lead styling.

Build and validate a contact form in React using Yup for schema-based validation, defining required fields like full name, email, and message, and optional phone and website.

Build a contact form in a React app using Formik and Yup validation, define initial values, implement onSubmit, onChange, and onBlur, and display errors for touched fields.

Build a dynamic contact form in a React bootcamp by adding email, phone, and website fields, with labeled inputs, placeholders, and real-time error handling.

Create a contact form with a messages text area, labeled as required, using four columns and five rows; show text danger errors on blur and include a submit button.

Install axios and the navigation tool, fetch user data with axios in a useEffect, and create a user component with useState and a loading state for a single user.

Build a user component in a hands-on React bootcamp that renders a loading state and maps API data to user cards with images, names, IDs, and detail links.

Create a user component that fetches a single user's data with Axios from JSON placeholder, using useState, useEffect, and useParams, with loading state and themed UI.

Create a reusable user component in React by rendering contact details, address, phone, website, company info, and a responsive image thumbnail using structured lists and semantic markup.

Create a functional error page component in React that renders a no such page message. Provide a link back to the home using React Router DOM to navigate.

Wrap the app in a browser router to enable routing and define routes for home, about, contact, and users, using font awesome and react icons.

Build a React navigation system with routes for home, contact, about, users, and individual users, plus a catch-all error page and a theme toggle button with a moon icon.

Import bootstrap dist CSS and bootstrap.js, copy the provided cases into the project, ensure index.css is imported, then save and run the app to complete the final fix.