Build and Deploy a Full Stack Next.js 13 Funcional Youtube Clone | React, TypeScript | TailwindCSS
Hi how are you?
In this video I will show you the next project we will do. It will be a full stack YouTube clone, made with next js, graphql and prisma. In authentication we will use next-auth to log in with our Google account. We will get the videos randomly like on YouTube
We will incorporate the functionality of views, likes and subscriptions. We will also get recommended videos randomly just like on the home page.
We can create videos, add title, description, thumbnail and, above all, we will incorporate the functionality of adding tags. All videos and thumbnails will be stored in the cloud, Firebase Storage.
In the "my videos" section, we can edit and view the videos we upload. When editing them we can store the video data in the inputs and the same will be with the thumbnails and tags
We can update the tags, delete them and add new ones.
In the same window we will have the option to delete the video.
We will incorporate shadcn for dark mode and also for the rightbar. All styles will be done with tailwind.
And we will add the search functionality, the search will be for both the title of the video, the author's username and the tags that are in the video.
We will use postgresql to store all the data of the models created in prisma.
We will use one to one relationships for users and their profiles, one to many for videos and their tags, and many to many for likes and subscriptions.
In firebase storage all our thumbnails and videos will be stored in folders with the name of each user.
Libraries:
Next.js 13
React.js
Apollo Server / Apollo Client
Prisma
TypeScript
TailwindCSS
CSS
Shadcn/ui
PgAdmin
GraphQL
Next-Auth (Google)
Firebase Storage (files)
Sonner(Toasts)
Timestamps:
0:00 Intro
1:50 Presentation
6:00 Setup Project
12:50 PostgreSQL (Render)
14:27 Models (Prisma)
20:20 TypeDefs and Resolvers (GraphQL)
01:34:27 Frontend
01:37:00 Navbar
01:43:00 Next-Auth (Signin with Google)
01:50:00 Shadcn/ui - Rightbar
01:57:30 Next.js Image Placeholder Blur
03:02:00 Create Video
03:04:40 Firebase Storage (Images and Videos in the Cloud)
03:47:00 Video Player
04:06:30 Context API
04:27:00 My Videos Page
04:44:00 Edit Video
05:17:00 Delete Video
05:25:00 Search Videos
05:44:00 Followers *
06:01:08 Subscriptions*
06:11:00 Deploy
Repository (Github):
👉 https://github.com/miladevweb
👉 https://github.com/miladevweb/youtube...
Thanks for watching guys!!!
#Reactjs #TypeScript #Nextjs13
Watch video Build and Deploy a Full Stack Next.js 13 Funcional Youtube Clone | React, TypeScript | TailwindCSS online without registration, duration hours minute second in high quality. This video was added by user Just Mila 13 October 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,07 once and liked it 16 people.