Build a Full-Stack File Sharing App with Next.js 13: React.js, Tailwind CSS, Firebase, Clerk

hey there and welcome back to TU G Channel today we are going to develop the file sharing application okay and this application we are going to build completely from the scratch to build this application we are going to use react nextjs telin CS for the authentication we are going to use Clerk and to send the email uh to the user we are going to use recent and react email and to store this complete uh uh application datab base all the data the file upload everything we are going to use Firebase for that one and as I told you before this application is completely beginner friendly okay so first let's walk through the application so if you see on the screen right now this is a beautiful landing page we created okay and this particular page uh the TN CSS the component we are going to use hyper UI okay which is one of the best uh library for the tel CSS no need to install anything and that what we are going to use in this particular application as well so uh once you land on this page and if you want to get started just click on get started here and obviously first thing you need to do is to log to this application so we beautifully implemented the clerk authentication the beautiful login UI as well and once you login onto this particular page you will see the beautiful dashboard section where you have option to upload the files as well as you can have a list of files which you already uploaded okay and on the right hand side you will see see this beautiful uh user profile section where you can have option to manage the account and everything okay so let's go to go here and let try to upload the files okay even though you can just drag in drop the files as well so I click here okay and once you click you can select the file which you want to upload okay upload so let's select one file okay I will select this file and click open once you open you will see the file preview here with beautiful name the size and the type of image and everything okay okay and just click upload once you click upload you will see this uh beautiful progress bar and once the file is completed you will see that animation icon as well okay and then you will redirect to this page where you will see the preview of the uploaded file okay you have option now to copy this one okay the particular text and if you see the beautiful toast message here okay now here you can just copy and open this URL or share this with your uh URL with your friends and family then you have option to enable password uh to access this file okay without password obviously you cannot access this file so obviously you can enter the password and then you have option to enable the password so let me add some password here okay and just click save and once you save it this password will get saved to this particular file okay then you have option to send an email to the with uh to your friend okay so let's send this email okay o sorry and let's click Send email okay and if you see now email is getting send and it send successfully okay the test status will get changed immediately perfect now let's open my email and if you see we got an email and if you see this is how beautifully the template is okay you have option who send the email for who uh to whom you send the email even though you have option here uh with the file name size and everything okay also you have option to download this particular image if I click on this particular button okay it will redirect me to this preview page of the uh shared URL okay with your friends and obviously we said the password without password you cannot download this particular uh image or file okay let's uh add the password okay if you see right even though if I add the password the button is not enabled because I did not enter the password correctly until and unless you enter the password correctly you can access the image and click download and it will open this image for you and obviously you can download it from here okay so beautifully right so this beautiful UI the modern UI we are going to develop with the help of telin CSS okay now let me go back to our application here okay and now you can if you want to upload it again just click on here and now you can start upload uh new file here okay now in the file section you have option uh where you all the uploaded file you will see it here okay here obviously if you want to open any of this file just click on that one and it will open the prev file in a new tab okay so everything here you want to learn uh from the scratch okay if you don't have any knowledge don't worry because we will uh learn it in this particular course okay and in the next section I will I will explain the complete workflow how we are going to build this application okay so guys uh before doing any further delay just just press the hit uh uh like button just uh hit uh subscribe button if you did not subscribe to my channel and if you want uh to join my channel click join button or you you can uh join my channel by joining the membership which is the link is in the description and uh before doing any further delay let's begin now let's walk through the workflow how we going to develop this complete application okay so if you see here uh this is the landing page okay and on this landing page okay once you just uh click on get started obviously user need to uh log to this particular uh screen okay with the help of clerk authentication we are going to implement authentic social authentication in our application then obviously once user uh authenticated right it has option to upload uh the file to share with friends or he can access the his uploaded existing files as well okay so if you see we have option to upload the existing files then if us upload the file right and click on upload obviously it has uh we are going to use Firebase to uh store all the files as well as we also have option to store all the uh data which we want to store um in the back end okay so obviously for Firebase we are uh we are using Firebase as a back end to store our data also once you uh we store the data and everything is set up our application uh page after upload it will redirect to the preview page where it user can see the all the details including the URL it has a option to send an email and set the password okay so obviously if user share this particular URL right the short URL which we are generating it will redirect to this preview page to the user okay so obviously if user want to download the file which he shared with friends or family then he he can download it from here okay if we obviously you can set the password to access that file as well okay and obviously once user land on this page this information we are getting from the Firebase only okay now when user want to send any email right we are going to use react email and resend to send an email okay and uh we are using resend to send email and react email to design this kind of beautiful template okay obviously uh it has option to download or access the file and us either click on that one our Firebase will get trigger to get this all the information okay and one more thing okay maybe I did not mention here this particular screen okay the pre screen don't need an authentication okay uh if you have the URL you can access this particular um page okay obviously uh if if you set the password to that file and that password is required but you don't need the special authentication for this one okay so what sorry so what I will do I will just keep it here okay and uh add like this okay means okay without sorry without authentication as well you can access this particular um screen okay so you don't need a spatial authentication now let's go back here and let me tell tell you about the technology obviously we are going to use react okay after that we are going to use latest version of njs currently 14 version is going on so we are going to use NJ which is one of the best react framework in the market right now then for a styling we are going to uh tell CSS okay as you know in my all previous course I use telin CSS so this is one of the best and easiest library for styling your application okay and for predefined component we are going to use hyper UI for the hyper UI you don't need to don't need any uh installation okay you can just what click on any of these things and then you can just copy the code that's all okay for the storage as you know we are using Firebase completely free and easy to store okay and as a beginner this is very uh easy to understand the Firebase implementation as well okay also to send an email we are going to use uh resend email okay it's completely free again and uh within a few line of code you can easily send an email to the anyone okay obviously you don't need your custom domain as well if you want to add you can have option to add the domain but if you don't have domain don't worry recent will taking care of that one and to design the uh uh template we are going to use react email obviously it already have a lot of different samples example and from that one as well we are going to use the email templates okay just uh copy the source code and for the email template and use it in your uh application okay so guys so this is the complete uh workflow and the application which we are going to build in this particular course so uh just subscribe my channel if you did not subscribe and let's begin today now in order to create a react application we are going to use a nextjs which is one of the best react framework currently in on the internet and obviously we are going to use latest uh version of the react uh the nextjs okay which is nextjs 13 and in order to create a project with the help of this nextjs right this is the command line if you see this npx create next app at latest okay at latest will give you the option to uh to create the next application which is the latest version okay so first of all uh let's navigate to your folder where you want to create the project and then open a terminal at that particular folder okay and here you just need to type npx create create next app at let okay at latest will install uh the latest version of the next JS once you import it say you want to proceed say yes and then you have to give the project name so in this case we'll say file sharing app Okay click enter it will ask you do you want to use typescript so in this project we are going to use JavaScript as this is a beginner I don't want to make this application complicated so we'll we'll use the uh JavaScript only so for this we'll say no then want to use yes L say no the telin CSS obviously we are going to use telin CSS in this particular application and uh obviously you don't need to uh install manually so this particular uh command will taking care of to install the T CSS so say yes to this one for Source directory say no the app router obviously we are going to use app router so yes say yes and for allies say no okay and then if you see it installing the react react Dom and next dependency along with some of the de dependency like tailin CSS post CSS and at of prefixer okay so that is all about the TN CSS so we'll wait for a few seconds and now if you see this project is get created okay now you just need to uh open the vs code okay and look at the uh folder where your app is created okay so in my case I went to the projects nextjs and here is my particular uh uh the project which I created just now say open okay and here if you see on the left hand side right you will see the section it contains all the folders and file which is required uh to run the application okay so I'll um first let me walk through this folders okay and then we will run the application so at the very first we have this app folder okay so inside the app folder we have the global CSS which is Global whatever the CSS is applicable to the throughout the application it is defined inside this global. CSS then we have the layout. JS inside this layout. JS which is our starting point of our application okay so whatever the components pages is going to render is going to render in between this children component okay so this is the very um basic um layout of of the application if you see we have the metadata and also we have the font okay we will learn how to change the font of the application as well um once we started developing this application then we have the page.js which is the default page and if you see uh the default code code is already there so we will uh uh touch to this code okay in few moments after that we have node modules obviously we are not going to touch these node modules at all then we have public folder where we want going to store all our assets images and everything okay so whatever you want to put you can put it in public folder and then you directly can access in inside your application then you have the next. config.js where all the uh configuration uh related to the next application will be added here okay so obviously we are going going to uh add some configuration in this next. config.js once we started developing our application then we have package package log. Json we will never touch to this one then we have packet. Json which contain the script to run the application to build the application then we have some dependency and then some de dependency okay then we have post CSS and TN T.C config.js which is used to configure the uh telin CSS um properties okay so for example if you want to add your own color right you can just mention it here and then you can use it in your application if you see this content section this is very important right whenever you want to apply twiin CSS you have to make sure that your file is under this particular folder called Pages component or app okay if you have some other folder you have to mention it here then only this TN CSS is applicable to that particular page or component okay now on the top hand side we have the option called terminal and click on new terminal okay so it will open the terminal below like this okay and here you just need to type npm run de okay and click enter and if you see right now the it's showing the nextjs version as a 14.03 okay and if you face any issue uh to run this application right um then you have to update the the next JS version okay so if you go to this packet. Json right now if you see the next version is 14.03 here you can change to uh 13.4.1 16 okay which is a stable version but right now uh for me it's working so let's uh go to this Local Host okay so open this local host on your web browser and it's uh still loading okay and if you see this is the default page right now is showing on the screen so let me bring this on the right hand side and let me bring this down here like this okay so as I told you right uh inside the page.js okay we have this uh default code okay and that is nothing but this particular code okay for example if you see this word called get started by editing blah blah blah okay I will remove this particular line of code from here and I will write subscribe to tube guruji okay and then save it okay and if you see suddenly it changes to subscribe to tube guruji guys if you did not subscribe to my Channel please do subscribe and immediately you don't need to rerun the project again once you save it automatically reflect it um on the screen okay so obviously right now we are not going to use this particular code so I will remove all of this code okay and here I will simply write one View and we say uh home okay and save it and if you see right now it's showing home but along with that it's showing some gradient background okay which we don't want it obviously so let me delete close this packet. Json and now inside the global. CSS right we have the root section and here we have some uh default uh background which is already applied so remove that one save it and if you see now it's showing the blank screen okay perfect so I hope you understand how we created the next application from the start and guys uh don't worry if you don't know about the nextjs or react okay because we are going to uh learn it from the basic and from the scratch as this course is a beginner friendly so you can learn it every from everything from the scratch okay so uh I hope you understand how we created the nextjs application how we run run the application and we also understand the folder and file structure as well okay in the next section we will try to build the header section okay and as I told you in the beginning uh with the minimal writing of the code we are going to develop this complete application so uh we'll not wait and we'll move to the next section so now let's implement the header section okay so inside the app folder I will create a new folder and we can call it as a let me uh inside the folder we call it as underscore components Okay the reason that I'm giving underscore right because if you if you give the folder name directly without giving underscore then uh nextjs will uh uh think as a router okay so this is consider as a route for the application okay we will learn it later on uh in this particular course but if you don't want to give the route okay don't want to consider the route you have to give the underscore like this okay or you can mention it in the brackets we'll learn it um obviously we'll once we start proceeding in this particular course okay but right now just give the underscore component where we are going to store all our components okay so this component this in this particular folder the component which is uh common to this application we'll keep it here okay so inside that let's create a file name called hajs make sure the file name will start with the capital H okay like this and then we need to add the template okay so every time whenever you create a new file you need to add a default template okay and in order to add default template you need to write a code every time okay so to avoid that one you have to install one extension okay so go to the extension and here you have to install one extension called uh uh the es7 7 plus react Redux react n extension okay and this will help you to Auto Import your ATO template okay I will let you know but make sure to install this one also you have to install one more extension called TN CSS nippet okay and this will give you the when you're writing the TN CSS classes it will give you the suggestion automatically okay so that's the reason this two extension make sure it's uh installed in your vs code okay now here as I say in in order to add the default template you just need to type react function component uh export like RFC and click enter and see the magic automatically it write the default template for you okay perfect now once you added this template save this one and inside the layout. JS because the header will be a constant throughout the application okay here we need to add this l. JS okay like this so here we'll add this heer here like this okay and then make sure to import it okay and save it and if you see the header text is showing but later on once us are log to this application right we are going to change the header and lot of things correct so we have to think whether do we want to keep this header inside this layout uh file or do we want to move it in some other page okay so right now what we can do let me um undo this one okay and let's move to this page.js because this is our homepage okay so inside this D I will add header uh header like this okay and make sure it's importing from thisor component SL header okay and then save it nothing will get changed and if you see the header is still showing on the screen now in order to write the code right you need to write a lot of things like you have to show the logo the Tex and button lot of things right and obviously each developer need to do that okay okay but we have one uh Library we can call which again tell CSS based Library called hyper UI okay and if you don't know about this one this is one of the best library and you don't need to install any dependency for that one okay it will give you the already predefined component for you okay so in inside this hyper ui. okay the link is in the description you can just check it out here you will find a different types of uh component where you can use it okay so right now we want the header and if you see in the header we have three components and if you see this right you will see this different different types of example okay and not only that one but uh how it looks on mobile on small device the medium device large device or full device okay everything it mention even though in the dark mode how we look okay see everything left to right left to right everything is there you just need to copy the code so if you see here right the view section it will show the code okay and if you click on copy it will just copy for you okay so right now on the right hand side if you see option right we have the HTML jsx and view obviously we want jsx so select the jsx and obviously this in the jxs right we have we use the class name and just say copy and that's all and let's go back to our application and inside the heer F component right go to the heer component let me eras that and paste it here like this okay let me open our uh browser here okay and then save it and if you see header is showing right now it is in the small window that's why it's showing like this but as soon as I increase size it will show all the option along with these two beautiful buttons see and as I I told you right you don't need to uh write the code okay with the minimal writing of code we will implement this application okay another thing here uh obviously you can customize this particular uh code and everything okay so what I will do I'm going to change the color first okay and obviously for the application I will Define one um one a constant color okay so what you need to do let's go to this global. CSS global. config.js okay and here we'll Define our application primary color okay so inside the theme we have the extends and here you can mention colors like this okay and I will call it as a primary color and give the color code so in this case I will 7 d f see okay which is kind of blue color okay and bum nothing will happen here right now but now if you go to the header and let me uh select the button section if you see we have this login button correct and here right now it applying this BG teal color okay so here I will change background to primary and save it and if you see suddenly it changes to Primary in this TN CSS we don't have the property called primary but we mention it in our Tailwind Doc config.js and it will pick it from there okay and guys if you don't know about the telin CSS okay anytime you can go to the telin CSS uh.com and from there you will find all of this thing okay for example you want to learn about the Border how to apply border inside tell CSS this is the example they give it to you okay uh with the example and the corresponding CSS properties okay perfect so now I change this color okay right now if you see how is changing this color to Green which I don't want it okay so what I will do I will instead of till I will change to Blue and if you see now let's save this one and now it changes to beautiful blue color okay uh here I don't want this particular icon okay so what we can do sorry this one so in order to uh update this icon let's go to this um logo I don't know what it called but logo IP some okay and here we'll find some uh dummy logo for your application so right now I will use this logo for application you can change it later on just click on that one it will copy the SVG file okay and then go to your public folder okay where we can store our images and assets and here I will create one file called logo. SVG and paste the code which you copied and save it that's all okay now I will remove all of this code okay because this is the logo code and let's o sorry not this one this is the logo okay I will remove this from here and I will add the image okay and if you see this image I'm adding from the next SL image okay and here obviously we have property called Source we we want to give the file name so in this case as we keep our file inside public folder you don't need to give your complete path you just need to write slash and the file name so in this case logo. SVG okay here we have to give width so I will give width of 150 and height maybe I will give height of 100 and save it and if you see the logo is showing on the screen okay if I decrease size I'm getting all of this menu as well okay perfect now some of the modification I'm going to do okay first thing I will say log um instead of login I will say get started and I will remove this register button okay then I will keep uh only some of the menu for example I will say home then here I will say upload we say contact maybe about us about us and here I will say contact us okay and all other menu I will remove it so I will remove this other the things and save it and perfect and if you see right now it look like this okay now if you want to give some border Shadow effect you can give it okay so for this one okay here you can just add the Shadow or border so for example if I want to add the Border you can just write border I want the border at the bottom side so I will write border B which is called bottom okay and just save it okay and if you see it's showing the Border also if you want to see this corresponding CSS property you just need to hover on this one and it it will show you this border bottom width mean which is the corresponding CSS property okay but in telling CSS you just need to write this much code okay same thing if you I go here the uh uh margin x mean on the xaxis the margin will be ATO here you'll see the margin Li and right which is corresponding CSS property okay and this is how it works now if I increase the size this is how it looks okay but if I decrease the size okay let's okay see it aom adopt the mobile view or the screen depends on the screen size automatically adopt the layout okay if I go here and change to mobile view this is how it looks okay so on 14 MX like this see okay how beautifully changing the layout perfect so I hope you understand this particular part where we will automatically I mean not automatically but we will just with the help of hyper UI we added this beautiful uh header section okay in this section we are going to implement the hero uh part of the application okay so let me show you how we are what we are going to implement in this particular section so if you see right we already have this uh top section and here we are going to implement this particular hero section uh with this particular uh text and everything okay so in order to implement it okay uh let's go to this hper UI okay and here just search for this Banner section okay and if you see we have some beautiful option to add it here okay so right now it's giving three beautiful option you can choose whatever you want so right now I'm selecting this first one go to the view and select this jsx and here you just need to copy this lineups code okay let me open at side by side and uh inside the underscore component folder we will create a new file and we can call it as zero hero. JS okay you can make it as jsx and add the default template like this okay and make sure to import this inside your uh page. jsx okay I will remove home and I will add hero like this and save it and now if you see the hero is showing whatever your code you copy it right just paste it here like this and save it and done if you see how beautifully it's showing this particular uh code okay now couple of things we need to modify obviously these colors and everything okay okay so first thing what I will do if you see in the DU class name right uh they give some uh height of the screen here I will remove the item to be in center and save it and maybe we'll remove this one as well okay so it will not at the very bottom okay and obviously we'll update this message okay so let's update the message I will remove everything from here and uh the message whatever message I write it here like this the upload s easily okay so here just we write first uh upload comma save and easily share your files in one place okay and if I save it this is how it looks okay now OB obviously uh for some of the text I want to change the color so I will wrap that particular text inside the spam okay so I will wrap this complete name here like this and we'll add the class name and I want to give the primary color okay so we say text primary and save it and this is how it looks okay same thing I will add it for a share so I add the pan tag here and put share over here like this and add the class name as text to be primary and save it okay do some space here like this perfect then we we need to update this text right so what I did I created one folder called utils okay and in this utils folder I added new file called constant where I'm keeping all my constant value okay so these are the value instead of writing inside the uh component directly I kept in one place where we can access it so that if you want to change in future you can change it here and it will reflect everywhere in the application okay so in order to access this one you just need to write let me remove this line of code first in the inside the bracket you just need to write constant dot d which is the uh name of this particular field okay now whenever you want you are dynamically uh want to show the value on the screen you have to defining a curly braces okay and this is the constant if you see it's importing from this util constant okay and I'm accessing this description from there and if I save it if you see the magic it immediately change the value okay and what I will do I will add the color I will change the color to text Gray maybe uh 500 and save it like this perfect next thing uh let's change this color button button color okay so here I want primary I make it primary and on Hover I will just place this red with the blue see like this okay perfect also this learn more button we'll change this to primary and on Hover I will change this to Blue and save it okay and this is how it looks on the big screen so beautiful right and within a some uh um minutes we implemented this hero section okay so uh until this point if you have any question any doubt let me know in the comment section okay and one more now as I told you in the beginning that we're going to change the font color of the application okay and in order to change the font color of the application just go to this layout. JS okay which is our um first layout. JS page okay and over here right now if you see this is the inter font from the Google font okay and if you see this import statement okay and if you want to change this font or you want to add some different font you can just mention the font okay and obviously right now if you see this is the outfit font okay uh which I want to use it and anytime you can just go to the Google font and here you can find different types of bunch of font okay you can select whatever you want and just um use that import just import it here like this okay no need to import any new dependency or anything okay right now if want for example in this case if I want to add the outfit as a form okay and this outfit form here if I search it this is how it looks okay and obviously here I change need to change outfit okay you can change this constant if you want I will keep as it is and then save it and if I see uh this is how it looks on the screen okay before it was like this but after the change okay after the change I make this outfit this is how it looks okay and this font now will applicable throughout the application okay and this how easily we updated the font so that is the reason next J is so powerful that you don't need to make any custom configuration okay NJ is taking care of most of the things including the routing this font and lot of things okay so I hope you understand this one next part we are going to implement the social authentication Okay so see you in the next section so before implementing the authentication in our application uh first we will add some folders and files okay and also we'll create some route for our applications so on this uh uh folder section okay here right now inside the app we just have the components utils and some of the layout and Page uh files okay so now we need to create some route so first route we will create for the authentication okay and for that one what we can do uh to make this application look organized right I will create a folder and I will call here like this so all the authentication authenticated related routes I will keep it inside this Au folder okay and when you are defining this bracket then next J will not consider this as a route okay very important so just uh press like this and inside that now you can create routes folder if you want okay so I will create a routes folder here again so we can call routes like this okay and inside the routes we can we can add signin page or sign up page whatever page you want to add okay now another example want to show right if you want to add the path for example here if you want to add like slash uh dashboard okay and right now if you click enter nothing will display because we don't have that particular page but if you want a route like this okay you can just go here add a folder called dashboard and inside that you have to add page.js okay and let me add the default template here like this and we can call it as a dashboard let me copy the same name everywhere for and save it and now if you see it's showing the dashboard okay so what we did we just in order to add the route add the folder name and in said that you have to add page.js and this will be your route okay but obviously we are going to use this like this one but as I told you in the beginning of this section that in order for the um organ organization purpose okay uh project need to be organized right uh I will keep this all the routes in one folder okay and all route come under that particular section will keep under one uh files okay for example if if you watch my one of my video which is to build the LMS site which nextjs right if you see on the left hand side we have this navigation bar on the top hand side we have the header but this section is constant throughout the application once the user log in okay and now if I if you see if I go to the dashboard it suddenly Chang but the navigation and this is uh constant okay even though if I go inside there right the the path is get changed with some different you URL but this particular side ification here is constant okay so this for this one we are this particular things uh we will achieve with the help of layout and the some routes okay so before that one let me uh add new folder here okay and for that one we can call it as a dashboard so all the dashboard after user login right um whatever the files um or URLs or path we are going to add we will add it in dashboard folder inside the dashboard I will add a new folder and we can call it as a routes okay so all the dashboard routes will come under this routes folder and and then now the particular dashboard I will keep inside this routes folder okay and just move it like this and so let me so inside dashboard right I I actually I don't want to uh give the name name as a dashboard because already uh I will rename this one to something like uh upload okay so and I will rename this to upload here again okay so I don't have any more um uh dashboard path okay and if you see here uh right now stream 404 because we don't have upload but if you go to this upload now we'll see the upload file okay so let's create create few more routes okay so next I will create inside the routes only uh I will create oh sorry not in the authentication in the dashboard section I will create another uh route and we can call it as a uh files okay inside the file I will add the page.js and add the default template okay I'll rename these two files like this and save it and now if I go to this/ files I will go to this files folder as well okay now obviously uh you can add more depends on your requirements okay but for now I will keep as it is so uh I hope you understand this folder and file structure okay and next what are the authentication we are going to add the pages called sign in or sign up we will keep inside this Au routes okay also uh inside the dashboard right as I told you uh some of the uh component will be constant okay so for that one inside the dashboard we'll create a new page and we can call it as layout. UJS okay and inside that let's add the default template and we can call it as a you can call it layout that's fine and here you need to pass the children okay the file name need to be a layout. JS only otherwise nextjs will not detect that this is the layout page okay and uh that's all so this children you have to display like this and save it now everything is as it is but if I write something here like this uh home okay and save it now everywhere you will display the home okay even though if I if you change to this to upload the home will be a constant only this content going to change okay and that's what we want because inside this layout we will Define our um side navigation and header okay only the component is going to change is the route which we Define here like files and upload okay so I hope you understand this one if you have any face any issue you can access the source code and this folder structure is very important when you are going to uh write the code okay because because of this folder structure right you project will be organized okay perfect so for the authentication we are going to use clerk okay so clerk is one of the best authentication service provider and it's completely free okay so if I go to this pricing session you will see up to 500 active User it's completely free okay but if you are startup or you are learning right this cler is very helpful to get started now here if you don't have an account before just create a new account and then go to the dashboard once you are in the dashboard you can create create a new application I have already here okay but let's create a new and we can we can call it as a file sharing okay and uh you can if you see here right we have some option called login with the email phone username right you can even uh enable Google Facebook and there are lot of uh different option you can enable Okay and this is how it looks on the screen on the right hand side and once you are done with this one let's just click on the create application and then if you see right now obviously we are working on the nextjs these are the key which we need to add in our env. loal file okay after this uh on the left hand side you will see some bunch of option right where you can customize um or you can change the color of these particular buttons and everything ins inside this user authentication if you go to the social authentication here you can enable whatever uh you want okay also you can give the redirect URL if needed and there are some more option available here to access it okay now on the Google just type clerk nextjs okay so it will open the documentation the first link will be a documentation to get started with the clerk and the nextjs in order to integrate next uh clerk inside the nextjs application so if you scroll down uh first thing you need to do is to install the cler njs okay so just copy this line up uh line and just go to your application open the terminal okay and just paste it here like this and enter okay so it it will install the next JS in inside our application then scroll down and if you see you need to add these two environment variable okay which is uh don't share that one okay and this this particular uh keys are uh associated with that particular application only okay so copy this one go to your application and inside here inside the root folder right just created a new file and just give the name env. local and here just add that two keys okay then just scroll down and whatever the application you have WR this HTML body tag uh you have to wrap that inside this cler provider okay so just copy this cler provider and then go to your layout. JS okay which is our this uh first layout okay the root layout and wrap this all this particular HTML inside this CL provider like this okay oops and make sure you will import this cler Provider from the CL nextjs okay if you see perfect and save it now if you go to the application okay and you will see nothing get change okay if I go to the Local Host 3,000 nothing get change here uh Next Step you need to follow if you scroll down right um You have one file you need to create it call middleware dots inside a root directory and uh let's create a new file here and just paste this content okay so I will tell you uh how and where we are going to use this middleware okay in moment just paste the content whatever they posted in the documentation here like this now scroll down and here you can use this use button okay so for now what I will do I will put this use button inside the dashboard route inside the file I will keep it for now okay so after the file I will just put this one and make sure to import this use button from this clerk NE JS okay and uh if you go down right uh that's all what we need okay and if you see now our Local Host if I go to the local 3,000 is redirecting uh to the login page and if you see this particular URL is not the URL uh which we are using right it's red direct to the clerk uh URL okay and that's what we don't want it because we want to add our own signin and sign up page so for that one uh if you see right we have the one option called create a custom sign up and signin page so click on that one and here you can create your your own custom signin and sign up page so here you need to add uh create some signin sign up page okay so in order to create this folders and file what you can do you can just copy this particular path okay and go here and we already created this o routes right this fold folder so inside the route I will click on these files and enter it and instead of TSX make it jsx and click enter so it automatically create the folders and then files as well and then next just copy this uh code and paste it inside your uh sign up page okay same thing you have to do it for the signin page as well so copy this path and then inside the routes auth routes we have to create a file and instead of TSX make it Js T and then copy this content inside your signin page like this okay and save everything now once we paste it let's go to the next step and you have to add this uh four lines inside uh your env. loal file okay so let's go to this uh sorry let's go to env. loal and after this one I will add this four lines okay so this line help us to redirect once you log out or once you sign in okay um so you can obviously modify if you want to okay but right now we will keep as it is and that's all okay uh no need to do anything and make sure to save everything okay so I save everything now let's go back to our application and open the port locost 3,000 and if you see now we have our own signin page okay the with the redir URL and everything set up here okay and even though if I try to go to this local 3,000 it is asking me to sign in first okay so but the thing is right we need to uh give access to this homepage okay and we will restrict access to the other page once you are sign in okay so the question is how to do it so if I so I told you before right this middleware dots where we need to configure the public path okay so here you you have you just need to write inside the O middle bear and you you have to mention public routes and inside that you have to give the routes which you need you which you don't want to give uh the login uh access right so for example in this case just give the slash because this is our default route right and this is our home route now if I go here and go to local 3,000 right and if you see I can able to access local 3,000 without logging to this particular clerk authentication right but if if I go to the Lo 3000 SL file you need to uh um authentic means you need to login with some Gmail or Facebook account okay so this is how uh it works now obviously uh right now if you see right this login page is not look um interesting or not look uh the the way we want it okay so what you need to do uh as I told you right go to this hyper ui. D and here if you see right we have option called AU forms okay and here we'll get some a couple of option uh for the authentication so click on The View uh select the jsx and copy this all the content and then go to your signin page okay so let's close this one go to your signin page here and I will wrap this in a circular bracket and paste your code like this okay remove this commented code from here and you need to C cut this sign in from here because this is our component and whatever the form we have right remove this form uh section completely so this form section I will remove completely from here and then paste this signin component and save it okay and if I go here now if you see how beautifully it's showing the signin page now okay with this uh left hand side with the image and on the right hand side we have this login page now obviously you can edit some of the information okay for example here I can say welcome to file uh sharing app okay and uh you can obviously change this uh SVG image if you don't want so I will replace with image uh or with our logo so I will just say logo. SVG will give width 150 height 100 and save it now if I go back Let me refresh the screen I don't know why not change maybe I change different thing okay so here we have to squid search for the word Sid and here you have to change like say file sharing and here you have to change the logo okay and if I save it now if you see it's saying welcome to file sharing app okay and this is how you can easily implement this signin page and we beautifully design it with the help of tailin CSS and this hyper UI okay now as I told you before right if I try to access local 3,000 it is accessible now what we need to do if I click on get started I should able to go to this local 3000 SL files okay and obviously right now is uh you need authentication but let's add uh route to this um button click okay so go to this uh component where we have this hero section sorry the header section and here we have the button call get started and here we already have the link right here you need just need to go in the H reference the route you which you want to go so in this case is files and save it and now if I click on files it will ask me the authentication so let's authenticate with some user ID and once I authenticated right it will redirect to this files page and if I if you see right the button we we added we added inside this files called user button here it will give some option to manage the account and everything and this is already implemented by the clerk so you don't need to add anything okay so this is how easily you can add the authentication with the help of clerk okay so I hope you understand this one and if you have any doubt any question let me know in the comment section so in this section we are going to add the side navigation bar and the header okay and this is how we are going to implement so on the left hand side we have the side navigation bar uh with this logo the icon and the name of the particular menu okay and on the top right side we have the header with the users profile icon okay so in order to implement right we need this uh kind of Icon so for that one we are going to implement or we are going to add one Library called Lucid DOD which is very easy to add the icon in any react nextjs application and very easy to install as well so just go to this lucy. D and just say get start started and inside this installation you just need to select this uh react section because we are developing the react application and click on npm Tab and copy this particular command then go to your project inside the terminal uh just execute that particular command and install it so if you see it install now now let's go to the uh dashboard folder okay where we need to add the side navigation bar so what I will do inside the dashboard I will create a new folder and the I will whatever the common um uh component we have we will add it inside this components folder okay and inside the component I will create a new file and you can call it as side name dot JS okay and add the default template like this now this side now bar I will going to I'm going to add inside the layout because this will will be persistent throughout the application once the user is lock Lo in so here I will add one D and inside that I will add the side now like that okay and then save it now let's see the application and if you see right now it's showing the side now okay now what we need to do we need to bring this in uh the side navigation bar we need to give some width and uh some height as well okay now here what we need to do we need to give some specific WID for this identification okay so what I will do do inside this uh for this D right I we can provide the class name let me close this window and then we will say first the height need to be full and then we will mention the width to be 64 sorry the width need to be 64 and we'll make Flex to be column so menu will come uh in one column then we'll make it uh this particular du as a fix and we make inser y to zero okay and I also give the index Z to 15 okay but if you see right now the side negation is at the top but below that one we have that our um file text right so what we need to do for this children every time uh we need to give some WID okay so what I will do for this do I will put inside this particular uh de and here we can give the margin left to 64 because we have this width right and after that we need to start this children and if I save it and this is how it look see okay but when the screen size is smaller then we need to uh hide this side navigation bar okay so initially what we can do we can just say hidden when the screen size is smaller see and also um we'll give the WID when this screen size is medium okay and save it and then for this children this children uh this margin left is applicable only when the um screen size is medium if you see like this right but if I increase the size now we will see this um margin left for this particular D okay now let's go to side navigation bar and over here we need to add the menu first okay so what I will do uh we'll create a new uh one constant okay and uh in inside that I will we can call it as a manual list is equal to and here I will add some item okay so first I will say ID and we can give name as a upload okay then icon now in this case right if you search for example if I search upload and if you see this icon is importing from this Lucid Dash react okay you can easily import it here like this otherwise you can go here inside the uh icons in Lucid DOD and you can search it from here as well so if I want to search for something for upload right and if you see bunch of different icon okay and if you h on any of this one and this name you can just search it or just type it here and you can able to import this icon okay so very easily and then I will add some path so in this case I will add path like upload and let's say copy paste some of them so I will say this two I will call it as a files the path will be files it need to be slash actually and then I will say another one is upgrade okay and SL upgrade here we will say file and here I have shield and save it now our menu list is ready now only thing you need to do we have to iterate it okay before that what I will do I will add logo of our application so I will add D and inside that let's add image source and inside that we need to provide the source which is logo. SVG let's give width of 150 height of 100 and close the tag and if I save it right now if you see right is not able to see because it the the screen size is smaller size so right now for uh testing purpose I will remove this hidden method okay and this MD as well so we can able to and this one as well okay perfect now you can able to see this uh logo uh now for this de okay you can class name and give some padding of five okay and let's add border as well to bottom okay like this perfect now after this we need to iterate this manual list okay so after this de Let's uh in order to iterate right you have to iterate with this curly bra then you have to write menu list dot then you have to map the value so each item uh when you write like this right each item will map uh to certain component certain uh TXS which we are going to Define okay so this will be itom and index so index will be start with the 0 one true and then you have to write Arrow function like this inside that let's add the button okay because this need uh this will be a button okay and inside that let's add the h2 tag and just say item Dot and if you see we have ID icon name path so in this case we want to show the name so just write name and save it and if you see right now it's showing upload files upgrade it's sh in horizontal right right now okay but we want to show it as a vertical okay so let's um so to fix this issue right wrap this particular manual inside One D and then for the do let's add the class name make it flex and then make Flex column and now it will become as a vertical okay also after that let's say float left so it will be on the left hand side side okay now after that one we also need to add the logo associated with this particular name okay so in order to write the logo right logo will be like this for example if you want to add the upload logo right so like this and if I save it see this is how it looks okay and this is how you can add the uh icon from the lucd okay but in this case we need to add dynamically from the item which we already added here right so to do that you need to write item Dot and if you see we have the option called I icon and then save it and if you see it's suddenly showing here now let's add some CL uh styling to this button okay so add class name and inside that one let's add uh flex and make gap of two uh then uh also mention padding of four okay padding X will give some six something like this okay then on Hover we change the background uh to be gray 100 okay so whenever I hover on this one right you will see the background change okay see like this okay then we'll say we to be full so it will be it's will be a full width so just mention full width air as well so it will also cover part complete okay and then once you define this withth full uh let's add the text gra 500 okay something like this perfect now whenever user click on this right we need to change the color of this particular icon okay and uh so to do that right let me bring this down and we need to add the um icon sorry the active index we need to save the um button click event okay the index of this particular event when user click on any of this item so for that one we'll Define one state to store our data so we'll call it as a active index comma set active index okay is equal to use state so this use state will hold the value okay for the active index and this set active index will set the value for this active index so uh red light on click method for this button just so just write on click okay and this will trigger the on click event and on the click we have to write Arrow function and then we'll set the value of the index so in this case is index like this okay and by default uh you can give index value as a zero as well okay and save it so right now if you see you got one error that you are importing component that need a used State and it only works in a client component okay so to fix it right you can mark this component as a client one okay because use state will only work on the client side and now if I click on any of this one so it automatically save the value for the our active index okay perfect now in order to give the uh Dynamic styling right depends on the we can say a conditional styling depends on our uh selection right you have to write the uh or you can WRA this class name inside the curly braces and this particular tag okay and remove the single code from here and then you can write the condition in dollar in a curly braces and then you can say active index is matches with the current index then you can write the condition like um background change to Blue 50 and the text should be a primary like this okay otherwise um don't apply any styling that's the reason I mention as a null okay and save it now and if you see the magic immediately okay if I click on first element it change immediately see okay perfect this is how it works and this is how easily we added now another thing here uh we can add the border to our navigation bar so here you can say shadow as well so I will add the shadow small and I will add the border to the right okay so of this if I write this border as right it will give the border on the right hand side only okay and also mention height to be full and save it and this is how it show look like this okay and here I think we missed a padding X so just add padding X to six and perfect okay so I hope you understand how we beautifully or easily added this side navigation bar now in same way we can also uh update this header okay this is also very easy so for that one let's create another component okay we can call it call it as a header or top top we can call it as a top header do JS and add the default template and save it now this in inside this top header right let first import this top header inside this layout. JS so maybe um after this one we'll add it it's name is top header actually and save it and if you see the top header is get added now let's go to the top header file and inside that one I'm going to add two major components okay first is uh we need to add one icon and it will be look like this okay let me this one uh maybe like this a line okay so on the click of this one when the screen size is smaller we will show this icon and on the click of that one we need to show and hide the side navigation bar okay so let me show you the example so if you see on this particular screen right if I decrease the screen size it changes to this icon okay and if I click on this icon it show this particular uh sidebar like this okay so same thing we are going to implement in our application so let's go to our uh vs code and here first uh add the icon called align justify maybe okay and let's sa and if you see it will look like this and uh obviously we will show this whenever the screen size is um medium okay so right now if the screen size is medium oh sorry if screen size is medium we will hide it otherwise we will show it okay if I increase the size if you see it gone next we will add this user button okay from the clerk in order to show this um user profile icon and and uh save it so if you see it comes and the logo so let's add the logo as well and this logo also we going to uh show it only when the screen size is smaller okay so here I will use a width of 150 and height of 100 and save it okay now bring this everything in one line so make it class Flex also give some padding and uh we'll give border at the bottom okay and uh then we'll give item to be in the center and mark it justify between like this okay and when the screen size is medium we'll say justify end and save it and if I increase the size if you see the magic okay now obviously we don't want to see show this logo when the screen size is uh medium so what you can do you can add the class name here and just say when the screen size is medium hide this particular logo okay now you increase the screen size the logo is hidden okay but if I decrease the screen size it show it will show the logo oh sorry will show this logo and this icon but obviously right now for the our um testing purpose right we we sorry um we added this particular uh um or we remove this logic right from here so whenever the screen size is medium add the width and um and also this one and save it we need to hide this one so hiden perfect like this and also with Miss one thing inside navigation bar so justify bit see okay now if I increase the size uh let me add the condition here inside our layout and now here we need to add Medium as a uh the flex when the screen size is medium okay and if I increase size if you see we are getting this side navigation bar along with the header but if I decrease the screen size it automatically change or uh remove this particular Side Bar and then it brings me this icon along with this logo and the user profile icon as well okay so if you have any question just um access the source code or you can just comment it in the comment section now uh I will give one uh challenge to you right so whenever you when user click on this particular uh icon right we need to open the side navigation bar okay if you face any issue uh you can obviously watch my my this video okay this particular course video but obviously uh I also included that particular logic in the source code as well and it's very very easy you just need to add the on click method here and then you have to trigger the side navigation bar inside this layout file okay because you already have the top header here okay so try it out and if you face any issue just access the source code or you can comment in the comment section so in this section we are going to create um the upload page to upload our files okay and this this will be look like this one so we have this drop drag and drop area or you are click and to upload area where user can select the file and then uh on the click of upload button it will upload to the cloud okay so let's go back to our vs code and here uh we have this upgrade um folder okay and inside that we have the sorry we have this upload button and inside that we have the page.js file okay so here I will create a new folder and we can call it as a components okay so whatever components we are going to create for this upload page will we we will store inside this uh underscore components okay that's the reason for each uh route or for each page we are creating a a separate component folder okay so inside that let's create another folder and we can call it as a uh upload form. JS okay like this and add the default template and save it and now uh let's add this upload form template inside the page. jss okay so here I will add the upload form like this and then save it and if you see it will look like this okay uh before that here now uh let's add the text first okay so what I will do I will add the h2 tag and inside that uh I will add the text okay so it will be like um start uploading files and share it like this as simple as that okay now if you see uh our mockup we have this uh start uploading button will be in the color and little bit bold and same with the share okay so let's apply The Styling so for this uploading I will put inside this strong okay and let's cut it here and paste it and let give styling to this one so let's say text primary and save it see okay and then for this file uploading file and share uploading file start okay and for this share as well I we add strong let me copy this this existing one and let's put share inside that one oop sorry okay like this let's give some space perfect now let's apply uh style to the H2 component so I will add the text of 20 pixel and then we'll make text to be in the center and margin of five like this okay also for this D I will add the some styling so I will add padding of five okay and padding X to8 when the screen size is uh smaller and when the screen size is medium or larger we'll add padding X to 28 okay so right now if I increase the size this is how it looks and on the small it will look like this okay now we need to create upload Zone here okay so obviously you can create your own okay but what I will do now I will just search um T just search like T CSS upload file okay and you will find a bunch of different type of uh snippet let's open one of them and let's scroll something down okay we want look like this right and if you see this is the code for that one so you can uh take it any any code from the Internet it's not big deal okay let's copy that code and make sure this code contain the class okay because this is the HML um T CSS um uh coding okay so make sure that you will update it with the class name so let me decrease the size let's go back to our application here and inside the upload form because we have this component I will paste this all of this code and if I save it this is how it look see how beautifully it's showing correct now a couple of things uh I'm going to update here the first thing uh let's change this uh color of this particular icon so instead of gray I will make it blue okay and uh so here we have the word called click to upload okay so that also I'm going to change little bit bit so let me bring this down so I will say I will add the strong and let's make this drag inside the strong and one more strong word for the drop okay just to give some visual uh the beautiful visual effect okay so add class name here and we'll make text primary and same thing I will add it for this one as well next name text primary and save it see and obviously you can change the font size so right now it's small you can make it maybe 2 XL and save it maybe 2 XL is too large but if I increase the screen size okay this is look good on the medium size so you can add the condition so this uh size will applicable only only for the medium screen for a small screen you can make it just large see okay if I increase the size automatically this size of this particular text also get increased okay also I will um for this width I will change this WID to something like uh let's select the 12 okay and here as well 12 and save it see okay so this look good also let's change some border color okay so if you see uh we have this dotted border here for um okay so if you see right now border color is gray so make it blue and uh also here background color is gray I will make it blue 50 so little lighter see like this okay perfect and this look good okay now another thing we need to handle we need to add the button okay so what I will do here I'll on the same form I will add a new button here okay and we can call it as a upload and save it for now and let's apply some styling to this one so class name and uh here we can give some padding of two background color I will give primary then we'll make text white okay and this is how it looks so also give a width I will add the width of 30% okay and make rounded maybe full okay and let's add margin top to five perfect and add this particular du right make make uh text align to be in Center so everything will be in the center okay see and if I increase sign this is how it looks obviously uh depends on your size you can uh change this okay also uh initially I will disable this button so let make it disable Okay and here you can add the uh disabled um styling okay so for example if it is disabled you can make it like uh background or color of gray something like this okay so right now if if you see this is disabled and the background color is changed but if I remove the disable see it's change to uh blue okay so I make this disabled because once the user is upload the upload the file then only we want to activate this button okay uh so what we need to do now uh let's add the uh on select method to this one okay so if you see we have this input here right so on this input we have to say on change method and in this on change it will get the event okay it will emit the event when we select the uh any file and let console this uh file information okay so that file information will be in the event. Target dot files okay and we will take the first element of that particular files array and if you if you see right now you got one error that event handler cannot be passed to client components okay because right now you are in the uh this this component need to be at the client side right so what you can do uh to this page you can make this use client use client like this okay and if you see the error is gone obviously you can make mark this as a use client but already we use this upload com form component inside this page.js okay now uh let's go to here and let me open the console panel okay so go to the inspect and let's go to the console let's clean everything and if I click on uh this one right click upload some file open it and if you see we got this file information so in that file information has the name the size of the file and everything okay now as soon as you select the file make sure to enable this button okay so what we can do here we once the user select the file we will store that file information in one uh state so Define one state and we we can say file comma set file is equal to use State okay like this and uh instead of console here you can select the set the file like this okay now on this particular line we on user select the file we are setting the file information or storing the file information in our file State okay and here you can select uh you can mark the disable if uh the file is not there okay so if file is not then Mark disable that particular uh button okay so right now let me refresh everything and let's try it out okay so let's upload some file and let me upload something like this okay and if I if you see right as soon as I upload this button is get enabled okay perfect sounds good right now also we need to take uh uh take uh thing take care of one thing okay so once user upload the file right we have to check the size of the file right now uh we will just make sure that the file size will be 2 MB okay so just I will update it here uh for visual purpose U Max I will say Max size 2 MB okay so we will enable user to upload only maximum size of 2 MB okay for the testing purpose so we have to write the condition for that one right so on the change right we have the uh when user select the file right right now we are just setting the file information like this okay so instead of that one what we can do we can write one method here so constant and we'll select on file select method okay like this and inside that one obviously it will contains the file information okay so what I will do I will uh uh I will call the on file select method I will pass this file information over here okay and let's console that files information first okay to make sure that our method is working as expected okay so let's go to the inspect panel go to the console and let's upload some file okay so I upload this file and if you see we got the file information so inside that we have the size right so this size is in the bytes okay and then we have to convert that into um the MB okay but uh you don't need to actually convert okay we will just compare with the uh um the bytes okay whatever bytes we have so what we can do uh here we can check if file okay and and file do size is greater than this particular maybe uh 336 Z I think that's right okay which is 2 MB and this particular value means in the bytes okay if it is uh more than 2 MB just return nothing and here we can say okay sorry here we can say console.log uh the size is greater than 2 MB something like this message on the console for now okay and otherwise we will set the file as a file okay so if this uh if the file size is bigger then obviously we will print the message otherwise if size is less than 2 MB then we will set the files like this and then obviously uploadable will get enable again okay so let's try it out now let's clean everything make sure everything is good let's upload some file okay and let's upload some file which is more than 2 MB okay this file size is 365 MB let's open it and uh let's see what the so right now if you see right we did not get any error but we did not get console uh we did not get message console message okay we did not save this actually so let's save it first okay and then try it again now so let's upload some other again open it Let me refresh it and try it so open and if you see we got the message that size is greater than 2 MB okay perfect so it means our logic is working so now what you need to do let me close this okay so whenever the size is larger than 2 MB we will show the error message that file size is larger okay so for that one we will create a new component to show that particular message okay so let's go here inside the component and let's add alert message. jsx JS Okay add the default template and here we'll accept the message whatever message we want to show okay and this will be the obviously the error message we're going to show it here okay so uh obviously you can use this alert message at the top uh component because we can share that one but for now we'll keep here as it as it is okay so inside that uh let's add the one icon I can say okay so logo OR maybe alert circle like this but but before that let's add this alert message inside this upload form component okay so after this one above the button I will add alert message component and save it and if you see right now I added this uh icon so it's showing icon like this and after that we'll just add the message okay so right now we don't have message but let's pass some message here and we'll say uh something like maximum file size is 2 MB okay like this see and now what you need to do let's add some styling to this one so I will use some class name let's add padding of four the background red I will add maybe 500 okay then we'll make margin top to five the textt I will add white okay make rounded corner to be maybe medium make it flex and we'll add gap of five I will add item to be in the center and save it and this is how it looks okay perfect now we have that alert message as well to show it okay so let's go back to Let's close this one and let's go back to upload form okay so now whenever we have the message then only we need to show this one okay okay so here I will add one constant to store our message so we'll say um error message comma set error message is equal to use State okay and whenever we have this error we can say set error message and here we will just uh add the message which we want to add right so in this case I will say maximum file upload size is to MB and that's all okay now whenever we have the error message then only we are going to show this alert message so here you can say if we have the error message then only show alert message otherwise show nothing okay and if I save it right now we don't have any alert message and it's showing nothing obviously we are going to replace this message with the error message okay and whenever the file size is uh uh lesser than 2 MB okay we have to make sure that a set message will be null okay we are setting it as a null and save it okay let's try it now so let's upload something okay which is larger than 2 MB and open it and now if you see we got the error message but if you try to upload now some smaller size okay so this error message is gone and this button is also get enabled okay and also we have this all the information in the console everything okay so one more important thing that we are going to show the image or the file preview okay with the name and other things okay so below this one right once user upload the file and if the file is matches with the or if it's less than 2 MB then obviously we are going to show the preview of that particular image uh which include the name and then uh size and type as well so let's create a component here inside this component folder and and then we can call it as a um file preview. JS Okay add the default template like this and then make sure to import that inside this upload preview okay so Above This upload button I can import that one okay and we can call it as a upload uh oh sorry the name is uh file preview like this okay and save it and if you see the file preview is showing right now now let's go to the file preview and first thing uh I will add here the image tag okay and here I will add the uh the image here okay so already it is my local so I will access with the file.png let's add width so width will be maybe 50 and height I will give as 50 and save it and this is how it looks okay I will also add the alt tag and we sest just file after that I will add one due tag and inside that I will add H2 uh with the name of the file okay it contains the name of the file so obviously uh for now I will just write the file do name this to be file and what I will do I will accept it the file okay so obviously from the uh upload form you have to send the file here so let's add file is equal to uh the file which user selected okay and this F previe only enable when the file is available okay so like this and otherwise it show null okay so if the file is available it will show the file preview and save this one so right now nothing is showing because file is not uploaded let's upload one file here and uh let's say open okay and now if you see now our file preview is showing okay let's add couple of more thing inside file preview let me bring this like this okay now another thing I will add the file type okay so file type uh then I will write here slash again I want file size okay so file do size and obviously size is in the bite so you can divide by 1 02 4 one2 4 and then you will get in the bytes okay sorry it's in the MB so what you can do you can drag have this and just write do to fix to two decimal see like this and then write MB because we we are converting that into the MB right so just write MB MB like this okay and what else we can show we can show the uh I think that's enough okay now let's bring everything in one line first okay so here I will I will class name okay and um Flex makeing flex and like this and U make item to be in the center okay perfect let's do margin okay we'll give margin top afterwards let's give some styling to this h2 tag so class name I will give text of 12 pixel and then text Gray 400 like this okay so right now it is in Center if you see right so you can just give the class name here and you can say uh text on the left okay so like text maybe yeah left see like this okay perfect so give some gap of four maybe two that's fine now our pretty much is ready okay let's give some border so before that right I want a close button here okay means if you want to remove that file you can remove it okay so I will add the X which is close operation uh close icon from the Lucid react and if you see it will look like this okay and uh let's wrap this in one de this image and another de okay so that we can give and if you see right like it will look like this but here if I go to flex item to be in the center padding to it will look like this again okay and then for this particular F make just justify between so that cross will go at the right hand side now let's add some border and margin top so I will add the margin top to five then I will add the Border okay then make a rounded border maybe medium and let's add padding of four maybe two okay then I will add the border of blue color border blue let me bring this down little bit border blue and maybe light color 400 like this okay and this look much better let's give some uh class name to this icon and we say text red 500 color okay it will look like this um I don't know this border color will little bit lighter okay perfect now obviously on the click of this close button uh we will add method okay to remove that particular uh image okay but for now uh this look much better okay so let's add onclick method so on click okay and here we'll say remove file okay just it will call remove file uh pass that method to the parent component back to the upload form so I added here and in upload form just call that remove file and on on the on on this method is when initialize we will just uh set the file maybe set file I think right here set file to be null like this and save it now and one more thing Let make this as a cursor pointer when i h on it saved now if I click on this one see the file is gone okay so how beautifully we added let's try to upload the file again open it and if you see the file uh the preview is showing here okay now until andless you upload the thing right it's not going to upload another thing when we uh upload this right and when we started uh storing in the database right we going to remove this upload button and instead instead of that one we will show the progress bar okay and once the progress bar uh means the file upload is completed the progress Val will show 100% And then after a second then we will show that file is uploaded successfully okay so that is we are going to implement once we started uh uploaded the uploading the file on the uh database okay so for that one obviously we are going to use Firebase but that will do in the our next section so now it's a time uh to integrate the Firebase in our react njs application okay and if you go to this firebase.com here you can just log to this particular Firebase account and then click on go to console okay one more thing that Firebase is completely free okay when I say completely free means um you can it has a free tire okay and that that will will be on no cost okay you can just uh get access the some of the uh feature not some but all of the feature with some uh limitation for example now right now we are going to use storage and for the storage if you see you will get a 5 GB of storage and that is more than enough to build this project and share this with your friends and family okay also there are lot of things are completely free okay if you see the fire store uh it give 1 GB uh store data and more than 50 around 50k read operation 20K write operation per day okay and very nominal charges so it's completely free Okay now click on go to the console and uh create a new project if you don't have already I already have the project so I will open the existing one okay and one once you in the project it will now right now it will show my old project analytics okay but just ignore that one here if you see we have the button called add app Okay click on that button and here you have to click on this web okay you have option called Apple Android web unity and flutter so click on the web and then you have to give the name of your application so in this case I will say file sharing sharing app okay and just click Register App so it will register your app into the Firebase okay so we'll wait uh to complete this registration and if you see now registration is completed now we need to add the Firebase hdk okay with the help of this use npm uh command Okay so copy this command go to your vs code and then run this particular command like this okay and then it it will install the Firebase inside your application this is how easy that you can install the Firebase okay next thing if you see right this is these are some configuration file which we need to set up in our application so copy this all of this uh content okay and then go to your application inside your application let me close this uh terminal uh add the root directory okay just create a new uh file and we can call it as a Firebase config.js okay and paste the content which you copied okay uh no rocket science in that as uh whatever you cop you copy just paste it here okay and here instead of constant exposure you can just add one more line or one word called export so that uh we can use this initialized configuration reference uh in our application in other components okay and then save it let let's go back here and click on continue to console okay now here if you see now it will show right now it's showing me two apps because I added I already have one okay and this is another one okay you can enable this one so it will show the preview okay in some time it will give option to enable it because it's still your project is getting set up inside this Firebase uh console okay perfect so this is how easily we integrated the Firebase uh inside our application okay now only thing that we need to use that Firebase uh storage and Firebase fire store so that we can store the our files and some information everything okay that that we will see in our next section so now here uh we successfully able to upload the image uh on the UI side and we are getting the information as well right but now once user we click on this upload button right we need to send this file information back to our parent component which is page where we are going to write the logic to upload that particular file into the Firebase fire store okay so very easy uh for this uh upload button right here we'll add the on click method okay like this and we'll say uh F selected file upload sorry just we can say upload button click okay and then we'll send that file information so in this case is the file so just add the file like this okay and pass this method back uh to the parent component like this so so I added here and then inside page. JX you have to accept or you have to accept it here like this okay and once you trigger make it let's consol it whether we are getting the file here or not okay so I will consol it let's go back to our application go to the inspect panel clean everything okay let me refresh it once and let's upload it now okay so I will select this one click open right now it's showing that um from the form upload form but we are are looking the console when user click on this upload button if I click upload so right now we are getting one error okay so if you see the file is not defined it's saying the file is not defined and also file is not defined at two location okay so let's see why so let's go back here and if you see we Define we are trying to console the file but file um uh stor for file variable is not there so obviously we have to men it here like this because from the upload file we send that uh file inside this upload button click and we have to accept it here in order to console it okay now let's try it again clean everything try to upload another file click open okay and click upload now if you see we got this console uh inside this page.js file okay it means our upload button is working fine okay now obviously uh inside this upload button right we add one method we will call constant upload file okay and obviously it will get we will send parameter as a file and instead of console lock I will just remove it and call the method as a upload file okay and here we'll get the file information perfect next what we need to do we need to initialize the Firebase uh fire store sorry Firebase B Storage okay so in in order to initialize just WR constant storage okay is equal to get storage okay like this and inside that we have to pass app and if you see this app is getting from this Firebase config because we exported that one okay and save it now right now if you see right uh the gug story is not defined and if you see we got the error that g stor is not defined okay now you will you might have a question how can we write the um this particular or code to upload the information right as as I say in the beginning right we will learn everything from the uh basic and we also learn how to use documentation to write our code okay so we are going uh inside this Firebase uh storage documentation okay just search that Firebase file upload and you'll get this particular link also I put the link is in the description here uh if you see and on the left hand side we have option and obviously we are working on the web so click web and just click on get started okay so it will come on this particular page and it will Define all the steps to follow it in order to upload the file okay so very first step that you need to initialize this Firebase file store okay so we initialize but this G Storage we need to import it from this Firebase storage okay so copy this one go back to our application and paste it here like this and save it and if you see our app now this error is gone okay perfect let me do like this okay easy to access now once we initialize uh this Firebase right it's time to uh write a upload uh script right so if you scroll down here you need to if you scroll more down okay so see everything is uh as expected okay sorry now again go to this second tab called create reference here we need to create the reference uh of the storage okay now if you see this particular obviously you can access anything okay but if you want to store your images in some particular file right when I say the particular file if you go to the storage section right inside fireb console you have option here file file share right I created some folder here already you can create a folder by just click on this create folder and add the folder whatever you want okay so I will create the folder called f upload like this okay or we can just and click enter and if you see the file upload uh folder get created once you go into this folder you can upload the file and everything as as simple as that now in order to create the reference right you have to make sure that you will uh give this file upload uh folder name okay and in Firebase um in F Bas it call a bucket you have to give the reference you have to create the reference of that one if you did not provide that particular folder name then it will store your files directly inside the storage okay without you without any inside folder like that so here obviously you need to get uh uh create the reference so what you I will do uh if you see right obviously we already defined the storage and in order to create reference you have to give the folder name and then the file name okay so what I will do I will just copy this lineup code okay uh for temporary purpose and let's go here and upload file I will paste it here like this so in this case our bucket name or folder name is file upload and here instead of this particular uh name we need to give actual file name so in this case I will do it file. name okay perfect now here I will change image reference like this okay now our image reference is ready okay next thing you need to do let's go back our documentation okay and if you go to the upload file section now okay here you will see the all documentation to how to upload the file and everything okay but I will go down at the bottom call full example okay if you see on the right hand side here we have the full example and here it also explain once you start uploading it will also give how much percentage is uploaded because we want that in order to show in inside the progress bar how much Pro how much file is uploaded and everything so that's the reason we are going to use this particular line of code and it show everything if you see that this is the way we Define the file now let's define this upload task so copy this one and let's go back to our application after this I will add upload task uh I will change this to storage for consistency and inside the metadata okay if you see inside the metadata they they added this um actual the type of the file okay so you can just write metadata here and instead of this one you can add the whatever the file you're adding so write file do type okay so that type will be a content type now after defining this one go back and let's copy this line of code until this point maybe and then paste it here like this okay and make sure to close the tag okay so the error will gone now I want don't want this switch operation I will remove that one and now if you see it's showing the how much it progress and everything okay you don't need to uh do anything because we from the documentation we just copy the code uh to upload the file okay and make sure everything is ready everything is correct okay now let's save this one and let's give a try to upload the file okay so let's go back to our application make sure everything is okay one more important important thing right we added a lot of uh different um functions and Method right you have to make sure that you will import it so just do the control space okay and then you'll get the option to import that one okay otherwise if you don't get any option make sure you can import this import statement from here or from the documentation as well okay so make sure to add everything let's add this one as well then uh what else we need to add I think that's more than enough okay maybe on I don't know that's fine and save it now let's go back to our application and let's test it out okay let's open the console panel if you got any error we'll we will get to know okay so let's click upload and let's upload this image click open right now nothing will happen because we did not click upload button Okay now click on upload button and if you see upload is 0% done upload is 100% done okay now obviously file is very very small that's the reason very quick and very uh fast to upload okay now let's go back to our console okay let refresh the console uh inside the file upload and make sure our file is get uploaded okay let's click on that and if you see this is the file we just uploaded okay perfect so this is how easily we can able to upload the file now another thing right many of the you might face one issue that the permission issue or something like that right to fix that one if you see we have another tab called uh rules okay go to that go to that Tab and here you will see some kind of uh code here right don't think about that here this code is help us to avoid any third party access to your uh bucket okay and if you see right here we will say allo read right if the request time is less than at this particular time okay so right now I give to 2026 so until this uh date uh you can able to access this uh particular bucket if I um update it like this okay and publish it uh then obviously this date is a u uh past date obviously I will not able to allow or I I not able to permit to upload anything in this particular bucket okay so make sure you will do the future date so that you don't face any issue okay so right now I will discard and see okay perfect so I hope you understand how to upload now one more important thing right once you upload the file okay if I upload it and if I click on this particular name so it will open the file we need to get this particular URL okay because we want to store that URL uh in our database okay but the question is how to do it so go back to documentation if you scroll in the same section you will file this option called get download URL okay so copy this code go back to our application and inside the Snapchat okay because uh this is very important okay uh it is not in mentioned in the UHC dentation but this is important instead of putting it outside the snapshot put that particular code here like this okay and make sure to import this get download URL from the Firebase storage and then from this code now you will get the download URL but also make sure once the progress is completed so I will write the condition here if progress is equal to equal to 100 and and okay and and means if this particular condition matches then only execute this uh lineup code call get download URL okay now let's give a try and make make sure that we are getting this particular URL once the file is uploaded okay so let's up click on that particular file to upload so in this time I will upload this particular file click open okay and click upload so if you see the file 0% 33 and up upload right now obviously uh the function is if you see we got this URL but I don't know why we got the error. Firebase storage does not EX exist it saying does not exist okay let click on that this particular file upload let me go back here let's copy this one because what happened immediately uh is trying to access that file okay so when I open this particular URL right it it showing me the content like this okay so to fix this one uh here if you see right right now we are passing this metad data and content type right just uh me remove this one and just use instead of metadata just write the file type like this okay and save it because H it it it uh so if you say the content type is showing like this but if you directly put the file type right it will save the file type and it it will give the proper URL so let's clean everything let's try it out so let's upload some file let's call this this one maybe okay let's open it and let's upload it and now if you if you see we got the uploaded and if you got if you see right we also got this URL if I try to open this URL if you see we got this image as well okay and we are able to successfully able to upload this image along and also we are getting this download URL as well okay obviously we going to use this particular URL to store in our database so that uh once you started uh implement the file sharing uh we will understand or we will use that particular URL okay now next we need to um make sure that once we have this upload percentage right progress we need to remove this button and we have to show the progress bar okay now let's build the uh progress bar so let's create a component for the progress bar okay so in inside this underscore component I will add the progress bar. JS and add default template and then make sure to import that inside the upload form okay so maybe right now I will uh keep after the button okay so just add the progress bar and later on we will um put the condition just to show button or progress bar okay either of one and if you see the progress bar text is showing on the screen and progress bar is very easy uh to uh develop okay so sorry easy to design so what you need to do let's give class name okay let's give the background first and we'll say background gray okay and let's do some uh background color like this and then save WID to be full okay then you have to give some height or you can give padding so I give the padding of one and if you see we got this horizontal line okay let's give margin top to maybe three for now okay and then o sorry then make rounded corner to be rounded okay so we'll make rounded full like this it will look like this okay now inside that again give one more de okay and inside de give class name uh first thing you padding of one okay and then in this case give background of maybe a color of blue or maybe say primary because we are using the primary color okay so primary and if you save this one it will look like this okay so here instead of padding just make the height okay so I change this to height and background color and make rounded corner to be full like this okay and save it next uh you need to Pro provide some width to this particular uh in inner D okay so that it will look like okay it's progressing okay so what you can do you can write the style okay and inside double Cur Li places you write you have to give mention the width okay so in this case let's give the um width for example 40% and if you see this is how it looks see okay so it look like a progress bar only now only thing you need to do you need to update this WID okay so obviously uh we'll accept the width okay and this width nothing but the percentage uh completion that we are going to send it here okay and here uh you can write like this for example uh code then uh in dollar sign just write progress oh sorry here we will say the progress instead of with okay some meaningful name and then after this I will write percent sign okay so whatever the progress size is there it will show it inside this progress bar okay and if you want to show the number okay for now I will what I will do I will give the default one okay and if you want to show the number inside that one you can just write like this okay so inside that like dollar uh will will convert this progress into the number if it's not number okay and just say progress and make this to fix okay because whatever the value we are passing it value contains a floating number okay and here say zero okay and after that you can just say percentage and save it and if you see this is how it looks okay so here uh I again I will R this one okay or just remove it and it will look like this okay so what else we me okay so here padding Y is okay the progress bar is okay okay so only thing that we need to do let's put this inside this one de okay and if you see it will look like this okay you can use some height because right now I feel it's very um the width is two height okay and make height of three let's see how it looks okay that is good I don't know let's try to give some padding I don't know how it looks okay height of three maybe okay and uh this number we need to give let's give T size of 10 pixel maybe yeah that's much better okay I will increase little bit height perfect like this okay and uh wow this is pretty much uh ready okay so this is how um you can easily uh develop this progress bar okay if let's I also make the text to White so it will look like this okay now only thing that we need to pass the progress bar uh the value okay now inside the page.js here we we are uh we have the progress value okay so let's store in some State okay so I will Define one state and we can call it as a progress uh okay comma set progress is equal to use State okay and inside this one I will just set the value set progress like this and here we'll say progress okay so whatever the progress value is there we set the value into the progress okay now this progress value we need to send to the upload form where we have the progress bar okay so I will say progress is equal to again progress and let's go to the upload form accept it here as a progress and pass this one to this progress bar progress is equal to progress okay and what we will do if the progress is there okay or maybe it's greater than zero then only show this progress bar otherwise show null okay and then save this file as well and save this file okay so right now obviously we don't have anything okay and let's try to upload something so let's try to upload okay this size is very small let me increase some get some file which has bigger size okay maybe this one let's try and open it let's try to upload and if you see we got the progress bar we got this beautiful effect okay that and it's obviously it's done immediately that's reason it's not visible to the eyes okay we got one error let's see what's the issue let's go to the console and if you see that respond the file storage High graph responded with 44 I don't know but that's fine f for now we just ignore this one okay and because we got we also got the URL as well okay so for now just ignore this error and then uh the next thing we need to do we need to remove this upload button and we need just need to show this progress bar okay so what we can do we will put this this condition okay over here if progress bar is uh less than zero or less than equal to maybe we can say if progress bar is not there let's me undo this one this button I will remove it and I will put it instead of this null like this and then save it okay now let me refresh the screen right now it's showing the upload button let me pick something which has around 1 MB size okay so maybe this file will upload okay it has 1.7 MB click open and then click upload and if you see the animation as as well as uh the button is also gone okay perfect now we are able to successfully able to upload the image also we are able to show this progress bar and everything now the task is once the file is uploaded okay after and this progress bar is complete as 100 % okay any everything we have uh we also need to store the data okay that is the one part but uh here we will show some uh icon to that it we will show it that okay the file is come uploaded file is completed okay that kind of um message we going to show it but this is the task for you guys um uh you can give some toast message or you can use some type of notification of some alert once the file is completed successfully you can show that one okay and obviously you can go here in U hyper UI and you have some good option for example you can use this alert message UI or you also have this popup see this kind of popup you can use it okay or you can use uh there are one more um maybe a not badge or this announcement you can show that file is successfully upload okay so just use that one and uh obviously if you f faing issue I will also create one and you can access that from the source code so now once we are uh uploaded the file inside the Firebase storage we also need to add the some data in our Firebase fire store okay so if I go to this Firebase console and inside this Firebase um fire store database right here we need to add the collection and documents okay and if you are new to this one so don't worry okay so let me show you one example so these are these are my existing collection okay and if I go into any files and folder for example if I go to any files if you see I have a list of files here okay and these are nothing but the documents and this whatever they show on the left hand side is the are the collections if I select any of the file right and if you see in that particular document we see this particular information like image URL modified name size type and everything all the details dets are here okay obviously you can again uh add uh collection inside the document as well but right now we'll keep it simple so first thing is uh the collection then we have the documents and then inside documents we have the all the fields which we required okay one more important thing inside the rule right as I explained in for the storage here also you make sure that you will add the future date okay and here you can add the indexes if you needed and then inside the usage you will see how much uh um you use the data or how much data you inserted or deleted kind of thing okay so whatever the analytics related to the Firebase writing or the reading the operations you'll see it here so now uh let's go back to our application okay and inside the vs code here let me close everything and inside the page right here we are uploading the file right and here we are getting the download URL okay so what I'm going to do now uh I'm going to add a one method okay so here constant they will say uh save info and this is the method okay I'm going to call so inside that one you can uh you have to Define couple of things okay so first thing what I will do I will Define I will create one um constant and I will call it document ID okay so this document ID should be a unique and another thing it it need to be in the string format okay so obviously in order to make this document ID I will what I will do I will uh get the a time stamp okay current time time and and then I will convert it into string okay so obviously uh this will be the unique okay every time and then uh if you go back sorry go to this Firebase documentation okay and just search for uh create doc Firebase something like this okay and here you will find uh documentation to how to add the file and everything okay obviously you need to First Define this uh Firebase uh fire stores reference okay so just copy this one and uh at the top only we can initialize that one okay so over here I will initialize and here you need to import this get fire store okay so let's go back and just copy this get fire store and we have to add in fire store only okay so we need to copy complete statement and paste it here inside the import section okay now your fire stor is get initialized okay and we already have this app which we provided Okay then if you scroll little bit down this is the simplest way to create the document okay and if you see they added the commment that add a new document in a collection called City so here we have to say document okay inside the document we have a database which which we Define above okay then this this is the collection name okay so you can add that collection name every time where you want to add the document in that particular collection and then the document ID okay and the field which you want to save so what I will do I will just copy this line of code okay and let's go back in our save info method and paste it here like this okay so it it uses a so make this function as async okay and now here instead of this uh document name I will give document name like uh uploaded file okay so this document name is nothing but this collection name okay so sorry if I say document is not document but it's a collection name okay so that's the that's what I give the collection name and then you have to provide the document ID okay you can provide the name but as I say it need to be unique every time okay and now we have to provide couple of things so I will remove this one and first thing we'll provide the file name okay so obviously this file name we have to get it from this uh file whatever file we are uploading right so what I will do I will accept it as a file and also we need file URL so I will add file URL obviously we are going to call this save info uh inside this um download URL section okay once we got the download URL obviously we are going to call this save info method okay now let's add file. name comma then we I have to add file size so I will add file do size then file type so it need to file. type okay then we have file URL so this this is the URL okay so these are the uh all the information we are which we are getting from this uh files when we are starting uploading and this URL we are getting from this download URL okay once we upload the file then uh we going to save the user email okay so the question is now how to get the user email okay so we are obviously saving the login user email address okay so in order to get the users email right we can get it from constant and user is equal to use user hook okay this use user Hook is importing from the CL nextjs okay and this user contains now a lot of information for example if I want to get user email address you have you can write user primary email address do email address okay then uh we also need to get a username we will see username as well so username will be a user. full name you have the first name and you have couple of more option but I will sa the full name then obviously uh we are enabling the password for the particular file okay so for now what I'm going to do I'm going to uh pass the password as a empty okay and then again we need to use short URL here here we are going to use short URL okay so for that short URL uh we are going to uh give the um the base URL okay so what I will do let's go to the env. loal and here we will Define the base URL okay so base so it need to be nextore public if you want to access on the client side okay and then you have to write basore URL is equal to and right now okay obviously whatever the because we are working on Local Host right right I'm going to provide this URL only okay like this and copy this one because we want to save uh use it so just write process dot o sorry it need to be process do EnV do uh next public based URL and then you have to add a a random string method okay so we'll get some uh random string here okay so in order to add the random string to get the random string from the like some number and digit right what we can do uh in the util folder right here I will create a new uh a new screen page and we can call it Generate random string. JS okay and inside that one let's write some code okay so we say export constant gener rate random string okay is equal to and this method will return some random string for us okay so obviously I will write constant character first okay is equal to so I will pause the video I will write this all the characters okay and here is the method I WR wrote down okay so obviously you can get this particular method on the internet to generate the random string okay and these are the characters I added so you can add whatever the characters you want to add and from that it will generate the uh four digit or four characters um string okay and here I'm going to uh simply call that particular me okay so Generate random string okay this method particular perfect okay now uh we pretty pretty much have all the information which we required okay obviously if you want to add you can add any time okay from in this particular document obviously in future we also need to update document but for now in this particular page we are just adding this new information in our database so next uh we need to call this method inside this save info okay so let's add save info like this and uh Once We call we have to pass the file comma file URL like this okay and make sure the file is the correct one we we are passing perfect okay now save everything and here you can write dot then I don't know whether this will work or not let's see dot then is response let's consult the response I don't know whether it's a promise or not but let's check it out and save everything okay now let's go back to our application open the inspect panel to check if I we got any error or something like that okay now let's upload something so let me uh select any of this page okay so I will s this particular image click open okay so we got the image information everything now click upload and now if you see we got the upload I I did this animation as well okay and we got this uh all the data but let's see in the database whether we got that new collection and everything or not okay so we still have error that we are not getting any information let's see the issue so right now what I did right um once the I added here timer okay and this timer will redirect to the upload page again so what I will do I will just comment out this line of code okay and let's save this one and let's try it again so that we can see the error open upload and if you see the file Ur is not it's saying the file Ur is not defined okay so let's go to the page JS page. DS line number 31 so line number 31 I don't know where the issue because oh okay so the reason is right we need to provide this download URL because we don't have file URL okay so that's the reason uh this is the line 31 and just pass download URL okay now let's try it again open let me clean everything C upload and still we have with showing the that said Doc is not defined okay we defin some method but we need to make sure that we import all of this okay so do control space if you are using the Mac otherwise uh you can use the control you can use in both activ you can use control space Okay now click set doc to import it also import the doc okay and make sure that you imported Doc and set doc as well and now let's try it out so let's go upload upload some file and click upload and now we got the set called with the invalid data okay and if you see the unsupported field value undefined the file name in document upload file okay so it's saying that uh we got this error okay let me Zoom it out and some of the field is having invalid data okay so we need to find what are the field have invalid data okay so to do that what we can do um so this actually it need to be named okay as by my knowledge and uh what else we miss okay I think pretty much you can add the question mark If there is some any error okay something like this and now save it and let's try give one more try so let me refresh the screen upload the file so let's upload some other file let's clean everything and click upload and if you see we we don't have any error okay this is different error that all tag is not there but it successfully uploaded okay it's showing undefined on line 48 because this is not ring anything so I will remove this one okay anyway we don't want that one and save this one let's go back to our uh uh console okay let's refresh this console and if you see we got this new collection call uploaded file and inside that we have this new uh one document okay and inside that on the right hand side you'll see all the fields now we are getting as expected okay it has a file name size type URL and everything perfect so that's what we needed okay so so that's all about this particular section right now we have the file uploaded okay if I copy this link okay and open it on the browser we'll get this uh image okay now pretty much all of this thing we have ready in our um what you say uh database right now one more thing what I I'm going to do if you see right we have the short code and these are the short code is generating okay uh let me update one more thing here I will get a six digit maybe okay and also along with that one I'm also going to save that particular uh gen generated random string ID okay and I I will call it as a uh we can call it as ID maybe okay and uh this generated random string I can use as a ID okay so you can use as a document ID as well so you can uh I will just call sorry so same thing I will paste it here okay to get the uh string ID and instead of Doc ID I will use that one because it it easy for us to F uh while while we want to F the particular document okay so that that also I'm going to paste it here like this okay do two string just to make sure and obviously right now we don't need one this one okay and save everything and let's try it out now so let's me go back to the upload let's upload this image okay and click upload and now it's getting uploaded okay and if I go back to our application let let's refresh this upload file and now we got this new document okay with this document ID and if you see we have this ID as well here and obviously if you see the shot Ur is differ from this one okay because uh we this method at at three different places okay this random and random and here okay so what you can do uh instead of calling this at every place I will paste it here okay and now this document ID I'm going to call everywhere else okay so it will be consistent throughout the uh this particular document okay and save it and now uh everywhere it will be same because right now if you call it right here if you see it different here is different and here is the different right but now if I try to upload okay let's upload some new document open upload and now it's get uploaded let's go back to our console and now if you see we have this uh not this one this one okay so we have PG w9i and everywhere it's same okay so that's that will help us to get this information in future okay when we start uh building that particular page but I hope you understand what we did it here okay so here if you have any question any doubt let me know in the comment section now once we upload the file we save the data uh everything on Firebase okay now we want to navigate our route to the new page okay new screen and the screen will uh look like this okay where uh once uh image is uploaded then we are going to show this particular page where we are going to show image thumbnail if it's a image otherwise we will show the file icon then we'll show this uh beautiful short URL okay uh along with then we'll show this enable uh password section okay and then if you user want to send this file to the email then we'll show that section as well okay and obviously we have this go to upload button so once you click on user will um redirect to this upload section again okay so this complete page now we are going to build it in this particular section now before that one right we need to create a new route okay and this route will be like uh 3,000 file preview okay slash and what are the ID of that particular um file okay for example if the ID is like this okay so it the route will go like this right now we don't have route so it will showing the 404 error but we have to make sure our route will be like this okay so in order to make the route like this let's go to the vs code first and inside the vs code right we have this all the files called files upgrade upload right inside this route only we create a new route uh we'll create a new folder actually and then we'll call it as a file preview okay inside the file preview obviously uh this particular uh file prw will be a constant obviously but this ID we going to change okay it's a dynamic one it will be different every time right so to do that right to add the dynamic route we need to add the another folder inside that but in this case we will give the folder name with Aur uh square bracket okay and inside that we will write whatever the parameter we can say Okay and like this see okay so this whatever the value you are passing into this one right this will be a dynamic and inside that now you have to write page .js okay now let's add the default template here and we can call it as a file preview let me copy this one and save it okay and let's test out test it out now so here let me okay that's fine and now if I put something some value and if you see it's it's it's navigating to this file preview okay so how simple it is right so this is how we can do the nested or dynamic routing okay and I hope you understand how to do the dynamic routing okay very easy but the question is now whatever the value we are passing here right we need this particular value okay the question is how to get that particular value okay so it's very simple so let me go back here here you need to add the value called params okay so here we'll say params okay so parameter it is nothing but the parameter which is pass we are right now passing so in this case is that that particular ID okay so what I will do I will add the use effect here and we'll just pre console the value here okay so that uh you will get to know that uh whether we are getting this particular parameter value or not okay and here what I will say console. log params dot and we will say we'll get question mark field ID oh sorry uh file ID why I'm giving file ID because if you see right here we give this folder name as a file ID okay so let me increase the size and this one is the file ID okay that's the reason we need to give the file ID and now save it now let's go back to our application so if you see right now we got the error that we need to use this use effect in use client so mark this particular uh screen or page or component as a use client and save it okay and now go to the inspect panel go to the console and if you see here right we got this particular uh ID whatever the ID we are passing here for example if I ABCD enter it and now we got this ABCD see okay perfect now we have this information now the think is right uh let's let's uh add one navigation when when we upload the file successfully everything right we have to make sure that we need we are navigating to this particular page Okay so right now uh let me open this one go to the upload okay so we are in the upload section now and uh let's go to the upload page.js so inside here right we want to navigate it right uh once the file is successfully upload right so in order to navigate right you have to use constant router okay using used router hook okay so if you see this Ed router hook we are need to import from the next SL navigation because we are using nextjs 13 plus version otherwise if you you are using the old nextjs version you can use next SL router but right now we are using next SL navigation so make sure that you are inputting from the next SL navigation okay and now um uh here I think right uh here I'm navigating here okay so instead of this one after showing that check mark right the file is upload successfully I'm going to navigate it so I will say router dot push okay and here you need to give the uh path name so in this case is file preview okay and then you also need to uh give the ID okay so this will be like uh Slash plus and the whatever the ID we are using so the ID will be this doc ID okay so obviously um somewhere we need to use this doc ID okay so we need to save this doc ID so what I will do I will add constant and we say um file doc ID comma set file doc ID is equal to use State okay and obviously once we generate this file ID when the file is successful we'll set the file do ID as the this particular document ID okay because this document ID is nothing but the our file ID and obviously I will add the file ID here okay so path will be like p/ that whatever the ID is there that one and save it okay now let's test it out so let me upload some file here okay so I will upload this SVG not this one not good look good okay let's add this one and click open now let's upload it so now it's uploaded and if you see file upload is successfully showing and now if see right it navigating to this particular file but right now it's showing the undefined right because that particular ID is not saving in in inside our state okay we'll see it why actually uh I just check and I forgot to save this particular file okay so uh the ID was not set but right now if you see I'm able to get that ID okay let's uh so okay let's try one more time okay so let's upload some meaningful image maybe this one Open click upload and if you see it's navigate to this particular file and that if you see right we got the IDE as well okay so now uh with the help of this particular ID right we are going to f the data from the Firebase and if you see in the Firebase okay let's um see in the Firebase um let me check the ID so it's a 1D PL PL I okay so see this one 1D p and we got the all the information right now we need to F this particular document okay so let's go back to our application and inside this particular uh file preview okay so here obviously uh if you search uh on the Google right we Su just uh type okay if you on the right left hand side you can also uh find it here read data how to get the data okay so just click on get data from the Firebase documentation and obviously first thing you need to do is to initialize the fire store so we'll just initialize here okay and uh let's import this app from the Firebase config and then get file store as well okay so we imported this uh two statement then if you scroll down okay this is here is the option to get the document and right now we just need only one document to F right and this is very easy to again okay so this is the particular reference you need to initialize first so what I will do first I will Define one method get it will say get uh file info and then inside that one we need to Define this value okay so document reference so in this case uh our collection name we have to provide and uh so in this case is uh uploaded our collection name is uploaded file let me me verify once so yeah the f is capital and here we need to go want to give the document ID so in this case document ID is nothing but this params do fill ID okay so I will provide that one here after that okay here we are using await so make this method a sync okay and make sure to import this get dock as well as this doc as well okay so let's import this doc and now once we have this one right if you see this Doc in the documentation this is the only thing we need to show it now okay so if doc snap exist it's printing the document snap. data which is our document otherwise it will say no such a document okay let's save this one and let's call this get file info inside this particular use effect okay make sure that if the parent. file ID is there then only call this particular method okay and save it now if I go back to our application open the inspect panel because we we are consoling the document and uh let me refresh it now and if you see we got the document okay inside document we have the all this information if you see the ID which is matching to this particular ID okay let me increase the size of this one so you very easy to uh look into this okay see now this uh file information we will save in one state okay so let me me close this one and here we'll Define one state called constant file info comma set file info or just call set file and file okay easy to recognize is equal to use State like this okay and once we have the file information we will just set it so set file and this particular thing we need to set it okay like this and save it that's all okay now obviously uh once we uh launch on this particular page it will save this file information inside this one okay perfect now guys uh because this video is getting little longer right I'm going to build this particular uh screen okay and in that particular screen I'm just going to display all the information which we have okay like this image the name of this particular file the size and everything okay and if you see we have the short URL okay this short URL we are already saving and we are already getting that one okay so if I go inside the console okay we already have this uh uh short URL see okay we will add the password uh and everything okay so guys try this uh out okay and if you face any issue uh let me know in the comment section I'm happy to help you or you can DM me and and obviously if you uh face any challenge while writing the code you can access my source code okay and so I will pause video here and then I will build this particular UI so now I added this two uh component okay one is to show the file information okay and here obviously I'm uh sending getting this file from here and another is file share form which contains the input uh form uh option to add the pass password and the email okay and these particular two components I added inside this page. JX of this uh file preview uh page okay so this is the way I added also um if you see here right I I added this back button or this kind of uh go to upload section with the help of this link okay and just saying go to upload and on this click I'm just redirecting to this particular route called SL upload okay and for this on password save right I added uh the on password method where whatever the password we are entering uh inside this input section right I'm passing this password back uh from this particular component to the pattern component and once this particular on password show is trigger I'm saving it inside this component okay so this component getting sorry this particular method is getting called now if I go back to our application uh right now if if you see right we got one error and it's saying invalid Source prop because we are using a external image URL okay this is the image URL for us and it's saying on next SL image host name this particular host name okay is not configured under image in your N.C config.js okay so what you need to do whenever you got such an error okay so this error will get every time when you are using uh the URL from some third party domains okay so in this case this is the domain copy this particular host name okay and then uh go to this next. config.js so if you see here we have the file called next. config.js and inside that we have this uh next. config okay here add the images and then inside that you have to add domains okay and inside that you have to provide the list of domain which you want to uh allow to display in your application so in this case is this particular domain so I save this one let's say save this one okay uh if you application did not start just stop the server and restart again okay so in this case my case is rning again okay so I'm not uh uh R again but just refresh the screen now and if you see we got the output now we are showing this beautiful image also on the right hand side it's showing the short URL okay right now it's getting cut in the half okay we will fix it out then we have option called enable password if I click on this one it giving option to add the password okay and here I added the input field of type password that's the reason you cannot save this password okay sorry you cannot see this password now on the click of save obviously we are going to save or update our document okay along with this new password and this we have option to send a email okay so what we going to do now let's go back to our application let me close this one okay so first thing is to fix this particular short URL input so let's go to this file share form okay and here if we have this input okay just give WID to be full okay and if you see now uh it's visible all this shot Ur is visible okay then now it's time to update the password right because inside our document right we have this password section but currently it's empty okay so in order to update it right let's go back to O sorry let's go back here okay here we need to update the password so in order to update right uh we already added the method okay called on password save and inside here we need to define the doc reference first okay obviously you will find this update documentation inside the Firebase document okay if you scroll down in this particular only you will see uh how to update the uh document as well okay but it's very easy so let's uh just write the code for that one is equal to Doc here we already find the D reference okay comma then you have to write the collection name okay so in this case is um uploaded file okay and then you have to give the document ID so in this case our document ID is the one okay so this particular parameters. file ID which is our document ID correct and uh this is our document reference is ready now write await so just make this as a sync and inside that you have write update sorry uh update doc okay obviously make sure that you are importing this one and then inside that we have to provide the doc reference and the value which you want to update so in this case you just want to update password and then give the actual the new value of the password in this case is this particular password I'm giving and that's all you are done okay now save this one obviously uh you cannot see any notification because we did not added any notification but we will see in the console so now let's go back here I will add some password okay so let's add password and let's click save okay so right now you don't see any output here but inside here inside our document if you see we added the password called tui1 123 and it's reflecting here okay if you want to change this password right just say different some password right um testing 1 2 3 I added okay and click save and now if you go back if you see the testing 1 2 3 is showing here okay so this is how easily you can add obviously I added some couple of things if you see right uh if password is empty this button is disabled until you added more than three characters okay also you need to add email and obviously we can also disable this one but right now we did not implement the logic behind the uh how to send the email okay we we will see later in this particular ular course also if I click on this go to upload okay sorry I click by mistakely but if I click on this go to upload button right it will redirect to this upload page again okay so I hope you understand this one everything okay how we implemented uh this preview page okay because this preview page we are going to use at different location as well for example in the file section we are going to uh uh show all the files which user uploaded okay and then once user click on the particular file we are going to redirect to this particular page again oh sorry um the file preview page okay to show that particular file uh information okay so guys uh I hope you understand this particular flow okay I know I designed this one and we don't have you can access that source code from the uh uh the link which is in the description okay and uh we'll see you in the next section so in this section we are going to implement the email integration so whenever user want to send an email uh with all this file detail right he can enter the email and on the click of the send email button our system need to send an email to that particular person okay the question is how to implement now okay so for that one uh we are going to use rent.com Okay so this recent is one of the best email service provider okay and it's a completely free okay again uh if you are new to this don't worry and this particular recent is very easy to integrate uh inside our nextjs application okay so first thing if you don't have an account create a new account okay and once you create the account you will launch on this particular page okay where you have option to create the API as well so obviously if you go to this uh API key or you can go to this your uh onboarding page and you will find this API key click on ADD API key and it will give you the new API key okay copy this API key and then uh inside. loal add this API key so I will add it here like this is equal to this particular API key okay next thing uh if you scroll down right this is the particular code but don't worry we are not going to use this one uh if you search on the internet the recent uh nextjs documentation you will launch on this documentation I will keep the link in the description so you can check it out so this particular documentation will help us uh to integrate uh uh step by step the email uh feature okay so first thing uh just create the API which we already did second to is to verify domain now if you have a domain okay and you want to use that domain to send an email you can just add that domain inside this particular section okay and if you go to this API key or domain section you can just add your new domain inside the AP if you see right this is the one which we created here if I want if you want to change the name so in this case if I want to change the tube guruji just change it and this will be a tube guruji okay so while we send the email okay and if you don't want to attach any domain you can send like Tu guruji theend.com okay so we'll see in the uh actual uh ex we will see the actual example okay so next uh once you verify domain and if you don't want to use it just skip that step then you have to install this particular dependency so copy it go to your uh terminal and just paste it here like this okay and install it once you install right now it's time to create this email template and the folder okay so what you can do uh you can create the email template with the name email template obviously you can create with any name uh inside the component folder so what I will do uh we have this component folder in the app let's create a new file and we'll call it as email- template. JS file inside that I will keep all of this code okay and we have we are using this JS right so we don't want this interface so I will remove this one like this and then save it so this is very basic uh template okay obviously uh we want to update it and I will teach you how to update the uh template as well but for now we will taste with that this uh default template and if you scroll down now it's time to create the API okay and if you see it it show the how to create the API in PR page router and if you are using App router how to create it now obviously we are using the app router right so we need to create the API inside this app folder /i/ s okay so obviously we have the app folder already so inside that we'll just copy this path and inside the app folder we will create that particular file so if I paste the result like this right it automatically create this uh files and uh uh P page as well okay and folder as well and now copy this particular line of code okay so make sure as we are using App router you have to copy this code and not the this one okay so make sure so copy this code paste it here as simple as that okay now if you see that this ml template the path is not matching so make sure you will update this path and it's in component SL email template okay and now error is gone now where you from where you want to send so here in this case I will change this to tube Guru G because we Chang the API uh name right if you remember so from this API key we change the name so that's name you can put it there and for testing uh let's I will give some my email address and then save it okay and we are just adding subject hello word and this particular react component with this first name is passing to this particular email template okay and here it will print the email template so if you see that this email template we are importing from the the the this uh file which we added this email template okay and then save it now our API as well as our email template is ready now let's test it out so if you have Postman okay or any API response request software you can use it in this case I'm using this request bin okay uh it will if you see right I have this Chrome extension so add that one and then uh you can just make this call so if you see we have HTTP local Lo 3,000 API SL send okay and make sure you will select this option called post and just click Send okay so once you send it if you see we got the 200 response and let's see the and if you see in the inbox right I got this email from the tube guruji and if You observe this email we are getting from the tube guruji at recent. day okay because we are not using our custom domain but that's fine and if you got right now we don't we don't have any um good template just is saying welcome John because that's what we have in the our template okay so next what we are going to do um we are going to um add this particular email uh API email API call inside our application and then we will pass some of the parameter which we need to uh send it into the email okay and obviously we going to uh add the email template as well so we will learn uh how to add the email template so that we can send it to the user now in order to make a API call for to send the email first let's install uh the exos okay which is the one of the best HTTP client so just just do npm I exos okay and with the help of that we will uh we will um add the AOS so that we can make the API call and once it installed let's write a API call request so inside the utls I create a new file and I can call it as a global api.js okay here uh let's write constant send email okay Arrow function and then make the exos call okay here we are making the post call so write post and then because we are we have the API in local so just write SL API SL send okay and obviously you have to uh send the uh body so here I will pass it as a data and inside the export default let's add the send email okay so that it will be accessible throughout the applications and you can make a call from anywhere now we have the uh send email button right uh if you go back here right if we have the send email button and uh on the click of that we need to send it okay so uh let's go to our uh dashboard here inside the routes we have the file preview and inside the component we have this um send email button right so let's write method constant send email okay and here let's make Global uh just access Global API file Global API so if it's not accessible just make sure to import so import Global API from and just give the path so in this case utl / Global API okay and now we have the global API do send email obviously we have to send data here okay but uh okay that's fine and then we have to make then because this is a promise and just we will write the console okay if it's successful we'll get some response now right now we don't have anything in the data so just Define some constant data and right now I keep empty and make sure to call this send email on this button click okay so on click method I will add it here okay and that's all and save it now let's go back to our application go to the inspect panel and let's open console okay so just click Send email because we just triggering that API okay and we are doing nothing for now here we got the response okay and in the inbox we also got this email perfect so our we are able to successfully trigger the email from this uh button click okay now let's add some uh data so inside data okay I will add some fields which I'm going to send uh to the API and from that one obviously we are going to attach this value to the template okay so I'm sending this all this information and I'm adding here okay obviously you can get this usern name from this uh clerk user okay and then save it inside this uh uh API route right we Al we also added um this post request okay and from this post request we get this G information okay so whatever the data we are passing uh from this particular um API endpoint we will get it here obviously with that uh particular response we are passing to this email template to attach all the value okay now it's time uh to get the or to create this uh email template okay so in order to create email template just uh search react email and inside the react email which is one of the best uh EMA uh uh library to create the or writing the emails okay so if you go on this side it's very easy to uh install go to the documentation and on this page you will see two option automatic setup and manual so we already have the nextjs application uh so click manual setup okay and just on the second right you need to install the this dependency because we already have the application so just copy this line of code go back to your application and paste it and install it okay then you can add the script to see actual view how your um web templ look like but I will skip this step for now and then you can directly use this um components to create the email okay and if you see these components are importing from this react email/ component okay but the question is how to write this big uh beautiful templates okay so you can use the existing example and just you can modify it so if you go on the left hand side you you will find this example section click on that one and you will find a bunch of different example okay you have this for example Nik receip example or you have uh confirmation page example and if you go here right you will find the source code so just need to copy the source code make update and you are done so right now we are going to use this L present login example and accounting to our need we will modify so what I will do I will uh go to this Source section okay and here you will see the all the code so first thing let's import this uh react email components so copy it and inside your email template select the email template and import this import statement first okay and save it then I will copy all this email templat so from this HTML to this starting tag to end tag I will copy it and then I will paste it here like this okay next you have to copy the Styles all the Styles as well and paste below this one okay perfect now our template is ready obviously if you see right it it uses some image okay so you can replace with this image with your actual image URL so I updated the URLs also uh let's update some of the things for example let's take 224 here I will say kurui at 2024 copyrights okay and you can just edit what whatever and however you want okay and ww. tui.com okay like this now obviously you can go ahead and change whatever the things you need but for now what I will do I will save this template and let's test out this template and how it looks okay so clean everything let's even though if you don't add right even though it will take because we are not passing any information yet and if I click on send if you see we got the uh successful response okay and in the uh email if you see this is how my template look likes okay I added this Banner right now obviously this is just a sample Tech but I'm I'm going to add actual value to this one okay so perfect so our template is working and it look beautiful than before and now let's go back to our uh API endpoint so I will go to this API route okay so over here right now we are passing the first name okay here you need to pass the actual value that we need to send it uh to our email template okay so first just I will uncomment this one and uh put the request over here and then this response I'm going to send it here like this okay so obviously in the email template go to the email template and here we'll get it response like this okay save this file and save this file as well so once we send it right uh you if you want to change the subject you can change the subject for example I will say uh someone in the sense or we can say because we know the the response we have the user full name so I will write response do full name okay and then we'll add some string uh send you or share the file with you I will write like this share file with you okay and let's make this optional and then inside the email template we have the response from the response uh now we can just change some value for example we'll update the value high and then here we have have the uh emails uh user email right for example if I have the user email like um let's say admin at tube guru.com okay and here we'll just need to get this information right so it's very easy so here what you have to do first you have to get the from the response do get the uh email to send okay that's the variable we sent okay just make sure so let me go to this uh file preview and inside that we have share form and this is the one we want email to send okay here we'll say do split and split at the at and we want the first letter so if I split it right um in the one first array it will say admin and second one it will show tub.com so we want admin so that's the reason I give zero El okay and you can make this optionals by chance you got error it will not stop our application then if you scroll down let's add the file name so here I will add the response dot let's add response dot um file name okay let's copy this because we want to add a lot of places so file size file type let's change to file type change this to file sites okay also uh make sure everything is good and on this button click as well uh I will wrap this okay on button C actually we want to redirect uh to other page but we'll do in moment but make sure everything is set up and let's save okay and let's try it now and here also I change the username okay make sure uh inside this route right it should be a username name and not the full name because we save it as a username okay now let's go back to application uh let me go here clean everything now here in this case you have to write the complete email okay so right now if you see that this email is not fully with so just update that one and click Send email so once you send email we got the response and in the data we got have successful response now if I see if you see here right we got the subject like get play share file with you this is High accounts because this is the uh email address like Accounts at Tu gurji then we have this user uh name and it's saying share file with you and it's showing all the file image size and type and everything okay now on the click to click here to download right here we need to navigate uh to the new tab where we are going to add the short URL link okay so try it out if you have face any issue obviously you can access from the source code but let's continue now here uh as we know in the last section we are able to send a uh email with a custom template and everything okay and if you see we have all the information okay also on the click here to download button right if I click on this one uh it's navigating me to this particular URL right now obviously uh this is our base URL we set it in env. loal file and then this particular path okay so if you see I added this uh f as a path inside the when we are saving the short URL okay and also in the template right when you want to click on that button it will navigate to that particular URL okay and this is the this is how you can add it so through the hge reference you have to add the URL okay and that is already in the documentation of the recent now the question is how to show the some data on this particular page okay so it's very simple you have to create this particular uh path or route inside your application okay so let's go back to our application and inside the root directory of this app folder okay I'm talking about the app folder here we will create a new folder and just we'll call it as F that's all okay inside that we'll create another folder because if you see right let me go back if you see this particular ID going to change every time okay and this need to be a dynamic okay so to make this Dynamic we as you know we need to make another folder and inside the curly braces we have to add that one okay so in this case we'll add a file ID and then inside that we'll create a page.js file okay and add the default template and here we can call it as a file view okay so let me paste like this and save it okay now let's test out this particular page and if you see now we got the page view okay so for this uh short URL as well we got some information okay sounds good correct so it means we are able to successfully uh open this page but we have one problem right now as we log into this Local Host application right that's why we are able to see but if I open this application and the user is not log to that particular URL it is redirected sign in and that is what we don't want it okay so the question is how to avoid this problem okay so the question is very simple as you know in the middle wear right uh let's go to this middle wear uh here right here similar like we added this API in point call as well because this API uh we were trying from outside so I I was added this one okay but you can remove it no issue but if you want to add the uh or you don't want to add the login uh to that particular screen right you can add it like uh slash F folder right but obviously the URL is dynamic right the ID is dynamic so in order to fix it you have to write in the the curly in the Square sorry circular bracket you have to write Dot and star okay so all the value after comes after F will be allow and will not added or you cannot uh you don't need access to the login screen okay this is how it work now save this one and if you did not uh your application did not start just restarted okay and now let's open this application let's me copy this and open it uh incognito window and if you see now I can able to access without loging to this particular application okay perfect so this is the URL we are going to share with your friends and family or through the email as well okay where user can view the uh particular file and all okay now uh let's go back to the um f file okay so here is the page.js and inside that now obviously we need to get first the params okay the parameter that we are going to access accept it here okay so here I will get the params and just print it out so in use effect here and here I will say console. log params and the the ID is file ID dot file ID and save it now it's saying that you are using so make this particular component as a use client so I will make this as a use client and save it and now okay so it's saying parent is not Define so this spelling is incorrect so par and it's work so let's see in the console and if you see we got this particular ID okay perfect now this ID we're going to use to F the data from the Firebase okay and you know the uh how to do it okay so what you need to do we already use this particular logic right um so let's go to routes and inside the file preview we have the code for that one okay so if you have see we have get file information I will copy as it is okay but before that obviously you need to uh initialize this fire store so let's copy this one okay so it's it's quite simple you just need to uh initialize this file store first and then you need to call get file information so it will return the file information so I will paste it here and then what I will do once we have the par. fill ID then only call this get file info okay and this is how it works obviously uh here we are saving the file you know one state so Define a state so I will call file set file is equal to use State okay and and now it's able to save the file and save everything okay now if you want to just uh check okay right now if you got we got one error it's saying that document is not defined because we did not import this all this method okay so get doc then I think and this doc as well okay and then save it let's test it out let's clean everything let's refresh it and just check with we okay and now if you see we got the result and if you see we have all the information here okay sounds good now let me go back here and here now uh we need to design the UI okay so what I will do I will create a component inside the file ID underscore components and inside that I create new um new file okay and we can call it as a file item. JS okay let add default template and then uh let make sure save this one and then import that template inside this um file ID so file item right so it's need to be item so we have to okay so it this name to be a capital actually let me make this Capital file file and file save this and let's try out import it okay make sure you have to import it so you have to import manual sometimes from component SL file item perfect and make sure you are able to see this text called file item okay perfect now obviously we need this in the center okay so what I will do uh let's add class name and inside that I will say background it be gray color and then height of screen WID to be full make it Flex then justify in the center okay and I want vertically Center so let's make item to be in the center and flex need to be column and we give gap of four okay you'll need to know once we design this and if you see right now it is in the center okay perfect so what I will do I'm going to uh design this file item uh component and then uh from there can uh I we will put all the file information into that file item okay so you can try it on your own I will just have my code and I will paste it here now here I will just paste the code and save it okay and once you save it this is how the page will look like okay also I want to add the logo so what I will do inside the page about this one okay I'm going to add link because I'm going to um add the the on click method on this one okay so once user click on this one it will go to this our host site okay so add that one then H reference okay for now I keep it empty and inside that I will add the image okay image source and this will be a SL logo. SVG okay and then let's give width and height to this one so we give width o sorry width of 150 and then height of 150 okay maybe we 100 and then save it and if you see this is how it looks obviously you can change this logo but if you click on this one right it's supposed to go on local host or on our base URL okay so what we can do you can just redirect to this base URL but we'll do it later on okay perfect so now our file item is ready okay the point is now uh we need to send our file in information here okay the actual file information right now it's dummy file information okay the value if you see here is hardcoded so we'll change it on so file information I'm sending to this file item component okay I just rename this file item to file item C uh so nothing different okay and here uh if you see right it's saying that tube guruji shared file with you so instead of that you have to give the username before that one let's accept the file here okay and also if the file is there then only show this particular component okay so instead of this one let's add the file dot username save this one and let's check it out if you see now game play is showing okay share the file with you file f file details below here is the beautiful icon I get it from this flat icon animation okay so you can get a lot of different type of bunch of free icons from here and then let's go back here so we have to use file name the f file type and the sides so here let me bring this down file. file name then here file do file size sorry file type and here file. file sides okay and this will be a by so I will write bytes and save it and if you see this is how it looks okay then the password section now here is thing if the password is there okay then only we have to show that input so what I will do I will U write a condition if file do password okay length is greater than three okay because we added the condition three then only show this input okay and here I will otherwise show null as simple as that Okay add the condition question mark and if it's there then only it will show the password fi okay so let's go here and if you see right now if you see the button is uh not enabled but but if I put the password right and if the passord is matches then only it will enable the button so that condition also we need to write it here okay so right now it's disabled and here we can write the condition if item dot sorry not item if file. password is matches with the entered password so obviously we need to save this password information so here I will say on change okay so e with the event and here um we'll save the password so obviously we need to mention the state here so constant um password set password is equal to your state like this okay now right um initially we'll keep it empty and here we'll just set the password set password and here we'll change add the value e. target. value okay now we have the password and here we will check if the file password is equal to the uh password okay so if you see if it matches then only uh enable the button okay so here it's not equal I say it's not equal to and save it okay now let's try it out so let's go to the console just make sure the password so we can try and check it out so this is our documentation the password is very long okay just copy this password now paste this password here and if you see it's enable if I remove any of this button right it's get uh disabled perfect so that is how it works okay and then on the download uh you can download you can add the download download logic or you can open the URL inside new window from there you can obviously user can download it okay so better to open in New URL uh to avoid any uh logical or some implementation issue so what I will do I will add on click event and on the click of that one I will say window. open okay and whatever the URL we have so if you see right in the Firebase right we have this file URL okay so just copy this one so file. file URL and then save it okay perfect now let's open this one our application and now if I click on download it will open new file with the image and obviously you can just download it as simple as that okay so so there is some quick fix with we need to do it okay so once we upload the any file right so select one file because we are pretty much completed all the workflow here okay and let me upload this particular file click open okay and just click upload so once uh it's uploaded right it will direct to this particular page okay and if you see it automatically coming to this page with the short URL you can enable the password if you want and you can even send to email okay but here if I click on this copy button right it's not actually copying this particular URL okay or you have to copy it manually so the question is how to fix it so let's go to this particular component uh which is the file share form which we created okay and here if you see we have this copy icon okay so on this one right on click method okay and here we have to uh copy the particular URL and we have to copy in the systems uh uh copy pad okay so it's very easy to do that you have to write Navigator okay dot clipboard if you see clipboard okay and Dot write text okay and here whatever text you want to put it there you can do it so in this case we want the file dot uh short URL short URL okay this one and then save it so also we need to inform user that okay you already copied okay so what I will do I will completely move this method in one method okay okay and I will I will call it as a on copy click okay and let's go here create a newator called on copy click like this and paste it here this one okay also we will show the text message so I will just copy the toast M because we already have the to message and here success and here we will say uh URL copied okay and success match everything let me say success copied only okay and let's make sure everything is okay you're calling this method let's save this one let's go back here and if I click on copy okay so nothing is happening right now let's see what's the issue so um let's refresh it once and let's try it down if I click copy and if you see we got the toast message and if I open try to open new window if you see it get copied and now it's showing it here okay but right now if you see it's copy the short URL okay because it's opening this one we don't want okay that that's the what we wanted right I think yeah yeah so my mistake so yes so this is short Ur now you can share with your friends and family okay and if you see it's open obviously if you go to the incognit window and it here also it will open like this okay perfect sounds good so this is the first thing that we fix it another thing uh uh let me go to this let me get the small window here and if you see right now if I open this one right we have option and if I click upload right it's supposed to close this particular sidebar we don't have option right we only have option once user click on any of this particular menu it will close this particular wi uh sidebar right so to fix this one let's go to this side navigation okay and here on the click of this particular um menu okay because right now we are just activating the index here I will write one more method and we can call it as a close Side Bar okay like this and uh obviously W this in a curly braces because you are calling multiple methods and then pass this method back to the parent component so here we'll initialize here like this and we'll pass back to this uh layout because we are using inside the layout right like this so here call this method and if you see right we need to just set the toggle on on when method this get trigger we just need to set toggle to false okay and same thing we have to do it here because obviously we don't need it actually but we can uh because we are calling this method so let's use that method here okay and save it and save here as well and let's test it out okay let's close this inspect panel open this one and click on upload and if you see the side navigation is gone okay perfect sounds good now this is third more important point that I already implemented because this video getting more lengthier okay and in the if I go to the file section you will see that I'm showing the all the number of files here okay so if you see whatever the files user uploaded it is showing with the name the type the size and you have option to view this particular file if I click on any of this file right it will open the file along with this image and short URL and everything okay so this is the one method I implemented here right now just provide the total number of files I made a card okay I did not provide the number of files here but you can provide that one okay and couple of more things you can integrate like upgrade right now we don't have anything in the upgrade right but in upgrade you want to uh show the pricing uh options right so here if you see right we have the pricing option so copy that one paste it there and that's all the same thing I implemented inside the my tube good courses website okay if I go to the upgrade uh obviously you need to log in first so let's log in here and then once you log in you'll see the option here okay so obviously you can just um uh add this from this uh hyper UI as well okay so this is how simple it is to integrate it in your application okay so guys uh that's all for this particular course and I hope you learn a lot of things okay the more important thing here to use the uh the workflow how we implemented then authentication then Firebase how to upload the file how to save the data how to share that with your friends and more important how to send an email to your friends with any email ID right uh and obviously everything we use in this particular course was completely free so I hope you like this video and if you like this video press like button uh Click Share buttons as well so share with your friends and family and guys if you did not subscribe to my channel please do subscribe and join my channel if you want all the project source code for free go to my tubu courses uh um website and here you can access all the uh courses for free okay just you can need you can join this Chann uh join this channel to get more uh uh pugs okay and if you want one to one help from me obviously buy this particular membership and then you'll I will connect with you on Instagram on on email okay also if you see if you want to learn anything course by course okay go into the any course and you will obviously have um GitHub access here okay so you can access the source code also you can learn by chapter by chapter okay if you see you can learn and you can keep a track of all my courses all the chapters so you will not lose whatever you are learning okay so everything is there in inside this particular courses so just buy the membership and you are good to go and you can access the all my source code okay everything um whatever you learn we uh learn in this particular uh course right the all the links in in the description you can access it anytime and guys see you in the next video thank you

Channel: TubeGuruji

Views: 21,217

Keywords: Build a Full-Stack File Sharing App with Next.js 13, File Sharing App using NextJs 13, NextJs Firebase, Firebase Email React NextJs, next.js 13 folder structure, next.js 13 tutorial, next.js tutorial, React.js, Tailwind CSS, Firebase, Clerk, File Sharing NextJs 13 App, Full Stack File Sharing App, FullStack NextJs App, NextJs Fullstack App, NextJs Tailwindcss Firebase App, Firebase NextJs, Firebase NextJs Tailwindcss, Tailwindcss NextJs, File Sharing Project

Id: jP28ISnh69g

Length: 207min 26sec (12446 seconds)

Published: Sun Dec 03 2023