Next JS Course: Build a Complete YouTube Clone Web Project

Explore a live demo of a complete Next.js YouTube clone featuring genre navigation, video controls, publisher pages, real-time suggestions, comments, search, and responsive layouts across devices.

Set up a Next.js project for the YouTube clone course by using create next app with TypeScript, Tailwind CSS, and a src directory, then run npm run dev.

Create a new Google Cloud project, enable the YouTube Data API v3, generate and restrict an API key, then add it to the environment file with the base URL.

Set up the next app router for a YouTube clone by creating home, channel (dynamic id), video (category id and video id), and query routes; implement page.tsx components and exporting.

Define a generic API response interface in TypeScript, with items, data, error, status, details, and name, plus an Axios error type for typed calls in a Next.js YouTube clone project.

Create interfaces for the YouTube clone's comments system, including a comment snippet with author details, top level comment, and video details for modular components.

Implement a video item interface for a YouTube clone in Next.js, modeling an array of video objects with content details, related playlists, and thumbnails.

Finish building the type interfaces for a YouTube clone by defining video item structure with content details, related playlists, id, duration, dimension, caption, licensed content, country restrictions, and branding settings.

Create a utils folder and implement an Axios instance wrapper to centralize API calls, using a base URL from env and Next.js public variables, preparing for additional utilities.

Define a sidebar data model with menu items (id, level, icon from public assets) and a subscriptions array with names and icons for a YouTube clone UI.

Build an api service wrapper using axios get requests with generics and config to fetch data and handle errors, returning a typed api response for YouTube videos.

Learn to build a duration converter for YouTube video lengths in a Next.js project, parsing duration strings with regular expressions and formatting hours, minutes, and seconds.

Introduce a value converter function in value converter.ts that formats a string or number subscription count into m or k notation, with two decimals for millions and one for thousands.

Set up a Next.js YouTube clone by installing Daisy UI with Tailwind themes, adding moment, date-fns, and material UI, configuring image domains, and enabling vercel unoptimized to prepare for deployment.

Learn to implement a sidebar context in a Next.js project using a client component, React context, and state hooks to manage sidebar, category, and theme with local storage persistence.

Build a responsive navbar component in Next.js using Tailwind, with a semantic nav and sticky top positioning, featuring mobile and desktop icons while preparing the sidebar context integration.

Build a mobile navbar dropdown by wiring a map over menu items with icons and daisy ui styles, configuring tab index and accessibility in a Next.js YouTube clone project.

Wrap the entire application with a sidebar context by updating the root layout.tsx, converting to a client component, and applying dynamic left padding through template literals based on sidebar state.

Implement navbar functionality using the Next.js router and context, wiring search handling and menu actions to update category and navigate to dynamic query pages.

Adjust the navbar by applying flex styling, centering items, and creating a dropdown with tab index, images, and a paragraph showing item level, while debugging a font not found issue.

Learn to style a responsive navbar and icons in a Next.js YouTube clone, including dynamic sidebar items, icons, and routing with next/link across desktop and mobile views.

Implement a navbar search input in a Next.js YouTube clone, toggle the sidebar, update the search query on change, handle key down, and display a magnifying glass icon.

Finish the navbar by adding a profile avatar and notification icons with responsive visibility, routing to user paths like Superman and Spiderman, using the image tag and assets.

Create a client-side sidebar component in a Next.js app, using useRouter, useParams, and context to toggle theme, handle menu item clicks, and persist the chosen theme in local storage.

Design the YouTube clone sidebar by mapping menu items, applying dynamic classes, handling clicks, rendering next image icons and subscriptions, and a theme switch for light and dark modes.

Polish and integrate the sidebar into the website, enable onclick theme toggle with flex row and centered items, address collapse behavior, and refine imports while planning the next video.

Learn to style the sidebar with tailwind apply, blending custom css for a fixed top-zero panel and interactive side links with hover effects.

Fetch home data by using use client, category from the sidebar toggle context, and an API service to request most popular videos with specified parameters, then update state.

Learn how to fetch home route data with useEffect, respect the 100 calls per day API quota, map data into video cards, and build a responsive grid with tsx components.

Build a reusable video card for a next.js YouTube clone, fetch channel data via route params, and manage iframe player state and errors with TypeScript.

Fetch video details and channel data via useEffect in a Next.js YouTube clone, building an endpoint request for content details and statistics, handling video IDs, and updating the UI accordingly.

Explore building a video card ui in a Next.js app using DaisyUI, with a clickable image link that routes to a dynamic video page and displays duration.

Build the rest of the video card UI for a YouTube clone, showing duration, thumbnail, and channel details with dynamic styling and channel navigation.

Finalize the video card user interface by wiring the thumbnail and channel avatar links to their pages, displaying the video title, channel title, views, and published date with moment.

Learn to build a dynamic video page in a Next.js YouTube clone by using category and video IDs, rendering a video player, channel data, comments, and a recommended section.

Create a fetch handler for the videos endpoint using snippet and statistics, with region code us and category id, to render 12 recommendations in a next js youtube clone.

Implement an error state and a fetch video details handler to retrieve thumbnail, duration, and view count from content details and statistics endpoints, using state hook and IDs from recommendations.

Fix the endpoint, render a clickable recommended video card that links to the player page, and show thumbnail, duration, title, channel, and view count.

Build a video player page for a YouTube clone using the video id, fetch video data (snippet, statistics, content details) plus comments and channel data, and handle errors.

Finish the video player's data handlers by asynchronously fetching channel data via the channels endpoint (snippet, statistics, content details), with error handling, driven by useEffect on video id.

Fetch video data from an API, render the YouTube video with an iframe, and display the title, snippet, and a channel avatar with a Next.js link in a responsive layout.

Learn to visualize publisher details on a video page by rendering the channel name as a link, a subscribe button, and channel statistics from api data using a flex layout.

Debug and fix icon rendering in a Next.js YouTube clone, display video descriptions with a collapsible panel, read more toggle, and show view counts and publish date using API data.

fetches and displays YouTube-style comment data, shows commenter avatars and names, renders snippets and update times, and loops through all comments.

Display comments on the video page by showing the commenter’s name and time, styling text, handling top-level comments and snippets, and rendering like/dislike icons with counts using dynamic assets.

Fix the value converter to show or hide comments and fetch channel data from the api, using channel id from use params and managing videos and channel info in state.

Finish the channel page handler by completing the channel data fetch and uploads playlist retrieval, and wire the get video function and playlist endpoints with error handling for missing playlists.

Create the channel page user interface for a YouTube clone in a Next.js course, using conditional channel info, a banner image, avatar, channel title, and subscriber count.

Build a Next.js channel banner and info section, showing logo, name, subscription count, and videos, with a channel description truncated at 50 characters plus a more button and subscribe button.

Implement a click-outside handler with useEffect for a Next.js tab component, using ref.current and a mouse down listener. Add and remove document listeners to close the tab when clicking outside.

Design a YouTube-style tabs UI using flex, with a bordered tab list and videos as the default active tab, while hiding extra tabs on mobile and adding a search bar.

Reinstall the react icon, attach an event listener to toggle the tab open state, apply dynamic gray styling with a transform transition, and ensure the search expands and closes.

Showcases how to display latest and all channel videos in a Next.js YouTube clone, featuring a responsive grid, video cards, and a modal that reveals channel descriptions.

Debug the channel page and fix the misspelled grid to improve production-quality visuals. Adjust gaps and apply a video card background color for consistent themes.

Build a client-side query page that reflects url search terms, fetches results from a search endpoint with 20 items, and renders them with a search card.

Build a search card for a next js youtube clone by fetching channel data with a dynamic string. Handle errors with useState and manage category ID and video item state.

Wrap up the search card for a YouTube clone UI in Next.js by wiring the link and image, displaying item snippet details, channel avatar, and description, then prep for deployment.

Deploy the Next.js YouTube clone to Vercel by pushing a GitHub repo, configuring environment variables, and verifying live deployment, responsiveness, and video playback across categories.