React Mega Course: Build 50 Real World Projects in 50 Days

Build an e-commerce site from scratch with React, including header, homepage, checkout, and login pages, using state hooks and Firebase authentication, then deploy with Firebase.

Get started with React by creating a project folder, using terminal and Visual Studio Code, then run npx create-react-app . to scaffold the app and launch at local host 3000.

Design and implement a complete eShop header in React by splitting it into header logo, search bar, and navigation with sign-in and basket icons. Build reusable components, pass data with props, use React Context API, integrate Material UI icons, and style with CSS for a responsive header.

Create the eShop home page in React by building a home and product components, styling with CSS to display rows of products with images, ratings, and add-to-basket buttons.

Learn to render dynamic data in React using props to customize a product component with title, price, rating, and image. Pass props as key-value pairs and map ratings to stars.

Master routing in a React app with react-router-dom, setting up browser router and routes for home and checkout, and using links with a header for navigation.

Build an eShop checkout page with a two-column layout, left shopping basket and right subtotal, using checkout product components, currency format, and state hooks for add/remove from basket.

Learn to implement a data layer with the React Context API, using a state provider and reducer to manage add to basket and remove from basket across components.

Learn to add items to basket and render them in checkout by mapping over the data layer with use state value and dispatch, and compute the total basket amount.

Implement remove from basket functionality by dispatching a remove action with the item id, updating the basket and subtotal dynamically through the data layer in React.

Implement Firebase-based authentication for an e-commerce app with email and password sign in and sign up. Set up Firebase, configure the database, and wire login flows in React.

Deploy your React app with Firebase by logging in via the CLI, initializing hosting, building the project with npm run build, and publishing with firebase deploy to a live URL.

Create a react project in a lowercase folder and scaffold it with npm's create-react-app. Start the server, trim boilerplate, and render hello world to begin the chat app.

Learn how to build a React chat feed by rendering messages, creating components for my message and their message, message form, and login, and handling props and audio notifications.

Learn to build a chat feed in React by wiring chart feed components, rendering messages, managing props, and implementing read receipts and a message form.

Build a chat interface by creating my message and their message components, rendering messages from the chat engine props, and conditionally displaying image attachments or text.

Build their message component by handling two props — messages and last message — detect the first user message, and render images, attachments, or plaintext in the chat feed.

Implement read receipts in a chat feed by building a render function that places messages on the right for your messages and left for others, mapping people to avatars.

Build a message form component that lets users type messages or send attachments, including images, videos, and PDFs, using React state hooks and chat engine functions.

Build and finalize a login form component in a React chat app using Axios REST APIs; manage username and password with state, handle submit, use localStorage, and implement error handling.

Finish the project by validating the chat app, debugging login via local storage, and enabling message and image exchanges within a group chat using the chat engine.

Build a movie app with React, featuring search, add and remove from favorites, and local storage persistence; fetch data from IMDb api and use Bootstrap and hooks.

Create a new React project in a lowercase folder, clean boilerplate, render a hello world component, and start server on port 3000 to build movies list and remove from favorites.

Fetch movie data from the OMDb API in multiple languages, activate your API key, test calls with Postman, and practice searching titles and adding to favorites.

Explore how to render movie lists from an IMDb API, implement a search feature, and build reusable components like movie list heading and search box in the React mega course.

Implement a dynamic search feature that fetches movies from an API based on user input, using fetch, async/await, and useEffect to update and render movie posters.

Learn to implement add to favorites, remove from favorites, and persist favorites using local storage in a React movie list app, with dynamic search-based rendering and hooks.

Implement the remove from favorites feature by creating a remove favorite component and using a filter to strip the clicked item from the favorites list; persist changes to local storage.

Learn how to persist a React movie favorites list with local storage by creating a data structure, saving JSON objects, and updating the list through add and remove operations.

Build a YouTube-like video sharing platform from scratch with React, fetch videos via the YouTube API using Axios, and craft a page with list and detail components using Material UI.

Learn to set up a React app from a folder using create-react-app, install dependencies with npm, and start the dev server to view a simple video sharing app.

Learn to implement a responsive material UI grid in React, using container and item with breakpoints, spacing, and build search bar, video detail, and video list components using YouTube data.

Set up the YouTube Data API v3 with axios, create a base URL, obtain an API key from the Google developer console, and prepare credentials with environment variables for use.

Build a search bar component in React using material UI and useState, wiring on-change, on-key-press, and on-submit to fetch YouTube results and export components via an index file.

Store YouTube API results in a videos state with useState, update via setVideos, and manage a selected video passed to VideoDetail to render the main video and a list.

Build a video detail component that displays a selected YouTube video with an iframe, using Material UI and prop-driven data (id, title, channel, description) via object destructuring.

Build a video list and video item components in React, display the videos on the right, and show the selected video in an iframe on the left.

Explore building a video item component in React, managing props like video and onSelectVideo with transfer. Use material ui paper and typography and connect to the YouTube API for playback.

Build a complete video sharing app with the YouTube API using React, Axios, and Material UI, featuring a search bar, video list, and video detail components.

Build a to-do list app in React from scratch, covering project setup, Material UI and Axios, and four components (header, create area, node, footer) while learning hooks and local storage.

Learn to scaffold a React app using the create React script, explore the components folder with create area, header, and Node.js components, apply styling, and run it with npm start.

Create a header component for the React app using material UI icons, organized in a components folder and styled with styles.css.

Build a create area component with a title input and content text area, manage state with useState, and handle onChange events to store notes using the spread operator.

Learn to manage notes with React state hooks, store note objects in an array, and submit notes via a prop-driven add note function, using Material UI Fab and plus icon.

Submit the note using the submit note function, update the notes state with setNotes and the spread operator of previous notes plus the new item.

Style the create area of the to-do list by applying CSS to the form and inputs, using trial-and-error adjustments of margins, padding, borders, and shadows for a polished UI.

Create a node component to render to-do items by passing title and content as props, map over notes, and display a delete icon from material icons.

Delete a todo item by clicking a delete button that calls a handle function, passes the item id to the on delete prop, and filters the notes array.

Create and integrate a dynamic footer component in React that shows a copyright year updated with the current date, and apply gradient styling and background texture for the page footer.

Style the footer and node component with CSS, using absolute positioning and bottom alignment. Highlight React concepts like state management and map, filter, and reduce for business logic.

Launch a React app by creating a project folder, using Visual Studio Code, and running npx create-react-app, then customize src and render components with props and hooks.

Create a redux toolkit user slice to track isSignedIn, userData, searchInput, and blockData, with reducers for set sign in, set user data, set search input, and set block data.

learn to set up redux toolkit in store.js and index.js, wire react-redux and google login, and configure the user slice with a provider.

Learn to build a navbar component in a React app, integrating Material UI and Google login, displaying user avatar, search input, and Redux-driven login/logout flows.

Finish the navbar by wiring avatar and user data from Redux, displaying image or name, and enabling Google login/logout. Enable blog rendering via Genius API search.

Render news blocks by integrating the Genius API, fetching JSON with Axios in a blog component using useEffect and dispatching state with useDispatch and useSelector.

Finish a multi-step React project by configuring the store and user slice with Redux Toolkit, implementing Google login, homepage and blog components, and consuming API endpoints.

Explore building a secure social networking website from scratch using MongoDB, Express, Node.js, and React, implementing six layers of security, authentication, and social posting features.

Initialize the node package manager with npm init and install express and body-parser. Configure public and views folders with ejs and create routes for home, login, and register.

learn to implement database encryption in a mongoose app using the mongoose encryption plugin, encrypting the password field using a secret key and encrypting on save and decrypting on find.

Learn how to hide encryption keys and API keys by storing them in a .env file with the dotenv package, accessed via process.env, and gitignore to prevent exposure.

Learn how password hashing converts a password into an MD5 hash, stores only the hash, and compares login attempts to the stored value, while noting dictionary attacks and salting.

Explore how salting and hashing passwords protect data by appending a random salt, hashing with the salt, and storing both in the database to thwart dictionary attacks and slow cracking.

Learn how cookies and sessions enable persistent user data across requests, using browser-server interactions, post and get requests, and ecommerce cart examples like Amazon.

Implement Google OAuth authentication and social login using Passport, configuring Google Developer Console credentials, handling authorization codes and access tokens, and serializing users for secure sign-in.

Build a resume and portfolio site from scratch using the React js framework, with reusable components for personal info, skills, experience, and education, plus social links and a GitHub integration.

Create the React app in the current directory with a single command, install dependencies, and remove boilerplate to start with a clean white project, then run npm start on localhost:3000.

Install and configure key dependencies like materialize css and react-router-dom, then create and render modular components in a multi-page app using react dom and the app component.

Learn how props pass data to components and how the home component renders multiple imported components within a Bootstrap grid, using a browser router and HTML attributes.

Design a navbar component using bootstrap links and icons to navigate between home, skills, experiences, education, and portfolio, with routing and responsive behavior explained.

Explore the about component and related education and experience components within a React project, examining html structure, bootstrap styling, and object structuring for working with APIs.

Learn the basics of destructuring assignments for arrays and objects, including how to map values to variables and use the spread operator, with practical API examples.

Finish a real-world React project by reviewing component structure, props, and state management, plus npm install, package.json basics, and deploying to Heroku or Firebase.

Build an emoji search app in React, enabling users to search and copy emojis, view a 20-emoji dashboard with keyword-based results, and deploy the app for worldwide access.

Create a React application using the Facebook create React app utility and set up Node and code editor. Start the app with npm start to view it in the browser.

Create a dashboard folder in the source directory with subfolders for emojis, header, and the search bar. Add emoji files and include emoji json from assets to populate the dashboard.

Discover how to build a React app with class components, import header, search bar, and emoji results, and use pure components to avoid unnecessary renders.

Configure a react g6 header by building a class component and rendering images with alt text. Include emoji, a search bar, header css, and ensure image sizing at least 32.

Apply header styling by setting padding, relative positioning, normal font weight, and a font family at 32px, centered with color #333, then adjust header images and prepare the search bar.

Add and style a search bar as a class component, importing the bar and CSS, with a placeholder emoji input under the header.

create and manage state to render emoji results; integrate a filter component to narrow the emoji list and display up to 20 items via slicing.

pass emoji data from state to the emoji results component and map it to emoji result rows using symbol, title, and a unique key.

Fix a code error by replacing curly braces with simple brackets, then add css styles to the app to style the html listing of the first 20 filtered emojis.

Add a search feature to the emoji list by creating a handleChange function in app state, wiring it to the search bar, and limiting results to 15.

Improve the emoji search in filter.js by adding keyword-based filtering alongside exact name matches, enabling results when users search by keywords, and prepare for clipboard functionality.

Learn to implement emoji copy functionality by integrating the clipboard library in a 90% complete app. Mounts and destroys clipboard to avoid memory leaks and enables clicking emoji to copy.

Push your code to a new GitHub repository, then deploy the emoji search app on Heroku by connecting GitHub, adding a React buildpack, and enabling automatic deploys.