Build and Deploy a Full Stack Google Drive Clone with Next.js 15

Key Takeaways

do you think you need to invent the new Facebook to get hired not at all you just have to prove that you can build professional and production ready applications that solve real problems and that won't crash harder than your last relationship so hi there and welcome to a course in which I'll teach you how to build store it a storage management solution inspired by giants like Google Drive Dropbox and one drive used by billions of users but here's the kicker you won't just slap have together a bunch of features you'll also learn a modern state-of-the-art text stack along the way together we'll create this project using the latest and greatest next 15 which updates faster than you can keep up so buckle up because in this tutorial you'll learn how to implement secure passwordless OTP authentication build a streamlined dashboard to track storage and the recent uploads manage multi-file uploads and different file types rename preview download delete and even share access with others use Global search to find any file instantly and design a responsive UI that works flawlessly on any device and much more covering the nextjs foundations best practices architecture and topnotch performance this isn't just another app it's a step-by-step hands-on experience allowing you to Showcase your essential job ready skills and if that doesn't get your adrenaline pumping I don't know what will but if you're ready let's Dive Right in if you visit the website you'll be redirected to the O Pages since you don't have an account you can log in or create a new account right after providing that account info you'll be prompted to provide a onetime password so let's head over back to our email and there it is let me type it in and I'm in we have a beautiful screen that shows the storage usage different categories of files recent uploads on the right navigation on the left and a global search bar at the top that allows you to search any file you've uploaded Lightning Fast there's also an upload button at the top right click it and you can upload any kind of file from documents images or media you can also upload multiple files at the same time upon a successful upload you'll see changes in storage usage and files being automatically categorized in different sections let's navigate to the specific file categories to see their dedicated space usage filter them or do the pagination and the same thing goes for all the other categories of files you can also perform different kinds of operations on each file so let's rename this to something else or even check its details if you click on it you'll see this file in the preview for PDFs you will see a preview in the default browser PDF reviewer pretty cool right from the drop down you can also download these files and save them to your device or simply delete them but that's not even the best part you can actually share these files with others that's right let's Click Share provide an email open an account using that email and there you go the shared file is already already there you can do anything you want with it if needed you can also restrict the shared actions and as always the whole thing is completely mobile responsive working on any device that you could have even that teeny tiny Galaxy Z fold so think about it this single project showcases everything a full stack developer needs to know from backend architecture database design and authentication flows to file handling user permissions modern UI principles and even web vitals using next s typescript Tailwind CSS shaten charts and aite an open source backend dis a service that gives us complete control over our data with many self-hosting options and Powerful apis that some other Alternatives don't offer now let's build something that actually matters not because it's revolutionary but because it's exactly what the companies need so without any further Ado let's Dive Right In to get started building a great project we'll start from bare Beginnings by creating a new empty folder on our desktop I'll call it store it after you created it open it up within your IDE or text editor in this case I'll be using webstorm it is a professional IDE that just recently became completely free for non-commercial use so once you're there open up your terminal and run MPX create-- app. slash It'll ask you whether you want want to install the create next app installer so simply press y for yes and now it's going to ask you a couple of questions would you like to use typescript why yes es lint let's say yes to that as well as a matter of fact we're going to press enter to get the default options for all of these choices tailin CSS sign us up no need for a source directory app router definitely in this case for Turbo pack either way is fine in this case I'll go with the default off no and you don't need to modify the import Alias we'll use the default one and there we go in just a couple of seconds it's going to install the necessary dependencies of react react Dom and next and all of the other dependencies needed for us to run the project smoothly okay that's it quite a success now as you can tell quite a few files have been autogenerated for us from TS configs to tailing configurations pack adjacents containing different versions of dependen we're using to the public folder with the assets and then finally the app folder within which we'll develop our code in this case I won't go too deep into what each one of these files does but what I will do is leave a link down in the description covering the exact timestamp to my NEX gs15 crash course which is released on YouTube for free where I dive into a deep explanation of each one of these files and More in case you need a refresher on how next GS applications work considering that this application right here will also be a nextjs application so I'll leave a link to this video down below and I'll also leave a link down below to our ultimate nextjs course the only course you need if you truly want to dive into the production level of writing nextjs code and since you're watching this video I think that's exactly what you want to do specifically talking about caching different runtimes client versus server rendering different data fetching methods and more just recently I updated it to the latest versions the best performance detailed theoretical explanations and even active lessons so that you can truly test your knowledge and try to do something before you watch a video lecture which is not the case here on YouTube as you can just sometimes follow along and it feels like you're watching Netflix but in this case you'll truly have to test your knowledge before you can watch the next lesson and why am I saying all of this because from this point onward I will assume that you have either watched the free next gs15 crash course so I don't have to overexplained there or the paid one if you can afford it and you really want to learn how it works under the hood so with that said let's go ahead and run our application by running mpm run Dev which will start development server on Local Host 3000 command click it to open it up and it'll look something like this you'll get next gs's boilerplate code what you can notice is that the title will say create next app so let me show you how you can update it to make more sense with what we are building I'll head over to app and layout. TSX as you can see here we have our nextjs metadata that allows us to change our title in this case we can change it to store it and for the description we can say something like store it the only storage solution you need alongside that we can also update our fonts so in this case instead of getting the Guist Sans I'll go ahead and remove those two and instead I'll say const Poppins is equal to Poppins I'll call it and provide the options object and we can import the Poppins font like this from next SL font SLG Google within it we can pass the subsets in this case that will be equal to laddin we can also pass weight we'll need all of the weight in this case ranging from 100 all the way to 900 and finally we can specify the variable that we'll use to Define this font it'll be-- font Das Poppins there we go we can remove this import and place this right here at the top and now we can use this font right here in the body so let's head over to the class name and let's just use a singular font which is going to be a class name of a template string poppins. variable with font Das Poppins and we can keep this anti alast class name as it typically quickly helps to make some fonts appear more readable now the font will have changed and so did the title but as you can see the favicon remained the same so let's get the new and updated one and we'll get it from our figma file which means that the link to the complete design of this project will be down in the description you can get it completely for free so if you want to you can maybe pause this video and sometimes try to build some of the things on your own and then see how I would approach them for the best solution you would kind of be replicating what doing with active lessons within the ultimate nextjs course but it will be just a bit tougher as in our active lessons I actually explain each task in detail to guide you on how I would approach thinking about implementing a specific task giving you some examples as well as resources and documentation pages that you can refer to and finally a complete hint if you cannot manage to do it on your own to try to do it but just with a bit of help if you would be replicating all of that just from the design it would be a bit tougher but you can still do it in any case once you're into design you will be able to find something that looks like this where you have a logo and then you can just export it in this case I'll go with a JPEG once you download it head over to favicon generator and I'll turn that image right here into an Ico an icon file you can do that by simply uploading this icon right here and immediately it will give you a favicon version of that which you can simply drag and drop into the app folder which will ask you to override the existing one so override it and there we go now if we go back to the website you can see that all of our website's metadata such as the title of store it and then our favicon nicely appear right here that means that soon enough we'll be able to start focusing on the code base but before that let's set up linting to make sure that you follow all the best practices in your code base and keep your code clean we'll go ahead and set up es length right here before we start writing any code to make sure that your code is clean and so that you can quickly find problems if they appear now es lint is a linter but I'll also teach you how to hook it up with prettier which is an opinionated code formatter together they'll do wonders and just make sure that your codebase is clean so let's open up our terminal and I'll create a new one so we can run some additional commands while our application is running and I'll run mpm install ES l-c config DST standard es- plugin-addon D- save-dev which is going to save them as Dev dependencies and I noticed I have a typo right here eslint plugin tailin CSS fix it and press enter it's going to install them in less than a second which means that we can now head over to our eslint rc. Json which was generated for us by nextjs and here we can make sure that all of the rules of the packages and plugins we just installed are being followed by adding them to the extend list so we can say next core web vital then we can say next typ script we have standard and we can also add a plugin Tailwind CSS SL recommended and finally we have the prier package as well now if you're using webstorm you might press command shift p and then search for preder go to preferences and turn on manual preder configuration which is going to take it right here from your node modules and you can run reformat and run on Save okay great and you can repeat the same thing with es lint by searching for it turning on the manual configuration point it to your node modules and run the save on fix and if you're in vs code you might need to create a new folder called vs code and within it a settings. adjacent file which is going to have some kind of a setting that says editor code actions on Save Source fix all es lint explicit which will make sure to turn on the es link configuration on Save and this is also something that we dive a bit deeper into within our next GS course where we have a completely Separated video on eslint and preder setup with all the configurations with that said we can test whether it works by heading over to page. TSX and make any kind of change to a file like adding a space and then save the file you'll notice that immediately it'll make some small changes with the class names to fix some es length rules later on you can notice that it'll be doing many more things like fixing some spacing within your application and just making sure that everything looks consistent whenever you save a file now let's clean this page up because we don't need anything within it this is going to be our homepage so I'll only have one div within which I'll have an H1 that will say store it the only storage solution you need I'll also give it a class name equal to text- 3XL just so we can nicely see it in the browser there we go this is looking good with this in place we are ready to implement our design system we'll do that by figuring out some of the specific elements of the theme of our application in the style guide you'll see some of the elements such as different headings brand colors and more which we'll be able to copy and put into our Tailwind CSS config so let's do that next setting up a Tailwind CSS theme is something that we have to do for every application independently L because no matter how many of the applications nowadays follow a specific boilerplate structure still the designs of all of them have some differences for example take a look at this Dev overflow application that we have with this nice light and dark mode and then compare it with a much brighter storage application if anything they have different fonts and different brand colors so the main question is how to extract these values from these Style Guidelines to be able to use them within the application this is something we go into a lot of depth within our ultimate nextjs course but let me give you a feel for that right here as well first things first you want to find a style guide or if you don't have it you can extract some colors right here from the application there we go you can see that this one uses fa 7275 but in this case we thankfully have the style guide so we can go right here and we can copy this color next you can head over to Tailwind doc config.txt Peak keyword which allows me to very quickly move to different files I don't have to open it and then go there I just press command P start typing and I'm immediately within the file that's just a little Pro tip so how would you go ahead and extend your theme to match your application's colors well we can go theme extend colors and I'll add a new object called brand and I'll provide a default color for the brand you can provide a default by simply entering a default keyword and you can paste the color that you just copied and I'm also going to provide a variation of that color which we can get by saying brand- 100 and that's going to be # ea6 365 after that we can add all of these other colors as well for example you can see this green one right here well let's just copy it go back and then go below the brand and then say green and you can simply paste it right here you get the idea right and how would you go ahead and add these colors right here now you will need to repeat this for other colors and some might even be hiding within the design such as this one right here now just so you don't have to manually search for all of these colors in the description of this video you can find the complete Tailwind do config.sys very simple spin animations on loading logos so let's go ahead and install it by opening our second terminal and running mpmi --save ddev and we can paste tailin CSS animate and press enter once you do that your application will be back to a functional State now let's head back over to our homepage and let's see if we can use this color I'll type text- brand- 100 or you can just say text- brand to get the default one and immediately you can see that it works now sometimes you might use a series of different classes to position an element properly like let's say something that you would always do display of flex items Dash Center and justify Dash Center you'll see this always and in this case we have to add the H dash screen for this div to take the full height of the screen if you do that this will nicely Center the text we can also change the background color to something like Amber 100 and we can make this text bold by saying font Das bold and there we go now you can see this in the middle of the screen but what would happen if across many different components you had to position things in the middle of the screen you would have to copy this entire class name and then paste it across all the other pages and if there's a change maybe you want to give it a border you would have to make that change across all files so to make sure that doesn't happen we'll head over to our global. CSS where we currently have some predefined code given to us by the next GS CLI in this case I'll remove it we are importing the tail utilities and I'll give it an add layer utilities and here we can Define some utility classes what are utility classes well they help us make our code more reusable so if I head back over to our div and copy all of these classes I can now write something like this do Center at apply and I can paste all of those classes right here then going back to page check this out I'll just simply say class name Center if I do that this page still works perfectly and my code is looking much cleaner because now I'm not cluttering it with all of the other class names which have to be reused rather if I need to see what they're about I can go into our globals the combination of the Tailwind CSS config and this global. CSS file is what makes the styling so much more seamless especially when working in big applications as you can see here in a lot of cases we'll simply have H1 bold or H1 Excel and we need to be able to reuse those classes just like we reuse the colors in the config so in our case going back to the style guide we'll want to create a class for this specific heading we can click into it to see what it is but we also already have some information here in any case this is a heading one with a weight of 700 and it has this specific color so in your utilities you would do something like this H1 add apply text- 34 pixels leading -42 pixels and a font Das bolt and how do I know about those well because I can see that right here 34 pixels leading 42 and it is obviously bold now you can create different variations for example an H5 would be 16 pixels of text it would have a leading of 24 and it would be semi bolt going back to our application now I can use it right here by simply saying H1 and it looks great now that you know what kind of role the tailing doc config.sys CSS files play into styling of our application and considering that Tailwind config is already done we can now finish the globals in the get H breed me of this project you can head over to the code Snippets find the global. CSS and paste it right here as you'll notice we have a lot of these reusable classes that are going to make the styling of our application a bit easier I mean how often do we have to use a primary button or how often do we have to center a div once you apply that Global make sure that it is imported within the global. CSS and immediately eslint will let you know that we no longer have this Center class name which is great but now we'll have some other ones like Flex Das Center and h- screen and we're back at where we started but now with a completely finished style guide for our project next let's focus on the first thing that a user sees when they visit the application it's not the dashboard but the authentication in this case it's going to be the login and registration screen before we go ahead and start creating the authentication we have to be really smart in how we're planning on architecting it as a matter of fact you have to do that before starting to code anything nowadays AI can also code uis but it's about how you approach creating some of these pages that matters how you architect them so in this case let's try to compare those two pages we have the login and we have the registration as you'll see on the login we have some different fields such as the email and the password I don't think we'll need a username there but on the create account we'll need all of these fields like the username email password confirm password and more so we have to figure out which things will be repeated and which things will change in this case we know that the entire left side will be repeated as well as some of the parts on the right side such as the buttons so what does that mean for a nextjs application how will we approach that when it comes to creating different layouts and the routing for those pages nextjs allows us to create something known known as group routes which you can create by creating a new folder and wrapping its name within parentheses something like o within o we can create two new routes which are going to be different folders that are going to have the name of sign- in as well as sign- up and within those we can create new page. DSX files within each one of these run rce which will create a new react Arrow function component this one we can call sign in and we can repeat the same procedure within the other one by creating a new page. TSX paste it and rename it to sign up now if you've done it correctly you might want to go to OD and then sign in but you'll quickly notice that this is a 44 that's because when you wrap a folder's name in parenthesis it doesn't create a rout it's just a rout Group which means that it will not be counted when navigating through different URLs so to get to the sign in you just have to say for/ signin and immediately you'll be redirected to the sign-in page but what creating route groups also allows us to do is to add a new special file called layout. DSX that allows you to show some shared UI or functionality across all of the pages within the route group so create a new rafc call it layout and since it's a layout it needs to have access to the children so I'll get children through props and then I'll Define children as react react node immediately within it we can render those children but now we can further style this div by giving it a class name equal to flex and Min dh- screen within it we can create a section so let's create it right here and within that section we can create another that will contain the image which we can import from next image and give it a source of do/ ficon doic we can also give it an ALT tag equal to logo and a width of about 16 a height of 16 and a class name equal to h- Auto you can see that prettier will automatically restructure this for us and I just remember that we don't even have to use the do do SL we can just start with for/ favicon and below it we can render a div that'll have a class name equal to space- y-5 and text- white inside of which we can render an H1 with a class name equal to H1 that's going to say manage your files the best way below it we can have a P tag that will have a class name equal to body -1 and it can say something like this is a place where you can store all your documents and you'll want to give this section A Class name of BG brand as well as a padding of 10 to give it some breeding room that's going to make it look like this and I think you can already start seeing where I'm going with this the left side which is rendered within the layout will be shared across both the signin and the sign up how do I know that well we can change the text within the page to say sign in and we can change the text within the sign up to say sign up and then you know that this is our layout so now if we are on the sign in you can see it right here on the right side but if I change the url and go to the sign up page you can see that now it says sign up so let's go ahead and finish the layout so we can focus on the right side which means showcasing the forms of our application but for the time being we just want to get this nice looking logo as well as this great looking 3D illustration to get it you can go to Fig and then you can export this file right here for example you can export this entire icon which contains the storage text by going to export and then saying export logo and you can do the same thing by exporting this illustration as well once you do that you can head over into your public and delete all of the current svgs within the public folder and then drag and drop the file that you just downloaded into your public folder we can rename the logo to Simply say logo and we can rename the second one to Simply say illustration and now we can use them right here by replacing this fabicon to Simply say SL logo.png let's give it a width of 224 and height of 82 and we can go below this div containing the text and render another image that will have a source equal to forward equal to SL illustration PNG let's give it an Al tag equal to files a width of 342 and a height of 342 as well alongside a class name of transition Das all what are we going to transition well on Hover we want to rotate by two and on Hover we also want to scale it a bit to 105 so if we save this and go back back you can see this nice looking illustration and if you hover over it it rotates and scales a bit so it looks great but as you can see this illustration looks a bit low rest to me so what you can do is you can get it with a higher resolution like 3x or more but just so you don't have to manually download each one of these icons and you can see there's going to be a lot such as these files on images video and so on not to mention these ones on the sidebar as well as the upload icons log out these ones right here for different views and so much more just to make the process of downloading all of these a bit simpler I went ahead and downloaded them for you so the only thing you have to do is delete the current public folder download and unzip the new one from the repositories read me down below and then drag and drop it right here in the root of your application it's going to contain all of the assets icons images and more in this case we'll just have to rename the two files that we use used because here we're using a bit of a clear name so the logo is going to be under assets icons logo d.svg svgs are much higher quality than pgs and for the illustration we can get it by going to assets images files. BNG now if you go back this is looking much crisper let's play with the UI a bit by giving this section A Class name of hidden w-12 so it's going to take 50% of the screen items Das Center justify Dash Center on large devices Flex so what does this mean it means that typically it'll be hidden but once we reach larger devices or higher we want to show it and on extra large devices we want it to take two fifths of the screen instead of 1/2 also notice how es Lin saved me right here saying that justy Center doesn't exist this is going to be just the F Center let's also give this div a class name of flex Max dh- 800 pixels Max DW of 430 pixels flex-all so the elements appear one below another justify Das Center and space- Y-12 for some extra spacing on top and bottom there we go now the left side is looking much better but what about the right side well let's create another section right below this section and this section will have a class name equal to flex Flex D1 flex-all so the elements appear one below another items Dash Center this one will have a BG white because it's on the other side padding of four and padding y of 10 for top and bottom on large devices justify Center on large devices padding of 10 and on large devices padding y of zero within it we want to display a div and that div will have a class name of margin bottom of 16 and en large devices hidden within it we want to display an image and this image will have a source equal to for SL assets slash ions SL logo d-brand SVG with an Al tag of logo a width of 224 and a height of 82 with a class name equal to h- Auto w-200 pixels and on large devices W of 250 pixels finally we want to put this children within this second section right below this div containing the image if we do that you can notice notice that we have nicely centered the signup page as well as the content on the left now if we head over to the signin page you can notice that it doesn't look as good even though it's using the same layout let's check it out right here we have the signin page and the sign up page and the layout right in the off what I'll go ahead and do is reload the terminal by pressing contrl C to stop it and then reun mpm runev now I'll reload the page and you can see the changes took effect so sometimes you might need to reload your application if something seems weird because we have done everything correctly we have modified the layout which should result in changing all of the files or all the pages within the O route group so now we ready to focus on the right side implementing the O form to get started creating our o form let's head over to our file explorer and create a new folder outside of the app folder and I'll call it components Within components we can create a new file called o form. TSX run rafc and now we can import it within the sign-in page we can do that by simply immediately returning it here by saying OD form coming from components OD form which is going to be a self-closing component and to make it reusable we'll pass it a single prop called type is equal to sign in like this now we can do the same exact thing on the signup so let's copy this and move it over to sign up if you don't have opening and closing brace then that means that we're having an immediate return so we're immediately returning just the O form and that's the only thing we have to return from both of these Pages now right now as you can see the O form is complaining because we're not accepting the proper type so let's head over into the odd form and let's start implementing it first things first I'll accept and D structure the type prop which is going to be type of a type and we can declare it right here above by saying type form type is equal to either sign in or sign up and now we can just say that this type will be of a type form type perfect perfect and now we are ready to start implementing a form which we'll reuse for both of these pages to implement it we'll use shaten a beautifully designed component library that allows you to copy and paste code into your apps specifically we'll search for form and it says right here that we'll be using react hook form and Zod because forms are tricky they're one of the most common things you'll build in a web application but also one of the most complex so in this case they'll use the form component in a wrapper around the react hook form Library which is going to just make it so much easier for us to develop the forms here they go a bit over the anatomy Give an example but what we're interested in is the installation process so let's go ahead and follow this together I'll put this side by side to my code editor right next to my IDE and now I can zoom it out a bit and we can follow the installation process first things first we have to install shaten because this right here is just making sure to add this shaten component into it but if I head back to ui. chat.com and click get started head over to installation for nextjs you can see that we need to run MPX shat CN at latest in it so let's copy this command and paste it right here once you do that it's going to ask us whether you want to install the installer and after that is going to ask you a couple of questions which style would you like to use in this case I'll proceed with New York we're going to use a neutral color and we don't need to use CSS variables so in this case I can switch over to no now it says it looks like you're using react 19 and some packages may fail to install due to peer dependency issues it's asking us whether I want to use force or use Legacy perer depths in this case I'll just press enter to use Force and it's going to install them we can see what this exactly did if we head over to the package Json and check the versions of dependencies these have remained the same react 19 and I think it's just going to work so let's head back to the installation of the actual form and let's copy this command that will allow us to add the form to our application and once again it's asking us how would we like to proceed I'm going to say use force and is going to add a form button and a label now how shat CN works is completely different to all of the other libraries such as material UI or bootstrap where by installing it you get all of the components immediately within your code but by using shat CN a new UI folder gets created and you can only use the components that you manually decide to install and use in this case we're using a form component so it brought all of this code to you so you can actually modify it if you want to but you won't really need to because we're just going to use what they provide to us and then style it further by using tailin CSS so now that we have installed it we can continue with some of the additional setup next we have to define the schema of your application so let's copy the next code block right here and paste it at the top here we make it a use client because this is a form after all and we Define the form schema after that we have to copy the Zod resolvers and use form as another pair of imports and then we have to Define this profile form in this case I'll just copy what goes inside of the form and paste it within our o form that's going to be the form definition as well as the onsubmit function after that we need to get more Imports so these are going to be Imports for inputs forms and buttons and I'm going to put them right here at the top and we then have to get the actual UI of the form so I'll copy it and I'll paste it right here under the return if I do that and save it eslint will automatically position everything and I'll take a second to explain how all of this works first of all it looks like the input hasn't been installed by shat CN so we can easily install it by saying MPX shat CN at latest add input after that we can see that it got installed and we have our form schema which right now contains only the username then we Define our form by using the use form coming from react hook form library and we say that it'll be of a type form schema meaning that we'll use the username and we also set the default values finally we Define a submit Handler which we can use the arrow function to do so it's going to be an asynchronous arrow function that accepts the values and then for now simply conso locks them finally right below we return to form with a single form field so if we go back to application specifically to the sign-in page you should be able to see a beautiful looking input of course if you go to desktop devices you'll be able to see that it looks even better but on mobile we remove this left side because we don't have any space and just show store it on top now let's modify this form field to make sense in our case to turn this into an OD form first things first I'll wrap this form into an empty react fragment and I'll close it with it as well because later on we'll have our OTP verification happening right here for the time being I can simply comment it out but later on we'll add it back in which is why we need to turn this into a react fragment now we have this form here and let's give it a class name equal to o- form this will give it a full width right within the form we can create an H1 and this H1 will check if the type is sign up so we can say type is sign in then it'll say sign in else it'll say sign L up we can also give it a class name equal to form Das title now let's go below and we have a form field this form field will only show if we're on the signup so we can say if type is triple equal to sign- up in that case render this form field and of course we'll have to properly close it right here if that is not the case so since we're in the signin we don't have any Fields right now but if I head over to sign up you can see that we still don't have anything why is that well let's head over to the sign up page and it looks like I forgot to change the type so this perfectly illustrates how we can use props to modify how a reusable component should look like now what will this first form field be about it'll be a full name field where we return a form item and within a form item we have a div element with a class name equal to Shad form item within which we display a form label and that form label will simply say full name next right below it we have a form control with the input in this case we don't have a description so it'll look something like this form label and form control with the input within the div and then form message right below let's style this label a bit by giving it a class name equal to Shad Das for- Lael and let's go into the input and give it a placeholder equal to enter your full name and we can give it a class name equal to Shad Das input finally we can give this form message a class name equal to Shad Das for- message that happens if there is some kind of an error we can nicely show it below now let's duplicate this form field by copying it and let's based below this check for the sign up the second one will be displayed either way so we can change it to email next we can change the label to email as well we can change the placeholder of the input to say enter your email and that's it the rest will be the same since we'll use OTP verification we don't even need a password field OTP verifications are more secure you'll see how that works very soon now below this form item we can render a button with a Tye of submit it'll also have a class name equal to form-submit dasb button and within it we'll check if type is equal to sign in then it'll say sign in else it'll say sign up and there we go we have our beautiful button we can also have some kind of a loading state so I'll go up and I'll create a new use State field right at the top of the component by using the use State snippet I'll call it is loading set is loading at the start set to false and I like how my webstorm immediately tells me that this false actually stands for the initial State now if I go down below this text still inside the button if is loading is true then I'll render uh nextjs image that will have a source of for slash assets for SL ions SL loader. SVG an Al tag of loader a width of 24 a height of 24 and a class name of margin left of two to divide it from the text and animate Das spin so if I simulate loading by turning this default variable to true you should be able to see how that looks like there we go sign up and at the same time we can also disable that button because we cannot click it again if it's loading so we can give it a disabled property and it'll be disabled if is load loading is true now let's go below the button and there I'll check if we have an error message so if error message is true then I'll render a P tag that'll render an asterisk and then error message and we can give it a class name equal to error-message of course this error message is a new state which we have to create which we'll use to track the state so I'll use a new use State snippet to quickly spin it up I'll call it error message and set error message and the start equal to an empty string now if we go down we can go below this error message and we can render a div this div will have a class name equal to body -2 flex and justify Das Center within it I'll render a P tag that'll check if type is sign in then it's going to say don't have an account else it'll say already have an account like this of course we have to give it a class name of text- light- 100 to make it a bit muted and then below this B tag I'll render a link component coming from next link I'll give it an HRA and if the type is triple equal to sign in then it'll point to sign up else It'll point to sign in so basically the other one I'll also give it a class name equal to margin left of one font D medium and text- brand the link can say if type is sign in then sign up else sign in but it looks like I imported the wrong link component this link should actually be a default import and it should be coming from next slash link there we go so now we can see the text and check this out if you click it we can now move between those two different pages this is looking great I'll remove the form description so we don't use it and let's head back down looks like this animate spin I misspelled it nice how es Lin caught that for me that was supposed to be animate Spin and we can continue right below now that we have implemented the UI of the form we have to look into making it functional because right now you can see that our names have some kind of Errors saying that email is not assignable to type username and that's because all of this is so neatly hooked up to our use form the default values and the form schema so let's actually modify it to reflect our use case right here at the top I'll say const o form schema is equal to and then given the form type of this form which is going to be of a type form type I can return different things so I'll return a z doob which stands for Zod that'll have an email field and we'll have the email field always so that's going to be z. string andil but we can also sometimes add a full name and the full name will only be there if the form type is triple equal to sign up in that case we can have a z. string. min2 Max 50 else z. null so what this means is that this OD form schema will be different given the type of form we're on so let's actually pass it right here by saying const form schema is equal to OD form schema which we call and then pass the correct type to it we also need to modify the default values so for default values I'll say full name is an empty string and I'll also say email is an empty string as well and we can delete the previous form schema and now we can see what error do we have here it seems like there's an error with this input saying it's not assignable to null yep so in this case in instead of using the null we'll use the string and then optional on it there we go that makes more sense and now our input isn't complaining so now if you click sign up you can see that it gives you a required field and an error for both of these that is exactly what we wanted same thing for detailed validation string must contain at least two characters or this has to be a valid email I mean implementing this validation is just super easy using Zod validation now what error do we have here a component is changing an uncontrolled input to be controlled this is definitely something we can look into but I don't think it's even happening anymore so I think we're good and as I said we can now switch between both of these forms now the question is are we getting those values right here once we submit let's give it a shot if I go to inspect element and I open up the console and I clear it I'll try to enter my name adri and my email and I'll click sign up and take a look we get an email and the full name right here in the object and that means that we are ready to sign the user up or in this case actually create a user in the database and of course I don't even have to mention that this application looks so much better on desktop devices this is great so with that in mind let's go ahead and Implement our backend system next so we can actually create user accounts store those user users in the database and allow them to attach their files to their store management solution to developer backend will use aite it allows you to build entire backends within minutes and scale effortlessly using their open source platform of course even though it says you can do it within minutes don't be fooled this is not some kind of a plug-and-play no code backend system rather you have complete control over your oth databases function storage and more for this project we'll use the database functionalities authentication to authenticate our users and finally storage to keep track of our files now I like using aite because it is simple to set up and most importantly if you take a look at their pricing you'll notice that with the free plan you get unlimited projects which are never paused and this is what is super important some other tools allow you to use their software for a specific period of time but then they pause your projects here you can have unlimited that are never paused and you get more than enough bandwidth storage executions and everything else to be able to run your project if your project doesn't get F or even hundreds of thousands of users you'll most likely never have to upgrade to a pro tier but even if you do I've got you covered by clicking the link down in the description you'll be getting 50 bucks worth of free credits if you do decide to upgrade so with that said click the link down in the description to be able to follow along and see exactly what I'm seeing and then sign in with GitHub once you do that that you can create a new organization or just choose personal projects and apply credits if you need to and you'll be able to apply the credits if you actually do decide to upgrade in this case I'll just head over to my dashboard and create a new project call it JSM uncore and then give it a name I'll use stored you'll have to do something else click next I'll choose Frankfurt as it's closest to me and there we go our project has been created oh this is pretty cool the weekly database backups are now available I'll choose a platform in this case web and we'll have to enter the name of the web app so I'll just say store it web and for the host name I'll just put asterisk so everything works for now next aight is going to guide us through the installation process for now you can skip these optional steps as we're going to do everything together let's start by copying our environment variables I'll put my browser side by side by the editor and I'll create a new env. loal file within which we can store our environment variables first things first let's create a nextore publica rightor project and make that equal to this ID that we just copied right below it let's head over to databases and then let's create a new database I'll give it a name of General and create we can also copy this ID right here by giving it a nextore publ uncore aprite unor database and and set it equal to the ID that we just copied within this database we can create two different collections let's create a first one which is going to be called users and let's copy its ID as well we can add it to our envs by saying nextore public uncore aore users collection is equal to this ID here and while we're here let's immediately add some attributes that each one of our users will have head over to the attributes Tab and click create attribute let's start with a string and let me actually expand the browser and give it a key of full name size of 255 no need for the default and let's make it required let's create another one this time of a type email it's going to be called email and it'll also be required after that we can create a new Avatar which is going to be of a type string and we don't have to enter the size and we don't have to make it required I'll just click create oh but that says we have to add it so I'll choose the maximum number for the size remove the comma from here and click create finally let's add another string of account ID of a size 255 and make it required and click create after that go to settings head over to permissions click any and make sure that all boxes are checked this is going to give us the right permissions to be able to update the users in this collection now we can repeat this for another collection so so let's go back to our database and create a second collection which is going to be called files once it created you can copy its ID and duplicate this one right here and rename it to next public files collection and paste the new ID once you do that we can also add some attributes such as a name each file can have its own name let's enter a size of 255 and make it required after that we have to give it a URL and the URL will be of a type URL so let's call it URL and make it required as well next we can choose a type of the file which is going to be of a type enum so let's search for enum let's call it type and different elements that it can have are going to be document image and just to create new ones just press space or add a comma video and audio and other make it required and click create after that let's add a bucket field so this is where we're going to be storing that file let's choose 255 and make it required after that let's add another one which is going to be a string of account ID of 255 and it'll be required after that let's create a relationship so that's the last thing right here it's going to be a two-way relationship related to the collection of users and the relation will be many to