React Mastery Bootcamp : Build 60 Real-World React Projects

Builds the header and form components in a React app, using useState and useEffect to create a responsive user interface and a random data generator with bubble and selection sort.

Develop a React UI with a sort button and a vertical bars screen, using a data context provider to map data to Bar components with dynamic height and width calculations.

Explore implementing the bubble sort algorithm with two nested loops, swapping adjacent elements, and visualizing the process using sleep delays, red/green highlights, and an interactive UI.

Demonstrate implementing cocktail shaker sort, a two-direction double pointer bubble sort, with visualization using sleep and the green layer, and asynchronous steps showing swaps in the DOM.

Implement insertion sort by selecting a key from an unsorted array and inserting it into its correct position, using a nested loop, a deep copy buffer, and asynchronous updates.

Implement and visualize the selection sort in a React project by highlighting the current index in green, and swapping the smallest value from the rest into place with asynchronous sleep.

Learn to build a fruit card matching game in React, featuring a 4x5 tile grid, pair matching mechanics, and matched pairs turn green with CSS keyframe animations.

Build the header component in a React app, structuring a header wrapper with header fruit and heading fruit, and style it with a pink to cyan gradient and waves animation.

Build the game board UI by rendering a 2D array as row wrappers of flexboxes, with hidden, visible, and focus states, and trigger a rotate animation on click.

Learn how the game board state is a 4x5 two-dimensional array and how random fruits are generated and placed using useEffect, Math.random, and a fruits array.

implement the game logic for a fruit matching memory game, handling tile clicks, a 2d array of hidden, visible, focus, and matched states, and a half-second mismatch delay.

Track the start time with date.now, compute the total time as pairs are matched on the 4x5 board, and display the elapsed seconds in a window alert.

Create a Conway's Game of Life cellular automata simulator in React, using a 2D grid and simple rules to generate new generations, with setup steps and project structure.

Explore Conway's Game of Life, a cellular automata algorithm, and learn how Moore and von Neumann neighborhoods determine its four rules for generation changes.

Build a header component with a left heading and a right two-button wrapper, install and use the Poppins font via fonts.google.com, using flexbox and responsive vh padding.

Build a board component with a two-dimensional grid, enabling click to activate pixels and quick fill with the Q key, using React state and useEffect.

Explore implementing the fill and quick fill functions on a React board, toggling pixels via click or mouseover with Q to enable, for precise drawing.

Implement the Conway Game of Life in a React app by initializing a 2d board, using Moore's neighborhood, and updating with a step function via buffer and reference boards.

Explore Conway's Game of Life patterns, including still lifes, oscillators, and spaceships, with examples like the two by two square, beehive, cross, blinker, beacon, pulsar, decathlon, glider, and lightweight spaceship.

Build a stock market app in React with Chart.js to visualize open high low close data and a search interface.

Install the three dependencies—react Chart.js, react Chart.js two, and axis—via npm, then check package.json for these entries; npm installs the latest versions by default.

Build and style a dynamic header component for a stock search app in React, featuring a black header, search input, and action button driven by props and CSS.

Obtain a free Alpha Vantage api key and integrate the api. fetch time series daily data via axios using the symbol and key, then prepare data for visualization.

Store time series stock data in React state by parsing API results into day interval labels and open, high, low, and close datasets for two charts.

Plot OHLC data from API in React using Chart.js by converting to day interval state with labels, and render two charts for open/high/low/close.

Learn to build a typing mask game with React.js, featuring a header with time and WPM, a word screen, and live green/red input feedback, plus a guided project setup.

Build the header component showing time remaining and best time as props, using useState and useEffect to manage state and store high score in localStorage.

Learn how the word.js asset file exports a constant words array and renders random words onto the screen, with an assets folder, a type-in input, and noun/verb/adjective options.

Builds a responsive screen component that renders 50 random words from the words.js assets into a 5 by 10 grid, storing them in data and segmenting into a 2d array.

Learn to implement the input bar in a React app by wiring a text input to state, showing the typed words on screen, and updating screen via an onChange handler.

Implement the game logic in screen.js: start the timer on first input, validate the typed word against data[counter] on space, update score, and color correct words green or incorrect red.

Calculate the WPM score in a 30-second typing game and understand how the timer stops, with high scores saved to local storage and new words loaded.

Build a message board app with React.js and React Router Dom, including a header, a create message page, and setup with Create React App, VS Code, components and styles folders.

Learn how routing works in this React app using React Router Dom, wrap the app in BrowserRouter, define routes with path and element, and add a fallback.

Build the header component in a React app with React Router links to navigate slash all, science, music, movie, sports, and create, styling with header.css and Poppins font.

Learn to build the create component, manage message and board checkboxes, generate a timestamp, and store new posts in local storage via a prop-driven submit flow.

Explore how to implement science and music boards in a React app by wiring props, filtering data by board booleans, and rendering messages with shared css.

Create the sports board and movie board components in React by filtering props data for sports and movies and rendering messages with time, board details, and empty state handling.

Create the all boards component by iterating over the boards data and mapping props.data to render all messages, unlike the filtered boards that show only specific keys.

Build a fluid simulator in React.js with a configurable settings bar, while learning basics of Newton's first law, Navier-Stokes, and fluid dynamics, and setting up src with components and styles.

Explore the Navier-Stokes equations and Newton's first law to update fluid velocity frame by frame, enforce zero velocity divergence on a staggered grid, and place pressure at cell centers.

Explore the four steps of a fluid simulator—velocity updation, divergence-based production with Navier-Stokes, advection on a staggered grid, and rendering with optional pressure-based color coding.

Begin coding the full project by wiring the main wrapper to the screen and settings components and organizing src with components and styles for the fluid simulation.

Explore how the settings component uses props to pass state and setter functions, controlling color inversion, tunnel sources, diameter, velocity, and the Gauss-Seidel iteration constant.

Explore how the screen component acts as a middleman between the main component and the fluid.js core, initializing settings and handling user drag interactions on the canvas.

Explore the pre-setup and settings initialization functions in fluid.js, setting up the canvas and 2D context, enabling willReadFrequently, computing scale, and syncing props with useEffect for the fluid simulator.

Define and export a fluid class with a constructor that takes horizontal count, vertical count, and grid spacing, initializing velocity, pressure, smoke, and cell state arrays for a fluid simulation.

Implement velocity updation uses Newton's first law to update x and y velocity components in a fluid simulation, controlled by delta t and gravity, for active cells while skipping walls.

Implement the projection step to compute divergence, enforce incompressibility, and solve the pressure field, updating velocities via Gauss-Seidel and delta t.

Apply the advection step in fluid simulation by updating velocity fields with semi-Lagrangian methods, using grid spacing, wall checks, and velocity components u and v.

Render fluid particles on a canvas by implementing the render and the get color code function, compute min/max pressure, map to rgb colors, and draw obstacles as circles or squares.

Describe how the setup simulation function initializes the fluid domain, sets delta time and density, and applies starting velocities, with helper functions managing tunnels, diameters, and obstacles.

Provide a walkthrough of fluid simulation app, showing how to adjust invert color scheme, fluid sources, tunnel and obstacle color and shape settings, and Gauss-Seidel iterations for performance and realism.

Learn to build a personal diary application in react.js with a header, date option, and customizable font size, text color, and page color.

Build the header component for a React app, styling with CSS and flexbox, and pass date via props to enable a persistent date input in a modular component structure.

Create the page component that renders the tools toolbar and a text area, with state for size, text color, and page color, and persist data in local storage by date.

Implement a toolbar that controls font size, text color, and page color. Use React state and setters to update size, color, and apply changes.

Implement the remaining toolbar features by wiring use state for text color and page color with their setters, then update document styles on change.

Explore using local storage for persistence in a React app, including Json.stringify and Json.parse to store and retrieve date-keyed data like a diary.

Build a rubik's cube scramble and timer app in React.js, featuring a header, scramble generator, focus timer, history, and a performance chart; set up with Create React app.

Learn how to build a header component in React, pass props for the scramble algorithm, and implement a new scramble button with basic CSS styling and hover effects.

Learn how the scramble algorithm generates random Rubik's cube sequences using cube notation and supplements, and how it integrates with the header to display new scrambles.

Explore the application layout with header, timer, and history components; the timer wraps the start and timer screens in a 70/30 split and history uses a line chart.

Create a timer element in a React app that starts and stops with the spacebar, computes swing from consecutive solves, and stores solve data in local storage via JSON.

Create a functioning statistics screen and start screen component by building a timer history view, computing render data from main data, and rendering a live line chart with react-chartjs-2.