50 Days React Bootcamp: Build 50 Real World React Projects

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 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.

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.

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

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.

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 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 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 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.

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.

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.

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.

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.

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

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.

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.

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.

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 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.

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.

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.