🔴 Let’s build Dropbox 2.0 with NEXT.JS 14! (React, Clerk, Shadcn, Firebase, Drag/Drop, CRUD, TS)

yo what is going on Papa F it's your boy sunny and I am back with another video but today nextjs 14 all right so we're doing the latest and greatest stuff on this channel and we're building Dropbox now this one I'm excited for because this is one that anyone can join with it's going to be a beginner friendly tutorial and I promise you this when I say this guys this one is going to be one that you want add to your portfolio it's got so many impressive things but I guarantee you're going to really really enjoy building this let me know where you're watching from right now I want to see everyone light that chat up right now I can see everyone's tuning in from loads of different places around the world let me know where you're watching from we're going about to drop the demo of this Dropbox 2.0 clone we've got nextjs 14 react of course we're using nextjs we've got Shaden cler for authentication Firebase tailn CSS typescript and so many more goodies on your screen get ready guys this is is the n this is the drop I was about say Netflix this is your new Netflix this is the Dropbox 2.0 clone check it out guys here we have our beautiful app so much to go ahead and Showcase from we got South Africa now I see you guys I'm going to tune in and reply to all your comments in just a second but we got the Dropbox 2.0 clone fully responsive let's go ahead and click into it right now this is our dashboard guys and I want to highlight a couple of things before we jump into the demo firstly beautiful you know light and dark mode that's a standard now we've got this right right fully fully responsive app looks amazing guys clerk authentication look at that and if I go ahead and show you something let's sign out right now and you can see it Gates me so we've got middle wear inside this build as well if I try and go to the app and I'm not signed in check this out it goes ahead throws me to a login screen where we're using clerk authentication we click continue with Google and then you can go ahead and sign into any of your accounts I'm going to sign into my signning account and by the way yes it is correctly working if you sign into your account right now you will go ahead and see only your files and as you can see right here we've got all of our stuff now if I was to go ahead I can either click this and a popup will show or I can go ahead and drag and drop something in right now so I'm going to go ahead and take a thumbnail for example when we hit 220,000 you look at that guys we've got a nice drag and drop functionality go ahead and highlight it toast notifications boom beautiful stuff and here you can see we've got our nice little file that's been uploaded I can go ahead and download that and you can see for a second boom hey awesome stuff and we can go ahead and even rename it so if I go ahead and say we're actually at 240k now so I can go ahead and rename that boom we can rename our files and if I want to go ahead and say for example I'm not happy with this podcast right now we can go ahead and delete that just like that so we've got full UI ux facilities here full cred functionality loads of stuff happening in this build and it goes ahead and detects which file you've got going on as well all of this is coming up in today's build we've got our navigation everything works and as you asked for it I saw somebody ask is it fully responsive Sunny 100% yes guys this is a fully responsive build is something that you want to go ahead and call along with me now I'm going to go ahead and reply to you guys so we got USA in the house South Africa Somalia India Kenya what is Good Guys TI Leon go ahead and keep letting me know where you're tuning in from we've got 200 people at the moment already tuning in this is absolutely awesome and somebody ask me sunny are we going to be doing authentication from scratch via next or no we're actually going to be using cler authentication today so if you haven't used clerk we are using this today to go ahead and power things up now if you haven't already heard before I jump into this this is a beginner tutorial so this is going to be something which anyone can follow along with me from so if you're a member of the pap F or you're new to the channel you can go ahead and follow me along with this and it will make sense I'm going to break it all down today at a comfortable pace so you do not have to worry but if you want to go ahead and take it a step further the papa F has opened up its biggest sale ever ever period right we've got a Black Friday sale Cyber Monday you can go ahead and check it out right now the first link in the description takes you to papa.com course where you can go ahead and join our flag FL ship course now guys I put my heart and soul into this course you can literally go ahead and check out for yourself you've got about 2 days to capitalize on that deal and it's pretty much 50% off the entire course so we teach you to go from zero to absolutely Landing your first job smashing it as a developer and we've cracked this formula take a look for yourself and enjoy this video and if you want to go ahead and learn or you find it too difficult that's the place where I'm going to make it easy I'm going to make everything make sense okay now today's video was only made possible by our friends over at Host ninja so not only are we going to be building an awesome app today but I'm going to show you how you can go ahead and deploy it so that way you can go ahead and add it to your portfolio and show it off to your employers land your next dream job okay and after that we're going to go ahead and show you how to actually host it to your own domain name okay so today this video is brought to you by our friends over at Host ninja now why would I recommend these guys firstly I've been working with them for a very very long time they're absolutely absolutely incredible sorry I've got a bad cough right now they're absolutely incredible and right now I've got you your your boy has sorted you out with a 63% discount yes I said it 63% so not only if they got a Black Friday to sell on right now but you can go ahead and claim it right now by clicking the claim deal button right here so all you got to do head over to the description you can select any of the options right now this is actually a VPS so I have shown you in a separate video how to deploy a nextjs app not to Vel but to your own custom virtual private server so if you're interested in either getting a domain name or getting a virtual private server host ninja is a place that I would recommend now in this case let's go ahead and say I bought a virtual private server here so I click add to car very simply go ahead go to my car and your boy made it so easy for you guys firstly just simply select which plan you want head over to the bottom and where it says you have a coupon code simply type in Sunny apply and just like that boom I up your discount so you've got even more discount on the top of it right so this is something you do not want to miss their Black Friday sales are always awesome and the reason why I would highly recommend these guys honestly they're just they're really really amazing to work with they got massive uptime they've got amazing customer support extremely fast servers and if you're old school and you're still using things like WordPress they've got support for you right out of the box and the best part guys if you're not happy they have a 30-day money back guarantee their servers are bloody awesome I've done a VPS video on it you can check out on the channel if you're watching the replay the video will be popping up somewhere around my face right now okay so definitely go ahead and check them out this is something you do not want to miss and as I mentioned before if you find any of this tutorial little bit too tricky a little bit too hard then make sure you go ahead and check out pat.com slcse to go ahead and get started and join the community right now it's it's worth mentioning sorry guys I got such a bad call it's worth mentioning if you want the code for today's video it is going to be available in the papa gith her Breo okay so you can either follow along for absolutely free or you can go ahead and get the code and you can get access to not only today's build all my future builds and over 50 of the builds I have already done including the personal portfolio and resume so AB absolutely Banger what more what more can I give you guys honestly it's crazy right so before we jump in I'm going to go ahead and Shout everyone out who's joined in today's live we' got New Zealand Tanzania Colombia dii Cameroon Romania France India Finland Malaysia D Ghana Rwanda Nigeria Morocco that's what I'm talking about India UK USA Bangladesh Zambia rainy Britain I feel you I'll be back in Christmas time and I I feel your pain right somebody says will we learn how to use Ser action Sunny so today is actually more of a beginner tutorial I have got a dedicated video on server reactions feel free to check out my channel it's literally there I teach you all about it so we've got loads of stuff happening right now so let's go ahead and jump into today's video I think we're good Jay we're all clear let's go ahead and dive into today's video guys so first thing I want you to do is we're going to spin up our app okay so we're going to get into a bit of a flow state right now and we're going to go ahead and get started so first thing I want you to do I like to use the warp browser okay so the war browser is basically a glorified terminal it's got loads of additional add-ons but you can use a regular terminal is completely fine I'm going to make this a little bit bigger for you and feel free to code along let me know right now are you coding along with me today or are you just going ahead and watching for fun and watching the replay all of the replay will be up on YouTube afterwards remember if you do enjoy these videos all I ask is you subscribe and you smash that like button for the YouTube algorithm so this video gets pushed out to as many people as possible okay let's go ahead and jump into it so I'm going to go ahead and type in documents builds so I'm actually going into it and if you haven't if you're not using warp you have to put a CD and we're going to go ahead and say create next app okay so I want you to go ahead and do the following command MPX create next app at latest now if you don't have MPX and that does not work all I want you to do here is simply go ahead and Google node and you have to go ahead and install node okay so right now I'm going to type in drop Dropbox clone Dropbox clone YouTube okay hit enter now this will go ahead and prompt you a couple of questions right it's very very simple to go ahead and get set up would you like like to use typescript in this case I'm going to say yes yes yes yes so basically just keep hitting enter all the defaults are completely fine now while this is preparing I'm going to go ahead and break down the tech stack for today okay so some things that we need to know about while that's going ahead and getting ready some of the things that we built today or some of the things that you're going to learn today firstly I'm going to go ahead and say oops okay we do not want to do that firstly I'm going to go ahead and show you we have if I type in okay there we go yeah we've got nextjs 14 okay so nextjs 14 absolutely Banger technology we're teaching you all about that today of course if you're learning next yes then we're covering react react is the fundamental Library Underneath It All Right Next just is simply a framework for how we use it then we have Shad CN so all of this beautiful UI that you see including the lovely popups that you saw right here all of these models all of this beautiful stuff even this sorting feature look at that but oh I forgot to even mention look at this we have skeleton loaders look at that server side rendering at its finest right so let's go ahead and pop this this in we are going to be using Firebase to go ahead and store so we're using Firebase storage to store all of our files and then we have Firebase fire store to go ahead and actually store everything in a no SQL fashion okay I'm going to go ahead and switch on not fan of this one okay then we've got Tailwind CSS which is built off of Shad CN so let's go ahead and Pop That in Tailwind CSS so again if you want to go ahead and you've been wanting to learn any of this stuff this is the time you want to do it we also have clerk for authentic ation and it's also worth mentioning that cler is actually going to be implementing a middleware so middleware is something which is actually part of nextjs 14 it's part nextjs 14 but we're going to be making it so so simple so that way if you try and access a authorized page you get thrown out back to the home screen trust me this is way easier than you think okay we have full crud functionality with all of this you can edit delete add in new files and of course we have our Dragon drop so this is beautiful Dragon drop everything is working the way you want it and we have this lovely little toggle for our dark mode so if you've ever wanted to add in dark mode to your app and yes this is coherent with the entire app you can go ahead and see for yourself we even have the system preferences as you can see my system preference is dark mode cuz I'm a developer so a lot easier that way right so lots of cool things to look forward to and of course this is all built with typescript off the base of it so we're trying to reduce the number of bugs inside of our code base and then after all of that I'm going to show you how to deploy it to Vell so let's go ahead and jump back into our setup so heading back over you might get this message right so it says you know the node version is currently too low now I want to highlight this right so I actually did this on purpose right now I'm on node version 16 and it says the required version is node version 18 so what I'm actually going to do here is I'm actually going to delete the file that I just created right and there's a way that you can do this so I'm going to show you how we do it so we say make uh remove Das RF which is like a recursive remove and I'm actually going to remove that entire folder so I've got rid of the folder now I want to show show you something so something that you might find extremely handy if you simply type in NVM inside of Google this is called a node version manager now node version managers I teach you inside of Zer full stack her a lot this allows you to switch between your node version it's really important that you know how to do this right so all you want to do is go ahead and add that to your setup and now once you've got that we can simply go ahead and type in NVM LS and I can actually see all of the versions on my machine so here you can see I've got version 16 18 20 and so forth right and you can install new versions by simply saying install and so forth but now I just want to go ahead and bump it to version 18 so I say MV MVM use 18 and just like that I'm now using a later version of Noe so what I can then do is go back run the original command rebuild the app and now we won't see that error message so these tutorials are not only about everything going perfectly smooth it's about showing you the actual production things that you need to know to succeed in the real world okay so now we that's going ahead and done it we can go ahead and say CD Dropbox clone and I'm going to go ahead and type in YouTube like so and now we're in the correct directory so I'm going to type in Code full stop and this will allow me to open up vs code in my um correct foldo so that is where we want to be I can simply close War afterwards and as I always mention in every build prepare your environment so it's all fresh so I like to have my code up and then I like to have a separate window in the same coding View and I'm going to Simply do this so I pop it on the side right there and now this is where you want to be this is our starting point now first things first you you'll notice we have the app directory this is because we're using nextjs 14 so anything after nextjs 12 so nextjs 13 14 starts using the app directory we simply click into page and I want to run this app now okay so what I'm actually going to do is I'm going to cut my previous app and I've actually got a deployed version of the app so I'll tell you what if you guys want to go ahead and play with this app right now you can feel free to go ah ahead and head over and mess around with it a little bit check this out boom I love the comment that just came through by the way somebody just said Sunny is the only guy I've seen who live fixes bugs what a legend and I promise you guys I will always do that I will never ever try and perfect everything to a granular level because the reality is you will get bugs inside of your that builds when you're building them and it's not fair if every single tutorial never shows you that you need to see that part because that's the part where people quit and I'm going I'm not letting you quit all right I'm going you're going to you're going to get past these bits okay so I'll put it inside of the chat right now so you can feel free to play with the app yourself I'm also going to be using that as a reference in the event that I need to go ahead and refer to our app if we need to for example the designs and everything okay so next up we've got Local Host 3000 you can see nothing is on there so command J opens up my terminal click on the output tab close the first one close the last one you should simply have your terminal now all I want you to do mpm run Dev I'm going to make this a little bit bigger so you can see it and we're going to go ahead and hit enter now while that's starting up oh we've got a little error here and this is because okay another issue right so we set our W up with uh node version 18 right so in this case you can see request is not defined this is because when we're using nextjs 14 we actually need to use the latest version of node so in this case what I want you to do MVM LS and let's check which version this is on so you see when you open up a new terminal window sometimes it reverts back to the old one so you can set a default I'm not going to go through that right now but what I want you to do is MVM use 18 and now we switch that version back to MVM 18 and we can say mpm run Dev and if this doesn't work we can you simply bump it to 20 okay but you can see right now we our issues are now gone so I hope that was actually useful to you because that is the real life production things that will happen when you go into a production environment now we're going to hit Refresh on local 3000 and you should see hey we've got next J right sick right everything's good Shahid I appreciate you he goes you're the best Sunny hello from Australia um Jay's a legend awesome stuff somebody said that Link's not working I tell you what I'm going to give you the actual link right now I think I gave you a production URL bear with me in one second I'm giving you the link right now I'm going to post it into the live chat right now so you can see that there you go somebody says any reason specifically why we're using version 18 yes because nextjs 14 is now based on I think it's 18 and above so you obviously each node version includes new things they want to leverage that right so in this case we've got the app started so what I need you to do now is we're going to start building this out I think this is a good Pace I think people are enjoying this and I can see the retention is absolutely incredible smash that like button if you want me to carry on at this pace okay so what I want you to do now is everything inside the main brackets you want to go ahead and delete all of this so get rid of all of that simply type in H1 and we're going to type in Dropbox clone now you might be wondering Sunny what the hell is all those popups so You' you got on your screen so if I type in h how are you getting all that right so this is actually tailn CSS utility classes and the way you get that is you simply head over to extensions type in tailwind and all I need you to do is go ahead and click install on this Okay click install on this and you're going to get all of those additional helper sort of suggestions all that kind of stuff now once you're here I'm also going to get you to install my favorite which is actually this one so es7 if you type in es7 you will see this one right here es7 react Redux react na Snippets now I kid you not when I first started showing this it wasn't even a million downloads now we've got 10 million I hope I had a contribution to that I think I did um but yeah that's the one you want to go ahead and install Okay quick little War break because I'm coughing like crazy today and I'm going to go ahead and address some of the the comments moment says Hey Sunny this is your boy moment from Sudan I got a job opportunity in Saudi because of you thank you so much for everything you do from us dude that is sick well done that what the papa fam is about Jay screenshot that that is awesome cod with G what's up he goes thanks a new live what's good can't says sunny has saved a lot of lives dude I appreciate you so much thank you so much for say sharing that with me honestly I appreciate every single one of you your messages mean so much to me got such a sweet message yesterday it boosts me up you don't understand how much they mean to me it's crazy right right now we've also got the playlist going I'm going to go ahead and start this off from the beginning we're going get into a flow State start building this app out okay so right now you should see this Dropbox going now I don't want this this doesn't look like at all how I need it right so what I want you to do is we're going to go ahead and get rid of all of this now you can see it's just in the corner right so we want a absolute minimal styling the next thing I need you to do go to layout. TSX now think of layout as the skeleton the skeleton is here and what I want you to is I'm actually going to simplify you can modify the metadata of the page we can say Dropbox clone YouTube and so forth and now you can see look our metadata change for the page and you can also see that this is basically where the page is going to get injected so if you think of children as essentially where the page is going to get injected right so this is a layout file it allows us to go ahead and get everything sort of you know visually as we want it but you might be wondering why is the background black this is because we're importing global. CSS and you can see we've got some default styling now I want you to go ahead and remove all of that so all you have is Tailwind base components and utilities this is essentially how we go ahead and get everything look at someone goes we are 177 live and likes are 167 kindly let's balance yes exactly smash that like button get up to 200 get up to 500 get up to 1,000 right this video is going to go big I'm telling you right so at this point we hit save and this is where you want to be right you need these three at the top to go ahead and pull in all of the Tailwind magic um so that's great we've got that looking good now what we're going to do I always like to go ahead and draft out my apps in a very similar way every single time and today is no different right we're going to go ahead and have two pages inside of this app the first page is going to be the homepage the second page is going to be for SL dashboard okay so you can see dashboard is protected by an author page right so in this case I'm just going to log in just to show you something and right now you can see for SL dasboard okay so with this page in mind what I want you to do this is very serious this song right as B okay so what I want you to now do is we're going to prepare our app for this so let's simply go into this our homepage so the for/ index page is simply this one now in nextjs 13 onwards the way we do our routing is we do it based on folder okay so what I want you to do is create a folder and call it dashboard this will reflect for SL dashboard right but right now you'll see a 404 because we don't have a page. TSX all I need you to do create a file called page. TSX and now remember those Snippets I talked you about earlier You're simply going to put RFC boom you have a page made for you and we're just simply going to type in dashboard okay and now you can see boom we have a dashboard okay so this is the first step okay I've got grammarly correcting everything that's fine so this is going to be our dashboard so now we've got our two pages we've got for/ dashboard and we've got our home screen Dropbox clone okay so the next step naturally is I want to actually add in my authentication first I want to handle that part first so what we can actually do is we can say anybody can access the homepage but if I try and go to the for/ dashboard you have to be logged in otherwise you ain't getting through to that point okay so I'm going to make it super easy for you to do that so first things first I need you to head over to clerk.com okay once you're at clerk.com I want you to click on dashboard now all you have to do here is create an account I already have an account here we're going to click on ADD application okay it's very easy to go ahead and use let's go ahead and call this one dropbox clone YouTube right how will your user sign in you can actually enable a number of different sign-ins and look at the that guys beautiful easy to set up they have all the components ready for you we're going to keep it extremely simple today and just start off with Google you can even see look at this look honestly incredible service really really incredible service we're going to click on create application Google is going to be our primary signin uh component today okay so then we've got nextjs now what I want you to do here is copy these environment variables okay copy them head over to your code and we're going to create something called an environment variable file so I want you to click on package Json so you're at the top level then I want you to create a env. local file this is where we keep all of our you know keys they could be you know private keys they could be public keys but in this case I just need you to paste now I'm not going to show it because otherwise everyone can basically hack my stuff I'm going to go ahead and paste what we just copied before and I'm going to tell you about two things right so I actually want to show you something because right now so what I've actually done here is is I've hidden the first key so anything that says next public next public means that this key will be shown on the client side as well so this means that it's not a you know it's not a key that we worry about getting leaked so hence why I can show you this key nothing's going to happen right so in this case next public means that on client side renders it's going to be shown so if you ever try to access that key from the browser you will be able to get the value of it any other key which does not have next public appended to it or prepended to it will not be visible on the browser and I stress this point you need to understand by default all environment variables are like you can read them on a server render so if you're doing server side rendering or you're doing a pre you know rendering the page beforehand and preparing the data all that stuff can happen on the server and you can get access to that but if you try to access it on a client component no no it's not going to work right and they do that because it's safe to do that right you don't want to have that component that key being leaked out to everyone because you know they're going to use it it so in this case I'm going to go ahead and paste my key back in hit save and I'm closing my environment file guys this is absolutely awesome we've got over 200 people now watching on different platforms this is great smash that like button we're about to smash 200 I can see a lot of people saying where is the storage coming from We're actually using a Firebase storage and I will be covering all of this today okay this is actually somebody said how long would this build take well I'm going to I'm not I'm not going to rush it but I can guarantee about maybe the 2hour Mark is a sweet spot here right so we've got our Dropbox clone let's go ahead and go back to our setup so we've already done this then we can click continue in dots okay now you can see here we've got a lot of different examples right so example repositories you can go ahead and check that out yourself but we're going to go ahead and install cler into our application so I'm going to go ahead and pop this on the side right now I'm going to do command J to pull out my terminal and what I want you to do is get used to having several terminals open so my left terminal is the one which has my app running I'm going to split my terminal and I like to work this way so I can see my left one running and I'm simply going to use my right terminal as an installation terminal okay so once that's done we can simply go ahead and pop that over there quick little water break my my lungs are not good today Shaquille says you're a legend bro I appreciate your content I appreciate you so much thank you for tuning in my guy right so at this point okay I've done the same mistake here I've gone I need to go ahead and actually type in MVM use 18 you would probably want to default this at this point but I think it's handy to show you that anyway then we do mpm install cler there you go we're good okay now at this point what I want you to do is we can simply pop these in now every time I install a new package I'm going to do it this way and I'm going to keep an eye on my uh app running on the left side comeand Jay to hide that and we can carry on okay so once that's done we've already set our environment Keys we need to wrap our app in something called a clerk provider okay so what we want to do head over to our layout file and we're simply going to go ahead and pop this in so command P opens up a quick search so I don't like to go ahead and click this go into layout that's for me that feels very long instead command P layout enter much faster tricks and tips right this is why it helps to go ahead and actually help you know have a mentor sometimes teach you these little shortcuts okay so after we've done that I'm going to go ahead and copy this pop this in the top clerk provider all we need to Simply do is wrap the entire app so not only the HTML part but the entire app inside of our clerk provider okay just like that simple as that okay then we need to go ahead and add in a middleware file now all a middleware file does is essentially every request that is made to your application goes through this middleware so let's say here's our website over here right here's me as a user every time I make a request to my website so that request comes over to my website then all we're essentially doing is we're adding a middleware which just simply check something you can check anything you want in this case we're simply checking are you logged in or are you not logged in and that middle where will basically say okay you're logged in so you can get to go through to the website if you're not logged in you get to go back to your initial homepage or wherever the hell you came from okay so that's essentially what we're adding in right now so here what you want to do is at the top level so package Json now this is actually a nextjs feature I want to create a middleware dots file it has to be called middleware dots okay we're using typescript of course then what I want you to do is copy the contents of this file okay now what this does by default is it protects everything right including trpc Roots if you're using trpc it's going to go ahead and basically say everything by default is protected okay so now if I went to my application and I actually tried to refresh you will see it actually will try and log me in so you see this look oh we can't even access the homepage that's a bit weird right so how do we actually go ahead and say that there is a public page and that public page is the homepage guys we're about to smash over 200 likes destroy that like button and make sure you subscribe if you haven't already subscribed okay so let's go ahead and do that right now we type in public Roots just like this and we put in an array and you can simply start putting in some Roots so in this case we're just going to put forward slash now if I try and access my Local Host 3000 boom look at that but if I try and go to for/ dashboard you will see that page is protected so just like that somebody says okay that's jokes um J you see that um so this point you can see if I go ahead and do this for SL dashboard boom look at that all right so this is protected now so heading back over we've already set up our authentication I kid you not it's that simple to do that right so with that bit done now what we can do is add something called a user button so I'm going to show you very simply how this will work we can go ahead and go to our app I'm going to go ahead and pop in something called a user button so let's go ahead and pop this Top Line in right here boom very simple go ahead take the user button and simply use that component like so okay now head back over to our app and you will see there is no user button okay you're probably wondering well that's pointless why I didn't do anything well in fact firstly that's because we're not logged in so if I was to log in now so if I go to for/ dasboard and I log in so continue with Google and I click Sunny sang and then I go back to the homepage I want to prove a point here so you see it's logged me in I've gone to dashboard let's go back to my homepage and there you you can see my user button has loaded it will pull my profile picture in and all that good stuff okay but that doesn't make sense because what happens if I log out you see there's no user button right and then it goes ahead and throws me back here so we don't want to do that right now instead what I'm going to do is set up a header so we're going to go ahead and build the header component so right now this header component that you see right here we're going to build this and then we're going to implement everything off of the back of that so if I sign out instead you're going to see a sign in button okay so let's go ahead and Implement that right now so first first thing I want you to do is go into your app go to the package Json level create a new folder called components and we're going to go ahead and create our first component which resembles this header so I'm going to go ahead and create a header. TSX okay just like that uh and then we're going to say RFC boom header like so okay now I'm just going to show you where we're going to put this so the header you might be wondering oh yeah okay we're going to put in the page no actually we're going to put this header inside of the layout because I want it to be applied to all of my pages so what I can actually do here is where we have our children being rended out I can actually go ahead and say something like this I can go ahead and pop in oops header like so command control space bar components import it like so okay hit save go back to our app and now you can see the header is being rendered here so now we're going to go ahead and build out our header just like so okay so first thing I want you to do is go into into your head up and we're simply going to go ahead and change our SEO for SEO purposes we're going to make it a bit more syntactically correct so you know uh web crawlers will know that that is a header which is the way you should be doing things right and then secondly we're going to go ahead and uh get some of the things like this put inside right so let's go ahead and split this up very easily now I'm going to be teaching you about flexbox all this good stuff and I'm going to try and do it in the simplest way possible so firstly this is a box right we're going to split this box up into two a left box and a right box and then all we simply do is say Center them and justify the space between and we're basically going to tell flexbox to do this and I don't really want to know any more than that all I want to know is that you handle that uh flexbox is doing its job and it basically does all that for me so I'll show you how simple that is to do that all we have to say is make this entire box a flex box we're going to Center all of the elements inside of it and I'm going to justify the space between okay and you're probably wondering well that didn't really do much Sunny you know that's kind of kept it all the same because we don't have any children inside of it so what we do is we're simply going to have two things the first one is going to be a link okay so what I'm actually going to do here is I'm going to put this on a separate screen and we're going to use it as a reference file so let's go ahead and boom we just crossed over 200 likes let's keep growing guys keep going 300 likes 400 likes 500 let's go right and subscribe if you haven't already okay so first things first is this left section is a clickable link so if I wasn't out of this page and I click there it will take me back to this link so we're going to be using the next link tag okay so it's a link tag and inside of it we're going to have things like the picture and the Dropbox sort of header so in this case the H1 is going to be Dropbox and I'm actually going to go ahead and pass a hre here and make it for SL that means if you click this link it will take you to the home screen okay so if I go to for/ dasboard that's going to be protected so let's quickly log in and I will show you Sunny s let's log into that and now you can see Dropbox is there if I click it notice what happens to the URL I'm redirected back to the homepage okay so that's perfect that's exactly what we want next things next is we're going to have a div with an image tag inside this is a next image tag and this image will have the source of the image which is actually uh it's just a Dropbox logo you can feel free to use it yourself or use whatever you want in this case I'm going to go ahead and pop this pop this in simply o tag and I'm actually going to invert this one so I'm going to invert the color of it and I'm going to say that it should have a height of 50 and a width of 50 as well hit save and now here's the interesting part so when you're using something like the next image tag firstly I have a whole video dedicated on how to use the next image tag you can feel free if you're watching the replay Jay will go ahead and add it so it pop up on the screen right now but if you're not watching the replay and you're watching this live and you want to check that out just simply type in next image Sunny sang on YouTube and you'll find a tutorial that explains all about this essentially what NEX is doing is it's it's it's pre- optimizing that image so that way it's more efficient it's cached all of those good things are being optimized but you don't want to allow any sort of URL to be optimized because then you know things that we don't want to happen can happen so what we essentially do is we have to wh list or white label white list sorry all of the different uh domains that we say is okay so we're going to go to our next config over here and we're simply going to go inside of here and we're going to type in IM is and all you want to do is inside inside of here they've actually changed it so before it used to just be domains and you might be wondering that's how we did it right well now it's updated and we simply have to type in remote patterns and we pop in our brackets right and then we have different objects which resemble the different uh websites that we actually want to protect against so in this case the protocol here is https so it's https and the actual URL is share icon. net so in this case all you want to do is pop in the following okay protocol htps host name now if you open this up what you'll actually find is it says found a change in xjs restarting the server to apply the changes it it doesn't always work though so what I would recommend is you cut it and you run it again you cut your server by doing control C command J to hide it and now if I refresh this page it will stop with that error so we can actually go ahead and do that and right now we should see a Dropbox logo com to the top but actually if I was to go ahead and stop inverting it you will see that that is a black icon right so I'm inverting it to be white and then what I'm actually going to do is the div that it's surrounded in I'm going to go ahead and give that the Dropbox blue so I'm typing BG with the Dropbox blue and I'm saying the width should fit and now just like that boom looks lovely okay now for the link tag I want the Dropbox and this to be centrally aligned so what I do is I simply do Flex Now the default nature of flex is that two children go in line so they basically go into a horizontal line is and and it puts them in like that and now if you want to Center this line so for example right here and I'm focusing on these two elements right here I type in items Center and you can see they centralize right now this is obviously better but they're too close to each other so you space out your children by saying space X2 and obviously if I did five it'll make it bigger and so forth right so now that's flexbox is doing its magic it's great right I have a whole video on flexbox as well if you want to check it out you can go ah and check that out as well okay somebody says uh will'll just use the app R because I've heard it's very buggy the app rter is not buggy how you're using it is wrong that's my honest advice the app is amazing it's just people aren't using it correctly okay let's go ahead and put a div the second one now this one is going to resemble the area where we have our theme Toggler and we have the user button okay now this part is actually really easy so firstly I'm going to add a little comment here so we don't forget about about this but in this case I'm going to add a theme Toggler there I'm going to add in a user button okay now remember the user button only appears if the user signed in so I'm going to go ahead and pull this in from cler right now boom there you go and I'm actually going to add in one more thing I'm going to say control after sign out URL you see this off to sign out URL basically all I'm saying is is if you were to sign out from the user button I want you to go back to the homepage every time so simple as that and you can see I'm signed in so it's popped up there now I'm going to click sign out and I'm going to show you what happen you see the user button's gone obviously we need something to sign in right so in this case what clerk has done for us is it's given us these higher order components that we can use to conditionally easily render a component based on if you're signed in or signed out and I'll make that simp super simple for you all you need to do is pop a bracket out say signed out now one second I did the wrong one it's clar nextjs remember be careful when you're importing these it's not clar react is clar nextjs okay now this is a higher order component which surrounds anything now if I was to Simply put a P tag saying signed out yeah you can see this is only showing when we signed out which is great right so what I can actually do here is I can use the predefined signin button from cler you can see go ahead and pop that in like so and I can go ahead and say after the sign in url we're going to take you to for/ dashboard and in fact this can do two things if I click this now it will take me to a separate screen that's cool but I think we could do a little bit better than that right so what I'm going to do instead I'm going to say mode I'm going to type in model now this is a really nice part just from that single attribute change look what happens when I click this like guys that that's so clean that is so clean and so quick I didn't even have to do much in that sort of you know that simple bit of code and now we have a beautiful model which pops up on our site amazing right I can go ahead and sign in with Google then it will take me to the Google signin screen I click this and because I said set the after sign in url it will then take me to the dashboard and as you can see boom I get my user profile if I sign out it will throw me back to the home screen where we have our sign in so that is how simple it is to get our authentication up and running the next step is I'm going to obviously make this a little bit better the padding on the x-axis around the signing button I want a bit of space this is going to be a flex box with space between each component of two and I'm going to centrally align them on the y- axis okay so there you go so now if if I have more than one thing there it's going to go ahead and show that's obviously going to make sense when I have the theme Toggler okay so clar is still convenient wow I'm telling you it's so amazingly clean and simple to get that working okay next up we're going to install shadan shadan is an absolutely incredible awesome ux Library UI ux library but it's a little bit different because not you're not typically installing a massive you know dependency like how traditional libraries would have done for examp example you know material UI and those things and then you're using their predefined components shadan is different it's basically a tool which basically copies the code to your own you know code base and it basically allows you to edit it however way you wish and it's all based off Tailwind CSS if none of what I made s said made sense there I'll show you a live demo now and it will make a lot of sense okay so what I want you to do now is go to Shad CN right so Shad cn.com it's actually ui. shen.com now you're going to click on getting started introduction installation and as you can see here nextjs and we've already done this first step the next step is shad MPX Shaden list you are in it right so you're going to copy this and we're using mpm and I want you to go back and all you're going to do guys is simply go ahead and I'm going to move this out the way and paste it in there okay so easy to get this up and running would you like to use typescript yes they've got two different styles I'm just going to stick with the default and I'm going to stick with the default base color of slate you can feel free to mess it up yourself right Global CSS file ours is already in the default location so I'm going to hit enter CSS variables yes Tailwind loc uh location we haven't changed it so it's normal Alias act components is already set up for us by default and then everything else is perfectly set up the way it is are we using react server components yes we are and you can leave the default so just hit enter on all of those things and now what you will see is we have firstly a lib file where they've gone ahead and added in a helpful CN this basically allow us to combine class names when we're sort of using a lot of their utilities and things like that but now you probably wonder nothing really happened well the magic really happens when we come to use the elements out of Shaden so for example if I wanted to now have a button all we would have to do guys first you can go ahead and use the fonts as well okay so you can feel free to completely go go through with all of this right but instead now at this point you can simply just move ahead so for example we may need this button okay so if I need a button now all I do is copy this command so I copy it I go over to my code and I want you to pay very close attention so I simply run the command and now watch what happens it creates a component UI folder inside of it it created a button so now I have full control over the button they added to my project so I can customize this button and you can see the entire thing is built off of T and CSS now to use this button is extremely simple so if I went to my page for example the home screen and I simply point to pop in my button all I do now is I go ahead and do button and I simply use it and I can say here is a demo button and now you can see look here is a demo button I can go ahead and type in variant and they even have a bunch of different variants so I can go ahead and use the outline variant I can go ahead and use the ghost variant and if I want it in error I can use the destructive variant and so forth so you can see really effective easy simple solution to going ahead and getting things working right someone had a very valid question they said can you remove the water marking from clerk yes you can the free tier is actually very generous I highly recommend you just stick with the free tier until you need to upgrade cuz they have a very generous amount of uh of users that you can actually have on that plan and now you can go ahead and yeah get that up somebody also said you now have a JS and a TS file config for tell when CSS yes you're right I actually have two right now which you do not want to have so this case you can actually go ahead and keep only the typescript file um I don't want to mess things up right now but yes you can so in this case let me just do a quick comparison I'll show you how to to resolve this so first things first you do a little quick check so this is JS okay so in this case Pages components Source what we can actually do is we can take this we can go ahead and actually um put it over there like so the rest of the things inside of theme what I can do with the theme is I can take the entire theme theme let's go ahead and get the entire theme and I'm going to Simply replace my entire theme like so boom and right now you can see it's it's freaking out a bit over these things so we can go ahead and fix all of this afterwards but right now I'm not too fust about it to be honest with you right for example the height and so forth so in this case type number is not assignable type string so you really want to correct it you can do things like this and so forth but I don't really want to go into this too much right now right so in this case what I'm going to do is you can go ahead and address this yourself but for now to be honest it's not extremely deep why I can do is I can simply get rid of my t script file keep the J file it's very simple okay everything will work the way we need it to and I can simply go ahead and refresh that's fine okay but you can feel free to resolve that on your own okay so uh not visible Sun of the screen oh my God sorry guys I completely hid the screen my bad my bad okay so in that case what I was doing there is I simply just removed the uh tailn config TS file okay but if you want to keep the the uh the typescript file you can keep the typescript file and uh and just rename everything else accordingly right so nothing really changed beyond that uh good good stuff Marcus says you're the man thank you so much quick little water break to keep me Focus okay guys this is amazing your retention absolutely appreciate you guys I sure that you're liking the pace today I'm going to stick at this pace let me know in the comments right now if you like this and simply smash that Thumbs Up Button if you haven't already okay so this is great let's carry on so next things next next first things first okay is we're going to go ahead and actually install our theme so I want that Toggler set up from the beginning and this is essentially dark mode so I want you to click on dark mode in chaden click on nextjs and I want you to install next themes so that's our first step we're going to go ahead pop that in right now boom let's go command J to pop it up and we're simply going to go ahead and type in mpm install next themes now I get it so much that you guys are watching right now and you are not subscribed and I see you there's so many of you that are watching and not subscribed just hit the Subscribe button come on hit that subscribe button and I'll carry on good that's what I need you to do okay I'm calling you out because some people watching they're not subscribed just all you got to do is hit that subscribe button it helps the channel grow okay next things first we need to create a theme provider so very simple what we're going to do is go to our components simply command J to hide that bottom part I'm actually going to put my main components inside of the components folder not in the UI folder I'm leaving the UI folder for the the Shad CN components okay but you can feel free to have it however you want I'm going to say theme provider. TSX okay now I'm going to copy the provider code that they've given us and I want you to pay attention to this use client by default every component that we make inside of nextjs 13 and above is actually a server component by default which means it's rendered on the server by default and that gives us a lot of features a lot of functionality a lot of this stuff is covered on my channel and we also cover inside of0 to4 stack here first link in the description we're running absolutely massive Black Friday sale and Cyber Monday sale for this entire week so you can feel free to go check it out but back to the code if we ever see this used client it means that we're converting this component to a client component which means we can do things like you know add interactive elements and so forth but we need to do that because we need to actually know on the users's machine what theme they have dark mode light mode and so forth okay so with that in check we're now going to go ahead and go down and all we need to do is wrap our theme provider with the appropriate setup around our children inside of our app so what I want you to do here is head over to your layout. TSX very very simple okay head out to your layout. TSX and I want you to go ahead and underneath the body right here I want you to wrap everything just like so okay and I want you to do control space bar components there you go and you can see attribute class default theme system now notice how attribute class it falls in line with my dark mode in my tailn config okay so those two have to align up for this to work the default theme is a system so if you have dark mode set up just like me by default your app is going to be in dark mode okay now you can see a bit of an issue here let's go ahead and refresh and we can't see anything has changed yet okay so I'll show you how we go ahead and get this set up in a second but next thing you want to do is add a toggle now they've actually made it so easy I actually love the toggle that they have it pretty much sets it all up for us the only thing we need to do is install the drop down menu so first things first I want you to copy this bit of code and we're going to go ahead and create a component to go ahead and house this so we're going to call this one if we click on the theme provider so we're at that level we're going to type in theme Toggler right so you can say dark mode Toggler or anything like that I love this song such a tune theme Toler TSX and we're going to paste in that example code like so and you can see we haven't installed the drop down menu okay so again if you're I'm showing you from scratch so you can do this yourself make it very easy simply go to the drop down menu on the left hand side go ahead and do MPX copy this command and you can simply pop it in like so it's very easy to use this stuff okay go ahead and pop it in and this will literally add it into our component Library so you can see drop down menu and you can see the error is now gone just like that we have a theme Toggler okay so now I've got my theme Toggler I can simply go over to and I'm actually going to rename this to theme Toggler okay then I'm going to go over to my header and inside of my header now where we had our commment I'm simply going to go ahead and pop in theme Toggler and import it like so okay now just by doing that guys you can now see I have a theme Toggler and if I click on dark oh look at that super clean super clean 10 likes away from 300 likes let's go smash that like button somebody says watching from Benin all the way from West Africa that is what I'm talking about amazing amazing stuff someone's also asking what is that little kind of you know what is that little uh Auto suggestion that's popping up that is called GitHub Co it's called copilot okay so in this case we've got our beautiful light and dark mode set up now if I want to customize anything on my app for light mode or dark mode you can simply do so by simply saying so in our regular styling situation we can say text should be let's just say red 500 okay so it's red 500 but you see that applies whether it's light mode or dark mode so if I wanted it to be in dark mode text blue 500 now what you will notice normally is text red but if I go into dark mode that becomes blue so this is how you can style based on dark mode specific options very simple to use and I hope that makes a lot of sense if it did all you got to do is smash that like button all right quick low W break and then we're going to move on we're actually doing amazingly well right now okay we're going to step things up pretty fast your retention today is absolutely in incredible I'm so impressed actually Nots and we're about to smash over 300 likes that's what I'm talking about guys all right so next step we are going to go ahead and set up this front front screen in fact yeah we can do this the front screen is very quick okay so I'm going to go ahead and do a very quick setup now now I don't need you to hyper obsess over the look The theming all that good stuff in this case we're simply going to have a very very simple setup okay firstly I'm going to start by adding a disclaimer at the bottom to Showcase that this is absolutely you know made for informational educate educational purposes we don't have anything to do with Dropbox okay this is a tutorial right so proceed at your own risk okay we have no whatever you do with this that's up to you okay so next after that we're going to go ahead and add a div and this div is going to be for this section right here okay so first things first I'm going to have another div inside I'm going to have an H1 and this will simply say welcome to Dropbox with a very subtle bit of styling okay like so welcome to Dropbox storing everything for you and your business needs all in one place very simple okay now for this div I'm going to style it a little bit I'm going to give it a padding of 10 I'm going to say it's a flex box it's going to be Flex column align and we're simply going to go a background color and that background color is going to change in dark mode okay so let's go ahead and pop this in right now like so now you can see it's got a background color and we square brackets to use the Jus in time compile for tailwind and that means that we can actually add in any color and in the compile time it will go ahead and add that into our configuration the dark mode is going to have a different color so you can see look slightly changes the background color in these different settings and then we're going to go ahead and space out uh the children inside to be honest that doesn't really make a difference cuz we're not going to have much in there actually I haven't added the next bit in the reason why that makes a difference CU I have a P tag underneath which has a padding on the bottom of it and it simply says enhance your personal blah blah blah right so it just just got a bunch of text in there that's basically this area and then after that we're going to have a button which will say try it for free so this button right here try it for free this is simply going to be a link tag from nextjs right it's going to be a link tag this is going to have a hre which takes us to our dashboard so for/ dashboard and inside of here what we're going to say is try it or three like so okay after that I'm going to add a arrow now no notice how I've got all these different things called Lucid react this is actually included when we go ahead and uh set up um shadan okay so we're going to Simply use an arrow right and I'm simply going to say class name margin left of 10 pixels okay if I don't add this in I'll show you what happens first okay oops so you want to make it self closing component you see try it for free like so okay now first thing I want to do is before I add that margin left I want to give this a bit of styling now there's two children here with without realizing the first is the text the second is the Arrow by doing Flex you can see they go on the same line then what I can say is I can say that the uh that the arrow right should have a margin left of 10 you can see it pushes away from it a little bit then I want to style it to make it look like a button so I'm going to go ahead and say that this button should be a should have a cursor point that when I hover over it the background should be blue and I want to give a little bit padding to go ahead and make it look great and now you can see look at that if I click it it takes me to our four SL dashboard which is obviously gated and protected and that allows us to go ahead and um yeah so you see that's working perfectly right great great stuff now if I go ahead and I just want to log in so we can get past this little protection so let's go ahead and log in right now to my account we're doing amazing on this front right now guys we've got more and more viewers tuning in that is what I'm talking about amazing stuff watching from the Philippines this is awesome I know someday I'll be touching rers and I want to learn a lot from you thank you so much okay let's go go back to our home screen now you can see look we can navigate super fast when we're authenticated okay great stuff now we're going to add in the the the icing on the cake which is where we have our div right here I'm going to have another div underneath it and this is actually going to contain a video and this video I've simply got from Dropbox themselves it's just from the homepage again it's all for demo purposes all right so I'm going to add a video in it's autop playing the controls aren't showing I'm looping it I'm muting it it should have rounded corners and this is just a video from their homepage okay and you can see all it is it's a very nice video actually right but right now you can see it simply just popped in like so that doesn't look that clean right so what I want to do is I want this to actually be a little bit more you know beautiful I want it to be on the big screen on the right hand side so if you notice on the main app on the right hand side on this screen is perfectly on the side when it gets smaller only then will it shift underneath so we're going to do the same concept here and I'm going to make this seem very very simple okay so what we need to do is St this div I'm going to say CL div class name give it a background color and for dark mode I'm going to give it a different background color I've done this styling for you so it's very easy just follow along okay now you can see a bit of padding as well on the dark mode it actually looks pretty clean it's got this like kind of invisible border whereas here it melts into the background of the video amazing stuff guys just broke 300 likes that's what I'm talking about let's keep going I think we're going to get like 500,000 likes want to see we'll get there easy as right looks really good now what I want to do is I want to add that address that issue so I want this to be on the right hand side and only on the smaller screens will it get to the point of uh you know looking that the way the other way that we said so first things first this STP right here so for this div I'm going to say Flex now notice what happens on a flex naturally the children go side by side now that's okay but look what happens on a small screen it looks like crap right so what you need to do is whenever you're using flexbox by no whenever you're using TN CSS by default those utility classes the things that I'm writing like Flex Flex column P10 all that stuff it's called a utility class all it is doing is it's Translating that Tailwind CSS to regular CSS in the form that can be understood by a machine if I hover over it you'll see P10 translates to this right here Flex translates to oh no that's not going to work Flex colum translates to this and so forth okay great stuff we just hit an hour mark doing very well on timing now what I want need you to understand is everything is mobile first that means that everything I add here is mobile first for styling so if I type in Flex column you will see it will drop to the bomb so this because a flex column means everything stacked up like a like kind of on a horizontal line okay now what I can do is I can say Okay Flex column but when we hit a large screen then it will turn into Flex row and you have these things called Break points like small medium large extra large 2 XL and so forth right in this case I'm going to say when we hit the large screen I need you to go into a flex row now let's see what happens right and this is the magic of break points now what I want you to do is go ahead and make it bigger and boom look at that on a large screen it goes in the line that is so sick right it looks really clean okay so everything's looking good now what I want you to do is neaten it up right so what we're naturally going to do is we're going to say items should be centrally aligned and if I hit save I haven't hit saved yet but you you will see there it's not centrally aligned if I hit save boom it goes into the center okay then I need to all I need to do to make it seamless is go ahead and add in the background colors okay so if I add in the background colors after this boom just like that now look at that if I go ahead and make it light absolutely beautiful right so you can see fully responsive super super easy to go ahead and get this working the way we want it someone says is this live or is this stream recorded it's live there you so in this case we've got our home screen done this looks absolutely beautiful I'm happy with that okay so we've got this down to a t next up we're going to go ahead and click into our dashboard this is where the main Dropbox magic is happening we're doing amazing at this point this is where really I need you to focus in zone in and this is where we're going to go ahead and build the core part so I'm going to sign into the main app okay sign to the main app my AC is very high right now and you can see this is what we're going to build so right now get excited because we're going to build drag and drop functionality we're going to have sorting functionality we're going to have this beautiful skeleton though that you see right here we're going to have the ability for models we're going to even use Global State management such as zustand so zand is going to allow us to have Global State Management we're going to have a delete Model and you're going to be able to go ahead and access all of these files accordingly so we've got so much ahead of us it's really exciting and we're already doing amazing with the retention and stuff like that if you're following along this is the time to have a quick little water break right remember this is this is not a Sprint we're going to go ahead and do this at a really nice Pace awesome stuff guys I'm going to go ahead and change the music up a little bit as well okay so jumping into it so for the dashboard I'm going to go ahead and go to our dashboards right here let me know if the screen is at a good screen size and everything like that so we're going to go into our dashboard sometimes I will show you so you can visually see which file I'm going in somebody goes smash that like button to kill Sun's cough thank you so much dude I need I need that need that help right so a few things now this is a server component rendered by default so if I want to get access to the user's ID which I will need at some point we can actually use something called the or object in cluck right so in this case what I can do is I can show you very simply if I go ahead and import or from Clerk nextjs and they have lots of helpers inside of clerk I really want to show this and demonstrate this to you but if we go ahead and actually click into hey look at that lovely confetti if I go into where is it uh the simple part user on authentication you can see all of our stuff um okay here you go yeah you can actually see we've got a lot of different things like read user and session data you can see server side apps and so forth and they've got all of the examples and things like that okay so you can actually go ahead and it's very very good and it tells you how you can use the user oror on client side and so so forth but in this case I'm just going to show you myself to make it super easy all we need to do here is we can say const user ID oops uh equals or no don't do that or okay and then from here if I do control space bar you can see I've got all these other things including the full user object the session ID and so forth as well now to demonstrate that this actually works we can say um user is user ID some jsx boom just like that user is this user so you can see we're actually signed in everything's working great okay now I just want to stop here for one second and say again if you find any of this stuff difficult at any point guys remember we are running a massive sale on our Flagship course 0o to forstack hero and this is the ultimate time where you can go ahead and join and actually save up to 50% off so all you need to do is head over to papa.com course this is where we go ahead and teach everything that you're seeing today imagine weekly coaching course where I myself am running through these exact Concepts at a deep deep level okay so these are examples of our coaching cles you can feel free to see some of our students themselves guys we've cracked the formula on how to get students jobs how to go ahead and get them to level up their skill set all you need to do is scan that QR code on the screen that you see on my right or go to papa.com course I'm telling you because I do not want you to miss out on this it's the ultimate time to go ahead and join and save up to 50% off feel free to check it out right first thing in the description okay so let's go ahead and continue on somebody asked how I get this this is simply an extension called file size okay so we got the dashboard open this song is kind of annoying now these are all like aggressive songs I'm going to go back to my simple songs Okay h on we almost at 500 likes just keep smashing that like button okay so first things first is I actually need to go ahead and set up let's set up our Drop Zone firstly okay so the Drop Zone we're actually using something called react drop zone so I want to show you the whole thought process behind this you want to Google react drop zone and it's this first one that pops up right so here so we're going to do mpm install save react drops on command J pop that in like so not a cough nothing will stop me from absolutely smashing this world Okay so we've got this and then we can go ahead and set things up now what I want you to do is there's different ways of setting up right you can either do the approach where you have the this is a functional component approach where you're just using regular components and injecting props inside of them or we can use the one where we've actually got a more uh I guess it's kind of easier to understand example for example where is it where have I done this I've done it where it's Drop Zone component so if we go to the basic example above there is an example where it shows us the Drop Zone component so we have this example right here okay yeah this one right here so what I want you to do here is I'm getting super confused yeah I want you to go ahead and just copy this example okay I'm going to copy this example and we're going to create a drop zone component so I want you to go to your components type in drop zone. TSX we're going to paste very simple okay we actually don't need to import react like so and you can see here right now if I was to go ahead and show you this right in our app so if we go to to our page dashboard and I'm going to put in the drop zone component here Drop Zone just like so now first things first I believe this needs to be a client component as well so heading back over to our drop zone at the top very important that you say use client okay and you can see use ref only works and client components that's completely uh fine I've actually oh sorry I've done such a silly thing here do not do what I just did do not do what I just did go back do RFC firstly drop zone and then that example that I showed you previously this one right here you want to pop this inside of the return block made a very silly example mistake there and you want to import the Drop Zone from react Drop Zone okay like so and this needs to be a client component now this is clashing because our file is called drop zone so all I'm going to do here is rename the default import to drop zone component like so hit refresh and now we will go ahead and get this working the way that you need to so use client directive at the top of the file to use it yes we are good sometimes it can be a bit buggy so you want to cut your terminal run it again hit the refresh button and let's go back to our app and now use ref on add the use client directory for the top of the file I've done this I don't understand what's going on let's go back to my let's go back to our dashboard I want to check something okay so Drop Zone from okay there we go there's the mistake okay so when you import this import your components version of it okay there we go and now you can see drag and drop some files or click so you can see that right so okay got all my files out so in that case you can see if I click it it does that or if I open up a separate so for example here I've just got a list of thumbnails okay so in this case these are a bunch of different thumbnails so if I want to go ahead and just put in a Dropbox thumbnail or Dropbox clone and I drag it over you see if I go ahead and pop that nothing is really happening right now okay so nothing's really happening right now so what I'm going to do instead is go ahead and show you how we can actually get this set up in the exact way that we want it okay so if I go ahead and say drop zone now what we can do is this section right here is where we actually have some of the magic so what we actually have here is a few interesting things that we can go ahead and pull from the um where is it this right here so get root props get input props and if I do comma control space p you can see I got a lot more is drag active is drag accept is drag reject and so forth the ones I care about are actually these three okay now what I can do is I can change the look and feel of everything to be the correct way so what I want you to do is when we have this bet I want to get rid of all of that I'm going to pop in the following okay the input and is far too large I'll show you what I'm doing by this file too large what I'm going to say is first I'm going to say that the max file size for uploading is 20 MB okay so we can do that by determining the number of bytes so that's that represents 20 megabytes in bytes okay next thing is I'm actually going to set the max um size over here so on drop is fine actually say Min size is zero so we can't obviously put anything less than that and Max size I'm going to put in our Max size const right there okay now is the file too large I'm going to have a simple check here which just simply checks if the file that I've selected see file rejection sorry if the file is um if the file that I've selected is bigger than the max size then we want to reject it so what I do is is you see here we have an implicit return put curly braces around it put a return block there and you can now have your code here so I can can now say okay just check is the file too large and we're checking any rejections that came through we're saying if that's too big then it's not going to work it will be rejected if it's too big because it will not abide with our Max size RW okay so next thing you know that's awesome stuff okay so next thing you know now if I was to drop a file over it we've got our nice things like look is drag active and is if not is drag active and if it's not rejected then it's so forth so now if I was to drag my Dropbox clone over it oh look at that look oh nice yeah and when I drop it what we will see is we're console logging the firewall so in this case let accept console log the accepted file so let's go ahead and give this a full demo right now so you can see ignore this this is simply a extension that I have which is super annoying and I should have deactivated it before this tutorial but that's on me in this case I'm simply going to go ahead and open up my files one second I'm going to hide the screen for a second so I'm pulling up my thumbnails right now these are just thumbnails from YouTube and if I go ahead and take the Dropbox clone and I pop it in like here right what I want to show you is pay attention to this area so I'm going to drag it drop it look at that file boom you have the file there so now I can do something with that file okay and the same thing applies if I upload like three files and so forth right so if I was to take you know a couple of these for example this one for example this one this one and I drag and drop them boom you can see three files okay so this is the logic behind it now with that in mind it also works if I click it okay so very very simply that is how we get the dragon drop now I'm going to style it to make it look way nicer than that and we're going to do it in a really cool way so where we have the div with get root props when you to expand it say class name now remember that lib that we actually introduced earlier the one that allows us this allows us to easily combine different class names so what I actually want you to do here I'm going to say CN I'm going to import that from our lib utilities and I'm going to go ahead and pop in a bit of styling so the first thing is some base styling so I'm going to say okay this styling always needs to be there so you can see that right now this styling always needs to be there very simple elegant if I do light mode you can see it's just a very basic bear styling okay next up I'm going to give everything around it a margin 4 I don't want it to touch the sides so that that kind of gives us a nice kind of you know surrounded look yo aram's in the house what's up see you um that fast um so in this case we've got the class name going so now what I want you to do is if you're dragging over the dra drag and drop box I simply need you to go ahead and customize the Tailwind uh utility classes that get applied so firstly what I do is it's so easy when ucn the utility Library all you need to do is go ahead comma second argument and this is basically where you say is drag active and you can see that it's already trying to guess what I want right so this is known as a Turner operator so Turner operator is very simple it just means for example if I just put it very simple like this if that is true then this is the true condition else so the little column resembles else so this is if that is true then apply this condition else apply this condition so very simply then all I do is I say okay if you've hovered over it and it's you know it's true apply this styling right here otherwise I want you to apply The Styling that is basically regular when it's not there right so if I go ahead and pop this in there so boom you can see now when it's actively being dragged over it should turn blue the texture turn white and it should post and that with that in mind now super simply I don't know why I keep closing the bloody finder one second um let's go ahead and Pop That in right now boom okay so you can see now the Dropbox going look at this if I drag over it look at that look so clean look at that super super clean and just like that you've got an amazing Dragon drop box yeah and the same thing applies if even if I have you know the light mode applying look at this this SL boom super super slick so if you learn something new there smash that like button we're almost at 500 likes okay so really really clean okay my my face just blew up on my screen okay let's go ahead and put this out so simply done that's how you get it done right so that is already our Dragon drop box looking clean and you can see right now we're eventually going to get to this point where we have the rest of the Dragon drop table and all that good stuff but that's the basic essence of where we go ahead and start from the uploading functionality so before we go ahead and render out these files and so forth we now need to think about it logically all we need to do oh Jamie goes that's the OG Sunny face what's up Jamie good to see you in the house right so now this is where we can go ahead and start introducing Firebase we can start introducing Firebase storage essentially all we're going to do is when you drag that file into that Dropbox it's going to go ahead and upload it to a Firebase storage bucket and we're going to have that in a perfectly neat way done once it's done that it's going to go ahead and actually get the download URL from that bucket and it's going to add it to firest store so that way we've got a nice collection of all of our files in fir store and then we got download URLs which are appended which correlates to the Firebase storage bucket sounds easy right it's actually really easy I'll make it super simple okay so first thing we're going to do is we have the upload post uh functionality so in this case let's go ahead and just jump into it so where we've got UND drop I'm going to go ahead and create a function so right now I've just got an inline function which is sucks is crap so we're going to go ahead and say const on drop this is going to be an arrow function fun like so and all I want you to do is basically go ahead and say that you know whatever files we pop in here we're going to call them the accepted files and all this is is a regular file type so typescript helps us out here and it's an array of normal files okay so remember when I dropped in it had like one file seven files however many it was and all I need to do here is basically create I'm going to Loop through each of the files that we go ahead and upload so if I uploaded one file it's going to Loop through one file if I uploaded fire files you can upload through file files and so forth okay um Emanuel says he explains every line oh you know I love you guys look at this bro is too good at teaching tell win thank you so much yeah thank you Jamie as well build is fire thank you so much I appreciate you all right so in this case I'm going to Loop through so I'm going say accepted files. for each right so for each because map is essentially when we want to return something for each is when we want to functionally do something every time I Loop through them okay so in this case we've got the file I'm going to Loop through each one and all I'm going to do is each time I'm going to create an instance of a file reader so this will allow me to basically start to read through those files and do whatever I need to do now the way that readers work is they have internal functions like on abort on error on load and simply put all we have to go ahead and do is tap into those functions so that way we can basically say when you know if and for whatever reason the file reading failed we know what to do and so forth so they're two simple edge cases is are if it was AB boed or or if there was an error handle them and right now we're just Tak console L you can really go ahead and add a toasted notification whatever you want the one we're interested is actually the onload okay so once that file is loaded I want to go ahead and have an asynchronous and know like an anyn way upload post obviously I don't have this function created yet we're going to create it and then finally the last one is we're going to say read as an array buffer okay now I don't actually think we we use this one oh no we do use this one is fine okay so at this point now I want you to go ahead and once it reads it it will this will get triggered off okay so we need to create an upad upload post file I need a quick water break but guys absolutely incredible stuff thank you for tuning in we still got a little bit to go not a little bit yeah you know what I mean it's quite a bit to go actually okay so let's go ahead and create this file uh this function right now so we're going say cons upload post equals async right and this is going to be a selected file so in this case selected wow thank you so much that's exactly the comment I was waiting for Manish says imagine how he must be explaining in the paper react course if he explains like this on YouTube for free honestly couldn't have said it BR that's exactly what it's like in zero full stack here first link in the description do not miss out imagine if I've got hours with you guys on coaching course the level of depth I go is nuts Okay so we've got the selected file and this is the one right here okay so now this is where we do the the upload functionality okay very simple all I'm going to say now is I actually want to have a single pattern so what I actually want to do is trigger a loading like state so what I'm going to say is at the top of the file I'm simply going to go ahead and have a piece of state so simple react State here I go ahead and show this in a separate video you can feel free to check it out all we're going to say is use State and this is going to start off with a false value now all this is doing and if you can really want you can cast this to a Boolean like so but it implicitly will get that value based on this so if I hover over it based on the first value you give it will determine its data type as well unless you have a specific data type that you want to go ahead and cover then you put in the brackets otherwise honestly in INF firing is okay sometimes okay so in this case loading now here I'm simply going to say if it's loading return and the reason why I'm doing this is because say for example you spam that button yeah I don't want you to upload like 10 versions of that that image or file or whatever it is okay so I'm going to have a little block here which says set loading true and then if it's Lo and then after we've done everything so I'll do what needs to be done blah blah and oops and then we set loading to F okay and then that way it only runs this through once does what it only needs to be done once and that's a lot easier okay the next thing is I need access to the user this is important because I need the user's ID for the next step that I'm about to do okay so what I'm going to do here is because we're in a client component I'm going to use a use hook right so use user hook so this one right here we're going to import this from cluck p/ XS now you can only every time you see use hook use State use effect these are all sorry I didn't show my code there but you can see it for yourself there right every time I go ahead and show like you know use hook use State these are all client components I stress this you cannot ever use a hook inside of a server component it's not possible it just does not work and there's reasons for that which I explained in depth in other video but you don't you need access to the browser to use a hook simple as okay so use user now we've got the user right here and all I'm going to do is simply put a check in saying if the user if there is no user returned okay and then I'm doing this because I want to check to use ID for something okay now what I can do is once I've gone ahead and done this I can actually do the upload step so this is where the interesting thing happens so now we need to set up Firebase we need to pause here for a second and we need to go ahead and do this yo this this is awesome nural says yo Sunny I'm currently in a final year of my college and I got the job as a full stack developer that's what I'm talking about dude amazing stuff J screenshot that that is awesome great great to hear that's what we want to hear right so next thing you know I want to go to firebase.com now they actually recently updated the UI so don't get freaked out but you want to click on go to console simply all you need is a Google account to get started then what I need you to do is click on ADD project now here you're going to type in Dropbox clone uh YouTube that's what I'm calling it you feel free to call it whatever you want click on okay I'm going to disable Google analytics and I'm going to click create project this is going to house all of the backend things that we're talking about this is going to house our database called the firestore database and it's also going to house Firebase storage you can feel free to rebuild this with Azure or AWS or whatever backend you want but I'm doing it with Firebase it's a very good service I love it it's so easy to use and yeah I'm going to show you just how simple it is okay also genuine apologies for this cough I can't kick it um it's come from a good reason but it's all good but yeah that's is super annoying all right so in this case we've got build let's go ahead and click fir store and we need to set up our Firebase instance okay then I'll show you how simple it is to connect this to our nextjs application so you want to click on create Firebase database then I want you to go ahead make sure it's fire store not the real time database two different things location um okay United States fine I don't care click on enable now here starting production mode starting test mode feel free to click whatever you want in this case I'm just going to click test mode in my previous video I went over some Firebase rules I will make a dedicated video on Firebase rules though okay but for now we're just doing test mode it's not the primary concern of today's video okay now I was getting a bit of Errors last time this happened but hopefully today it's all smooth okay we're going to click Start in test mode and now just like that we have our Cloud fir store now I want you to go into your rules and just for Simplicity sake so you guys don't run into some interesting situations I want you to click allow read and write and I want to click publish okay so this will allow us to go ahead anyone can actually read or write from this database it's not ideal you should be applying uh a Syle check which checks if the user is authenticated they should be only able to access their own user ID but I will create a dedicated video on that if you want to learn more about that check out my SAS video that I made previously before uh J I says sunny is absolutely the best thank you can't thank you enough for these live YouTube tutorials I appreciate you dude all else is you destroy that like button to go ahead and get the flying okay so in this case we here we have our nosql style database that's step one all right cool next up we go to our storage so click on um storage over here click on get started and again simple I'm going to click on starting test mode next and you can set a location I'm going to click on done and it will create something called a storage bucket this allows us to sort images audio video without any of the server side kind of rubbish or any of that stuff it's very easy to use okay what's up Sun I love your videos I I love you guys I appreciate you all as well thank you for tuning in all right this won't take too long and then after this we need our configuration that will allow us to connect our next year's app to this and then we're running guys then we're going to fly with this build and we're going to build out everything that you saw in the first demo okay absolutely incredible retention I cannot stress that enough productivity yeah that's very good idea actually J write that one down um so in this case here we have our storage buckets so here's the aim of the game we're going to upload our images here in a very nice format then we're going to have reference to all of it over here so in basically we upload the image here in a really nice kind of nested way then I get the download URL for this stored file and I save it inside of our fire store database very simple okay first things first click project settings at the top go down here click on this little icon to set up a web app and then here you can name it whatever you want I'm just ass inside Dropbox clone YouTube like so click register app you don't need to set up Firebase hosting we're using Vel today to go ahead and do this Salam says you are the best watching from Canada love you guys honestly absolutely appreciate all of you thank you so much for the kind mod right so in this case I'm going to install Firebase into my project so command J pull this up boom pop that in then I need you to go ahead and copy this part so really don't care about the rest of it I kind of need you just to take the Firebase config okay so at this point what I want you to do is go ahead into your photos like so create go to package Json you're at the top level create a Firebase TS file okay and I want you to go ahead and put in the following so I actually need a bunch of different Imports these are all helper functions to go ahead and help us get access to what we need but the main thing is I'll create I'll make it very simple for you we're going to go ahead and copy this Firebase config pop this in like so and now what we're going to do is a few different things now the first thing is because we're messing with nextjs nextjs can sometimes go ahead and uh initialize a double the sort of two things in one go now I'm not going to get into it but the point is when you server render a certain page it might have already pre you know pre-initialized sort of our app or database object we need to check if it already did that so very simply what we do is we go ahead and say const app equals get apps. lend and basically what this will do is if it's already initialized an app there will be a value here and we basically say if there isn't so if the if there if there is more than one so if there is a value here then we're going to get that app otherwise we're going to initialize it from scratch this is called a Singleton pattern it just means that you're going to initialize it once and not like five times because that could cause some sporadic behavior which we don't want now using this app we're going to go ahead and get access to all the other things that we need such as the database the orth and so forth we're not actually using Firebase Cloud functions today so we can get rid of that but the ones that we're interested in is the database the or object oh we don't actually even need the or object to be fair we just need the database and the storage right so in this case I can actually clean my code up a little bit get rid of it and we always like clean code okay then what I want you to do is go ahead and Export all of the things that we are going to use so we're going to go ahead and Export DB and storage okay and this is basically going to allow us to interact with the database from our front end okay so good stuff next up now that now that we've got a way to communicate with our database I can now go ahead and proceed on with the rest of what I was doing so we go back to our drop zone and this is where the real magic is going to happen right so pay attention now okay so the music is perfect for this cuz you need to focus a little bit right so when we go ahead and drag and drop into our Drop Zone when we drag the file in here we're basically going ahead this gets triggered and we need to make sure that it actually gets triggered by going ahead and doing the following UND drop right this will go ahead and pass the file in the accepted Files come through here we map through all of the accepted files and we go ahead and upload the post once it's loaded so at this point we have our Singleton pattern to which prevents us from spamming that button like 10 times hence the set loading and then we need to go ahead and and do the magic stuff here so what we're going to do is I'm going to go ahead and add a document to a specific route inside of our database now the document route that we're going to go ahead and have is something like this it's going to be users slash it's going to be a collection of users and imagine the users ID was user 1 2 3 4 5 okay then what we do is we go ahead and go into that and we go into the user's files and what I need to do is I want to go ahead and add a document to this location okay so this is essentially what we're about to do and I'm going to show you how easy it is to do that so what we do is we say const we get a document ref as a result after we've successfully added it we're doing an await so our function needs to be an asynchronous core this is all about promises you know asynchronous kind of working inside of JavaScript which I have got videos on feel free to check them out and then we're going to type in add doc right now I need you to pay attention to this so this is something from Firebase Version 9 they use a modular approach now we can use this help file called ad do to go ahead and actually get things set up so this ad do we need to pass it something we need to pass it a few things firstly we passed the database that we're actually accessing I already set this up with the Firebase configuration file which we just went into next up I'm going to go ahead and in a staggered approach now we go ahead and actually pass in sorry I made a mistake here we actually go ahead and say collection right so you have to either say collection or document so in this case the collection and I need to import this from Firebase so in this case you can see that now the collection takes a path right so the fire saw path you see the first one is the Firebase instance so this is actually our database the second one is the path in which we're going to push our uh items to right so in this case it's very very simple what we do is we can go ahead and do I'm going to say users then I'm going to say user ID and I'm going to say file okay like just like this and then after the collections are outside of these brackets we do a comma and you can see it's the next part is the data that we actually intend to pass in so at this point now I'm going to pass in a few different values okay so here's what we need the user ID I'm going to save the file name is a selected file name that could be basically whatever the file was called when we drag and dropped it in that's what the the file is going to be called user's full name the profile image of the user and a Tim stamp now the Tim stamp we always want to use the serers timestamp you might be in London India you know USA wherever you are in the world I'm in Dubai we have different time zones so we want to make sure that our time zones are consistent with each other so if we all use the server Tim stamp then we all get a consistent time stamp and then what we can do is on the front end we can always localize it so it shows it in Dubai if you're in Dubai it shows you in London and if you're in London and so forth but the origin time stamp should be the serers Tim stamp luckily Firebase gives us a very nice helper function which we can go ahead and pull in to make sure we have the server oh also very good question somebody says you should should be using converters right yes if I expand this build you can use converters what I would highly recommend is a little challenge this is a beginner tutorial so I'm not going to use converters for this one but if you want to go ahead and take a little challenge here what I recommend is from my SAS build I taught you how to use Firebase converters to successfully and type safely go ahead and access your data and make sure it's in the correct way that would really work well here but I'm going to leave that to you to implement yourself okay so check out my SAS build for a tutorial on that or check out zeroo where I teach TR how to do that as well next thing we need is the selected file type and the selected file size so that will tell us how big that file is and so forth okay this will literally add it to the database now so this will add it to fir store so just that bit of code now would add it into here so we have users the file and so forth but that's not all guys what I want to then go ahead and do is I want to get an image I want to store it to the Firebase um Firebase storage over here so the first line did that the secondine on line I want to create a reference to store it here now the reference is very simple what I'm going to do is once I've uploaded this file I'm going to get an ID back from Doc ref okay now again you can go ahead and upgrade this to make it one single transactional uh sort of lineer code which would mean that if any of this failed it would roll back but I haven't done that today but you can do that yeah again we we got to cut something in these builds but now what I can say is I can say const image ref and I'm going to go ahead and pull this from Firebase storage and you see this storage right here and go ahead and import that from our Firebase storage and we set that up with the database earlier and here's the URL that we're going to do users user ID files document ID okay then what we're going to do is we're going to say await upload bytes so this is a helpful function from Firebase storage which allows us to upload the image that we have selected so I'm going to do is I'm going to pass in the image ref and I'm going to Simply pass in the selected file that we have okay once that's done we can then tap into the action afterwards now you can go ahead and do a wait and actually store this into a result and so forth or you can just go ahead and do dot then right and do it so forth right it depends on how you want to do it I'm showing you different examples this is a uh a syn of weit this is a then promise chain okay so here we can say async snapshot like so and then here I've got my bit of code right so what we can do here is this will go ahead and actually upload the file the inside the snapshot I will be able to actually go ahead and get the um we we don't actually use the snapshot here but what I'm going to actually do is I'm going to get the download URL of the uploaded file the way I do this is I simply use a helper function from Firebase storage called get download URL and I simply pass in the image ref so at this point it would have been uploaded and then once it's uploaded it gives me back a download URL that I can then use what I'm then going to do is update this original document with that information okay so I'm going to use a different call not add document but update document okay I'm going to go ahead and access the individual documents so notice here I access the collection I stopped the files here I'm accessing the document with the document reference ID that was created here and then very simply I'm just going to go ahead and update the download URL to pass in the download URL that came back okay so very very simple sort of bit of logic there okay and then what I want you to do is close it up in an appropriate fashion now once that's done that's actually everything that we needed so we can go ahead and test this out right now after that I'm going to add a toast notification we actually get a very nice UI response from that okay hope hoping to meet you soon here in Dubai yo what's up awesome stuff if you're in Dubai say what's up all right so at this point now I'm going to go ahead and open up my finder I'm going to make sure you guys can see uh things I want you to see and I'm going to open up my let's put this at the bottom of the screen right so let's go put it there right so I'm going to hide this now so as you can see now what I want to do here is I'm going to go ahead and I want to see all this stuff get rid of this get rid of that there you go get rid of that cool so at this point I'm going to drag and drop a Dropbox clone into here now when I drop this I want you to pay attention to a few things firstly let's see what happened okay so you can see we don't see any feedback cuz I haven't got any console logs but what should have happened now when I just let go of that it would have gone into that file looped through it from here uploaded the post the post would have then added a document in our fire store database then it would have uploaded the image got the download URL and then taken tooken that download URL and updated the original document let's see if it did that if it did that is damn awesome and it's it's absolutely amazing so let's check out the fire store oh there there we go that's me I click in files I click in this and boom I have the exact thing the Dropbox clone is what I D drag and drop there we have the download URL so if I want to go ahead and check it out this is a valid download URL boom there you go amazing stuff and you can see right there that means in turn it would have also uploaded to our Firebase storage bucket so you can see here we've got the users let's go into our user we can go into the files and we should have the image right there and as you can see boom there we have it guys there is the image that we've gone ahead and uploaded so just like that now we have a perfectly working situ ation now I can do here is really like elegantly demonstrate this by popping my Firebase on the left so let's go ahead and B my put my Firebase on the left and I'm simply going to go ahead and show you something here so if I was to go ahead and take for example the sasap build I did drag and drop it oh one second I want to show you so if we click on files you'll see in a real time fashion how it will go ahead and get uploaded look at this look wait for it wait for it it's uploading there you go look at that you see that one added in and boom we have it right so just like that everything is uploaded now I have the backend situation all set up so this is working perfectly now essentially we have Dropbox set up here right to a degree right so if I want to go ahead and pop in our host ninja VPS video you can see look at that look and it would also get uploaded wait watch it watch it watch it look at that boom so in that Gap is where it would have uploaded to the storage bucket got the download URL come back and boom that's literally a perfect representation of what just happened with that smash that like button and have a quick water break and then we're going to carry on but that is absolutely phenomenal and how we got that done absolutely amazing retention I think you guys are loving the pace that I'm coding at today so I'll keep this in mind okay let's carry on this song always gets me like in a good flow right so at this point now we've got the upload functionality done so the next natural step is listing out all the files okay and this actually the easy part so I'm going to go ahead and show you how we go ahead and get this working so let's go ahead and pop this over here with that in mind we've actually done we're doing very well guys this is awesome progress so far so what I want to do now is I actually want to go ahead head over to my dashboard and inside of my dashboard right now we're going to start building things up so the first things first I want to when I have my server render I want to actually have the ability to skeleton load so I want to showcase the ability to have a nice little skeleton loader like so to do what I need to do so what I'm actually going to do here is preload the files on the server render okay so we're going to go ahead and do this now we're going to say cons docs results and oops I going say await and as you can see here you're probably wondering what how is he doing a top level asyn koit it's because it's a server component you can do this in server components the minute I add in use client it's now a client component you cannot do top level uh a single way we're going to say get docs notice how it's not get dock it's get docs it's these are all helper functions okay then I need a I need to go ahead and access the users uh the collection where we are storing the data again you should be using converters here right so if you want to have a little challenge for yourself feel free to add in the converters from the SAS build that I'd shown previously or join 04 I'll show you how to do or yourself right now here I can confidently say there will be a user ID because the dashboard is actually protect Ed by the clerk middleware that we set up previously okay so in this case you got the doc results now what I'm going to do is I'm actually going to set up something I'm going to call it skeleton files right so this is going to be the initial render and it's going to basically I'm using this as kind of a hack I'm using it to tell me how many files are there on the server right and then basically what I'm doing is then when I'm loading them in I'm doing a little bit of a trick you could actually render them and show them so it's immediately available and then it changes but I wanted to do a a little bit of a cool thing here to show you like a little bit of a loading state right you feel free to modify as however you wish we're going to say skeleton files and I'm actually going to create a type definition for us here right so what I'm actually going to do is create a little helper function outside and I'm going to call this one typings dots right and inside of here I'm going to have a file type known as file type so I'm sorry a type definition as file type this is going to have an ID file name full name time stamp download URL and this correlates to exactly what we're storing inside the database okay and we're going to export this so we can use it elsewhere now this is going to be of type file type so I can simply import it it's going to be an array and I'm simply going to go ahead and convert the existing things that we talked about so um inside of my dashboard give me one second like so also I just want to say I'm using an M3 Max right now and it is absolutely blazing and handling this live stream like it has never done before which is insane I love it it's actually one of the best things I've ever done cuz honestly my computer is not stressed at all right now which is amazing right so equals doc results and what I'm going to do here is I'm going to map through so what we're actually doing here is I'm doing something called Data transformation I covered this really well in z0 full SE hereo the first link in the description will honestly teach you all of this stuff I swear to God but what we're doing here is we're taking the shape of our data which returns from Firebase and we're molding it back into a shape which I want to work with right n what what good dude I appreciate you tuning in so at this point we're going to say data. docs. map map returns an item every time so we can basically form a new array of the the modifications that we do right so I'm going to map through in every single doc I'm doing an implicit return implicit return means parentheses and then I put an object inside of it that means I'm returning back an object that will basically Bubble Up and create an array okay so in this case I'm saying ID so I'm basically building an object now so the ID will be the doc ID and then basically basically I've got the following things happening so the file name will either be a file name if it exists otherwise just save it as a document ID and a few other things so the time stamp now the time stamp is a very careful thing you have to do here so if we were to pass the Firebase time stamp down into from a server component to a client component you're going to get an error saying it's complex objects only simple objects can be passed down so what I've done here is I'm essentially taking the time stamp at the server render converting it to a regular date object by basically timesing the seconds by a th and I'm creating a regular date object that can then simply be passed down so that way we take it from its Firebase you know data type which is considered complex from a server client component and I'm simplifying it to make it super easy and all we the basically all we do but to say that is the case we say time stamp equals new date we get the seconds from the time stamp times it by a th000 or if if none of that works we just set it as undefined right and we're going to use that undefined later to do a check the rest of it is fairly straightforward we're BAS basically just mapping to the the data that comes back okay so the document data that comes back we basically just mapping through it so this will give me all of the files inside of our app now I can prove to you that this works by saying console log skeleton files and now what we can see here this is going to happen on the server so what I can actually see if I open this up right now and I clear my tonso when I refresh it will show in the server because this is a server component so if I refresh now you can see look at that I get I get all of the things which are shown above so that the ID these are these are all the files that should be shown okay so now that I have the server um I have my skeleton files I can go ahead and do some interesting things okay so I'm going to create a section here and inside of this section I'm going to have an H2 saying all files right and then underneath I'm going to have a div and inside of here I'm going to have something called a uh table wrapper okay and this is going to be a wrapper which is essentially does some clever things around this table like some you know it loads up the dat dat and all all that kind of stuff right a little bit of basic styling here I'm going to go and say that this is a container it should have a space y of five the uh div here I'm going to have a border on the top so it's got a simple line there there you go we say all files and I'm going to say class here should be a font Bo so very simple bit of styling there there you go nothing too major okay next thing you know I'm going to have a new file called table wrapper in the GitHub Brio I've actually called this file table it's just file table but I think it makes more sense to call this uh as it is then I'm going to pass in the skeleton files okay and I'm calling it skeleton files because I'm literally using it in this build as a demonstrational purpose to Showcase how many things need to be loaded in okay again you can feel free to change up however you wish so let's create our table wrapper component so what I'm actually going to do here is to simplify things inside of components I'm going to create a new folder called table and inside of my table I'm going to call this one a table wrapper TSX okay now for my table wrapper. TSX we're simply going to go ahead and pass in these skeleton files as a prop so if we do RFC we go ahead and do the following like so this is where the props come in I'm going to Simply do a destructuring and pass in the skeleton files and I'm saying that the type that will come through is actually just going to be SK uh file type so what we talked about earlier okay very simple then what I want to do is I want to render out a skeleton based on that information right so very very simple stuff here and I'll show you how we go ahead and do this firstly we're going to go ahead and have the end goal would be to have a table and a button right so the first thing we're going to do is I need a quick drink of Bo one second [Music] okay my cff is getting progressively worse okay let's go so at this point we have our table wrapper so here I'm going to have a button okay so I'm going to have a button I'm going to have a data table so let's go ahead and put the button in first so boom a UI button like so and this will say sort by something okay so sort by ascending sort by descending and so forth now with the table wrapper I'm going to go back to my page dashboard I'm going to pop this in like so okay we can start seeing it there you go sort by so let's go into our table wrapper and after that we're going to have a data table okay so a data table what I want you to do is this is actually going to be a little bit more of a complex object which I'll explain in a second but this one is going to look something like this okay and I'll show you how we go ahead and Tackle this one break it down now before that's done what I actually want to do is I want to go ahead and do a few things so there's lots of ways you can approach this right we can go ahead and use it to uh to to perfectly render something here so we don't have a loader and so forth but I'll show you a few other ways of we can do it so first thing I want you to do is head over to shadan and we're going to go to the table okay so we're going to go to the table and here you can see we've got a bunch of different table examples first things first we're going to add the table okay so command J I love this song and then we're going to say mpm Shaden at latest add table right and then what I want you to do is you're going to copy in the following now obviously this is a very simple one actually sorry I've completely screwed this one it's data table data table this is the one we want so don't do what I just did um oh no you can do that we need to add table anyway all right so add table done then I want you to install 10 stack react table dependency okay so add this in go down and this is where the interesting part was happen Okay so we're going to have firstly we're going to have you see they've done three different things here I'm going to make it way easier for you I'm going to create one file called columns and this is going to resemble all the columns that are pulled in so we're going to go and say columns. TSX I think it's is going to be distracting with this music so I'm going to do some non lyrics stuff here right have some ginger drink ready man yeah honestly I need some ginger stuff I was drinking it all last night as well while I was coding so we're going to do this hopefully that should show dedication to this live stream I'm never going to stop okay guys we're almost at half a thousand likes as well absolutely incredible stuff let's get there come on smash that like button so at this point now I want you to go into this and we basically you can go ahead and copy this example okay and then we're going to modify it so I want you to copy it and we're going to modify it now modifying is fairly straightforward all I want you to do is basically we have accessor keys and these are going to resemble the different keys that are going to go ahead and loop through so the table table that you see as an M result accessor key this is the header and then we've got the accessor key which accesses that piece of they are okay now I've made it very simple for you I've gone ahead and changed up a couple of things so first things first we don't want this payment get rid of that okay so we go ahead and get rid that you can even use Zod schemers if you really want I'm going to go ahead and say this is actually going to be a file type okay so that's what we're using right so it's file type aray very simple next things for us next thing next thing in the mix sorry is we're going to have two different accessor keys so let's go ahead and get rid of all of this and pop in a file name and time stamp now you'll notice that this is mapping to these Keys okay so remember that right very simple the next thing is if I wanted to render it out but do something special when it renders out I can have a few different approaches to this I can actually go ahead and say something like this when I access the size the header should be size but I want to go ahead and render that cell in a specific way so here you can you can see I'm using something called pretty bites so I'll show you what pretty bites is it's a massive very popular mpm package which actually helps you out a lot when you're rendering things like kilobytes and it goes ahead and prey fies bytes into a readable form so we're going to go ahead and uh install that right now so command J pull that in like so mpmi pretty bites pop that in okay now I can simply go ahead control space bar pull that in like so okay and you can see now I'm rendering the value notice how I'm casting it as a number else we're going to get a little mistake here this is because it's not sure on what the different data types are here it's not inferring it correctly okay so with that in mind now what we can then do is we've got this cell rendering out we're basically taking our value which is render value and we're rendering in a specific way I'm going to do the same thing with the download URL except I want it to be an anchor tag which will redirect me to a specific page I'm using an anchor tag because I don't want prefetching a few other things you can use a link tag here as well right you could actually go ahead and do something like that but to keep things simple I'm just going to Showcase both options and anchor tag is fine here Target blank because I want you to open up a new tab when you click the download button okay what's up guys I see you tuning in awesome stuff right and I've got it so when I hover over it just says download so this is got it's going to look like something along the lines of this okay and this will do open a new tag with the information inside of it okay so great stuff so we got the download URL we got the size and the final one I want to kind of show you is the type and the type is actually quite interesting so the type is this PNG jpeg MP4 probably wondering how did he do that right so I'll show you how we've done that right so basically I'm going to pop in the first one so it's download URL with the header is link sorry no not this one I've completely messed that one up it's not that one it's actually type so it's this right here type header is type and this cell this is a bit where obviously see we determine how it's going to render out so first things first I get the type and then the extension so think of it this way and image will have a following extension it'll be something like this imagejpeg right so what I'm doing is and then even with pgs it'll be like Doc for/ PNG or something like that right but the point is is that the extension is after the split so if we do type do split so this is the type for example then we say split so when you do a split basically what you're doing is you you've got an array where this is the first value you and then you've got your second argument which will be jpeg right and then what we're doing is we're taking zero is the first index one is the second one because we count from zero when we're coding so I'm basically getting the JPEG and now extension will be essentially jpeg okay so basically that's what's happening there so you're basically splitting it and then you've got your zero and your one index so that's how we get the extension and then I'm going to use this very nice Library called file icon so this is actually from Library called react file icon and I can show you where that is right now by going to react file icon.com Oh no just Google it you'll see here we can simply install this pretty popular download right okay go ahead pop this in like so and we're going to Simply go ahead and import two things from it right and sometimes it doesn't install the type definition so if you run into this situation hover over it you'll get this error you simply just need to go ahead and pop the save dependencies inside and then it will go ahead and fix that for you you'll now see the red line will disappear in just a second okay now what we're doing is we're rendering out the extension so we'll go ahead and show at this rate it will show like a PNG a JPEG and so forth depending on what's shown but the interesting part here is actually the label color so what I've done here is I've created something called a color extension map right all that is is a glorified way of just saying I've created a file called constant which basically just has a bunch of constants inside of it so if we say constant. TS you can feel free to put this wherever you want and all I've done is made a map so all this is guys is a map this is a map where basically if I put in a single line it will make very much more sense this is basically saying it's a key value pair so it's basically you have a key which maps to your Valu so these are the keys these are all different colors and based on whatever color you want a PDF to be example exhibit a PNG is blue right so if you go down to PNG you can customize the color and so forth okay so basically we've done that we've exported it then we go back over here we import it and now you can see based on whatever the extension is we get a different color now this bit right here is simply a typescript sort of you know situation where it's implicitly applying something for now I'm doing a TS ignore I know someone's going to comment on that but don't worry you can feel free to figure that out when you're out yourself or we can cover in Z4 sto right now I'm not spending a while figuring this one out right but you can go ahead and fix that on your own time okay cuz I'm not that's not a major issue right right here so with that said now we have our columns successfully configured okay so once we've got the columns successfully configured like so we can now move on to the next step so heading back over to data table you can see they defined it then they've got the data table component okay so in our situation now we've simply called it table component so in this case I'm going to go ahead over here and we got the columns the table wrapper and we're simply going to say table. TSX okay now this table I'm going to go ahead and show you the following so what you can do is I want you to copy this example okay copy this example paste it in right very very simply paste it in and as you can see it should all play well if youve done everything correctly now what this is designed to do is to take what we've defined in our columns. TSX and render out the data that has passed through accordingly now I want you to pay attention columns comes through as a prop data comes through as a prop okay so if we go to our table wrapper now where we will be pulling in the data table this is where essentially we got are going to go ahead and pass in the data and so forth so you see the data is the initial files now initial files you're probably wondering well that doesn't make any sense where is the initial files sell what what we could do is we can actually use the skeleton files as the initial files so if I passed in this it would work perfectly okay the columns we can import from column and then this we can go ahead and import like so so if I go ahead and hit save now what we should see is Boom firstly sick right works so nicely so you can use that right now and as you can see if want to go ahead and refresh just like that I mean this is giving me an error right now cuz it doesn't match so ignore that for now I'll show you exactly what we're going to do but now if I click on try for free you can see it pre- renders it beforehand now I'm not going to actually use that as the approach right I actually want to do do something a little bit cool but you can get the point that that you can have the data immediately available I'm going to do something kind of cool here just as a more of a gimmicky vibe to go ahead and give you like this Dynamic loading situation but I'm showing you that you can do this so that way no one sort of calls me out on it all right but what I'm going to do here is I'm actually going to have a nice little skeleton loader situation and I'll show you a little demo before we carry on basically I want it to be like this so it's going to go ahead and refresh and then it loads the first five and it knew that because of a server render but while it dynamically loads it so basically it attaches a real time listener to the database which is what we need because when I upload the file it needs to real time update that list I'm going to do the following okay so let's go ahead and firstly I'm going to convert this to a client component the table wrapper okay that's the first thing secondly I'm going to have um I need access to the user's object right so in this case I'm going to go ahead and pull the user like so using use user okay um I'm going to pull that from clerk. nextjs I don't need any of these values I just need the user itself next thing you know I'm need the a piece of State called initial files initial files and I'm going to go ahead and say set initial files and we're going to map it to the file type okay this is going to be for the real time listener connected files okay next thing I'm going to do is I'm going to go ahead and actually um I just realized something as well I just realized something that I could could have done separately here never mind it's fine okay so what I'm going to do now and then I'm also going to have a final bit of State for the sort I'm going to say sort set sort set s and this one is going to say um I want it to either map to ascending or descending so it's going to be either one of these two and it starts off with descending okay and then here what I'm essentially going to go ahead and say is our sort is going to be very very simple all this is going to say is that if it [Music] is unclick we have an arrow function set the sort if it's descending it'll set it to ascending otherwise it'll just be descending okay and then very simply for the text all we do is we basically just have a turny condition which will render out nicely to the following if it's descending it's nearest otherwise so forth right so if I go ahead and show you this right now you can see ignore the ER for now but you see that sort BYO this sort by newest okay really nice now what I want to do is I need to I'm going to be using something called react Firebase hooks really nice library and I'm going to make it very simple for you to go ahead and use react Firebase hooks is a real time listen up Firebase Library awesome awesome thing to use myang says sunny casually dropping bangers that's what I'm talking about dude all right so at this point now we can go ahead and install reat Firebase hooks this it really nicely gives me Ro time Firebase uh collection Hooks and things like that right I'm just going to go ahead and modify my ND filter there we go okay so now we've installed that we can go ahead and use it so you can feel free to go into here and see Cloud V or Hooks and all this kind of stuff they have loads of different hooks that you can use so in this case if you ever get stuck you know where to look but in this case I've already done the hard work for you all we're going to do is basically go ahead and use the used collection hook uh right now mine is not pulling in for some weird reason reason so I'm going to go ahead and manually add that in like so and now I'm saying if the user exists that's very important we're going to run a query on Fir store and this is basically just like put it simply without the query all we're doing is this right so we're basically just doing a very simple uh pull from our database from this location and it's going to give us all the documents but what we do is if we wrap it around a query what we actually do here is we can order it so when we fetch that that data from the database we can actually order in um we can basically sort it by time stamp based on the ascending order so if it's ascending or descending and so forth okay so that's that and now we're not actually going to use loading and error but I'll keep it there so you know that they're there and then we have the docks now the problem with this is that remember that time stamp that I spoke about earlier that time stamp is actually going to cause us an issue if we try and use this because our skeleton files are different to the initial files because of that one field right and that's annoying this is where a converter would actually come in very handy I'm actually going to quickly go ahead and actually uh unscrew my ND F so that way you guys can see my face a little bit easier so give me one second I'm unscrewing it and watch the difference now watch this okay let me there you go boom super bright okay that's way too bright um that's no good give me one second guys uh I'm going to go ahead I didn't realize my camera settings are all on manual and I probably shouldn't do that in a live stream but smash the like button for the for the attempt I'm almost about to rip this off my camera right now which is very silly of me to do on a live stream okay there we go okay let's not do that on a live stream again all right we're back let's carry on oh my God we just got some banging news that is sick Jay oh Wicked okay let's go I'm I'm excited now guys we're working with Microsoft big news sick all right that's so cool all right so let's carry on um so what we want to do is when that data loads we want to go ahead and do a little transformation step so this is where use effect will come in very handy okay so this use effect will run when the component mounts and I can actually set the different rendering conditions here I want to render it when the component mounts and also when the docs change right so what I can do is I can say use effect like so so here I can say const files equals and what I'm going to do here is I'm actually going to map through the files okay so I'm going to say docs uh firstly I need to say if there are no docs I'm going to do a simple return this is known as defensive programming okay and then I'm going to do a map so this is where I transform the data so cons files equals docs do docs. map and every single doc I'm going to do an implicit return with an item and it's basically the same transition that I did previously so like so okay and I can go ahead and say this is going to be a file type array okay and then what I'm going to do is I'm going to say set the initial files to be the files over here so now what it will do is it will load up this data it will go ahead convert it to the data type that I kind of want in and then we can use the initial files okay and those initial files I'm going to push through here so now I will show you guys if we go ahead and refresh now it will pull in that data and you see how there's a delay now because what it's doing is and you see how we got rid of that error as well but what's actually happening now is it's going ahead and it's rendering one I kind of want to change this music up okay so what's happening now is it's going ahead and it's rendering on the client so it's fetching a it's connecting a real time list that's why there's this little bit of a delay in that initial situation what I want to do is I want to go ahead and actually have it so also look at this guys if I go ahead and sort my newest notice you see how it sorts it amazing stuff because it's it's attached to the sort here right so firstly that's working so we just implemented the sort functionality as well but secondly I want to go ahead and change this now so it's a little bit more um you know visually appealing instead of saying no results cuz we server rended the skeleton files we can actually do something pretty cool here instead so what I'm going to do is I'm going to say if the docks initially are undefined right so that basically means that if if the docks haven't loaded in yet so these docks that we see here the realtime listening docks real time I mean like if something was to change uh in the back end it would go ahead and refresh accordingly so what we're going to do here is we going to say if this is the case then we're going to return some jsx instead of the bottom one okay and what I'm going to do here is I'm basically going to say div and it's basically just say loading so I'm just going to show you an example so now if we go ahead and refresh you see that loading then boom it pops in okay so this is the thought process behind it now yes you can make use of the new nextjs kind of loading States all that good stuff but I'm not going to do that here I'm just trying to show you how you can go ahead and use this in in the way that we're going to currently use it remember there's so many different ways that you can go ahead and change this up really mess around with things this is how we're going to go ahead and demonstrate it today okay so at this point now what I'm going to do is I'm going to head to where is it uh yeah here and we're going to introduce a skeleton loader so head over to Shaden go to skeleton and you see we have this beautiful skeleton not so I'm going to go ahead and do add skeleton boom Comm on J pop that in or install it sorry here we're not committing our code there we go and that's going ahead and added skeleton lootus to our project and very simply all you do is you import the skeleton to the top of the file like so and then we go ahead and we pop it in now I've already done the hard work for you but all I'm essentially done here is I'm saying it's a flex Flex column container that we're positioning everything in and right now I'm going to have a you know a dummy button okay so a dummy button like so if I was just to show you that for example you see how there's a dummy button now obviously I need to make this button be starred correctly in the first place and I can do that by doing a very simple uh addition here so this button I'm just going to go ahead and style it quickly margin left I'm also going to say that this div should also be um Flex Flex column space between the white components of five and a padding on the bottom of 10 right super simple uh the button should be the variant of outline okay so you see that look at that boom so nice right and now you can see look when I do it it's sorting it and returning us the value and also you can see that when it's loading we get this nice little loader right which is awesome so this skeleton loader now I'm also going to do the same thing I'm going to have a div okay so div and basically I'm building out the casing of what a skeleton would look like so in this case we've got a div border so if I go ahead and do this you see they' got a little line there um let's go ahead and say that this div should have a border which is rounded to a degree okay and then I'm going to map through all the different files okay so I'm going to map through all the skeleton files I'm just going to Showcase something which resembles somewhat of what I'm trying to look for so you see that so that looks really clean now so it already knows the number of skeleton files and then while it attaches that real time listener in the background it's going to go ahead and pop it in okay so at this point I'm also going to say if there was no file I don't want it to basically show nothing okay so I'm also going to say if the skeleton files length was Zero then I'm also going to show a empty sort of like it just show one and then it will say there are no results so right now we've got a beautiful skelet not look at that guys absolutely gorgeous if I click on sort it goes ahead and sorts it and Returns the data and stuff like that beautiful beautiful stuff right now now because it's a realtime listener what we can actually do which you probably didn't even realize yet is now it would actually work with when I upload a new thing to it as well so at this point when I upload a new file we can actually see in real time how this will work so if I take my Dropbox clone right and I go ahead and pop it in look at this look boom Dropbox clone just like that sort by newest let's pop it in here and let's do that one more time right I'm going to take the previous podcast I just did I'm going to go ahead and pop this in boom look at that guys absolutely sick absolutely amazing stuff and if I was to click on the Dropbox clone right here boom look at that so so nice right so so clean yeah so at this point now that's looking pretty cool right so what I want to do now is I want to go ahead and let's just sort this out so you can see everything's working the way we expect it but we still need to add in a few additional things we're also doing really really well on time I just want to let you guys know I appreciate everything one you we're about to hit half a thousand likes absolutely smashing it today guys if you're enjoying this subscribe like and we're going to carry on strong to the end of this build okay so at this point now what I want you to do is we're going to go ahead and um customize the rest of this well firstly I want to add a few toaster notifications right but let's do that afterwards let's actually add in the moduls and all that good stuff so inside of the data table is where we want to be next so basically now what I'm going to do is I'm actually going to add in a few different um edge cases okay so where we have the the rows being rendered out what I'm going to do now is firstly I'm going to add a delete button okay so I'm going to add a delete button around where we map through our table rows so how do I do this well essentially where where we have one second where we have no results I'm going to say you have no files okay just like this so it's a bit more easier to understand and then outside of here what I'm going to do is outside the table underneath the table row after we map through the visible cells what I'm going to do is one second yeah we have this so I'm going to have a table cell so I'm actually going to put in a my own custom table cell and this is going to resemble the delete button okay so I'm going to import my file type here button I'll explain everything that I just did this is going to do nothing at the moment in fact right now cuz we haven't got this set up I'm just going to go ahead and say something like this and we say console log hello console that out and the trash icon we can import it from Lucid react right all this is doing here is the key for this will be the actual row contents is the actual so if you do roll original I'm casting it to file type but it's actually the file itself and then you can access this data type so in this case you see that all of the file contents of that row that we're basically hovering over so if I was to go here now what you should see is a trash can right and right now if I click into it you'll see hello okay so if I was to go ahead and pop this on the side right now ignore that that's my extension the red stuff you see when I click it it says hello Okay so we've successfully tapped into it and added a custom fi and this is also scrollable as well right now we will go ahead and prettyy all of this as well so don't worry that'll look really clean it won't look like way it looks like now and by see that is going to have it so when I click it it will pop up with the delete Model okay so quick little water break and then carry on I have to say your retention is absolutely phenomenal right now so you guys are absolutely incredible the way you're sticking around okay so what I want to do now is I'm going to go ahead and do the I'm going to first see figure out the rest of this so where we have the table cell being rendered out here okay I'm actually going to go ahead and do a little check to see a few different edge cases so the first Edge case I want to do is I'm going to say if the cell column ID is the timestamp cell okay so obviously you can go ahead and render these out completely you could do this at the column level all right you can definitely do this at the column level but I'm also showing you how you can customize it here as well so I'm trying to show you both ways right so I've shown you already how you can do it at the column level but right now now I'm also showing you how you can do it at this level so um one second guys sorry I've completely screwed something up X render like so okay it's because of this yeah so if I was just to put this here for a second so we've got this r out otherwise we've got this rendered out yep so let's pop this out like so okay so if it's a time stamp I'm going to do the following I've just got a simple div which basically just pretty pries it right so if I go ahead and show you this what we've done here is we put a divid in we've got two divs inside of it the first one is rendering the local string the second one is rendering the date and time so it's basically turned that nasty looking one into this the time and the date in which it was done and you can see when we sort it out it basically changes to the other order so that's very very simple okay that's not funny um whoever put that in the group chat in the in the chat j s out um and then what we're going to do is we've got a turnery here so you can do I'm going a nest turnery I'm not a fan of doing nerary but we're going to go ahead and sort this out so in this case I'm going to say else so L do column. ID is equal to um one second okay so there we go I'm going to say else file name okay like so and then I'm basically dropping it down so again I would not recommend that you do this approach right I don't like doing it this way but I'm showing you both approaches you can either modify in the columns like so and render the cell out accordingly which is actually a really clean clean way but I think it's always good to show you both right so that way you can make a calculated decision if you ever need to custom bespoke enter it customize it you can do that right but I always think it's good to show you these situations so that way you have you're well informed and you can kind of do what you need to do right so at this point now for this second one if it's a file name I'm going to have the following appear right so if it's a file name it's going to look something like this so pencil icon pop that in and again over here I've got the open rename modor which we haven't yet done so I'm going to go ahead and configure this accordingly right now I'm just going to say hello okay so this is your final form okay I'm going to make it a bit smaller so you can see the whole thing in one so here so this entire block now is basically custom checking if it's a time stamp or conditionally render it like so if it's a file name it will conditionally render it like so otherwise it will render out the cell uh just to render out the context of the cell now you can completely and I stress this you can completely combine this in a different way as well so I want to firstly show you what we just did so you can see now we've actually got this so I've got this all all of the setup is there and obviously we can go ahead and mess this around about time subscribe content all five that's what I'm talking about dude almost at 500 likes smash that like button if you're enjoying this content okay so at this point looking great yeah and then we can obviously customize it f the reason why I've kept it in here by the way as well is because I'll be triggering things like open rename model and so forth okay so let's go ahead and do that right now so what I'm going to do is I'm going to set up the following so we're going to do um I'm going to implement these two so open rename model and I'm going to do the delete Model situations okay so firstly I'm going to go ahead and set up the open delete Model so let's do it right up at the top here so we're going to create a function called open delete Model and it's very simple what I'm going to do here so I'm actually going to show you we're going to set a piece of state to file the file ID so that way when you essentially click the delete Model we're going to store the ID of the file that you're trying to delete and that's going to be important for when the popup comes up we're also going to set the model to be true right now I'm going to set this in a global State layer right so I'm going to be using zustand you can use Redux you can use a react context API why is this important it's important because sometimes we need to set data points or variables inside of our app that can be globally accessed throughout anywhere inside of our application super important to be able to understand how to correctly do this we're going to be using zand to do exactly that okay so in this case this is where we would set the F ID and so forth I'm going to do the same thing for the rename modu so I'm going to pop it open here and we're going to go ahead and set up our state so that way we can set the these things up so we're going to take a little second to go ahead and Google zand and zand is a very simple State Management Library it's actually I'm very big fan of this at the moment it's very easy sort of State Management Library you want to install it into your project like so and then what I need you to do is go ahead and create a store okay so at the top level package Json level I'm going to create a store and then inside of that I'm going to go ahead and create a store. TS file okay now inside of the store all we're going to do very simply go ahead and create this right so we import create from the stand and this is where we basically create up our store so firstly I'm going to create an interface which resembles the state of our app so this is it so we've got a piece of state which determines if the model for deleting something is open and we have a set of function these are all type definitions we have the same thing for the rename model and we have a way to go ahead and change it then we have a file ID which is basically going to allow us to keep track of what we what file we're interacting with and we have the setup function for it we also have the file name and a way to modify the file name then of course we have to create our store so the way we do this is we simply go ahead and you can feel free to check out um here so you see they they' literally got the examples here as well but I'm showing you the very simple version of it okay so here we can actually have our store so what we do is we create it using the App State we're going to call this one used app store you can have different slices based on what you're doing and again this is globally accessible throughout your app so let's do let's look at the first example here so we're going to prepare for example the file ID and set file ID so I pop this in and this is erroring out because we're missing all these other things but in this case I'm setting the initial value of file ID here to null and you can see see string or no and then I'm saying when we call this function it's simply an arrow function which takes a file ID and it sets the file ID to whatever we want it to inside of the store I do the same principle for all of the other variables so you can see here okay just like that now this is essentially a reducer right so this is essentially allowing us now to modify our Global store so that way we can use this throughout our app however we need to to use it it's very very powerful and it's very simple and how we can go ahead and use this it's worth mentioning I make all of this extremely easy and simple inside of zero to4 stacko so I teach you about global State Management I teach you about all of these different coding principles and fundamentals it is worth checking out you can go ahead and check it out paper.com course or scan the QR code on the top of my face right now over there and you can go ahead and check it out remember Cyber Monday sale our biggest have sale 50% off everything pretty much so you can go and check out okay and done that for you guys okay so at this point we've got our store now how do I access the store inside of a component because you said Sunny that it was a global piece of information so how do I access all of that stuff then so I'll show you how we can go ahead and do that firstly this is actually incredible uh SII says Hey thank you so much for being my mentor especially for coding it helps me to Chase my dream it makes my job easier and now I'm selected for one of the best organizations Jay screenshot that amazing stuff you're welcome Pasad says you're a wonderful person with a beautiful I keep being amazing I appreciate you so much the PO of F that is what we're about the energy is all about that thank you so much yeah so in this case how do I pull this information so we can use it well it's very simple all we got to do is we say cons we have an array and then we say use app store and then we basically have the state that we can map to accordingly here now I'll explain all of this in just a second but all this is doing is we have this line of code okay now what we do is let's say I want the file ID right so I want the set file ID fun fun I can go ahead and say set file ID I can say set file ID okay and then here I can say state do file ID state. set file ID now I've got access to these two things you see that and I can successfully modify it accordingly okay I'm going to do the same thing for a few others now and I'm basically going to shorthand this and I've already set it up for you so I've gone ahead and pulled in a a bunch of things I'm not even using all of these so we don't even need some of these I don't need that I don't need that I don't need this I don't need this and so forth right so we've we've extremely made that simple uh in fact I need to go ahead and modify this as well so file ID I don't need set file name it needs to be in the correct order by the way you can't do them out of order like this set is rename mod open okay we need that one set is delete set file ID set file name is rename and then this one what is that is rename model open set is rename okay there you go so this one here oh sorry this one is wrong should we set is there you go okay so make sure they match up so it has to be the first one second one third one fourth one accordingly okay these have to match up in the correct order that you specified them perfect that's perfect okay now we've we can go ahead and modify that Global piece of information okay so it's overwhelming enough for today thank you so much yeah so we've got the open delete Model the open rename model so next step that I want I want you to do is we're going to go ahead and connect these to our app so remember the open rename model all I'm doing here is I'm basically passing in the ID and the file name so that way I pass in the ID and the file name and we set those global variables and I set the is rename model true we do the same for open delete Model so instead of the console log hello now we're going to do the same thing I can get rid of the hells and now what I'm doing is I have a toggle so when I click that delete button for example over here it will toggle the open delete Model uh it was basically hit this function this will then go ahead and set the delete Model to true this is where the fun stuff comes in now all I have to do is go to Shad CN and I go to a dialogue here now if I click this uh edit profile you see these popups this is known as dialogue right very very simple stuff and I will show you how we can go ahead and use this so we're going to start with the delete Model to be to be quite Frank so you can do this you can also have the the alert dialogue which is a bit more of an urgency thing so you can actually use that one um I like the dialogue because you can click away from it so in the this one you see it's more of an alert dialogue allows you to have a click out as well so you got that natural click out Behavior so what I'm going to do is copy this MPX Shad add dialogue like so pull that in quick little water break can you tell I have a cough it's hidden right so at this point we add that in and now what I'm going to do is I'm going to create a two different modules right the modules in uh discussion right now this model and this model okay so let's keep going so we've got the components and here I'm going to go ahead and create a delete model. TSX right I also have to do the toast notifications after this very quick don't worry we're doing very well on timing and then we'll do a deployment all this stuff will be very simple trust me right so the delete Model right now what I want you to do is you can use this as a very simple base right so for example if we go to the custom close button you can see we've got an nice base there we can simply copy this okay and we can go ahead and paste it in like so so what I want you to do here is yeah you can copy that and then we're going to call this one delete Model like so and we need the input for the delete we don't need an input we don't actually need the label either right instead I'm doing here is I'm going to go ahead and say we don't have a trigger we get rid of that for the dialogue content in fact you know what I'm going to show you how I'm actually going to customize this rather than messing around too much with this for the dialogue header what I've done is I've got the dialogue description and dialog title so here I'm going to pop these in you sure you want to delete this action cannot be undone that's very simple and then underneath it what I'm going to do is I'm going to have the button another button I'm going to have Flex box so what I've done here is if we take their buttons like so get rid of that and I'm going to paste my own buttons okay now I want you to just you can pause the code at this point to see this we're going to create a delete file function but essentially what we're doing here is we have a cancel button which is just going to set the model to uh false so that way it won't open so we're going to need that function that we spoke about earlier which means that this is actually going to be also firstly a client size components we should be writing use client and then I need to go ahead and grab a few things off of my Global State like so so we need to get the app store like this really good okay and then if we go down here that's perfect con onclick delete file I'm going to create a function for that and then we'll handle that delete functionality here okay but with that in mind now what we can do is we can go ahead and actually attach a few more things so firstly this dialogue we're going to attach it to our Global store so this will be determined if it's open or not based on our Global store so we can say is delete Model open okay so is delete Model open I don't know why that's not popping up right now there you go is delete Model open and then we're going to say on open change what I can say is is open like so and then I can say set is open to whatever it is so basically if you've clicked open now whenever we modify the open Behavior it will just modify our Global store that's how we essentially handle this approach okay so so far that is actually pretty cool and what I can do here is now because it's mapped to the global state if I try this out guys what we should see is that if I go ahead and click this we don't see it now there's a reason why we don't see it can anyone guess why everything's set up in the correct way everything seems to be perfect but we're missing something and I know exactly what it is if we go to our table we aren't actually rendering it anywhere right we're not actually putting that table that model anywhere inside of our application so how do we do this super super simply inside of our table row where is our table row right where we before we map through all of the visible cells so where is it here yeah inside of before we map through what I'm going to do is I'm simply going to put in the delete Model like so now it's in the context of where we need it and at this guys if I click this boom there we go perfect now this the close button we don't even want that we don't care about that if I click cancel you see how it cancels it and if I click delete we haven't implemented this functionality but so far very nice right now let's go ahead and get rid of that delete so let's go to our delete Model and right now the reason being is cu we got this footer um here so we could actually go ahead and pop the buttons inside of the footer if you really want to so let's do a quick little refactor job let's pop this in here to be more syntactically correct let's pop that in like so let's go ahead and have our buttons as chure in here so let's go ah and do this and instead of the dialogue Clos I'm not going to use these predefined components I'm going to use our own buttons and now that's more syntactically correct if we were to pop it open or I mean uh I'm not a fan of that to be fair that does not look like the way I intended it to um in fact let's just do dialogue for let's get rid of that let's keep what we had previously that's much nicer and you can see fully responsive it works the way we want it now deleting the file let's handle that before we continue on deleting the file very simple right it's actually a lot simpler than you might think what we want to do here is we're going to firstly I need to check I need the user's information so I need to know who that user is that is signed in so we're going to go ahead and pull that value in right now okay so next thing I want to do is in the delete Farm we simply have a code block which checks if there is no user ID or no file ID currently set and the reason why this is really important remember when I I click this individual so say I click this one I already have the ID set now of the file ID we set it globally so now I know which file the user is clicking okay so these things are really important okay so first things first I need a f file reference so we're going to use a simple principle that we did earlier as well we have the users the user ID the files and then the file ID this is the bucket for the Firebase storage bucket right so in this case we're actually referencing this right here the storage bucket okay now once we have that storage bucket that reference all we need to do is do something called a delete object so delete object call from Firebase and then what we do is we pass in the fire reference and then we can tap into the then function so we can say asynchronous boom like so and what I can do is I can go ahead and basically just log out to say wooo you successfully deleted your file okay very simple successfully deleted the file um and then once that's done I want to go ahead and actually delete the document okay uh you can also go ahead and catch an error if this was to ever happen at any point so from here you can go ahead and say catch and you can handle these accordingly but just a prime example of things right so I'm going to await this as well just to make sure that it waits for that but this is just an example of what you could do okay so in this case I'm very confident this will work so I I'm not going to do this I wanted to a wait delete the object and then I'm going to do the delete doc you could also tag it onto it right so if you really wanted to you can go ahead and do this and then you can do the next delete statement afterwards so that way it firstly deletes that one then it does this the following one so if we were to do it this way you can have a nested approach I'm not a huge fan of this nested approach if I'm honest but um we can do it so I'll say delete doc here and then I can go ahead and pass in the reference to the fire source so remember we're deleting it from the uh Firebase uh storage first and then we're deleting the reference to it in fire store and again you can make this a transaction in Firebase to make sure it all happens a swift move and everything works in the way we want it but then after that what we can do is do it then again you can see the issue you're going to get nested yeah right but I'm going to show you I'm trying to show you different ways you can handle these you can do a think of Weights you can do whatever you want to do um and really with all your catches here you can even go ahead and simplify it by doing a try catch um above all of this so if we do a try catch block I can go ahead and pop this in and it will by default catch any error over here so we can say conso log error SC console error if you want to do that so now it would by default catch any error that comes out of it but after that we can go ahead and say for example um after that's done we can say successfully deleted right so everything's good cool so cons log deleted yeah so now we've got this kind of you know delete systematically working the way we want it and then what I want you to do is after all of this we're going to set the uh model to be uh closed okay so we're going to go ahead and say set is modal false okay so now let's go ahead and give it a try Okay so let's go ahead and do so Dropbox clone let's go ah and do this delete and you see boom it went ahead and deleted it right SAS translator app or you know the podcast I recently did delete you see it went and got rid of it yeah Dropbox clone delete and right now it's not waiting for me to do that so if you really want to go ahead and get that kind of handled in the correct way you can either have it here or you can have it after the then block you can have a finally block which will asynchronously wait for this C to happen first and now if we did this and I showed you look at that first see beautiful skeleton noce SAS delete and now watch how it waited for the delete to happen that's actually the behavior I want because I want to add a toaster in afterwards to make sure that it goes ahead and informs us that okay deleting right and so forth so if I was to go ahead and go this one as well boom you have no files and also I just want to show you visually remember that one there you go it works really nice so let's go and just show you again that this does work so I can go drop Dropbox clone really good Pops in when it's ready AI nextjs 13 crash course delete the Dropbox clone boom right so awesome stuff we got the delete functionality down right we're going to add toast notifications afterwards but for now we're actually going to go ahead and add in the rename so that's the delete Model done so I think next up we need to add in the delete Model uh the rename model sorry so the rename model TSX RFC boom we got the rename model like so that looks great now with the rename model what I want you to do is a similar approach right we're going to have a few different things here but I'm going to just going to speed this up a little bit so we've got we need the users information this needs to be a client side component as well so it's going to be use client I'm going to go ahead and pop in the following like this we've got the users's information we need a piece of state to track the user's input because we're going to have the uh ability to basically rename the input file okay and then we've got the similar layout right so exactly the same similar layout and I'm going to pop it in and demonstrate exactly what I mean right so this part honestly I just need you to to kind of you can always pause the screen and have a look at it and I'll show you what I've done here I'll run through it okay so nothing completely out of the ordinary to compared to what we did before firstly I need to install the input the button we already have button I already have the input is what I need to install so head over to Shad CDN head over to input go down here add input command J input like so this will install the input and then I can go ahead pull that in like so and I want you to pay attention all we're doing here is connecting it to the is rename model on open change exact same as the delete logic we have a title for the dialogue rename the file we have an input field all this is doing is it's basically saying if you hit the enter key we're going to rename the file okay um and then we've also got if you hit the button it'll rename the file we need to create that rename file function very straightforward we can go ahead and create that like here we say con rename file and we can go ahead and do what we need to do with it afterwards right then we have the uh cancel button which will just simply close the model okay so at this point very simply same logic we're going to have a defensive code block if it's you know um if the user doesn't exist or there's no far away ID selected this is going to be an asynchronous CL block and we can go ahead and get this set up the way we need to so I'm actually going to do the await update document now what I'm actually going to do is all we're doing here is we're renaming the document so it's actually very very simple and straightforward what we got to do is we got to say await update document okay Firebase fir store and then we have the document reference which is actually the document itself okay so I'm going to pop this inside so we need the document reference it's going to be the user ID um and this is freaking out why oh yeah and then we need the actual data that we're going to pass in to go ahead and manipulate so in this case the file name is the input that we've typed in now the input firstly import the database which very important the input here you can see is simply mapped so what we're saying is on change of the input all you're doing is setting the input so we basically just this is a very simple State example in react right if you don't understand State I've got whole video on my channel whole video on my channel you can feel free to check it out uh Dev bu said just completed office work and I've joined the stream what is up dude good to see you here you should clear out the FI vi v voice stay there yes you can you can do that as well yeah um can feel free to honestly mess around with this as much as you want yeah so after all of this then we're going to go ahead and set this to is rename model Open Force okay so after you've actually done that as well you should actually set the input to be uh blank yeah so that way once you've done your manipulation it'll set them input to blank and then it will go ahead and do to be honest with you I think it destroys the entire model um but it's fine okay so with that done what we can now do is we can go over to our um our table and we can go ahead and where we had the delete Model we simply pop in the rename model so you see very clean code very nice very easy to work with Okay so with that in mind now when I click on this o nice and let's go ahead and say AI let's just say crash course so you know that that's what I'm renaming it to rename wait for it boom crash course lovely works exactly as we wanted it and if I refresh we can see that it's persisted in the database and I actually did a correcting crash course ai1 123 even if I hit enter it does exactly what we wanted so just like that we've done exactly what I wanted to do right we've got the sort ability working obviously I've only got one thing there but that is actually doing the correct rename for set and we've got the delete Model great great stuff you can also make this a destructive variant if you really want to make it in fact let's just do that right now let's add that in so if I went to the delete Model the button uh right here so we've got the ghost then we got here the variant and this one could be distructive oh sorry not variant destructive now boom haha if you want to show you want delete yes delete boom get rid of it all right so at this point we are almost there guys and if I went to go ahead and show you the dark as well look looks beautiful everything looks great right all the stting has been done accordingly but we also want to have toast notifications now what do I mean by toast notifications well let's have a quick demo as to how that would work so I'm going to go ahead and show you with a simple demonstration I'm going to open up my files right now to my thumbnails there we go boom and now check this out so I want to have it so that if I drag and drop yeah you see the uploading really nice if I click on a file for example right so in this case 240k celebration if I want to say 250 let's just say 1 million K celebration manifest that right look at that rename successfully if want to delete my caching explain video delete so how do we go ahead and get all this working okay so very very straightforward I'm going to make it super super easy right first things first I need you to go to Shaden I'm a big fan of J if you can't tell okay cops get worse we're good we're almost there quick little water break I think we're doing really well so you can see the the importance of the global state right guys also we're about to smash 500 just destroy that like button for the YouTube algorithm you guys have been absolutely incredible so far okay so toast toast notifications so this is what a toast is like you see this little bottom thing right there so we can use a toast notification from here I actually haven't used a toast notification here and I'm really wondering why didn't I not use this one I'm actually confused as why I didn't use this one but you could use this one right see you got some nice toast notifications there um you can use this one if you really want to okay I'm just trying to think okay we could use this one I haven't used this one I've used the other one okay I'm tell you I'm going to stick with the original plan I use react toast to do this but you can keep it consistent if you want to and use the toast from Shaden I'm going to show you how we can use react hot toast cuz I mean the Shad xn one is fairly straightforward react hot toast I love this honestly it's very nice yeah so we're going to go ahead and use this we're going to say mpm add react hot toast so I'm going to do my own version of this let's go ahead and pop this in like so mpm I react hot toast and we're going to go ahead and go to our layout file and we're going to add in the global toaster which allows us to go ahead and get this set up you can feel free to check out the documentation it's so easy click on documentation mpm install all you got to do is add in your toaster to your top level so in our case it's the layout file simply go to the top bang it in at the top and then I'm going to add it right underneath here at the toaster level like so and then that allows us to actually globally access it for our entire app which is very simple all we now need to do is head over to our um wherever we need to use it so I guess let's start off with the rename model so when we have the rename model I am simply doing it at a high level here so I'm going to go ahead and pop it in there and whenever we do any interaction we can really kind of use this in a nice way so when we start renaming the file I'm going to say toast renaming I get an ID from it but that's very important this part and then I can say toast success once it's done right so in this case I can say toast. success okay now for whatever reason if there was an error you can go ahead and do like a you could go ahead and do a then catch and so forth or try catch around this to make sure that if if it was a fail you could say toast. error and so forth I'm being super optimistic here I'm just saying it's success right but this is obviously a demo you can go ahead and tap into that however way you want now at this point if I was to go ahead and drag and drop a file why do I keep closing that I need to um I to drag and drop a file into my application let me go ahead and pop this in so like so so let's go ahead and do this so if I had a Dropbox clone for example here and let's start renaming it so if I type in Dropbox clone 1 2 3 look at that renaming rename successful boom just like that works exactly as we want it super nice super clean you can go ahead and add it make it at the bottom if you want by simply going into your layout file oops your layout file and then here you can say position and you can do like for example bottom bottom center so if I was to do the bottom center now and I do 1 2 3 4 you can see that rename successfully so if you want to do that that's fine as well right now we're going to do the same thing we've already got the download working that's great we we've got a download there and if we want to do the delete I need to have a delete so in this case in the delete Model you can see it's super easy to go ahead and get this working right so at this point I want to have my toast being fired off at the top here so the moment we start if we pass that point we're going to do toast. loading uh I need to import my toast to make sure it's working feel like I'm saying toast way too many times right now and then we're going to go a and say toast successfully deleted yeah so if um where is it finally da da da so after all of this is done then we can say toast successfully deleted otherwise if for whatever reason an error occurred I can go ahead and say toast. error error deleting right so here for example okay we can get rid of the console log we don't need them want to pollute our code okay so now with that in mind if I delete this deleting deleted successfully boom just like that now absolutely beautiful stuff right and the final one I want to have is the drop zone so when we do our Drop Zone I want to have it so that way we're uploading okay so if we head over to a drop zone uh when we upload the post here when we set the loading we can simply go ahead and say the same logic applies here so now I've got my toast. loading toast. loading and then I can go ahead and do after it's all said and done again in this case I'm being optimistic but you can go ahead and have the try catch around it if anything happened you go ahead and say it wasn't successful but now let's go Ahad and see this in action okay again why do I keep closing that it's crazy okay so there we go let's go ahead and grab this Dropbox tone boom uploaded successfully there we go guys absolutely beautiful I can go ahead and upload loads of things things you can see right here working exactly as we want it look at that and also I just want to prove a point to you that right now I'm only sort of dragging in things like uh pngs but I want to show you also how I could do something else um what else have I got here that I can put in it's a good song all right let me go ahead and put in a JPEG file for example there you go look jpeg it works right so I don't want to put anything specific fake like of importance there oh my God I was about to drag 4 GB um mp3 let's put in the song example so look at that song look uploaded boom really nice right so my internet is super fast so you can see and then obviously we've got you know different songs going on I can delete that there we go simple as that really really nice right and S one two three renaming boom there we have it absolutely incredible stuff dark mode is working exact as we want it as well go back into over here welcome to Dropbox I want to prove a point to you that again let's do a quick demo of the application try for free I'm going to log into a separate account now so for example the team [Music] account team AOA and then wait for it open up the dashboard you can see I should see my own files here banging look at that amazing stuff if I open up my thumbnails Dropbox phone boom nice look at that and then we can go ahead and do sass translator R boom amazing stuff click on this sign out let's do one more demo go back to Sunny we should see my original files so just to prove a point to you that they are all individual to your user this is absolutely phenomenal working exactly the way that we wanted it Zade says yo that is sick cheers from taian yo what's up good to see you look at that bam works exactly as you want it there you go guys Dropbox absolutely awesome stuff this is amazing look you can sort by the oldest sort by newest we got all this new stuff fully responsive absolutely Works amazing you can obviously make this as responsive as you want it kind of take it as far as you want I've obviously taken it to a certain degree but this is an absolutely amazing project to add to your portfolio I stress this time and time again add stuff like this to your portfolio it showcases so many different things right I'm not joking when I say that it really is showcasing so many things so so at this point now I think we're ready to deploy this application so let's go ahead firstly we're five likes away from hitting 500 so destroy that right now if you want to help push this video out as many people as possible so how do we deploy this thing so firstly I need you to install the Vel CLI so Vel CLI simply go ahead Google it you can do Vel CLI overview install it the following way I've already installed it I don't need to do this right then all you need to do is type in Vel login which I've already done so I'm not going to do that and then you just basically literally type in Vel and hit enter and then it will say set up and deploy yes and now I've already logged in I've got a few different teams when we handle some software projects so I'm going to go ahead and click on my default team now what you can see is link to an existing project no what's your project name I'm happy with the basic in which directory is your code located there you go we can upload it like so and remember guys after we've done this I'm going to show you how you can even map it to your own custom domain name with hosting job okay want to modify these settings NOP we're all good okay now at this point this will fail but I want you to do is click on the inspect click okay at this point the reason why this will fail is because we have to not set our environment variables now what I need you to do here is I need you to go into your environment file so I'm going to click enter now I'm going to hide my key that way you guys can't go crazy and start doing madness Okay that's not my key but anyway yeah so I want you to cop copy this file with the key intact right so I've deleted it here for obvious reasons yes so I want you to copy that file so I've copied it I'm copying it right now I am going back to V Cel and I am back at V Cel now we also hit 500 likes that's what I'm talking about Madness thank you so much guys and here I want you to paste it okay so I'm going to paste it right now pasted right and uh right now I'm basically just going to cut a little bit of my key out but you would have seen that the entire ire key would have been pasted here right so at this point I'm going to undo this and I'm going to click on save so that way you paste the entire key so I'm I've gone ahead and click save and just like that now you should have both keys here okay so with both keys here that's what we want to get to the next natural step is now we want to go ahead and cancel our build so I'm going to do contrl + C and I want to do the same thing with Vel and we toce we can deploy straight to prod right so Vel d-r because you can see by default it does to preview and then you can deploy to production so I'm doing theel prod and then you can inspect your build this is where it will begin to build now don't be surprised if something breaks here for example typescript definition wasn't matching up or so forth this is part of coding this is going to happen okay now while this is loading what I want to do is I want to go over to hos nja because I want to show you how we can go ahead and get our custom domain name connected and mapped up so right now I'm inside of host ninja so I'm going to go so again if you haven't already checked out the biggest ever sale is happening over there guys you simply you need to use code sunny at checkout to get a further bigger discount honestly it's up to 85% off it's mad right now what they're doing click on login clicking sign in I've already got an account here so I'm going to go ahead and sign into my team account right so I believe it was this account and I'm just going to confirm that we are correct ly logged in before I resume okay here we are okay so in this case you can see I've bought my own VPS server from them and we have a domain here so what I need you to do is once you've bought your domain right so again you can go check it out right now they have an entire week of sales on right now it's in the description to go ahead and check it out click on the domain click on manage okay once you're here we're now in the H panel the H panel is so easy to use in hostinger I'm a big fan of it for this one reason okay then I need you to click on DNS name servers now once you're here this is the magic step okay this is the magic step as to where we go ahead and do the connection between our so deployment and what we're going to be doing so at this point firstly congratulations guys we just went ahead and deployed the app so if you go over to the domains you can see right here Dropbox clone YouTube This is actually live right now so I can literally go ahead and check this out I'm popping it in the chat as well so feel free to go wild on that have a look at it but you can see right now if I go ahead and click try it for free this will go go ahead and actually work this is production this is working Sunny s I'm going to log into my account right now and now check it out guys bro do you write 100% code completely or C code and then right no this is all fresh I WR all this from scratch um obviously I prepared it beforehand but all of this code is I've written from my side things yeah so you can see guys this is actually live you can feel free to check it out right now at the URL on the screen and that is working you can play with it yourself try it out if works it's awesome right now at this point I want to map that to a domain name so how would you do that right so I'm only I'm going to run through the steps to show you how you would do this so as you can see firstly congratulations that is sick we just deployed an app right literally as simple as that click on this go to settings go to domains and here is where the magic happens now I've already connected Sun sang to a different domain so all I'm going to do is provide a demonstration of how you would do this so let's go ahead and say that our website was super sia.com okay so superc app.com we're going to click on ADD okay then you can go ahead and say add super app and redirect superc app to it Okay click on ADD right and then you can see it says invalid configuration so what I need you to do here is you would copy this value right go over to your DNS domain name server and for example here you would do at name points to this add the record okay that's the first thing you would do the second one is you go to C name ww do and add this one so you would click on ADD record then you would add a c name you would go ahead and change that c name to www do for the name and then the target would be CN name. v. dns.com okay you would do that on both of these and then you will click save okay then you will click save now once you've done that guys it will take a second to propagate through the servers don't expect it to be instant in my past experience it really does not take too long but it sometimes is not in instance because hos engine needs a bit of time this is normal with any provider whether you use any provider out there it will take time to propagate through the servers so that connection between your Vel deployed app and host nja is made successfully but that is as simple as it gets and obviously if you do go ahead and buy the VPS side of things you can then go ahead and actually check out the VPS options that they offer and check out the video on my channel where I teach you how to not deploy to Vel but to deploy to a host ninja VPS themselves you can have it hosted and control it yourself but this has been an absolutely Banger of a build that is how you would go ahead and deploy it and you can see right now this is live let me know right now so you guys can see while testing how much is w i don't actually set M wits a lot of the time when I'm testing things out I do flexbox rules that kind of thing as opposed to just setting width constraints because you should always want your screens to be dynamic it could be a tablet they're using it could be a bigger phone it could be a smaller phone all of these things kind of factor in okay um but yeah I think with that said guys that is absolutely incredible I think I'm going to go ahead and uh do a quick little demo and as I mentioned before while I've got all your attention here to build things like this takes time to get good at coding takes time but the biggest thing that I have found there has been the most effective way of learning how to code learning the job that you really truly want is having the correct mentorship I have mentors of my own whether it's business whether it's gym whether it's coding whatever it is I have a mentor and this is why I built zero to full stack hero for you guys zero to full stack hero it's not just a course it's the world's best developer Community I say that with my chess this is exactly what it is you can go ahead and watch this video right now on pap.com course to see for yourself what we're all about all right guys we literally take you from zero coding ability all the way up to becoming a pro level coder and then we support you through your journey every course out there typically has an expiration date because they don't keep up to date with the latest and greatest bits of tech I wanted to break this pattern I wanted to make sure that every single time a new nextjs comes out every single time a new library comes out every single time the next tailn CSS comes out you guys are well informed you have a community to fall back on to help you guys elevate your coding skills always stay at the top and Forefront of the tech world and be above and beyond so that way you land the dream jobs that you want you start the companies that you deserve and you kill it in what you want to do and that's that's how you land your dream life your dream job and I swear to God if you don't believe anything I'm saying all I insist you do go to papa.com and go to the testimonials section of the of the website go to the top here click on reviews and I promise you this will change your entire mindset these are absolutely real people on our website these are all real people all real students I think we're getting a lot of traffic on my website right now cuz there's a lot of delay but you can see see here these are all members inside of our community that you can go ahead and read for yourself I want you to go ahead and check it out and honestly see for yourself and and check out so someone says it's co okay you can feel free to check that out yourself I'm not sure what's happening with you um but you can see for yourself these are all members inside of our community it changed my entire life by doing this because honestly seeing the success of each and every single one of our students is why I do what we do guys this is not madeup stuff this is literally what I put my heart and soul into it's what this entire YouTube channel is derived from it's what I what we do it's how we do what we do these are all winning people these are all winning students this is what the papa fam is about every time you hear me say the papa fam it's literally students who are loving what they do who are literally all they want to do is be better coders so feel free to check out papa.com this is the course you want to be a part of this is the family you want to be a part of this is an Ever growing community of honestly the world best developers it is literally the way that we've set it up that everything is down to a te perfect I love this course I love this community I will forever put my heart and soul into it and it's there for 50% off right now so feel free to enjoy that I've done that for you guys you guys can benefit from that with that said guys this has been an amazing build this has been an amazing build let me know right now what your favorite part of this build was we've got hijera in the chat right now she was I joined the course recently do check it out guys because you'll be part of the best community 100% right so JC I got to run to my team's daily stand up awesome stuff thank you for tuning in Jack says what your get my C you can't see a log but it's on the top right here you can go ahead and see it for yourself okay remember if you are using the hosting your discount make sure you use coupon code sunny at checkout everything helps support this Papa F Community everything helps support the YouTube channel all you need to do is like comment subscribe whatever you enjoyed that helps push this video out we're going to do a quick run through of the features of today's video guys I'm going to go ahead and pop this in as we you know the way we do it we built the Dropbox clone today with nextjs 14 we have nextjs 14 powering the entire thing the new app router we have Shad CDN to make it look absolutely beautiful this whole thing is responsive clerk authentication to make this perfectly working we have full crud functionality the ability to rename things the ability to delete things we have TA in CSS for The Styling side of things everything is being stored securely inside of our fir store database so you guys have learned so many different skills to is absolutely incredible and we've done this in a short period of time imagine if we we can do that today imagine what we can do every single week in a coaching call right feel free to check it out right build this out add it to your portfolio typescript to make sure your code is robust and safe and honestly just I would say this is one of those builds that I would really recommend now if you haven't done any of my builds before do this one do this one it's it's going to really impress the hell out of people it's an amazing addition to your portfolio and yeah hope you enjoyed the entire build I loved making it and guys your boy is back with more Banger builds and I'm going to keep them coming your way hope you've enjoyed it guys thank you so much for tuning in I'm just going to literally read up the final bits of comments before we absolutely close out on this one but with that said I think this is absolutely Banger video and uh yeah thank you so much for always supporting me in what we do none of this is possible without you guys but yeah this was a banger video Dropbox 2.0 if you're watching this in the replay right now remember check out all the time stamps skip to where you want to get to leave a comment if you enjoyed it because it helps me make the next build a bit better and subscribe if you haven't already with that said guys it's your boy Papa react AKA Sunny sang and I will see you in the next video peace look at that we've got everyone saying love from Kenya love from USA that's what I'm talking about guys greetings from Serbia what's good amazing stuff guys the Dropbox clone absolutely incredible thank you so much guys peace

Channel: Sonny Sangha

Views: 37,407

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript, nextjs13, next js 13

Id: FdEY-ZnEikg

Length: 180min 56sec (10856 seconds)

Published: Mon Nov 27 2023