React JS Bootcamp 2025: Build 2 Projects and Get Job-Ready

Explore React as a flexible front-end JavaScript library with a vast ecosystem of libraries for routing, state management, and form handling, enabling scalable apps.

Initialize a React application in a new folder using npm, choose TypeScript plus SWC, install dependencies, and run the dev server to view the app at localhost:5173.

Learn to conditionally render content using a boolean and ternary operator, switch between components and elements, and render a user list with map and keys in a TypeScript React setup.

Create functional components in React with TypeScript using React.FC for type-safe props and a basic button component. Import and render the button to demonstrate a functional component in TSX.

Learn to bind button click events in React with TypeScript, using onClick, typed synthetic events, and parent-child handlers with props for robust event handling and debugging.

Create a React user component, define a user interface for props, and implement destructuring, default values, and optional props to render name and age conditionally.

Use the useState hook to manage state in a React component, starting with a counter. Then build a to-do list with a string array.

Learn how the useRef hook accesses DOM elements and persists values across renders, with a hands-on demo of focusing an input and tracking render counts for performance optimizations.

Use the useContext hook to prevent prop drilling by creating a theme context, a provider, and a useTheme hook to share and toggle theme across components.

Define and use a global context to manage theming, implement a use theme hook, and build a nav bar that adapts background and text color with a theme toggle.

Learn how to use useMemo to memoize expensive calculations and useCallback to memoize functions, see them working in a React component with count and input state.

Implement a memoized input handler using useCallback with a change event. The hook returns a callback that only changes when its dependency array updates, ensuring stable functions across renders.

Learn to manage component state with the useReducer hook by defining a reducer, actions, and dispatching increment and decrement actions to update a counter.

Explore how the useLayoutEffect hook in React measures DOM size before the browser paints, using refs and bounding client rect to update state.

Explore data flow in React by passing props from a parent to a child and handling messages in TSX. Implement two-way communication via callbacks and lifting state up.

Explore lifting the state up in React by building two sibling components that share a common state in a parent, syncing input and display through update data and data props.

Install react router dom, set up browser router and routes in app.tsx with paths for /, /home, and /about, and implement a wildcard route to handle unmatched paths.

Learn to render components as pages for routes by creating landing and home page components, importing them, and adding a 404 not found page to handle unknown routes.

Learn to create nested routes in a React app by defining child routes inside the home component, rendering a products child with an outlet from react-router-dom to display it.

Learn to create protected routes in react routing by building an auth middleware that checks isAuth and redirects unauthorized users to the base route, then wrap routes to protect paths.

Learn to persist authentication state with local storage, implement login and logout, and use programmatic navigation with react-router-dom's useNavigate to guard routes and sync state.

Combine use context with a reducer and actions to manage a theme state, dispatching toggle theme to switch between light and dark for a cleaner, scalable context.

Implement error boundaries in React using a TypeScript class component. Catch errors and show a fallback UI to prevent a blank screen and provide user-friendly feedback.

Build a movie web app in React featuring a nav bar, search with dropdown, a top rated carousel, upcoming grid, trailers, and responsive design using Tailwind and Bootstrap.

initialize a new react project, install dependencies, and enable routing with react router dom; then create a src structure with components and pages and integrate tailwind and bootstrap via CDN.

Create the movie app navbar as your first component by adding a navbar folder with index.tsx, rendering it in app.tsx, and styling a logo and explore button with tailwind.

Create a homepage carousel in a React app by building a home slider and a carousel component with a black background, div slides, aspect-ratio and a bottom gradient overlay.

Create a carousel card with an image on the left and details on the right using flex and absolute positioning, including a title, overview, and thumbs-up vote count.

Explore TMDB API with an access token in authorization header to fetch movie lists by language and page, retrieve details and images, and prepare upcoming movies for the home carousel.

Fetch upcoming movies for the carousel on initial render with useEffect and axios using the access token; store results in carousal movies with backdrop, poster, title, overview, and vote count.

Pass the first movie data from the carousel to the carousel and modularize API calls by creating an Axios instance, an image path utility, and optional chaining for null data.

Make a movie carousel dynamic in React using Bootstrap, map movies, and apply an active class to first slide with optional chaining for post path, title, overview, and vote count.

Build a carousel component and home carousel to show the next three movies, upgrade poster quality to original from the TMDb database, and refactor constants and interfaces for carousel props.

Create a home carousel list component that powers the up next panel, showing the next three carousel movies by mapping over a next array managed with useState.

Continue building the home list for the movie app by wrapping the image, adding the title, overview, and vote count, and styling the carousal list with css.

Create a dynamic carousal list in a React movie app, using useState and useEffect to update the next three indexes and loop back to the zeroth.

Continue building the dynamic carousel list in the movie app by implementing a handle slide function, updating the selected index, and driving the next array and console logs.

Fetch the top rated movies using the axios instance and base url, store results with useState, and fetch on first render to populate the home top rated section.

Define a movie card interface with id, path, release date, title, vote average, and original language. Export and import this interface to render top-rated movie cards in the React app.

Create the top rated movies list component for the home page in a tsx file and pass movies as props; map to render six movie cards with a gradient overlay.

Build a movie list card in the React course project, rendering title, rating, language, and release date with data.title, data.vote_average (substring 0–3), and data.original_language, styled with overflow hidden and typography.

Improve the movie app by adding hover effects to the home carousel and the carousel list, using opacity changes and a hover state to underline titles.

Create and style a load more button component in a React movie app, add hover effects and responsive sizing, and prepare for fetching more top rated movies.

Build the explore page for a movie app with category filters (now playing, popular, top rated, upcoming), wire navigation via react-router-dom links, and map categories from a new constant.

Implement a category filter on the explore movie page to toggle now playing and popular movies via a React useState hook, with a 200 ms transition.

Fetch movies for the explore page from the tmdb api using categories like popular, top rated, upcoming, and now playing with useEffect and axios, handling errors as the filter updates.

Learn to fetch and filter movies in a React app by using category paths and a use state hook to store now playing, popular, top rated, and upcoming movies.

Integrate the explore page filter with the movie API by storing results in per-category useState hooks (now playing, popular, top rated, upcoming) and preparing to map them.

Create a dynamic movie list in React by passing movie data and category props, rendering now playing, popular, top rated, and upcoming sections with optional headings.

Learn to add a load more button for a movie filter in a React app, manage per-filter pages with useState, and fetch movies by page and category.

Build a React movie details page by reading the id from route params and displaying the corresponding details; enable clickable cards linking to details with the movie id.

Fetches movie details from the TMDB details API using the movie ID from route params, then logs the response data.

learn to build a movie details page in React by modeling a movie detail interface, storing api results in state, and rendering poster, title, release date, language, genres, and overview.

Build a movie details page in a React app by rendering the backdrop and poster with a gradient. Prepare to display the title, tagline, and overview alongside the poster.

Create a movie details section in a React app by placing the poster beside a details panel that shows the title, release year, tagline, overview, genres, rating, and language.

Create a trailers component for the movie details page, fetch and filter TMDB video data by trailer type using a movie id, and prepare for rendering with React YouTube.

Install and configure the react YouTube library to fetch and map movie trailers, then render each trailer with height and width options on the movie details page.

Create a similar movies component on the movie details page and fetch from the tmdb api using the current movie id. Trigger the fetch with useEffect when the id changes.

Builds a search filter to find movies by name using the carousal mini card and search list, with a use state and on change input handler.

Implement search feature in a React mobile app by calling the search API with a query. Use useEffect to fetch movies, handle errors, and populate a search list for carousal.

Build a search results carousel for a movie app by mapping the search list to carousel mini cards beneath the navbar, passing item and index, with responsive styling.

Build a movie search list in a React app, toggle the display with a navbar button, and handle enter key blur for search input.

Create a responsive navbar with tailwind breakpoints, adjusting search input width, logo scale, spacing, and explore button text across sm, md, lg, and xl sizes for a movie app.

Learn to make a movie app carousel responsive using bootstrap utilities, adjust heights with height full, switch image fit to contain or cover, tune posters and text sizes across breakpoints.

Learn to make the carousel list responsive across breakpoints using row and column layouts and conditional visibility. The lesson guides uncommenting, wrapping in a row, and adjusting cards.

Make home movie list responsive by adjusting grid columns and text sizes across breakpoints, fine-tuning margins and padding, and enabling the explore movie page and load more button to adapt.

Make the explore page responsive for the movie app by styling the filter and load more buttons, adjusting title and button sizes, padding, and gaps across breakpoints.

Create skeleton components for the carousel list of movies in a React movie app, using placeholder cards and responsive sizing to simulate loading states.

Build a details page skeleton for a movie app in React, with poster, title, tagline, and overview placeholders, toggled by params.id, including glow effects and a four-by-six poster.

Deploy a React app to Vercel cloud server by creating a GitHub repo, pushing code, connecting GitHub to Vercel, importing the project, and deploying to obtain a live link.

We built an interactive movie app All About Movies using React, the TMDB API, Axios, with responsive layouts via Tailwind CSS and Bootstrap, showcasing state management, routing, and API integration.

Learn to build an Instagram clone with React, TypeScript, Tailwind, Daisy, libraries, featuring a home screen with carousels, images, videos (play/pause, mute), a collapsible sidebar, dark mode, stories, reels.

Build an instagram clone with react, tailwind, and TypeScript, featuring carousels, reels, stories, dark mode, and a responsive mobile view powered by dynamic API data and fake JSON.

Learn to set up a fresh React project with Vite using npm create vite, name instagram_clone, select the React TS template, install packages, run npm run dev, and add axios.

Learn to install and configure tailwind CSS and daisy UI for a React project, then add axios, react-query, moment, and React Router DOM to enable routing and data handling.

Learn to build a React app with react-router-dom by creating a browser router, defining routes in TSX files, and wiring a layout with home, explore, reels, and story viewer paths.

Test and verify all routes in a React app by enabling outlet rendering for home, explore, and story viewer, with a fake navbar.

Explore creating TypeScript interfaces for React components, using context for sidebar and theme, and modeling reels, video files, posts, and users to enforce type safety.

Finish adding type-safe interfaces for components, including infinite scroll props, params, a query key, optional headers, and story props with id, username, avatar, stories, and scene.

Set up a sidebar context and provider in React with TypeScript, define a theme and sidebar value, persist the theme in local storage, and wrap the app with the provider.

Learn to style a sidebar and navbar using Tailwind CSS apply directives, including responsive hide/show rules, icons, image styling, hover states, and spacing for a polished UI.

Apply tailwind styling to a sidebar, build a responsive layout with conditional rendering using a ternary, and troubleshoot intermittent TypeScript issues while configuring overflow, scrollbar styling, and padding.

Learn to fix a TypeScript error and implement a collapsible sidebar in a React app by adding links using react-router-dom, integrating an Instagram icon, and toggling a dynamic search input.

Fix a TypeScript error in a collapsible sidebar by correcting a ternary to an empty string and implement a dynamic, conditional search input with icons and React Router links.

Build a conditional sidebar with explore, reels, messages, notifications, create, and profile links, using icons and avatars from public assets, plus a theme toggle for light or dark mode.

Complete the sidebar UI styling with padding, integrate theme icons, and implement a collapse toggle, preparing the navbar for the next video.

Build a home page suggestion section in a React app by rendering a flex container with space-between and mapping over user suggestions to display avatars and a follow button.

Build an infinite stories feed in a React TypeScript project with a use infinite query hook, install ten stack query, and load data from assets/story_data.json.

Finish implementing the useInfiniteStories hook by correctly importing dependencies, validating the response as an array, and defining start and end indices with get next page param.

Format the story list as an array, render story avatars with online/offline states, and navigate to dynamic story routes using useNavigate on click, with loading handling.

install the cane slider for the story viewer, load data with use infinite stories, drive slides, and manage current slide, progress key, and a timer ref for navigation, TypeScript compatible.

Implement the story viewer user interface by configuring a slider with timer refs, optional chaining, an auto slide duration of 8000, and cross button navigation to home.

Implement the main carousel by mapping pages to story props, using story.id as the key and tracking the center index with an 8000 ms linear auto-slide animation.

Develop two navigation buttons for a story viewer in React, enabling previous and next actions, RTL support, and animated progress using CSS keyframes and a BEM-style slider.

Build a story viewer carousel in React by rendering the username, avatar, and a blurred image, then navigate the slider and preview the home feed, reels, and explore.

Install react intersection observer and implement useInfiniteQuery to load posts in the feed with a page size of five from assets/post_data.json via axios. Validate data and prepare for the UI.

Implement infinite scroll in React using the intersection observer and fetchNextPage, checking hasNextPage and isFetchingNextPage. Manage active slide with useState and hash changes for seamless data loading.

Learn how to implement feed handlers in a React project by managing video posts with useRef, useState, and useEffect, including play/pause toggles and TypeScript typing for state mutations.

Learn to add a side effect for a feed with use effect, normalize post IDs, and manage loading and error states for a cleaner user interface flow.

Design the feed UI with responsive styling, set max width to 470 pixels, use flex layouts, and map over pages and posts to render avatars, usernames, images, and carousels.

Build a media carousel by mapping over media, handling URL and index, computing previous and next slides, and applying dynamic post IDs, slide IDs, and hover transitions.

Create a dynamic feed video player by mapping posts to slides, assigning unique slide IDs, and toggling playback with a video ref, including aria levels and dynamic styling.

Learn to refine a feed video player with Instagram-like controls, using post IDs and onClick actions to mutate state, toggle mute, and reveal actions for each post.

Develop a format number function for reels that returns an empty string for null or undefined and formats large numbers with k or b suffixes at one decimal place.

Fetches reels data by querying keywords like nature, travel, animals, and technology, then uses an infinite query to load videos with axios from the pixels API.

Learn to locate and retrieve the Pixel API key by logging in, navigating settings or API routes, and using provided resources, including Gmail or email login options.

Implement an infinity data flow with use query to fetch posts, manage loading and error states, and apply an intersection observer to auto fetch and render more videos.

Learn to build a reels UI by using useEffect and an IntersectionObserver with a 0.6 threshold to observe videos, handle loading and errors, and craft a responsive, snap-enabled UI.

Builds a React TypeScript video player that shows a 'no videos found for this query' message for empty results, then maps video files to render SD quality using ternaries.

Resolve a React reel player error by validating video file arrays and casting types, then conditionally render video sources with mute controls and post data checks.

Style a reels interface with an on-click button, absolute positioning, rounded shapes, and white text, plus a dynamic mute toggle. Render posts with avatar, username, title, and body.

Finish the reel page by implementing loading states, next reel navigation, and mute/unmute controls, while wiring refs and dynamic divs to paginate videos and prepare the explore page.

Finish the explore page by building a data fetching hook with get data utilities, using use query, axios, and dynamic params to render nature images.

This lecture guides building an explore page handler that fetches nature images from the pixels API, with query keys, URL and params, headers, and loading and error handling.

Build the explore page UI by applying centered styling and a responsive grid (two columns, three on md), then map over photos to render images with hover overlays and metadata.

Run the dev server, preview the explore and reals sections, note vertical images and possible silent reels from the API, and confirm the project works in this job-ready bootcamp.

Push the latest code to GitHub, build with npm run build, and deploy to Vercel or Netlify to get a deployment link, while handling common errors.