🔴 YouTube Clone with React, Redux Toolkit, Typescript, Tailwind CSS and YouTube API v3

YouTube Clone built with React, Redux Toolkit, Typescript, Tailwind CSS and Google's YouTube Data API v3.

Mern Stack Projects. React jsProjects React Tutorials Redux Toolkit Project YouTube Clone with React, Redux Toolkit, Typescript, Tailwind CSS using YouTube Data API v3.

Source code and links ⤵️

Subscribe for more! 🔔

Timestamps ⏱️
00:00 Demo
01:40 YouTube React App Setup
08:20 React Router Dom Setup
11:55 Navbar
29:30 Sidebar
40:45 YouTube Data API v3 Setup
44:00 Redux Toolkit Setup
01:24:27 Home Page
01:46:52 Search Page
02:11:22 Watch Page

Search Terms
How to create youtube clone ?
How to create youtube clone with mern stack?
youtube clone
youtube clone using react
react youtube clone
React youtbe Clone
Nodejs youtube Clone
Firebase Projects
Redux Toolkit Projects
Mern Stack Projects
Projects for Beginners
Reactjs Projects
Nodejs Projects
Fullstack Projects

#youtubeclone #mernstackprojects #kishansheth #whatsappclone #messengerclone #telegramclone #reactjs #nodejs #javascript #mongodb #express #styledcomponents #firebase #reduxtoolkit

[lokeshnegi]

hi kishan I just want to give one suggestion you are writing all the styles at once like you've memoized it. I think you should show in between what's happening on the page so that we could understand the real use of those styles you are writing.
Other than that everything is fine keep doing this great work!

[HIMANSHUSINGH-lyoe]

Finally the video is up! . I'm waiting for your video for a while.

[niteshprajapat]

this is amazing one 🔥🔥
I were unable to find any diff between clone n YT
even I thought it was original YT when video starts 😂

[ricktheobserver]

Hi !Kishan Sheth, i'm a beginner to TypeScript. When I watch the setting up utils sessions, the code was pasted from git Repo. I know it must be like that but i got overwhelming sometimes, some lines of code I couldn't understand. So do I have to understand it all?? Thanks Kishan Sheth!

[ibrahimnassar]

Preparing the application to receive the link 00:00

This point involves setting up the application using React and the React Router DOM to create the routing system. Pages such as home page, search page, and watch page have been created. The YouTube logo has also been added and the video search bar has been reduced.
Side menu bar design 19:04

At this point, the permanent Indian tape is designed. Different scripts and scripts have been used to create links for different sections such as home page, secondary links, help links, and custom links. Various layouts have been applied for an attractive and coordinated look.
Redux store setup and data processing 39:02

At this point, the Redux Store is set up using the Redux Toolkit innovation in the case in the app. Optional: Initial status and different status types for current videos, search results, next page key, and suggestion videos. Custom hooks have been defined to access that state of the set and receive functions simplified to use.
Processing video data from YouTube API 57:20

At this point, the video data has been deleted from the YouTube API using the app's API key. Bidn key value/API value is used to retrieve various information such as video id, channel id, and image for the channel. The time format has been converted into a legacy format.
The video and display card data format is 1:16:38

At this point, the video data from the YouTube API has been prepared and formatted to configure the display card. Data such as video ID, title, description, duration, number of views, and channel thumbnail image were used. The improved variable was used to improve attractive information models. Video links included and so does the user go to watch the video on YouTube.
Facilitating old research tools 1:36:37

At this point, the purpose of searching in routers routers using react-router-dom library has been added. When searching, search results are filtered using the YouTube API. The search results were displayed in the form of a card view below the search bar, allowing the user to see videos related to the search. Users can click on any video card to restore the video detail page.
Page build watch video 1:55:29

At this point, a page dedicated to displaying video details has been created. React Router DOM library used and waiting between pages with video id. Hooks such as `useParams` are used to extract the video ID from the URL New `useAppDispatch` subscribe API requests. `useAppSelector` has been carefully used from the general state of the permanent and extracted the data needed to display the details of the video. The interface of the page is beautifully designed with details showing videos and related videos.
Build page watch live webcast 2:15:48

At this point, a page dedicated to browsing electronic digital video footage has been created in the sidebar. Hooks and an innovative React Router DOM library were used between pages and extracted information from the URL using `useParams`. The use of `useAppDispatch` for API requests and `useAppSelector` is preferred from the general case. The calling methods to get the video details of the videos are built using asynchronous thunks. The video viewing interface is attractively designed and the video details as well as a list of videos are preset.

[AL-dith]

hi! This viedo helped me soooo much. Thanks for this decent lecture, and also the codes you provided!

BTW I'm curious, how you debug your errors? Is it by VS code?
At this timeline :
1:43:38

[bharath]

the best youtube clone on YouTube by an Indian.
jai hind

[nikako]

Cannot read properties of undefined (reading 'contentDetails')
at parseData.
how can i fix it?

[nigam_sharma]

Great work but I get to stick at parsedData is not defined

[duyngo]

hi, i am from Viet Nam and I'm so lucky to know you. Thank you so much.

[akashanksz]

i m getting the files in .js format in src what should i do?

[MehadiCrypto]

Bro Which version of node are you using?

[dosamuel-mb]

Thank you so much. Can you make a react native course please ?

[pareshmetaliya]

Can we deploy this project with our own domain name and use data of this API....??

[tntextreme]

Bro kindly reply. I'm struck with apk key not valid. Even though I'm giving the key correctly it's showing me this error. I changed the key several times still the same

[vikaskendre]

this is not beginner friendly video, my suggestion please explain the code in detailed and beginner friendly way

[abhishektaur]

Bro where is .env file and plz tell me how to change api key . Because .env file not in this project

[ARYAN-vskh]

1:07:54
Aby bhai yh wala error ni ja ra

[hustler]

Kishan bhaiya please make a tutorial on redux toolkit it'll be very helpful

[lokeshnegi]

what should we use instead of any[ ] for items ? coz using any is not a best practice in typescript.