50 Days React Bootcamp: Build 50 Real World React Projects

Build an e-commerce site from scratch with react, covering header, homepage, checkout, and login pages, using state, hooks, context API, and Firebase authentication, then deploy the app with Firebase.

Create a project folder, install a React app with create-react-app, then launch on localhost:3000 and start from a fresh white page titled 'Shop website'.

Build a reusable React header component for an e-shop, splitting it into logo, search bar, and navigation with sign-in and basket; pass data with props and the context API.

Learn to build an e-shop home page in React by composing header, home container, and product components with image, title, price, rating, and add-to-basket button, styled with CSS flexbox.

Learn to pass dynamic data to React components with props, using key-value attributes and JavaScript objects, and render ratings as stars via map for unique product cards.

Learn to implement routing with react-router-dom by wiring a header and two routes—the home and checkout page—using BrowserRouter, Switch, Route, and Link for navigation between / and /checkout.

Build an e-shop checkout page with a left basket and right total, create a checkout product component, style the layout, and integrate a subtotal with react currency format.

Learn to implement a React context API state provider to manage a shopping cart, add and remove items, and update prices dynamically via a shared data layer across components.

Add to basket retrieves items from the data layer and renders checkout products by mapping the basket with state provider and dispatch, then computes the total basket value.

Implement remove from basket functionality by dispatching a remove action with an item id, updating the basket via splice, and reflecting dynamic subtotal updates in React.

Learn how to implement user authentication in a React app with Firebase, including setting up a Firebase project, enabling email/password authentication, and building sign-in and sign-up flows.

Deploy your React app with Firebase hosting by logging in, initializing the project, building for production, and running Firebase deploy to publish the live site.

Set up the project and explore the React Chat Engine to build a chat application with login via local storage, axios rest calls, and a dynamic chat feed.

Set up a React project by creating a lowercase folder, using create-react-app via npx, and starting the server, then replace boilerplate with a hello world and plan a chat app.

Learn to scaffold a React app and build a chat interface with the React Chat Engine, install axios, create a project with API key, and set up users.

Build a React chat feed from the chart engine UI: render messages for the active chat, implement read receipts, and design the message form.

Build a my message component in a React chat, using the message prop to detect image attachments and render images or text messages accordingly.

Build their message component by using two props: messages and last message, and render first messages differently while handling attachments, images, and plain text in the chat feed.

Implement read receipts in the chat feed by rendering messages on the right for your messages and on the left for others, using isMyMessage and mapping through participants.

Build and wire a dynamic message form component to type messages, attach images or files, and submit through a chat engine using React state hooks and integrated icons.

Build a login form component using Axios to authenticate via a REST API, manage username and password, store credentials in localStorage, and refresh the chat feed on success.

Finish the project by validating the React app, fixing bugs, and refining login, chat, and group features using local storage, a chart engine, and Axios. Build and test the chat application end-to-end with images, messages, and user management.

Learn to build a real world movie app with React, featuring search, add to favorites with local storage, and trailer previews via YouTube API.

Create a lowercase movie app folder with create-react-app, then run npm start to view the boilerplate and start building the movies list with add to favorites and remove from favorites.

Learn to use the OMDb API to fetch movie data in languages, activate an API key, test searches with Postman, and display and favorite movies in a React app.

Build a movie list in React by installing bootstrap, using useState to hold movies, and creating a MovieList component that maps over movies to render posters with bootstrap styling.

Develop a dynamic movie list by fetching data from IMDB and enabling a searchable bar. Create reusable components for the list heading and search box using props and search hook.

Build a live search feature that uses use effect to fetch movies via an API with the search value, parses JSON, and updates the movie list with posters instantly.

Learn to add to favorites and remove from favorites in a React movie list, and persist favorites with local storage to keep them after refresh.

Learn to remove from favorites in a React app by wiring a remove component to the favorites state, filtering by IMDB ID, and syncing with local storage.

Learn to start a React app in a project folder using the create-react-app script from npm. Then run it on localhost 3000 and clean boilerplate to see a white screen.

Learn to implement the material UI grid in a react app by importing grid correctly and building a search bar, video detail, and video list components.

Learn to set up the YouTube data API in a React app. Install axios and material UI, enable YouTube Data API v3, and configure the base URL and API key.

Build a reusable search bar component in React using Material UI, manage the search term with useState, and submit queries to YouTube API to fetch five video items with snippet.

Build a video detail component using the selected video prop to show a YouTube video in a Material UI paper with title, channel, and description, plus a loading state.

Implement a video list and video item components to display a YouTube-like grid on the right and show the selected video in the left frame.

Build a React video item component with material UI to render a selectable video list, pass props from the list, and update video detail on selection using YouTube API.

Build a todo list app from scratch with React JS, covering project setup, dependencies like Material UI and Axios, and four components: header, create area, node, and footer.

Discover how to bootstrap a React project with the create-react-app script, inspect components like create area and header, and render a to-do app with basic styling and React Router.

Build a header component in a React app by creating a components folder, importing Material UI icons, exporting the header, and styling with CSS for layout and typography.

Create area builds a title and content form after the header, and manages a note object with useState, updating title and content via onChange and the spread operator.

Use React state to store notes in an array, add notes via an onAdd prop, and submit with a Material UI fab button, clearing inputs without reload.

Add note continuation shows submitting a new note updates the notes array with the spread operator, appending the new item while preserving previous ones and clearing the input.

Style the create area of the to-do list, adjusting positioning, margins, and visuals with trial and error, then copy the CSS from the course resources and preview the result.

Learn how to create a note node component, map over an array of notes, and render each note with title and content using props, while integrating a delete icon.

Learn to delete a note or todo item by wiring a delete button to an on delete prop, passing the item id, and filtering the notes array.

Build a footer component in React, export it to the main app, and make the copyright year dynamic using the JavaScript date.

Style a React app by applying CSS to a footer and a node component, using style.css and absolute positioning, colors, and typography, while reinforcing state management, useEffect, and useState.

Finish the React project by implementing an expander toggle that reveals a text input, builds a to-do list with add and delete actions, and reviews CSS texture styling.

Build a blog website from scratch with Google authentication, a landing page, and a dynamic blog feed with tech and sports categories.

Start a React project by creating a blog folder, installing and running with npm start, then customize boilerplate and explore component rendering with React DOM, props, and hooks.

Learn to organize a React app with components, app, features, and styling folders, and build a Redux Toolkit user slice to manage sign-in, user data, search input, and block data.

Set up a redux toolkit store with react redux and google login, configure the store with a user slice, and wire the provider in index.js for homepage and show dogs.

Build and render the homepage component by wiring imports, Google login, and Redux dispatch/selectors to display a welcome message and conditional content based on sign-in status.

Finish the navbar component in a React project, incorporating material UI elements, Google login, avatar display, Redux dispatch, search input handling, and logout behavior.

Finish the navbar by wiring the avatar and user data with Redux, implement login/logout with Google, render dynamic blocks via search using the Genius API, and complete the home page.

Fetch blocks from the genius news api to render blog cards with title, description, and image. Use useEffect, useState, and axios to fetch data and apply styling from blogs css.

Build a blogs component that fetches articles from an API with a search parameter, using axios and useEffect to render results and handle loading and login-driven display.

Finish the project by wiring React and Redux with Google login, creating a user slice and store, and building the homepage and blog components, while mastering the genius API endpoints.

Build a secure social networking site from scratch with MongoDB, Express, JS, Node.js, and React, implementing six security layers, authentication, social logins from Google and Facebook, and user posts.

Set up a full stack starter by creating html and styles folders, wiring express routes for home, login, and register, and configuring npm, dependencies, database, and Google and Facebook authentication.

Learn authentication and security basics by handling post request bodies for username and password, storing them in a MongoDB schema, and implementing register and login flows with basic validation.

Use the Mongoose encryption plugin to encrypt only passwords in the database with a secret key, enabling auto encryption on save and decryption on find.

learn to protect secret keys with environment variables using dotenv, load them via process.env, and ignore the .env file to prevent exposure, while noting hashing passwords as next security step.

Learn how passwords are hashed with a one-way function, store and compare hashes at login, and explore MD5 usage, dictionary attacks, and salting as a security upgrade.

Learn how salting and hashing protect passwords by appending a random salt, hashing the combined value, and storing both salt and hash to defeat dictionary attacks and slow cracking.

Learn how cookies and sessions enable cart persistence and user identification across visits, with cookies set by servers and sent with requests to maintain a session.

Implement Google OAuth and social login with Google and Facebook, configuring Google Developer Console credentials, redirect URLs, and Passport Google strategy to serialize users for secure authentication.

Explore how to build a React-based resume and portfolio site using components, with sections for education, experience, and projects. Learn setup, packages, props, state, and hooks, plus GitHub integration.

Set up a React project by creating a folder, running Create React App to install dependencies, and cleaning boilerplate. Start the app with npm start to view it on localhost:3000.

Install google material design libraries and materialize css, then set up dependencies for routing with react-router-dom. Learn how components render parts of a page and update without full reloads.

Navigate and render React components by setting up react-router-dom routes, importing named and default exports, and organizing pages such as home, skills, experiences, and education.

Learn to build a navbar component that uses Bootstrap styling and icons, links to home, skills, experiences, education, and portfolio, and enables routing in a React app.

Explore the about component in a React project, with education and experience components, using bootstrap cards and HTML for a resume. Learn object structuring and APIs.

Destructuring assignment unlocks array and object unpacking, showing how to use the spread operator and apply these patterns with API data and React projects.

Build education, experiences, portfolio, profile, and skills sections with Bootstrap grid and view details links to GitHub, using JavaScript object styling with double braces in HTML.

Finalize a React app with components, props, and state management. Set up routing with React Router DOM and Bootstrap grids, and npm install dependencies.

Learn to build a real world emoji search app in React, enabling search, copy-to-clipboard, and a 20-item dashboard with live deployment for global access.

Create a react app with create react app, install node and a code editor like VS Code, then run npm start to view the default template.

Create an organized folder structure for a React dashboard, including emojis, header, and search bar components, alongside data assets and proper file placement.

Build a React app using class components by importing React and assembling a header, a search bar, and emoji results with filters.

Configure the G6 setup, leverage automatic React import, and build a header component with images and its CSS styling.

Apply 15px padding and relative positioning to the header. Remove padding, set font weight normal, and color #333 at 32px; center text, adjust image spacing, and prepare the search bar.

Learn to build and style a search bar component in a React app by implementing a class component, importing modules, and applying CSS for a full-width, emoji placeholder input.

Learn to add state in a React app to manage emoji results, apply a filter to display only a 20-item subset from an emoji list, and update the user interface.

Pass data from filtered emojis to the emoji results component. Map emoji data into child components and pass symbol and title as props to render each emoji item.

Map emoji data to a UI by building a React class component emoji results row that renders symbol and title with copy-to-clipboard. Learn props and hex code points.

Fix an error caused by curly braces by replacing them with simple brackets and removing them, then add styles to the HTML to display the first 20 filtered emojis.

Add styles to a React component by applying a bottom border, padding, height, and font family Helvetica, then enhance with hover, emoji sizing, and inline layout for clear emoji results.

Add search functionality to filter the emoji list by wiring a handle change function into the app state and passing it to the search bar, limiting results to 15.

Modify the filter.js logic to support exact emoji name matches and keyword-based searches using emoji keywords. Verify with a smiley example and prepare for clipboard functionality next.

In the final refactor, the emoji search app integrates the clipboard library to copy emojis on click, initializes on mount and cleans up on unmount for deployment.

Push your React project to GitHub, create a repository, commit and push, then connect to Heroku to deploy the emoji search app with a buildpack and automatic deployments.