React JS Bootcamp:Build Netflix,YouTube Clone and 3 Projects

Explore the fundamentals of TanStack Query and its hooks like useQuery and the query client provider. Master CRUD with useMutation, and cover dependent queries, pagination, cache time, and error handling.

Discover TanStack Query's effortless data fetching and caching, automatic background refreshing, and robust mutation with error handling and TypeScript support, plus pagination and infinite scrolling.

Set up a React TypeScript project, install TanStack Query and Axios, and run the dev server to preview the fundamentals of TanStack Query in the next video.

Set up the TanStack Query client and provider in your React project, then use the useQuery hook with Axios to fetch todos from JSONPlaceholder.

Learn to use the useQuery hook to fetch data by passing a query key and a query function, then destructure data and isPending to manage the loading state.

Learn to handle errors and successful data fetching with ten Stack Query, including displaying error messages, simulating network errors, and rendering success states using ternary operators.

Integrate TypeScript for type checking and type safety by defining a Todo interface, mapping data, and casting types to ensure safe to-do rendering with error handling.

Learn how tanstack query uses a query key as a unique identifier to fetch data from URLs and map posts (id, title, body) and todos with a query client provider.

Learn to use TanStack devtools to view keys, inspect the ten stack console, and monitor data fetches, data status, and API usage for debugging and optimization.

Modularize your React app by creating query options for to do and post queries, enabling conditional fetching with enable and wiring axios calls to fetch data on the home page.

Learn the difference between stale time and cache time in query options, including how stale time keeps data fresh and cache time controls browser caching, with practical implementation tips.

Learn to implement manual and background fetching in React by refetching on button click and auto refetching every 10 seconds, with the button disabled during fetch and a loading indicator.

Learn to use the useMutation hook for post operations, creating a todo via axios post, managing title state, and invalidating queries with a query client for real-time user interface updates.

Learn to implement and debug a post mutation with the useMutation hook in React JS, handling object parameters, query keys, and network errors, and preview results from the post API.

Master the update to-do workflow using useMutation, sending a put request with a dynamic id and title, handling loading, success, and error states in React.

Master the delete operation using the useMutation hook in ten stack query, handling numeric IDs, updating the UI, and displaying success messages.

Learn how to invalidate queries and trigger refetch after mutations using the query system in a to-do app, by wiring useQuery and useMutation with onSuccess.

Demonstrates invalidating and refetching queries with a query client after a mutation, using to-dos data and the use query hook to fetch data, with automatic refetch on success.

Implement optimistic updates for to-dos and rollback on error using a mutation. Cancel outgoing queries, preserve previous data, and restore it with set query data when errors occur.

Explore completing optimistic rollbacks by debugging type errors, applying type casting, and implementing rollback safety for mutations and deletes in a to-do app, with notes on json placeholder limitations.

Explore global and optimized error handling in a React Query setup by configuring a query client, handling error events, logging errors, and using the React Query dev tools.

Implement local error handling with a React error boundary, using axios for get/post requests and useQuery; build a reusable error fallback to gracefully handle loading and errors.

Explore dependent queries by chaining a users query with related posts using the use query hook, query options, and an enabled flag.

Explore dependent query chaining by building a get single post function that fetches data based on a post id, using a dynamic link and a query key.

Implement pagination in a query by building an async axios get with page and limit, wiring useQuery with a posts key array and next/previous page handling.

Implement a UI for pagination of posts, showing a list of posts with titles and excerpts, and previous/next controls that reflect fetching state and placeholder data.

Explore prefetching with TanStack Query, using prefetchQuery and useQuery to load a list of users and a selected user by id, with Axios data fetching and loading state.

complete the ui for prefetching user data by hovering over a list to trigger mouse enter. on click, reveal the selected user's name, email, phone, and website using state.

Build infinite scrolling with useInfiniteQuery to load more products via a load more button, using Axios get with limit and page and a proper query key.

Build an infinite query UI in React by rendering paged posts, fetching the next page asynchronously, and using a load more button with has next page and is fetching indicators.

Learn to build custom hooks for data fetching and mutations in React using use query and use mutation, including fetch users and add post with axios.

Consume query and mutation hooks to fetch users and add posts, while handling submit with title, body, and user id, and displaying loading and success states.

Access bonus content for React JS bootcamp, covering advanced basics and intermediate topics, including copying code, fixing network errors, and running the infinite query in Netflix and YouTube clone projects.

Explore how Redux Toolkit reduces boilerplate and simplifies store setup, enabling safe immutable state updates with create slice, configure store, and create async thunk.

Learn how Redux Toolkit simplifies Redux by organizing state into a store and slices, with createSlice and configureStore. Dispatch actions and select data with useDispatch and useSelector, while reducing boilerplate.

This lecture walks through setting up a react app, installing redux toolkit and react-redux, creating a redux store with configureStore, and defining root state and app dispatch types.

Learn to build a Redux Toolkit counter feature with a counter slice, initial state, and reducers for increment, decrement, increment by amount via payload, and reset.

Learn to implement a Redux Toolkit workflow with React by creating a counter slice, wiring the store, and building typed hooks for dispatch and selector in a React component.

Learn to use redux toolkit devtools to debug a counter app, inspect actions, state changes, payloads, traces, and real-time charts for clear visual debugging.

Learn to extend a Redux Toolkit store by adding a theme slice that toggles between light and dark modes, export actions and selectors, and integrate with a theme demo component.

Learn how to implement a theme slice that toggles between light, dark, and system modes in a React Redux app, including a theme util, initialize logic, and system preference handling.

Build an authentication system by creating an auth slice with login and logout reducers, user id and is authenticated state, and test it in a component wired to the store.

Learn to add an asynchronous thunk in Redux Toolkit to fetch users from a JSON placeholder API, and manage pending, fulfilled, and rejected states with extra reducers.

Register a user reducer and build a users component that fetches users with a thunk, handling idle, loading, and failed states, and displaying emails and usernames with a retry.

Learn to build a CRUD back-end with express and MongoDB, create a simple server, connect to MongoDB with mongoose, and configure dotenv to prepare routes and middleware for frontend integration.

Create and wire api routes with express to manage posts, including get all posts, create post, and delete post, using a mongoose post model with timestamps. Test with postman.

Test a local API with Postman using get, post, and delete at /api/posts on port 3000, then integrate the frontend with optimistic UI and Redux async thunks.

Learn how to implement optimistic UI for posts by building a Redux slice in TypeScript, defining post interfaces and status states, and explaining the end-to-end optimistic update workflow.

Implement optimistic user interface updates for posts by adding an is optimistic field, a temp id, and deletion state, then insert an optimistic post at the top with unshift.

Create async thunks for posts in a Redux Toolkit slice, including fetch all posts, create post, and delete post with Axios API calls and optimistic updates.

Add extra reducers for post operations using thunks to handle fetch, create, and delete with pending, fulfilled, and rejected states, syncing server data and removing optimistic post.

Create and optimize a posts feature by building a memoized post component, a post list with fetch and reset logic, and error handling with dismiss and retry.

Debug and refine the posts component logic by validating payload as an array, returning response data, and managing loading, error, and no-posts states for a robust post list.

Map posts into a post container, render post cards with the title, content, and author, and show optimistic and deleting badges using Redux for post actions.

Build a React post creation form with local state and optimistic updates, handling submit events and integrating the form with the app to create and display posts from the frontend.

Implement optimistic post creation with a submitting flag and title/content validation, using a temp id for instant updates, replacing it with server data on success, then reset the form.

Implement optimistic post creation in redux, manage pending and fulfilled states, and simulate delays to visualize flow, including error handling and rollback of optimistic posts.

Implement optimistic post updates and delete handling using redux toolkit with simulated network delays. Simulate errors, and show how create entity adapter enables normalized states and automatic selectors for posts.

Explore implementing Redux Toolkit's create entity adapter for posts, including extending entity state, initializing with getInitialState, and using add one, add many, set one, remove many, upsert operations with selectors.

Learn to manage posts with create entity adapter, selectors, and optimistic updates; sort posts by createdat to surface the newest first, and explore entities and counts.

Set up a local .env with the API base via process.env to clean API calls. Explore redux toolkit topics like custom middlewares, throttle and debounce actions, and a custom logger.

learn to create custom middlewares in redux toolkit with a logger, showing how actions flow from dispatch to the store state, and how to add throttle and debouncing middlewares.

Explore debouncing and throttling middleware for Redux in TypeScript, delaying or limiting actions to optimize searches and API calls, with practical examples like search inputs and guarded payments.

Register and test debounce and throttle middlewares in the store, manage their order with prepend and concat, and verify behavior using a middleware test component.

Implement a custom logger with useEffect to capture Redux actions, track debounce and throttle dispatch counts, and explore middleware behavior in a React app.

Harness Redux Toolkit and RTK Query to replace createAsyncThunk with createApi, define endpoints, and auto-generate hooks for fetching, creating, and deleting posts with caching.

Build post management with redux toolkit api slice, implement get, create, and delete posts, enable polling and caching, and monitor loading and error states for real-time updates.

Write and run unit tests for Redux counter and post slices with Jest, configuring Babel and TypeScript, using mocks and MSW for a mock API.

Explore testing async actions with Jest by building counter and post slice tests, mocking APIs, and configuring a test environment with jsdom, Babel, and npm scripts.

Learn to implement optimistic updates for creating posts, manage ids and entities in the post reducer, and test async thunk dispatches to track loading states and errors.

Deploys a React app to Vercel by configuring vercel.json and routing api requests to index.js as a serverless function. Validates health check and deploys backend and frontend with Vercel CLI.

Build a Netflix clone UI from scratch using React, TypeScript, Tailwind and CSS, fetching data from TMDB APIs to enable play, modal, similar movies, search, and favorites.

Create a new project folder and initialize a React app with the wheat bundler and TypeScript. Install dependencies, run the dev server, and integrate Tailwind CSS with configuration updates.

Extend tailwind config to add a font family and a custom dark background; load sharp via fonts cdn and create components and pages (home, search, watch) with tsx and routing.

Build a React navigation bar and routing with react-router-dom, linking the Netflix logo and menu items—home, TV shows, movies, watch, search, and my list.

Define application routes in app.tsx to enable navbar navigation among home, watch, my list, search, and not found pages, and ensure the navbar stays visible while debugging syntax errors.

Build a responsive navbar with navigation links, a toggleable search input driven by isSearchActive, and a profile image plus Lucid React icons.

Transform a large navbar into a responsive mobile menu with a hamburger toggle, using useState in TypeScript, conditional classes, lg:hidden, and Lucid React icons for close.

Enhance the navigation bar by fixing alignment, enabling the hamburger menu, and implementing a toggle search with two input refs and TypeScript typing to auto-focus the mobile input.

finalize the mobile navbar by implementing a toggleable menu with a hamburger icon, close behavior, and focus, while wiring a search query with use state and handle search keyboard event.

Obtain a TMDB API key, create an API wrapper with axios in TypeScript, store key in a dot env file, and fetch movie data for your Netflix and YouTube clone.

Create a reusable axios instance with a base URL and api key, define a generic get method, and implement centralized try-catch error handling for the tmdb api's fetch popular movies.

Extend your React movie app by adding trending and top-rated APIs plus genres. Define typed interfaces and wire everything through a custom API wrapper and context hook for global access.

Structure API calls for a movie app by loading popular, top rated, and trending movies with Promise.all, fetch genres, and store genre with movies in state for context sharing.

Design a movie context in TypeScript by creating a movie context, provider, and use movie context hook; manage selected movie, popular, top rated, and trending movies, plus error handling.

Learn to implement a movie context in a React app by wrapping the app with a provider, creating a main content component, and consuming popular, top rated, and trending movies.

Design a hero component for the home view using the selected movie and a gradient overlay. Render a backdrop image from the TMDB API and truncate long titles for mobile.

Continue designing the hero section by adding a truncated, responsive overview paragraph and play/info buttons using Lucid React icons. Prepare the gradient background for scrolling and future video player integration.

Track page scroll with useEffect and a sticky useState flag to toggle a black navbar with a subtle top gradient and large shadow.

Create a reusable carousal component in a React TSX project, accepting a title and movie array, with horizontal snap scrolling and left/right navigation buttons using Tailwind.

Learn to build a React carousel by rendering movie cards from an items array, using useRef for the carousel container, handling scroll events, and mapping item titles into styled cards.

Define a reusable card component in React with a movie array prop, rendering each item’s backdrop path and title. Build a responsive carousel with conditional scroll controls.

Finish implementing all carousels for top rated, popular, and trending movies, map genres to movie lists, and feed them to the Carousel component for a responsive Netflix-style UI.

Fix carousel navigation by adding a scroll state and useEffect with a resize observer, and extend tailwind breakpoints to keep navigation icons visible across devices.

Install react-player and create a video player component with video id, mute, pip, and custom height, then apply dynamic styling and embed YouTube URLs for playback.

Fetch YouTube trailer URLs from the TMDB API and connect them to the React video player. Build the trailer URL state and conditional rendering for playback.

fix the video player in the hero section by conditionally rendering the trailer when available and the image otherwise, wiring playing, volume, mute, and loop props for a responsive experience.

Learn to control the video player's mute and unmute from outside the hero by adding a playerMuted state, a toggle function, and wiring isMuted with a Lucid React volume icon.

Create a dedicated card context to manage pop-up state for hover-based interactions, including item, is hovered, cardId, and optional position; implement provider and useCardContext hook to wire it into app.

Design a React pop up card component in TSX with hovered boolean and x and y numeric props, applying dynamic styles, gradients, shadows, and scale and opacity animations for popups.

Develop a pop-up card in React that uses mouse enter/leave events, hover state, ellipsis truncation, and a mute toggle to optionally play a trailer via a video player.

Develop a pop up card with video playback or poster image controlled by image URL state, provide no image fallback, link to watch trailer, and a favorite toggle with icons.

Learn to complete a pop up card user interface in a react js project by adding a plus and thumbs up button, a chevron down, and flex-based meta details.

Create a dynamic pop-up card that follows the hovered item by handling mouse events, using a card context for state and position, and passing item data.

Map dynamic data to the hover card in real-time, using useEffect and useState to fetch movie data and TMDB trailers, update image URLs and titles, and manage hover behavior.

Learn to mute trailers on hover and add movies to a favorites list using a utilities context with local storage, a movies list, and a custom hook.

Learn to implement add-to-favorite functionality in a pop-up card using a local storage-backed movie list, toggle favorites, and reflect changes in the my list feature.

designs and integrates a modal component in a React TSX app, using an isOpen flag, onClose handler, and movie data with a trailer URL, and renders conditionally.

Design a responsive modal component that opens on click, closes via an onClose prop, and renders when a video id exists, featuring a gradient layer and a play button.

Learn to implement modal component buttons in a React app by wiring click listeners, toggling add-to-favorites with context and local storage, and adding responsive controls with icons and hover borders.

Continue developing the modal to render the video player, binding the video id and mute state, and map movie data into the modal for responsive, gradient-enhanced details.

Convert movie detail JSON to TypeScript types using a JSON to TS extension, then map vote average, runtime, genres, languages, and 4K indicators into a movie modal with an overview.

Open a dynamic modal by clicking info or chevrons, fetch and display the selected movie and its similar movies, using a movie context to manage the modal open state.

Dynamically map modal data and ensure the pop-up closes when opening a modal, then fetch trailer, details, and similar movies from TMDB APIs to render video or no video available.

Learn to build a modal component with dynamic movie details data and similar movies mapping, manage state with useState, handle API data, and render loading and not found states.

Build a similar movie card component using tsx, define props (id, title, description, image url, duration), and implement image, gradient overlay, bottom title, and movie context integration.

Map movie data to a 12-item similar movies card grid with a responsive play button, fetch trailers via tmdb api, and navigate to the watch page.

Apply a dark background, extra small text, and borders to movie UI; add a random duration function in utils context for dynamic runtimes; hide scroll bars with Tailwind and CSS.

Refine the modal and popup cards by finalizing the model, wiring stop-propagation event listeners, and using useNavigate to the watch page with movie.videoID, plus title truncation for mobile.

Design a watch page in a React app by wiring navigation to a dynamic route, extracting the id, rendering a video player with the trailer url, and not found fallback.

Build a custom 404 not found page component in a React app by wiring a not found prop, styling with flex and centered content, and adding a home navigation button.

Build the my list page by mapping the movie list from the utility context, re-rendering on changes with useEffect, and showing 'no movies found' when empty.

Implement search in a React app by filtering movies with a backdrop, encoding and passing the query in the URL, fetching tmdb results, and rendering cards.

Add toast notifications with React Hot Toast to display error and success messages, configure position and variants, prevent duplicates with IDs, and ensure responsive behavior across devices.

Learn to deploy a completed react app by updating index.html and favicon, push code to GitHub, and deploy to Vercel with environment variables, then verify responsiveness and live hosting.

Explore how the YouTube clone project uses React and TypeScript with Bootstrap and Tailwind CSS to build a responsive interface with off canvas sidebar, routing, infinite scroll, and iframe playback.

Initialize a React JS project with TypeScript, install React Router DOM, set up src structure with components, pages, and utils, and integrate Tailwind and Bootstrap for a YouTube clone.

Build a navbar component for a YouTube clone using react-icons, integrate it in app.tsx, and style a dark header with a hamburger, YouTube logo, and center search form.

Design and center a search input in the navbar of a YouTube clone using React, Tailwind styling, and a search button with a React Icons search icon.

Add a close icon to the search field by wrapping the input, using a React Icons library close icon, and styling with flex alignment and cursor pointer.

Learn to build a responsive sidebar with bootstrap offcanvas, toggleable by a hamburger, featuring category icons in a React TSX app.

In this lesson, learn to build a sidebar component for a YouTube clone by creating a categories object with main and category links, assigning icons, names, and filter tags.

Design a responsive YouTube clone sidebar by mapping category links, adding hamburger and YouTube icons, and enabling outside-click closing with separated main and category sections.

Create the home page with three video cards in a row for a YouTube clone, featuring a thumbnail, duration badge, and channel details.

Create a reusable home page video card component displaying the video title, channel name, views, and age using flex layouts, then map an array to render multiple cards.

Learn to enable the YouTube data api v3 in the Google Developer Console and generate an api key. Copy the api key into a .env file in your project.

Learn to fetch the most popular YouTube videos for the homepage using the YouTube data API, configure the API key, and build requests with part, chart, and region code.

Learn to fetch the most popular videos for a YouTube clone home page using axios, API key, and query parameters, then render and type the home videos in React.

Define a home video card type and map fetched YouTube data to it, extracting id, title, thumbnail, duration, views, age, and channel details, then store in state for rendering.

Render dynamic home cards in a React YouTube clone by displaying state-stored home videos with type-safe data, including video title, channel name, views, duration, and thumbnails with object-fit and line-clamp.

Learn to fetch and render YouTube channel thumbnails by extracting channel IDs from video data and querying the channel API in a React YouTube clone.

Fetch channel data and thumbnail URLs in a React JS bootcamp YouTube clone project, store them by channel id, and update video cards with the channel image.

Developers select categories in a sidebar for a YouTube clone by managing a filter state, wiring onClick handlers, and applying conditional styling to show the active category.

Explore fetching videos by category with the YouTube API, locating category IDs, and using part, chart, and region code to retrieve videos via video category IDs.

Fetches category IDs for the YouTube clone by calling the API with axios, storing results in state, and preparing category links with IDs for home and category pages.

Store category ids from fetched items, wire a category filter with state, and pass ids through a toggle to filter videos by music, sports, gaming in a React YouTube clone.

Learn to fetch homepage videos by category id in a React YouTube clone, passing category id and video category id, and handle errors with try-catch and console logging.

Create a custom hook useHome to fetch home videos for the home page, handling filter and category ID with Axios and an API key, with infinite scrolling planned.

Implement infinite scrolling in the YouTube clone by using the next page token to fetch videos. Store the next page token in the home hook state for loading subsequent pages.

Fetch videos with a page token in a React YouTube clone, handle the next page token in API calls, and prepare for infinite scrolling with React Infinite Scrolling.

Implement infinite scrolling on the YouTube clone homepage using the react-infinite-scroll-component, including installation, import, and configuring next, hasMore, data length, and loader with the fetch home videos function.

Implement category-specific infinite scrolling for a YouTube clone by storing videos and next page tokens per category in a typed record on the home hook.

Learn to add an error state in the fetch flow, show a red error message when a category fails, and render the loading spinner while infinite scrolling displays videos.

Create a watch page route for the YouTube clone using react-router-dom, link thumbnails to /watch, and enable home navigation with useNavigate.

Design a watch page layout for a YouTube clone using bootstrap grid (8/4), with video area on the left and recommended videos on the right, plus a 16:9 placeholder.

Create the video details component for the watch page, featuring the video title, channel thumbnail and name, likes, and a share button, followed by the description.

Create the like and share buttons on the watch page of the YouTube clone, import react icons, display like counts, and style the buttons with flex layouts and rounded backgrounds.

Design the watch page description using lorem ipsum text and a toggle to show three lines or full content with a boolean state.

Design mini cards for a YouTube clone by adding a gap between the thumbnail and detail and overlaying the video duration at the bottom right.

Create a helper function in utils to fetch video data with channels, export it, and use it in home.ts to map items to include channel details.

Learn to fetch video details and channel information for the watch page using a reusable helper function, then render the video title, channel image, and other details with optional fields.

Update the YouTube clone data model to include video description, like count, and channel sub count with image thumbnails for the watch page.

Enhance watch page by displaying channel image, sub count, video likes, and description, plus the channel thumbnail. Embed a YouTube video player via iframe using the video id.

Build a watch page mini cart and fetch the channel's recent activities via the YouTube API, using channel ID, max results, and snippet data.

Extract video ids from fetched channel items, store them in an array by mapping items and checking upload or playlist item video ids, then log the results.

Fetches video details for multiple video IDs via the YouTube API using axios, including snippet, details, and statistics. Displays titles, channel names, views, age, duration, and thumbnails in mini cards.

Store video data in a state named activities and map it to mini cards showing duration, video title, and channel name. Update thumbnails with object cover and fix alignment.

Build a reusable comments section for a YouTube clone by creating a comments component and a comment body, then map over data and add a like and share action.

Learn to fetch YouTube video comments via the API by building a fetchComments function with axios that passes part, snippet, and replies with video ID, using useEffect to load results.

Define a comment body type and store comments in state, map response items to a comments data array, and prepare for rendering in the comments component.

Render fetched comments in the YouTube clone by mapping the comment list and using the comment body type for author, text, and likes; next video covers the show more button.

Implement a show more button to load additional comments in a YouTube clone by managing a comments state and next page token, and fetch comments on click.

Fetch comment replies for a YouTube clone by calling the API with comma-separated comment IDs and the snippet part, using an async function with axios.

Learn how to display comment replies in a YouTube clone by managing replies with useState, mapping reply items, and rendering author details, profile images, and text.

Debug and refine a React YouTube clone by fixing home video fetch, handling missing thumbnails with defaults, and ensuring unique keys across watch and comments components.

Design a channel page route in a React YouTube clone, rendering a header with image, title, custom URL; include subscriber count and video count, and truncation with a more button.

Fetch channel information from the YouTube API using axios in a useEffect hook, passing snippet, content details, and statistics with the channel id.

Parse fetched YouTube channel data, map items to a channel info object with id, title, thumbnail, custom URL, description, subscriber and video counts, and store in state.

Learn to display channel data in a YouTube clone, including title, custom URL, subscriber count, video count, and description. Build a thumbnail and organize api calls in shared utilities.

Create a custom hook for channel data in a React YouTube clone project, fetching channel info with Axios and channel ID, and expose channel data and fetch function for reuse.

Create a centralized api.ts with axios, exporting get channel info and get home videos, using env api key and base url, and returning the zeroth item.

Create a separate api file for comments and replies, exporting get video comments and get comment replies using axios and a base url, video id, and optional page token.

Add and export get video details and get activities API calls in the api file, and update hooks to use these calls for video and activity data.

Learn to create a separate API calls file for categories in a React YouTube clone, handle optional channel IDs, map items, and align channel info across pages.

Learn how to implement a centered modal for channel descriptions in a React YouTube clone, including show/hide state with a more button and a close icon, plus responsive styling.

Create a scrollable description area for the YouTube clone by wrapping the description in positioned divs, setting a max height, and enabling overflow-y auto to reveal a scrollbar.

Implement a toggle between videos and playlist category for the YouTube clone course, using a state to switch the active category and underline the selected one.

Design video cards for the channel page in a React YouTube clone, presenting thumbnails, duration badges, titles, views, and ages in a four-column grid.

Fetch channel videos by calling the channel's application programming interface via the get activities function, passing the channel id to populate the channel videos page.

Learn to fetch channel video data and render it on a YouTube clone's channel page in React, including mapping video items to cards, handling unique keys, and basic error fixes.

Fetch channel videos with useChannel and render them as cards showing thumbnail, title, duration, views, and age in the React YouTube clone course, with infinite scrolling planned for these videos.

Add infinite scrolling to the channel page with a load more button that fetches more videos using the next page token from the get activities API.

Update the stored videos by merging previous videos with the current response and update the next page token. Enable loading more videos with a channel video list and infinite scrolling.

Add infinite scrolling to the channel page by reusing the home page logic, wiring data length to channelVideoList.videos.length, and using video ID as the key to avoid duplicates.

Design channel playlist cards in a React YouTube clone, pass videos count and playlist title, reuse video cards, and add a list icon in a responsive playlist grid.

Fetches playlist data for a YouTube clone by calling the YouTube API to list all playlists for a channel, handling channel ID, optional page token, and max results.

Parse playlist data from the YouTube API in the React course by mapping items to display id, title, thumbnail, and video count, while preparing channel playlist data for stateful rendering.

Update the user channel hook to fetch and store playlist data alongside videos, handle infinite scrolling and category switching, and manage next page tokens for playlist requests.

Render and display fetched playlist data in a YouTube clone by mapping channel playlists to cards, showing thumbnails, titles, and video counts, with dynamic types and infinite scrolling.

Learn to implement infinite scrolling for playlists by parsing channel playlists data, creating a parse function, handling next page tokens, and fixing duplicate keys and loader issues.

Remove loader when fetching all videos in the YouTube clone by managing has more with next page tokens, dynamically hiding the loader for videos and playlists.

Implement parse functions for videos, comments, and replies in a React app, moving them to a past data file and validating updates on the home and watch pages.

Design the playlist page for the YouTube clone by routing with channel and playlist IDs and linking from channel cards. Plan to fetch the playlist data in the next video.

Fetch playlist information using an API by passing a playlist id to retrieve items, thumbnails, titles, and descriptions for rendering in a YouTube clone playlist page.

Create a playlist info type with id, title, description, and thumbnail; map data to state, render details, and toggle description in a YouTube clone React project.

Create a custom hook usePlaylistInfo in TypeScript to fetch playlist data by ID, return playlist info and show description, and integrate a parsePlaylistInfo utility for standardized results.

Design and implement a playlist video card in a React YouTube clone, including thumbnail, video number, and title, using array mapping and grid layout to render multiple cards.

Fetches playlist videos by calling the API with playlist id and snippet details, stores results in state, and defines types for playlist video items and paging.

Parse playlist videos data in a React YouTube clone by mapping items to extract id, title, and thumbnail URL, handling missing thumbnails, and fixing unique key warnings for card display.

Update the playlist items state by merging previous videos with new data and the next page token, then render video cards with titles and thumbnails.

Create a usePlaylistItems hook in TypeScript to fetch playlist videos, export playlist items, and build playlist item cards with navigation to video and channel pages.

Add interactivity to the YouTube clone by enabling hover effects on cards and thumbnails, and navigating to watch and channel pages with video and channel IDs.

Add interactive hover effects and dynamic navigation on the YouTube clone's channel and playlist pages, linking videos to the watch page using React Router with video and channel IDs.

Wire a search input to state, handle onChange and enter to navigate to the /search page, and read the query with useSearchParams to fetch results.

Learn to fetch YouTube search results by query in a React app, using a get search videos function with axios, handling snippet, video title, and description on initial render.

Parse the search API response to extract video IDs, store them in an array, and fetch videos with channel data to assemble the search page results in state.

Store and display searched videos by managing search list state, mapping items to video cards, and lifting search state to app for a responsive YouTube clone experience.

Fix the close icon in the search field of a React YouTube clone, ensure the search input clears on close, and update API keys to resolve quota limits.

Make the navbar responsive by using tailwind breakpoints to show or hide elements, adjust spacing, and resize the logo, hamburger, and search input for mobile and desktop.

Learn to build a responsive home video section for a React YouTube clone by adjusting Bootstrap grid breakpoints to change column counts and tune text and image sizes.

Make the watch page responsive by implementing a sticky navbar with top positioning and z-index, and adapt video, comments, and recommendations across breakpoints.

Learn to build a responsive YouTube channel page in React by adjusting margins, image and text sizes, and columns across breakpoints, featuring video lists and playlists.

Master responsive playlist pages in a YouTube clone by adjusting margins, padding, text sizes, and layout breakpoints to switch between rows and columns for playlist items.

Push your project to GitHub and deploy with Vercel. Initialize a git repo, add files, commit, set the main branch, and configure gitignore to exclude dot env file and node_modules.

Learn how to host a React YouTube clone on Vercel by linking GitHub, importing the project, and deploying with environment variables for API keys, then redeploy when you push changes.

Enhance a youtube clone project by implementing strict type safety for api responses, defining category and video types, and updating data mappings to ensure reliable, typed components.

Recap the course by building a YouTube clone in React with TypeScript, featuring trending videos, search, categories, watch page, and dynamic routing with YouTube API data via Axios.

Build a real-time news portal with React, TypeScript, Tailwind CSS, and Material UI. Implement dynamic navigation, search, category filters, carousel sections, news cards, load more with Axios and News API.

initialize a new react with typescript project, install dependencies, set up tailwind and material ui, run the dev server on localhost 5073.

Create a navbar component in a React TSX project for the News Portal app, using Material UI typography, a Newsdaily logo, flex layout, and Tailwind styling.

Develop the navbar in a React news app by adding a logo, a search field with an icon, and a divider in a flex layout, with an upcoming category below.

Create a category navbar by exporting a categories array in a constants file and mapping it to a Material UI button group with white root styling and hover effects.

Create the home header with a top headlines carousel inside a React TSX home component. Add a see all button with a forward arrow and hover styling.

Create a home page carousel in a React news app using a Material UI card, image box, overlaid title and description, and a bottom gradient.

Designs the description area of a news carousel card in a React app, using Material UI card content and typography for description, details, source, and date.

Design a five-item carousel list using Material UI grid and cards, with gradient boxes and image placeholders, and organize the code into carousel, header, and card components.

Design the home page bottom section by building a five-card news grid with category headers, reusable card and header components, and dynamic top headlines integration in a carousel.

Organize the home page code by creating a home cards list and a news card component, wiring imports and typography to prep for the first API call.

Learn to fetch top headlines with axios in a React news portal app, including obtaining an API key, saving it in a .env file, and displaying results in a carousel.

Define a news data type and store top headlines in state. Filter articles to ensure URL and image exist, and render the headlines in a carousal card.

Enhance the news portal by implementing optional chaining to render top headlines with images, titles, descriptions, and sources, format dates with new Date().toLocaleString, and build a five-item carousal for navigation.

Create dynamic carousal navigation in the News Portal app by adding left and right arrows that use a toggle active function to move the active index with next or previous.

Implement a dynamic carousel in the News Portal app by computing the next five headlines from the active index, wrapping with modulo, and preparing a modular API wrapper.

Create a reusable API wrapper in a React project using a get request function in TypeScript, handling data and errors with Axios in the News Portal app.

Build an api wrapper to fetch top headlines for a react news portal, create the top headlines function in api.ts, call it from the carousel, and filter articles with images.

Resolve api type errors by defining a news api response interface. Export the interface and update requests to pass a url string and fetch the api key from env.

Implement fetch category news for the news portal by wiring category parameter in the api call, rendering category cards, and storing filtered headlines in state on mount.

Render category news as cards by mapping the first five items, passing news as props, and displaying title, description, source, date, and image with material ui card media.

Design and implement error and loading states for news cards and a carousal in a React app, using error and loading state variables, conditional rendering, and fetch handling.

Design and implement loading and error states for the carousal in the News Portal app, using conditional rendering, fragments, and ternary operators to manage data fetch outcomes.

Learn to set up a React Router route for an explore page, implement navigation with useNavigate, pass category via location state, and connect a home link to the explore page.

learn to store news by category on explore page with a category data state, fetch top headlines, filter articles with images, and update state using the useEffect hook in React.

Design and implement the explore page for the News Portal app by building an explore card list component and rendering news cards from category data using Material UI grid.

Design an explore page header for category using Material UI container and typography, fetch news on category change, and add a load more button with paging.

Implement load more for the news portal by tracking per category page numbers, updating articles, and fetching news with the current category and page, disabling the button at max limit.

Enable a load more button with conditional rendering in a React news portal, controlled by a boolean state and total results, noting filtering out news with no images affects it.

Implement see all button functionality in a React news portal by using the useNavigate hook to navigate to the explore page with category state, and conditionally render for non-top headlines.

Create a search page in the news portal app using a React functional component with a search input, manage text state, and navigate with title and query via location state.

learn to fetch news for the search page by calling the everything endpoint with a query Q using a fetch by query function, and set page size to 20.

Store fetched news data in a search data state, filter results, and render them with material UI typography on the news portal's search page.

Implement error and loading states for the explore and search pages in the React JS bootcamp project, handle fetch responses, and display loading text and error messages.

Wrap news cards in react-router-dom links to navigate to the original pages, and implement a responsive navbar with breakpoints, font-size adjustments, and overflow handling for a news portal app.

implement responsive carousal by adjusting grid columns, column spans, and card heights across breakpoints; tune title, header, and button typography for md, lg, and smaller screens.

Make the news portal cards responsive across the home, explore, and search pages by applying consistent card styles to adapt to different screen sizes.

Create skeleton components for the carousal card and carousal list in a React news portal app, using Material UI skeletons and tsx files to display loading states.

Build skeleton loaders for news cards on the homepage using a rectangular skeleton and a five-item loading array. Extend the approach to the explore and search pages with twenty-item grids.

Learn to implement load more skeletons for news cards on the search and explore pages using a loading boolean and mapping ten skeleton placeholders.

Reflect on building a dynamic news portal with React and TypeScript, implementing API-driven top headlines, category news, and search results with Axios and hooks, plus routing and pagination.