YouTube Clone – T3 Stack Tutorial (Next.js, TypeScript, Tailwind CSS)

Key Takeaways

learn how to use the T3 stack to build a full Stack video streaming app similar to YouTube The Core components of the T3 stack are nextjs typescript and Tailwind CSS you'll also incorporate trct next o and Prisma and learn how each technology comes together to build an end web application Jerome McCree is a software engineer and he is great at breaking down complex topics to help new developers this is going to be an absolutely massive course of over 15 hours long of us using a popular technology stack called the T3 stack in it we're going to be building a very similar service to YouTube but just has a completely different user interface we're going to be building everything from the video page to playlist to dashboard to allow the user to actually upload these videos Etc all that will be showed in this uh tutorial um so without further Ado let's actually just get to the demo so here is VD hill.org if we come here you're looking right now at the home page and as you see um if we scroll down this is just a whole bunch of random videos that we have gathered and um we are querying from our our database so we scroll down you see a whole bunch if you refresh the page so we can refresh then we get a whole bunch of different ones and we can even refresh again you have a whole bunch of different ones on the left on the left hand side you have a sad bar we have liked videos history your videos Library following settings help Etc um if um right now we are not signed in so you push this it will automatically go straight to the signin page we can go to something like help this is our help page so for FAQ Etc let's go back and now we can search something so we say phone for that matter and then we get a whole bunch of different videos for phones just like this and then we can go ahead and if we click it it'll take us to our actual video page just like that and on the side of it we have a whole bunch of random videos that we're also querying right here on the sideb and then we have a bunch of we have our comment section where we can actually make comments now if I try to add a comment it's going to also take me to the signin page so let's go ahead and sign in now I can go ahead and say vid testing vid show.org then it gives me an email says check your email Etc so let's go ahead and do that I'm going go to my email we'll come back cool now I'm signed in and now I'm put back onto our regular page we scroll back down of our comment section so now let's try to make a comment I can say hello hell this oh let's do that again hello this is an awesome video just like that and then I can push post then you see here right here is our new comment hello this is an amazing post right now I'm following this person I can unfollow I can follow him can also put this to I can also like the video I can also dislike the video and one cool thing is let's just like it and also I can save this to playlist so I can put save and I I can say favorite videos and then I can push create new playlist and then I can add this one to my favorite videos just like that and now if I come back to here to our library right here so this is our actual Library you end up seeing that favorite videos is right here and I click it here's the actual video that I just added to this playlist cool let's go back to this uh this video real quick I can like it let's like the video and I'm also following him let's keep doing that as well another feature is every single time I go to another video so let's just click this one right here it refetch all the data on the other on the um side just like that cool now let's actually look at the channel um of this of this person so we can click this and then you're greeted with profile picture you're with the name the user name how many followers and following how many people he's following and this is the background uh background uh page uh background image as well and you can see that we're following him we can unfollow and then follow him if we want to and here's all the videos that this man has posted just like that we can go over to playlists and then he has a playlist that he has he has a an entire description with it couple other videos and the playlist was created to years ago next thing we can do is we can go to announcements and any announcements that the you uh this guy has made um automatically comes here so he has made announcements three months ago a month ago 22 days ago 18 days ago 13 days ago we can like his announcements and we can also dislike them very similar functionality to Twitter uh you can sort of think about it just like that next thing we can do is we can go to following and we can see every single person that this person is following so while in kamatics and explore God Etc we can and it also gives us um it also tells us if we are following him as well so for example um I'm following explore God but I'm not following this person I can go ahead and I can say follow and now I'm following him as well just like that now if you seen that we have this sad barar here let's explore a little bit of what this is we go to liked videos this is all our liked videos now we haven't liked any videos yet so let's let's go and like a video let's say I like this video now we come back to like videos you see this is the video that I just liked let's go ahead and try that again let's go ahead and we're going to like this video and we're also going to like this video if we come back to it you see now we have three videos that we have liked all right here in our like videos playlist next thing is history this gives us every single video we have looked at so far we have viewed this video four times so that's why it's here and we can scroll up to all the other um videos that we have ever watched so far we have 21 next thing I'm going do is we can um go and look at your videos so all the videos that we have posted here's some of them that we have I love Wizard 101 so we have like Wizard 101 uh from back in the day we have a whole bunch of uh different um videos for that um I have my own playlists we have already looked at some of this where we created a new favorite videos and then I have announcements right here so this is all the announcements I have made I can go ahead and I can create a new announcement and I can say hello YouTube this is a vid chill tutorial just like that and I can go ahead and post it and then you see Hello YouTube this is a vid chill tutorial just like that and then I could come here very similar to what we already looked at where we looking at who this person is following so all the followings or who are we all following simple as that we come here we have a couple other things so we have things such as the help page where we have an FAQ and help is also right here so um where the user can see uh can help if they need we have a privacy policy so little bit here we have uh we have help Creator Studio Etc let's actually go and look at um Creator studio now so this is our creator Studio this is how we upload videos and this is how we take down videos so let's actually explore a little bit about this right here you see that this is the total views right here is the total followers and this is the total likes we can go ahead and click publish or unpublish when it's unpublished if we go ahead and try to search this up you see that no videos is shown just like that but if we go ahead and now publish it let's just refresh our page and now it comes back up now if it's unpublished now if we go ahead and republish it and then weet type it you see that now it comes up the same video title just like that we can go ahead and change the names of this so if I don't want this anymore I can say um this is a YouTube test video just like that change the name of it and remember this thumbnail right the thumbnail we have if I go ahead and copy this and then I push the status published and I run this let's try it again here you go this is a YouTube test video you see the same thumbnail Etc it's all searchable cool next thing I'mma do we can also trash some videos so if I no longer want this video in my um uploaded to my channel I can go ahead I can say delete so let's go ahead and try that and say delete and now the the the video is no longer here just like that and now let's go ahead and upload a video I can come here at the top right I can push upload I can upload a video that I would like let's just upload upload this one just like that your video has been attached and then I say upload then it's uploaded and it's right here it's unpublished and it given no name let's change that I'mma say dragon this one's going to be a Dragon Ball Z One Dragon Ball Z is the best cool and then I can upload a photo so a good thumbnail let's give it a thumbnail of this just like that and I can come here and I can crop how I would like this thumbnail to look just make it full width just like that crop image there you have it and then I can write this is a description just like that I can save it and there you have it let's go ahead and publish this say Dragon Ball Z is the best if I go here to the search bar and search it there you have it you have it right there in the search bar last thing is the settings page and here you can go ahead and change um you can change anything that you would like so if I would like to change the name and change the name I can say save do you see it's changed I can change the thumbnail to anything I would like let's change this we can come here we give it this background pretty much that you have this background we can also do that for the profile picture just like that we have that changed we can change the uh our uh our usern name we can change the about me we can change our email Etc all things that you can change let's say dragonall Z just like that and now the channel name is Dragon Ball Z so yeah this is pretty much everything um yeah thank you so much yeah one last thing is that if you're interested in actually seeing the the uh code that was or actually the designs of the website themselves um I have a uh complete um figma um ux built um uh and I'll link this in the description below where you can see the homepage search page the video player the save video um the profile announcements the profile Library profile videos Etc all right here if you're interested and seeing the actual designs for uh the actual project here's dashboard right here just like that cool so the technology that we're going to be using to actually build this uh website is something called the T3 stack and if we go here to create. t3g we see here will be the documentation and actually to um build that so if we scroll down we see that here's all the technologies that are comp that um that uh we utilize in order to build this we use next.js typescript trpc Prisma Tailwind CSS and next.js and let's actually go into some of these and I'll show you a little bit about what they have done if you're not actually familiar with it so we go to next.js which is here we see that next is really um a way of building U is a framework for actually building a full stack web application so some components that it allows you to do is we could do data fection fetching we can do things like um Dynam uh Dynamic routing so for example let's just say we go back to vid show. uh.org and then we click on one of the the the videos we can see how you see how it says video 51 and if we click another video it says 253 that's an example of dynamic dynamic uh routes where the route is dictated based off of um the the the um the video or the data that is being rendered right so very similar to like a Blog website blogging website you have many different blogs you go to a different blog it it pulls up um it'll it'll render another uh another you uh ID Etc we go here you see 196 that's the user ID for this uh channel right here uh we have things like middleware so it can it allows us to build middleware um couple other things we have client and server rendering so if you're um it's really good for SEO if you're doing um things such as um get server side props all these things really good framework and I highly recommend it this is one of the things that we'll be using the second thing that we'll be using is typescript so everything is going to be type safe uh I won't I won't go too much into this I'm sure that most of y'all are already familiar with typescript then I'm going to go we're going to be building something or utilizing something called trpc we go to trpc um trpc basically allows us to uh make sure that our API routes are actually um uh type safe so for example as soon as I do something on the front end or the front end so this is client so once I do something on the front end it'll it'll be replicated on the back end Vice vers so for example if I add another property to one of our API routes here right so I change message the name it'll automatically change this message it'll automatically um give me an error if um it's not reflected right so we change we change message to name and then you see it change right here and there's a bunch of documentation we can do things such as query so that means get information we can also send data to the to the database so that's in form of IM mutation very good very good love trpc with this next thing that we're going to be using is Prisma so this will allow us to actually write um our uh database models so this is a this is a way of instead of having to write so in this project that we're going to be building we're going to be using MySQL instead of actually having to write the MySQL we can just write a Prisma file just like this how you see it so we can say database. sour uh data source DB we divide what the provider is the URL um the URL will be the actual database that we're connecting to in this case that will be Planet scale and I'll show you that in a little bit then we have the actual model so we have a model post model user Etc you can see some more of this and we never have to actually write MySQL by um by um by ourselves we just def it into this uh Prisma schema file and then we can just push that up to Planet scale and there you have it right so very good highly recommend it and we also have things with this such as uh Prisma uh Prisma Studio which allows us to um uh uh manipulate data um by uh making us a a separate server ET very good thing love um Prisma Etc next we're going to be using Tailwind CSS so Tailwind CSS if you're not familiar with it allows us just in um to write CSS a lot easier so instead of having to make a separate. CSS file all we have to do is just take our a div or whatever and then we just place we just write the the CSS classes right inside of um our given um element so for example if I make image I just say width is 24 height is 24 it's rounded we say MX means margin on X AIS would be Auto um we can uh uh uh manipulate the uh when the width is going to be changed so when the screen size is medium the width is going to be 48 um when the screen size is medium uh we're going to say height is going to be Auto Etc really good thing um makes CSS writing CSS a lot easier and another technology will be using is next off so we go here to next off um this is the way that we actually handle authentication so for example U we'll be using something called an email provider and we'll go into this very soon if we come here we can say email and we scroll down this is um the way that we'll be using it and the email provider and actually I can just come here to vit show.org email provider we can come here to sign up which being handled here is based is just primarily next off so we put our email in and then it'll send us an email Etc that's all being done on the back end by next off so yeah these are some of the technologies that we're using we'll be using Planet scale for our database and we'll also be using cloud and area in order to um push all of our um data up to uh up to the cloud Planet scale if you don't know is a really good way of building um really good way of uh making um D databases it's very easy um you can do things like such as load balancers Etc it's all working on um through AWS so um the the code that we or the database that we're um writing to is all being hosted on AWS so yeah um Planet scale I love um I love them is really good for working with mySQL Etc and then the last thing that we're going to be using is cloud andary this is the way that we're going to be uploading all of our images and videos to so all we do is just upload to the database or upload to cloudinary our video and then they return us a URL and we store the URL into the database so that's another thing we'll also be using um if you don't know something called versel versel is really good um for actually hosting for hosting um web applications I've hosted a couple of them now very good highly recommended Etc so this is basically our Tech stack everything that you see in T3 stack and then also we'll have Planet scale cloud in area in versel as well and later later on in the tutorial we'll show I'll show you how to actually um get all of these set up because we need to do things such as see the database um Etc so one honorary mention is something called tawin UI and tawin UI is actually developed by the tawin team themselves and what this allows you to do is they'll give you a whole bunch of like examples of HTML and CSS or even react code for that matter so for example take a pricing section and you scroll down you say oh I like how this looks I can go here with the code and I can switch HTML to react and it gives you an example of how this could be written um with jsx in the jsx uh this uh this helped a lot in the building of vid shield. org for that matter and I highly highly recommend picking this up if you actually have the um the uh um some extra cash but this is definitely not a requirement for our Tech stack or anything for that matter just a honorary mention cool now so we're going to get started with is actually downloading T3 and actually beginning the project so first what we can do is copy and paste the command mpm create T3 app we want to push y for yes just make this a little bigger we then want to name our project so I'm going to name mine vilore tutorial let's select typescript then we want to select a for all and then we're going to push enter and we want to push no for get initialized G repository we're going to set this up ourselves and you want to push yes for mpm install just push enter and there you go you got the project set up then now we want to open our project so I'm going to push open folder I'm going go to vill tutorial and it's already set up for us now let's open up our terminal we can go to source and you can see all the files and all the folders that we have boom it's already set up now we can run mpm runev and this would actually run our development server our develop server boom we can push Local Host 3000 you can refresh boom we have it all up and running now let's hit the GitHub and then let's push new then we're going to name our repository so I'm going to name it the exact same thing we named our project vidplay tutorial and I'm going to make this private and I'll make it public after we finish this then we can push create Repository now what I'm going to do is actually copy the top commands so to create a new repository I can simply just push paste and boom we have a new GitHub uh we have initialized a new GitHub repository let's give it a second second boom enter and then if we refresh now we see that our remate is here let's see if the rest of our project is [Music] here let's actually commit to GitHub I have a extension here where I can push this I can just put a message and then I could push commit and push P yes let's go back let's refresh there you go we have our project is now 100% uploaded to GitHub cool now let's head over to Rell if you don't have an account create an account we're going to push add new and then project and then we are going to import our new project from our GitHub so connect your GitHub to this once that's finished you'll be able to import the new project that we have just created right here in versel and I want to add that we are just trying to deploy to all of the services that we're going to be using first and so later down the line if there's any issues we know that it was configured correctly and deployed correctly first now we have an error the error should come up as that we have failed because of environment variable so let's scroll down boom invalid Val varment variables we don't have a database URL so we're going to change and add that now so now we're going to head over to Planet scale so we can actually add in our database if you don't have a planet scale yet actually just add in your email address and password and I'm going to do that now cool so once you have created your planet scale push on the create button then you'll have a whole bunch of different things uh we're going to first put in our the name of our database so I'm going to call it this database the location or the region that you want it in is the closest this one to you so I'm in the east coast so I'm going push East in Ohio and then we want to go down and push create database and make sure that you also have the free tier selected cool it's uh uh running an instant of our database now boom it's good con then I'mma push connect to your database there you go then you have the name you have the branch you have the role and now we're going to push create password cool do you want to actually select on uh you want to go down and you want to First select Prisma because that's uh what we're going to be using you want to copy that then you want to go to your environment variable EMV file and then just paste that into the database URL and you want to do the same thing with password and we're going to go to next off secret we're going to un highlight that UNH highlight it and then paste that in there as well the password cool now you want to save cool now let's go to our Prisma our schema that Prisma file and then this is basically um how we're going to actually be writing all of our uh schemas to the database uh we have some configuration to do I can go to Prisma doio and under the MySQL section there is some configuration so I can copy this and I can replace the provider from SQL light to my SQL so let's do that now let's copy it and then right under data source we can replace it with our new MySQL provider cool now we also want to add one more thing uh and then we're going to put Prisma there you go let's save it and we also want to get rid of the Json protocol [Music] perfect now we can push npx Prisma DB push into our terminal we can push enter and then that will push all of our entire schema that Prisma file up into uh Planet scale and start creating our [Music] database Prisma client then we can push MPX Prisma studio and this will run Prisma studio so we can actually see all of our models perfect is at Local Host 5555 let's go to it cool now you see all of our models for our database our account example session user verification token Etc now we go to next off documentation and under that we're going to copy the environment variables that we need in order to um set up next off so let's go to ourv file let's replace the Discord client ID with all of our email um email information this is we're just what we're doing here is replacing the Discord provider just with the email provider we can go to o. TS and we're going to replace the Discord provider with the email provider we can also copy the theme configuration and let's just paste that right underneath email provider and yeah we're going to come back to this um we're going to check we're going to um set the logo um the button uh text Etc you also want to remove process like how I'm doing here save it there we go so now next go to our our invariable MJS file and what you're seeing right here is anytime we want to create a new environment variable we have have to first make a validation for it so um right here where you see z- string we're using a library called Zod and Zod allows us to do validation um it allows us to trans uh transform some of the um variables that we have some of the values we have Etc right here you see strings everything we can do with that we can validate them we can also throw down messages if there's an error with it um yeah uh so if you're not familiar with zot check it out out cool so let's go back to our environment. MJS file and instead of taking Discord client ID we're going to delete that and actually put all the variables from our email and paste that into the file cool and let's also do that with our runtime en uh runtime environment variables as well cool now in order to actually send emails to the user in order to validate their email address we have to use we have to have some sort of email server so what we're going to do is actually use our Google account as an email server so let's first head over to our email uh our Google Google account and what we're going to first do is scroll down and I want you to activate your two Factor authentication so enter your password enter the step you want to do and I'm going skip this part for me and then once I have it finished we'll come back cool so I finished it we have two Factor uh activated next I want to search up app passwords boom then I want to go down I want to select other the custom name I want to type in the name of my project so I'mma put vilore tutorial I want to push generate and then I want to copy this password then push done now we're going to go over the vs code and then into our environment variables right where we see email server password we're going to paste in that password that we just got from um our Google account I want to also change email server report to 465 also email from uh we want to put that uh the email from and the email server user we want to put those are actual Gmail uh account name then we can change example to Gmail then we can go over to an SMTP tool to actually see if our server that we're using for Google our email server is actually working so all the information that we put into our environment variables we're just going to put into this tool so SMTP Gmail or password Port 465 and then the email address that we're going to be sending it to is one that we're going to temporarily make on gorilla mail so here in gorilla mail I just set the the email to vill and then I get an email called vitch sharkl lasers.com I can put it right into gas test it and then here you see um the test is being sent so we just sent the email let's go back over to guilla mail boom let's wait boom we got a new email and it says that it has successfully send the email cool so now let's test this actually in vs code in our web application so first I want you to push mpmi note mailer into your terminal this will allow us to actually send email address from the the web application then I want you to restart your development server so now we're just going to run MPN runev after we installed not mailer cool let's go to Local Host 3000 and now let's push sign in then I'm going to go and put in VD at sharer.com push sign in we're going to go to gorilla mail to see if it's working let me click the email we have got it let me put sign in on the uh authentication email and it leads us back to Local Host 3000 and boom we are logged in cool so now let's transition back to our Prisma file we are going to start writing in some of the models in order to to construct our database so if we first scroll down you'll see verification token session and stuff these are all for next off then our user um that's the thing that we are going to be modifying right now and then we're going to also add video and play list Etc the the question mark you see is actually saying that this field is optional so what we're going to start doing first is uh put in background image we're going to say that this is a string the we're going to say db. text this allows us to write much more characters inside of our attribute so now we're going to also write handle then we're going to make this string and then with a question mark making an optional and unique saying that each handle that we have must be unique so none of them can be duplicates next we're going to go to model we're going make it video create one that says model video we going have ID we going to say that ID is a string and it default is going to be a uh a unique generated ID that's what that c ID means next we're going to do title we're going to say it's a string we're going to say uh db. text what allows us to have much more characters next we're going to do thumbnail string db. text next we're going to do description where say string db. text next we're going to do video URL string db. text then we're going to do publish this will allow us to publish our videos our default is going to be true and if if a user wants to switch that to false then that video won't be able to be seen from anybody anymore next we're going to do user ID we're going to say string then we're going to do created at uh we're going to do datetime default now this will as soon as a video is created the created at time would automatically generate the the the time that it's set next we're going to do user relation to user ID so this means the um the user ID field references the ID at the user let show you this now and do add index user ID let's change this thumbnail URL thumbnail to thumbnail URL some of these I'm going make optional I'm going make title optional make thumbnail URL optional for the time being cool I'm going to make a I'mma put videos I make that array videos this this is a one to many relation oh made a mistake let's change that to user user ID and boom we should have no more errors in our video model cool so now let's do model let's do video engagements we're going to do ID string we going to say user ID string and we're going to make it optional and we're going to do video ID optional now the reason I make these optional is that just in case a user um views a video and they're not signed in right we would have no user ID to actually give now we're going to add the user ID relation let's just do add index at index and then video engagement array automatically pops up at user and video because this is a mini to mini relationship now we're going to do enum we're going to say engagement and then type and then this is all the engagements that we could have we can have like dislike view we're going to say save and follow and these is all the engagement types we can have we're going to post that right here inside engagement type and there you go so now if a if a user does a video engagement it can be a like it can be a dislike it can be a view it can be a save to a playlist Etc that enum um we're going to be using that for things like um a user engagement so if a user follows another user we're going to be using that engagement type and I'll show you later next we're going to make model comment let's put ID string similar to what we did before let's say the actual message that the person is writing I say it can be optional we're going to say db. text we're going to say video ID string then we're going to do user ID string create at updated at and then we're going to say the actual with video ID and user ID is relation to cool you see that it automatically pops up in the video and a user comment automatically pops up a user and video now we're going to do model we're going to say announcement and these is going to be similar to the the comment except we're not going to have video ID so we're going to say message we're going to say user ID I'm going say created at and then we're going to say what is referencing of course it's referencing the actual ID at the user model then remember we had that like and dislike we also want to have an uh announcement engagement let's not forget at index first user ID boom we're good if we we can now make model announcement engagement user [Music] ID announcement ID create at oh no engagement we want to write engagement type first we going to delete [Music] string you just have an engagement type then we're going to say created at dat default now updated at and then we're going to say what it's relation to it's relation to user and announcement now notice that we don't have an ID here and the reason we don't have an ID is because the user can only have one announcement engagement that announcement engagement can be like or it can be dislike but you can't have two or three engagements for the exact same announcement this is how we write that here and then you can see at the model announcement at automatically pops up we have an announcement array there announcement engagement array cool so now let's make a new model we're going to say this one is going to be follow engagement so anytime a user wants to follow a new user we're going to say follower ID string we say following ID string we're going to say created at oh no we're going to say engagement first say engagement type then we're going to say created at updated at followers and I'll show you with this with followers we're going to add followers to the user model in just a second at ID follower ID and following ID index and index let's go up to the user model now you see that these are autogenerated we're going to change this to followers and then followings so this will allow this is basically saying um for this user this is how many followers they have and for this user this is how many people they're following followings means following how much how many people they are following we want say at relation to followings at relation to followers and let's delete the autogenerated code perfect perfect now let's make a new model we're going to make this one playlist D string at ID default say title db. text description user ID create at and update at the index user ID let's make another model this one we're going to call playlist has videos this will allow us to because um playlist and video will be a Mino mini relationship this is the reason why we have um playlist has videos a playlist can have many videos and a video can have many playlists so this is why we Define a model right here video at relation video [Music] ID playlist ID then we're going to do npx Prisma DB push this would send this all the way up to Planet scale cool let's go to Prisma docks let's do Prisma generate npx Prisma generate cool and now let's do Prisma Studio cool so now let's use Prisma DB pool to make sure that we have the right database have models all the models are generated so now uh let's just run MPX Prisma studio and I recommend um uh uh naming your web naming um the web server web server and Prisma Studio like how I have on the right in order to uh make it a lot easier for you I'm going refresh this boom you see all of our models are here right in Prisma Studio there's video there's a publish field a bullion cool so now for the next part what we need to do is actually seed our database so we're going to put development um dummy data in the database so we can actually it makes it a lot easier for us to actually develop with so I already have it up um I have a draft called cloudinary for data I'm going be putting this link in the description so y'all can download it um once y'all download it uh unzip it it'll say cloudinary unor data we are going to be loading this up into cloudinary and we're going to use that in order to uh um cloud inary is going to be serving us our images and our videos so go ahead I want you to sign up make you a quick account you can use GitHub you can use Gmail let me use my Gmail cool um want you to say developer let me turn dark mode off done and here is cloud and a cool and this is all our library so the first thing I want you to do is I want you to go to settings push that then I want you to go to upload load I want you to scroll down and I want you to push edit on this ml default and I want you to turn this unique file name I want you to turn this off so if it's on I want you to turn this off I want you to save it here you go cool so the second thing I want you to do is we're going to delete all all of this uh we're going to delete all this data inside um this folder this is all all things that were generated from cloud andary and what we're going to do is we're going to upload ours so let me make this double screen for you and just paste it in in there just like that cool so once it's finished you'll see um all the assets that we have in there you want to push done let's refresh and here's all the assets already for us cool let's make this full screen you go to folders so you can see Cloud Nary data you can delete this samples folder if you want um next I want you to go to settings then I want you to go to count I want you to take this cloudinary name right I want you to copy this and then we're going to go to our EMV file our environment variables and we're going to make a brand new environment variable for cloudinary let's call this next public underscore cloudinary underscore name equals and then the value that we have cool and the reason why we put next on uh before it is uh because it'll be seen on our front end and back end specifically our front end and we need to have next in order for um our front end framework to understand it next I want you to go to um our uh our env. MJS file I want you to go to the bottom runtime in uh in variables and then I want you to paste in the new the new um cloud and area that we have boom then I said we're going to have it on a client and server so we're going to put it our client side and we're going to put it in the server side as well cool so next thing that we're going to do is actually add our dummy data into our actual project so I have the completed project already here up on GitHub if you go to our GitHub you go to Prisma and you go to data the folder I want you to get clone the entire project and add this data section to um your Prisma Prisma folder simply like that this uh has all the Json that is needed for the entire project um all the models user playlist announcement comment bunch of data already packed in there for you so we can um develop this project user model we have thumbnail thumbnail uh everything all all all attributes for all models already packed up in that uh data file data folder cool so now let's set up the necessary packages we need in order to actually seed this database so here's a good blog from planet scale on how to do this if we scroll down to this place we're going to copy this and we're going to put this into our package.json can go ahead here and we can paste this command Prisma seed CJs next we're going to make sure you have a C.S file next what we're going to do is start adding some things in order to actually SE our database so first I want you to say import I want you to do Prisma client I want you to import [Music] user user is going to be a type and I want you to say from at Prisma client then I want you to import FS from FS this allows us to work with different files and directories the same thing with path then I want you to write cons Prisma equals new prisman client then I want you to do con user file equals path. joinor directory this allows us to select the actual user. Json file let me not forget data user.js we're going to parse our Json data in order so we can read it and then it's going to be type of user right so each Json array is going to be type of user cool so now let's write async function process and chunk and what this would allow us to do is process many different objects um Json objects together so we can give we can process 10 of these at at once right and this should speed up how fast um uh uh it will take for us to upload everything to Planet scale say process item and I'm writing out the types first all the types that we're going to be using for process chunks cool next we're going to say async function Main and then this is going to be where we put all of our um all of our uh uh functions that we're going to be calling in order to par um each file in order to process each file so we're going to be doing this for user we're going to make a function for video video engagement Etc first we want to make sure that um if there's any type of errors that it'll it'll catch it and then it'll actually disconnect from um or database so we're going to say Prisma disconnect we want to say void because we're not returning anything cool so first we're going to do this for user um before we um go and um process any data and um start uploading it to Planet scale we're going to delete um all the rows for each model first so we're going to say await Prisma that user. delete mini it'll delete all data then we're going to say await process in chunks user 10 the 10 would mean that this is um how many users objects that we can give at once so we're going to do 10 we can up this to even a 100 if we wanted to um but uh no need uh because we don't have um crazy amount of data we need to see upsert means um uh uh if there is a replica of the data in the database it will actually just update it and if there isn't then we'll create it next we want to do cons cloudinary name this is going to uh we're going to give it um our environment variables environment variable we're going to give it is nextore public cloudinary Cloud [Music] name and if there is none then we're going to just say or just an empty string next we're going to say dot dot do user so this would just say all the information that is in user say email verified user. email verified if it's true it's going to be a new date if not undefined as for image uh it's going to be another If U um conditional statement so if we have a user. image then we're going to actually make a cloudinary link and our cloudinary link is going to be composed of our cloudinary name and then this um image link as well right so let me show you so be HTTP cloud.com then it's going to be your environment variable name so your cloudinary name then it's going to be user. image put a money sand there and if it's if we don't have a user image then it's going to be null we want to do the exact same thing we did for image we're going to do for background image as well we could create and we're going to do the exact same thing like I said for upsert we can update or we can create let's just add a curly bracket and a parentheses there and let's just add this to one just for the first test cuz our data set is pretty small let's also add a comma right after cool all right so we already we have user we finished user next we're going to add a weight processing chunks for video and we're going to basically do the exact same thing we ID update all video created that updated that then we have thumbnail URL we're going to do exact same thing that we did for image back in users and we do the same thing for video URL cool let's do the same thing for create do we also want to add the video file videos Json porse as well cool let's just add video type cool so now let's just put await Prisma Dov video. delete mini and let's just take just make that video let's first go up here and add video engagement the file and the path name similar to what we did with videos and users then we're going to do json.parse now we're going to do this for each one of the models that we want to import so let's do video engagement let's do follow engagements cool so now let's go back to process in chunks and for we're going to just do the exact same thing but for playlist for playlist uh manyi users uh or playlist has videos we're going to do this for announcements announcement engagements Etc cool and now what we're going to do is just do um processing chunks for for each one of them uh for video engagement uh since we're not uploading any images to cloud in area there's no need to um do anything more complex than just say video engagement. create now for follow engagement just because of how our data is created in our Json um Json files we're going to first search the database for an existing F engagement that matches the follower ID the following ID and if we get um if um if existing follow engagements equals a length of zero or if it's non-existent then we're going to create it if anything else we're just going to return and then move on to the next Json object now we're going to do announcement engagements we're going to do the exact same thing we're going to first search if there's an existing announcement engagement that matches the announcement ID and user ID and if there isn't one then we're going to create a new one if there is one we're just going to return turn else return curly bracket let me just go back to model where uh there's a typo cool and we're good next we're going to do comments we also going to add um some new thing and I'm saying this is only just because of the nature of how our day data is um um added in our Json files uh we're going to do get next video ID and we're and this what it's going to do is automatically generate um a a a a video ID for us we're going to do the same thing for user ID let's make this let's current equals start we're going to add cool so what's going to happen with this is that it's if um it's going to first go through one all the way up to 31 or whatever the numbers is and once it hits 31 then it's going to restart back to one now I said we are only doing this because of just how our Json data is set up then from video ID and user ID we say get next user ID cool now let's make playlist do ID update we're going to do the same thing for user ID same thing for playlist has video but it's pretty simple so all we have to do is do create and we are finished now we have our entire seed file in order so we can seed our database cool so now we're going to go back to Prisma doio and there's this command that I want you to grab and we're going to actually put this one into P package that Json right there the next we are going to grab this um package then install it and then we can put MPX Prisma DB seed cool so now once you have that finished we're going to go to Prisma studio and then you should see we refresh you should see that all our models are filled and we have tons of different data announcement engagements follow engagement user Etc let's select user and we see some of the names we have ADHD uh you know chps Etc let's go to video we see thumbnails title let's try looking at a thumbnail here you go let's go background image you have another one already all loaded up the cloud andary let's try this there you go cool so now we're going to transition to Tailwind doc config.txt we're going to first do colors then we're going to set primary and all these values for the colors are straight out of figma that now error these are all the colors for different erors the back the colors for warning success then F family let's do plugins here you go then we're going to put a Tailwind CSS forms cool and looks like we have all the files we're going to change export the const perfect and yeah these are all things that are exported directly from tawin or from figma cool now I want to change this config.sys to CJs I next want to take npm install tell when CSS forms and I'mma download this I'm add this because we have a plugin and now uh we should be up and running cool so now we're going to to our source folder and we're going to make a new folder called components inside components I want you to make a new folder and we're going to call this one buttons and then inside that I want to make a new file called called buttons. TSX then I want to make a new folder and I want to call this one icons let me move this perfect so now you have a should have a new folder called buttons and a folder called icons now let's go to our buttons file and we're going to first import react we're also going to import a couple different properties a couple different types for our button next we're going to import link from next.js and this will allow us to link the different tabs a lot easier we're going to also put in button or anchor props these are types that we're going to be using for our button next we want to extend one of the types using an interface and we're going to name this interface button props we have different variants and size and we're going to also have a herf um the variants and size come straightly from figma itself right so for our design system we have primary secondary uh terti gray um these are the variances for our button and we will show you in that in a second next we want to do cons button we want to do on click variance size equal uh medium Hara disabled Etc these are all things for a button um that are going to be set by default so for example variant equal primary that is going to be um the default value for any button that we create so let say const size classes and then we're going to write in the CSS for each one of the sizes right so for example we're just going to write medium just to give you an example we have um padding we have teex small Etc and we'll have one for each one of them we're going to do VAR classes so we're going to write one for primary we're going to do that for secondary gray as well and Tahiri gray so to start off we're going to do background primary text white just to give you an example and then with button classes we're just going to say class name size classes and size what button classes does is that these will be all the classes that the the given button would have every single class return if it's haraf we want to do link that common props just put button dot do. common props and there we have it and the reason why you're seeing size classes and variant classes have an error is just because we don't have every s