Full Stack Next.js, Typescript, Firebase Tutorial – Google Drive Clone

Key Takeaways

welcome to this Hands-On course where you will learn how to create a Google Drive clone harnessing the power of nextjs typescript Tailwind CSS and fire Blas 9 dive deep into the Synergy of these Technologies as Nishant Singh guides you step by step to build a feature-rich responsive and scalable cloud storage application Nishant is a popular instructor on our Channel and I'm sure you'll learn a ton from this course hey guys Nishant so let's learn how to build a Google Drive clone using nextjs typescript Tailwind CSS and Firebase along with next o so first let's sign up to our application we will see GitHub sign up we are now signed in and the folder name is called root so we have the option to add a file or add a folder so let me do a folder first we can name this as folder three click create and we now have a folder three here so if I open this we will be on this page and we don't have any files or folder inside the folder three so we can add a file if I create or if I choose a file let me choose any file let's say this photos or any photo not the private but fine you will see a bar of progress here with with my image at the top it is the let's say my get image so if I add a picture it will be it will reflect in here we can also addite a folder so let's say nested folder click create and it will be in here so we can add Ned folder inside another folder open this we can add a file inside so let me let me add this file now so it will auto automatically upload it and once the file upload completes the image will be here that we can open in a new tab in Google Chrome see if I go back we don't have the image in here because they are private to the folder so if I come to the root we are having these files come to folder three we are having these files come to next folder we are having this file so if I go back in folder one we we have this folder one of next folder one and the image click it we have this files with my file folder basically what I want to say is we can create a folder inside a folder inside another folder and the same is true with files as well so let's learn how to build this application using the S Technologies so let me create or let me just first tell you what is that I have on screen so it is a thing called T3 stack which is basically a combination of nextjs with typescript along with some other things that I will show you now so if I open Terminal here and if I just do 1 second if I do npm create T3 app at theate latest enter let's name the app as Drive clone or 2.0 we can say Drive 2.0 enter we will use typescript so here are the things that I told you about like we have next to and authentication library then we have Tailwind we also have trpc and Prisma but we will not use them so okay let me just add Prisma in order to use next Ro just press enter now okay we don't need a Depot for now so let me skip it yes I want to done and can install so don't skip it and let me just zoom the screen we want import LSS like let's say at the rate okay it's not working so just okay we can say at the rate enter so it is installing this dependencies so we can wait for it meanwhile let me go over to this website called Tailwind it was there's a library called for Tailwind I don't remember the name so it is I think let me see Tailwind library for UI let me see yes this was Dy UI I forgot the name so I am sorry for that maybe not so this is the library that we will install later which is called d y basically it is a I can say rapper for Tailwind where we can simply use the Tailwind glasses here so so we can just go to I I can just go to customize component or components for example if you want to use a button for Tailwind we can simply use class of or class name of BTN or if I want colors like TR secondary or outlined we can use BN accent BN outline or rounded or full PX and whatnot so it's done now let me open the folder and we also have to do npx Prisma DB push to push the Prisma schema to the database then we can run npm run div and if I want to push the repo to GitHub we can simply push it so let me open this drive clone where it is Drive 2.0 so let me do npm I okay it's done so let me push the first let me run the application so we can say npm run Dev let me collapse this and it is on Local Host 3,000 let me open this so we need to go to the EnV file and here you will have Discord client ID and client secret so we should have a sign up button but it is not here so I think what we can do is just go to Source this page is called Pages app TSX H index. TSX yes so let me push the schema to Prisma using this command called npx Prisma D push it has been pushed so now let me go to this Library called Next o I think we have to create a button and so on things like that in order to use next so we have installed this if I go to package of package.json file you will see we will have Zod react next and this kind of stuff now let me also add this Library called dii using this command enter we also have to import this plugin into our module. exports in D.C config dots we have plugins we just need to add this here isi so close this and close the terminal close the terminal yes now if you open let me close the 33 app do G so what can we do let me open use or customize component so we can just copy any button let me copy the button come over to let's say what was the file name index. TSX I think the screen is screen was too big now it was too big now it's fine so let me clear the entire things from here like these things and this link the D as well and just add the button here just make this as class name not class so if I now check give it ready fret we will have the button from that is UI like this button so we can add different types of we can say button class names like BTN primary after BTM or BTN so we'll see this so let me rename this to sign in or what we can do is create a folder here called components in the source folder okay no not such we need we need a folder called components don't let scare don't don't let it scare you it is just a uh what can we say it is just a next application yes make a function component and then just add a button that we want to add like one two or three whatever so this should be class name and this thing that we are having bet and primary we'll receive it from props so we can say button class then let me copy the button class add it in here so we have to first replace the codes with back tck one second yes also wrap it in a what is it clyra and then he use this as a variable using this but we have to create a instance or prop so make a folder head called instance or maybe in sorry not instance what I am typing interface sorry then let me make simple index. TSX file only one file where we will have all the interfaces so let's say we have a interface called button interface or just say button so in the button we are having button class which is a if you hover this it is not giving us any type so if I come over here then import this button as common component using at theate component button and we can just replace this button here so we have to pass the thing here called BR class BN class or yes so we can just make it a string so yes this will be a string so we have to add this in the interface that this is the class or of button class it is a string because we're passing a string here so we have to pass let's say Bain primary this class now we have to just add as a string we have added it now let me use this prop or interface in here like this save this as well and we will have this we can also pass a text or say title title will be let's say sign up so we have to pass title in here as well so as props I mean get it here then replace one with title so that it will become or it will it becomes Dynamic then we have to add title in here as well which is a string also like this save all these files and if I come to the app we will see a button called sign up which is from Tailwind now if I check this next o we have installed it we have to add the provider in the next o file which is in the O so come to API we have next o here we are having no things or nothing so let me export this const and remove one second export default next o Au options so we have Au options say this the thing is what is individual declaration in merge declaration blah blah blah export cons export default why don't I just copy the entire code base and paste it yes so okay the thing is we are previously we were importing Au options but now we need geta provider in order to add it yes I mean we have to change the inputs here we are having G provider with client Iden client secret so if I go to GitHub now let me go to GitHub and just go to settings here where the settings okay where is it where do I find settings in here yes it is here settings go to developer settings on the left panel here we will have o o o apps let me create a new O app called let's say Drive 2.0 let's add the homepage URL which is this Local Host 3,000 and such add it we can say this is a drive clone we need call back URL to just paste the GitHub I mean this URL called Local Host 3,000 click registered application we will have client ID here so we can just copy C ID and if you see that we we are having the GitHub ID in this process. file here so it is Discord basically not GitHub so let me first add the ID and replace this with GitHub client ID or GitHub ID so we can do this then the second thing is GitHub secret so just add this one here fine so now if I just come in the gith or section we need to generate a new client secret so click the button here called generate a new client secret let me give my password please don't see it confirm this and we are having the secret here so let me copy the secret and now paste this in the EnV file save this and we need to what is the issue here uh type string or undefined and is not assignable to type of string come to interface create an interface here called let's say gabo so in this let me add client ID and client secret the both are strings so client ID next is client secret this will be a string as well save them both now this type or the interface will be in the GitHub provider in angle brackets like this so we have initialized geta provider now the next step in order to use it is to if I come here in the where file app do TSX we are having component page props and such these things okay component is wrapped in the syst provider fine if I come all all the way down so we need to use use session let me try to import this things in the file called pages in here use session sign in and sign out from next s react okay the next step is we need to destructure data and session from this use session and so we have a button here we have a button here yes on click the button we can simply sign in or sign out so let me try this let me just hook this button on this button component the button will receive let me close this the button will receive one more prop called onclick and the when the button is on clicked the function that we are having Here sign in will run save this we need to add type here which will be a function which return return type of void so we can just try this and see what happens now if I click sign up we are seeing this page yes sign in with GitHub click this let me authorize this nan6 app from dive 2.0 but I don't think we have subscribed so what I can do is just do a console look of the data one second not data session we can just go to console in here we are having an object with the username image and the name as well so the image is I think from GitHub this image that I am having so we can use that okay it expires on this time stamp that I cannot read properly so what we can do if session exists let me do it here I mean if session is here it means we cannot log in again we can just log out so let me not put this here let me use session here so we can simply do if s exists in this case we will use a button for sign out not sign in so let me add a button here another one here and then close it or delete this so this should be sign up sorry sign not sign in sign out and this will be sign up so let me just do sign out in here and this will be sign up if session is true or if is having some data this will be shown else this will be shown now we can remove the console log from here and click sign out so immediately we will see sign up button here now click it again we can click sign in with GitHub and we are now signed in let also have the username so if I bring my session in the console so we are having an object here from the what is this next thought where we have the image and the name so let me remove or just here let me add welcome let me add the name so the name will be let's say session do username yes now we'll see welcome Nishant Kumar here but this is not looking as a drive so we can just command this out for now and let me move the button at the top right here that where I am having the curser let me close what settings so let me move that button at the top what we can do create one second what I'm thinking is so let me create or we need to move the button that fine but let me create a component first before that let me create a folder called common let moove the button in the common folder that we know that button is a folder that or button is a component that can be used at different places so we have done that now let me create a folder or file in the uh components called we can say home. TSX make it a functional component but will it clash with index I guess not let's see save home let me import the home component in the pages so import home from components home I think it is clashing so we can just make this as home component now import this from this and let me render it out in this div save and they will see home let me move session in here in the home component so we need these things which are data and session from you session so let me have them here or let me create a hook for this a common or a custom hook let me make a folder called hooks in here we can say use session. TSX not t not tsz TSX so what we need in here we need this things called U session sign in and sign out add them we need data and this session also add it but we need to make a function so export const use session okay we need another function sorry so this is already defined from the next use session so we can say what we can say use fetch session okay let's change the name to this in here what do we need we need these things okay just save this and return this div which is the button so we need the button here so we can say import button from this route in the use session now or all of the errors are now going on B so let me remove the entire div in here let me import use fetch session from use session in the hooks folder then return or let me do this we need the use session so let me destructure let's say this what can we call this jsx okay I guess let me just move them in here in the home and just have sign out and sign in function in here remove U session so we also need the button so just cut it from here and add the button in here so we need the session from here so let me return only the session like this so this is returning the session as an OP object so we have to D structure it we let session equals to use fetch session and now everything will work out so as I said that we have to make this at the very top right so give it a class name called let's say uh or BTN but we need to create a styling file so why don't we install SAS npm i s SS it's done now let me create a file here called or one thing I have done wrong is make a folder first called home let me move the home to TSX in the home folder we need to import updates so do this save and save here as well so here we don't need this sessions let me make it clear and this as well we don't need them so we have installed SAS make a file here called index. t SX and in the pages we are having home and home so let's change that just rename this as index. TSX okay this should be not TSX this should be scss now home should be index. TSX because we don't need to add duplicate Imports like this like home slome we can just have home and home will render the index file now in the let me put this CSS or scss file in the home so import index. scss now we need to use all button class name in the index. scss so this should be okay what is the problem Global CSS cannot be imported in the files other than custom CSS okay I think this CS I forgot to mention that this nextjs uses o sorry it uses uh CSS module so if I come to index. TSX sorry app. TSX we are having this thing called okay we don't have it here in the global. CSS we are having come to index so let's say that we are having class names here okay okay what we have to do just come to this and let me make this as o BTN now now copy this come to the homepage so we will not use class names like this we can do what do Styles dot this Orban so we have to import Styles so where do I import it from let me check Pages app. TSX let me check any Styles file like global. CSS we are having these kind of of things so I am forgetting how do this how does this work let me check on Google so what we have to do is let me just remove this index import name the file to let's say home do module. scss now let me import the file here so we will do import Styles styes from from this file now we will have no errors fine because this is how we do styling in nextjs using modules so in the OR BN let me give a position of absolute top 20 PX right 20 PX as well so that it sticks on the this position so we will have sign on button but we will not show it because we have to show the image of the user so if I just do a console.log of session we can have the image in here that I previously mentioned so it is having user so we can say do user do image so it will give it the link of the image so we can use that so let me turn this into an image tag first comment it out and then make a image so SCE which will be equal to this session do user. image so we can just add them user does not exist type of never what is this thing here so we will have the image okay sign out okay we have done it wrong this should be not here this should be in here sorry okay save string null undefined is is not assignable to string undefined okay we need to create a type for this image so or we can just make as string here it will go away simple now we have this big image so let's shorten it give it a class name here called styles do proile IMG or image now we can use this profile IMG in here sorry this only width let's make 100 pixels then border radius 50% to make it round it like this let me also throw cursor as pointer fine now this should be not in a home page we can just add them in a component for top part so a folder called top bar in here make a file called index do TSX and one for the home module I mean The Styling module so we can say top bar do module do scss now let me shift these things this entire div in here but why don't I shift entire home function in here just change the name of of Home component to top bar so we don't okay we need sign out let me just leave it now let me import this component in here the Stop Bar first let me name the styles of the class name then import the uh what is it the top bar import top bar from this component and simply then render it out here like this let me remove console log the button and just the button so top bar is here and we have a problem here cannot resolve home. mod scss so this should be top bar modu scss in the top bar we can just have these things paste Let me refresh cannot resolve home. module Doss in the okay let me check in the top bar here okay so we have to save it as well save and it will be fine so remove console log and if I click the home we should sign out so in the image we can say on click sign out okay what is this issue let me just have an call back function I think yes so if I click it we will be signed out this should a function just not a click it now we are signed up or signed out click it again and we can sign in using GitHub so basically you can use GitHub or let's say Facebook or Google anything let me come to next R here we'll have let's say get started we can have anything here we like if I come one second if I come to Providers we have all these things like apple atlassian o zero battle net and whatnot so we can have Google here as well we just need to have Google client ID and secret from I think uh gcd Google client developer tools and whatever it is so we have done this perfect let me close the things that we don't need like interface top bar module we don't need for now also closes so we do need the home and this we don't need so remove use fetch session we have pages in the pages we are having the home component in the home we are having top bar for now so what else we can do now here is create the body for adding files in the fire store yeah so let's create a component for this thing what thing like uploading a file or a folder first so in the pages we have the home page called index which is rendering the home component F so in the components let me make a folder called we can say upload files let make an index. TSX file in here a functional component let's make the name as upload files but okay let me also get it in the home dot uh home component so we can say import home from 1 second what I'm doing this upload files I mean from upload files then render it here so I will see upload files here fine now we need to come to this file and just make a I mean folder first make a file for this styling so upload do module dot scss so import this end the and first okay let me know styles from this one now just add a class here and we can say Styles dot what should we name this let's say upload me in here let me come and just do margin zero this will not work so I guess let me come to Styles Global okay what else or where else do we have stylings so we need to reset all the Styles so we can just say body margin zero okay this is coming in the center we it in the not at the center we can have it like at the top so what we can do for that is we have styles then we have the one second where else do we have styles what if I remove these things it will be like this okay what if frame of Tailwind base no Tailwind utilities yes now it's fine so remove Tailwind utilities because this will just remove the class names for margin and part padding so remove this as well because we don't need that so here we also didn't need margin or maybe we need 20 pixels in order to spread it like here so what we can do is we have upload files let me add a button here so okay if I if I add a button yes let's add a button so we can import button from common button just render it in here this button will take a title so let's say add a file and one more it was saying one more property let me over and see it is the class name so let me come to interface and make the button class as optional Ono the on click event yes so we have add a file also let me add the class name so if I come to this let me try bet primary again let's just make this as our custom button class so we can say class name equals to this okay what is the name it is BN class fine save and it is now in purple we have add a file one more we need for a folder so we can say add a folder or basically create a folder we need these things let me add a margin among them so we can say M2 here as well no it is not working so I guess make P2 padding no still not working so we are having B class that is just taking okay in the BN Primary in the button let me come to button we have the button okay what if I add what is the key for margin here so let me just check button we have here we are having all the buttons fine if I come down invo success and so on we have responsive button we have white button we have these kind of things but we need to check how to give margin among them so let's search anywhere what is the key for margin in the layout and neography so if I come down somewhere to find margin if I search margin will I get it so this should be M2 like this should be M3 or M to but it is not working so let me make a file here for button so this should be first let me make a folder for button move this inside yes and now make a file for scss so button dot module do scss so in here first let me import this import uh styles from this file now just have the Styles and basically we can first do Styles dot some class name in here so we can say common let me add margin as say 20 pixels so we can use the common BN in here like this but no not this common BN but the thing is this is uh okay number is not assignable type of string common B this should be like this in camel case now we can just remove this add this and if I cut this and paste it inside of this string like here this should work but it is not so let me check here sty upload menu okay if I remove the entire thing in here add this it is working what if I add one more curly bracket and add it here yes it is working so it is working so save it here and yes we have 20 margin add a file create a folder let me just change the button for folder so if I come here we have all the buttons here so let me choose this outline but for primary so if I CH if I check this we have PN outline for outlined button so I can just pass it in here and if I check it is now outlined but the color is not properly visible on black so I guess what can we do if I come down sorry success let me try this one called success BTN success so just add them it is now here add a file add a folder so the thing is this is looking good in here so why don't I remove B primary add this here remove this from here as well to have have this button which is looking very good we have add a file and uh create a folder functions so what should happen is if I add a file the file should be outside any folder that should be visible in the like in the homepage so in the fire store database we should have the file like directly uploaded with the link so so in order to upload a file we need a function from fire store so if I let me just initialize Firebase for now because I have not done that so if I just make a folder and Source called Firebase config do TSX and now come to settings in the app project settings come down let me install Firebase let me just install this meanwhile grab this things and paste it here so we have to remove the comments yes let me wait it for let let's wait for it to finish meanwhile I can have a sip of water H2O why it is taking so much time let me create two variables called storage equals to get storage let me delete this first let me boot get storage okay from Firebase SL storage and the thing we have to import is get storage I guess now let me close this one not collapse this close this so get storage app by the way not export storage export con storage it is a variable that we have to export we have to export this as well app now the third thing we need is the database export const database equals to get fire store we need to import this as well I don't know automatic Imports are not working fired store no if I just add it Firebase SL storage and the thing is they should be not storage sorry Firebase SL fired store yes get fire store should be here while we pass the credentials this credentials now in the let's say in the pages let me import this app or do we need to import it I don't think we need to import it let me now come to the server folder in the server we have dbts also O.S so I don't think we need these things because we are not using Prisma so let me create a file here called fir store. TSX let me close the O let me close button interface upload module homepage or in here let me import things from the Firebase config file which is storage app and database import I mean import storage from Firebase config also app also what is the name of the database instance it is database so import these things now we need a function here called export const default just let me make the function export default uh what should we export const let's say fire store this will take request and response sorry request comma response so we need to add the type here so if I check db. we don't don't have anything in here if I check .ts we need to have like some authentication things here like I mean the what can we say the request and response things so it is not here it is just for o okay in the server we are having wait a second server pages okay in the sorry I'm doing it I think wrong this file should be not should not be here because it is for authentication only just come to API just come to here still we don't have anything in here so okay o i mean API let me make a folder here called fir store. TSX TSX let me add the things here we need to have just do request let's say do name thing is we have to add type of the request so what can we do in that case what will be the type of request or response we need to import two things here for the type of request and response which is next API request comma next API response so in the the next API request we have to add type for the request and the response will be in the place of R so the name does not exist so we can just close it or remove it we don't need to console this we just need to export the function defaulty so we can say export default this does not work like this so we can remove export keyword from here and at the bottom we can say export default fir store so let me just do a RDS do status of 200 and Dot we can say Json and we will return let's say text as hello VA so if I just do in the browser Local Host 3000 SL API slash this fire store not fire at store I mean uh what can we say what is the APR out here yes it is fire at store so we can say fire store we will see the text are called hello world if I zoom this you can see it as well so this is how we can create API in XJ let me come over to the this component called upload files let me make a function here called upload file let me make a state here called file set file equals to use State use State we can have a object because that's what we have the format of the fight so if I click this button we can have on click event and we can simply set the file so it will return us a param so we can simply set event. Target it will add it now this is inside the file we have to destruct destructure this let's say files okay one second in let files equals to this file but if I just let me just do a conso of this first one second I am doing it wrong this should not work like this because what should happen is if I click the button we should open a file choosing option so we have to add that also let me add an input in here input and it will be type of file this is what we have here do we have file input types here so if I search input we will have text input so if I search File input we can have these things like we can use them as well so what should happen is if I click add a file we should see one of these let me get the jsx for this and it place this we have choose a file but this should should be let's say after the button in here this will be only visible when the or one or some state is true so what we can do is create a state here called uh is file visible visible set file visible equals to use state so it should be false now when we click the button this button this function or this yes this function called set file visible will turn to negation so on click we can just do set file visible to negate this file visible now we have doing we are doing this here so we can just add this input as a condition if this is true only show the input else show nothing one second what is wrong input one second this should have a question mark here now it's fine click it it is visible get again it is hidden now or what we can do is this yes so if I choose a file one second what happened if I chose a file we should run this function called upload file so so one second when we do on change here on change in here this will just set the file as event. target. files Z we can have event in here save again this is causing some issues so we can say as string no I think not here outside no will not work what is the issue here if I hover this it is null so I think we should not use string we should use an object no still not fine possi it is null okay set file if I remove files from here it is perfectly working so I guess let me now okay one second I think what we can do is not have the set file in here just have this upload file passing the event at the top in the upload file function now we can just restructure the files from here so we can s let equals to event. Target and here we can have files the D structured property what we can do this event we have to add type in here we can have files variable inside we can store event. target. files. Z index now let's check it up open the inspect element if I just choose a file let me choose any file in the folder called photos let's say this file we're getting its data successfully we have to send this data to Firebase storage so to do that what we can do is create a function basically we will not create API for this because it is stough to send a image through a response that we can use in Firebase storage so basically it's not tough it is I think impossible so make a file or a folder here called API in this we can make a file called let's say file upload. TSX let me grab this function or not a function let me pick first let me make a function called export const file upload which will be an aror function so we need these things from fire store not fire store Firebase so let me import them at the top so we need storage app and database basically I think think we don't need database for now so let me just grab these things add them here okay we need to uncomment this stuff so we need a file so we will get the file from params so let me make the file type as any here because who will type this stuff and also this should be console log of download URL fine now we have to call this file upload function here so we can just do import file upload from this route pass the files in here so when we pass the files basically it is let's say let make this as file we pass a single file while we choose it okay let me close this so yes which we will choose a file here and it will come up in the console after it gets uploaded so let me open the console choose a file let me choose this file here we are seeing the percentage of the files 600 and then we have the ardl so as soon as we have the ardl we can store that in the fire store so to do that we need functions from fire store so we can make fire store. jsx sorry TSX not jsx in here let me export a function export con we can say add files which will be an aror function so we can just do import uh we can say fire base no I think it is the database from the Firebase config so we have this let me also import a few things called or which are collection and add dog this thing these two things so we have collection and add dog so collection will be to create a collection for our database so we can select uh we can say files equals to collection and we will just just have the database and the collection name so collection is basically a table for our data which is the files files table so in the add files we can have ADD doc then we have to pass files and our data so our data will be image link so we can say image link as image link that we will get from from par so we can just ructure it from here this will be a string to make it a string let me have this in a try catch in order to avoid errors so just let me cut this add it here and have a cat Block in order to have if we have issues this will show up in the console err now we are going to add sorry we have to call the function in the function of file upload so let me import it and by the way we don't need app and database in here so remove them so yes we need import add files from API I mean Pages slash one second yes I think this is the one API wait it's not in the pages so we have to change it so at the rate SL API SL fired store so okay this should be uh not a default input now when we file upload when the file upload completes we will call the function while passing this image link so it will run and upload the image in the fire store database so let me give it a try add a file let me choose this let me upload any file let's say this file let me open the console for the percentage it is opening I mean coming here we have till 100 and now if I check fire store we should see the image Link in here for the image that we just approached see we are getting it here now the next thing we need is to like add a blogas bar so let me go to on design again components sech for Progress we can also come to dyy and search if do we have any progress themed component here so where do I search it here I guess so progress I think yes we have it so let me create a component for progress in the common folder I don't think we have installed art design so I don't know why I opened it so so in the common we can make a folder I guess that will be for progress in the progress let me make a file called index. TSX and one for the module if we need so we can say progress module. scss make a functional component in here make this as common progress so we can let me choose this green green one accent color let me copy any one of the what is happening I am not able to copy this let me copy the entire block paste it basically we will remove the others and we will have only one the value is minimum which is zero and the maximum is 100 let me just call common progress somewhere here in the upload files so we have the button and let me close this so let me have it before or after this line of choose a file so we can just have common progress in here yes we are seeing this but the thing is the width is too big for this so in this div let me have a Styles here first so import styles from this file progress. module. scss in the div we can give it a class name of stles do progress main copy this let me come over here progress main this should be width of let's say 80% or something maybe 90 yes 90 is fine let me add a margin top of 20 PX I think that that looks fine to me so we need to hide the progress initially so let me just create a state for the progress here const progress set progress equals to I mean you state say zero initial value we have to pass set progress to a file upload function so pass it let me come to file upload function get this seter function add the type as function now this function of set press will be in here when we are calculating our progress so do that now we have the progress now we need to hide this progress bar when it is zero so if it is zero show nothing else show this to pass progress for the value of the progress so this progress will come up here as props and we can simply sign progress as this so it is initially like zero so I think we don't need to hide it we can just have it here and see okay it will be like this so basically hide it all okay fine so we need to add a prop type from the interface so we can say let me come over here and say interface progress so the progress prop is called just the prog this will be a number now we can just copy the prog interface and add it in here like this now let me add a file let's say this one so we are seeing the progress bar which means file is getting uploaded and once it reaches 100 we have to hide it so to hide it we can just do this what do we need to hide it if I check so if it reaches 100 we have to hide so we can say if progress zero or progress equals to 100 it will be hidden automatically so we can try this again this file it is getting uploaded this looks cool by the way very cool it's uploaded and the progress has been hidden and we can see the image in here fine so the image is here the files were uploading now we can show the files in the homepage in here I mean so we can close progress come to upload files one second no not here come to home index we have upload files so we can show it in here like make a component here called or first let me create it in the component so let me make it as show files one index we need and one for module CSS so we can say so files dot module do scss so make this a functional component show files import the module of CSS or scss import styles from this file now let me import this here so we can say show files you will see this in here now we need a function to get all the files so we can make export const get files we have the files in here we need function called on Snapshot okay so basically I should not have this here let me create a hook for this a custom H so because the on on Snapchat function is not a API function we can just call it in our client site so we can say use or let's say fetch we can say files. TSX here so just like we have it here we can make a function to export const fch files which will be an aror function in here we can have on Snapshot from fire store we have to pass our reference the reference is let's say the files so we can just let me close the files that we don't need like file upload no we don't we we we need that need that we don't need use session okay we have to add it here as this we need section one sec not here sorry in here we need the files getting passed in here you also need collection from fire store so add it this will take a second bam which is a response and this database is not also here so let me get it from Firebase config let me also make a state here so in I mean const say file list set file list equals to use State we can just have an array okay we need a use effect hook in here also so we cannot afford to run it every time we Mount the component we need to destroy this so we can return on Snapshot and these things also let me add the dependency array so we can call fet files in the not file upload in this file called show files import fetch files from this so let me just let me close this as well let me return something called like this file list so we can just have let file list equals to fetch files fine it should be empty so if I just console. log this fetch files it will be empty because we are not setting it the array is empty so let me open the console if I refresh we are getting a query snapshot inside we have docs so let me do response do docs then let me map through this item can return let me D structure the item. data and also have an ID prop property mean I mean which is the item. ID now we'll see the data in here okay so if I just move this outside let's see what happens it will still work I don't know why it was not working before but if it is working it's fine set this in here set file list okay that is the issue this is having an image link and the ID in this State here so make an object let me add image link which is an UT string comma ID also an UT string okay save this this should work but it is not like what is the issue here ID string this is not assignable to set State action and blah blah yes so what we can do is come to interface make an interface here called we can say array array type this we need to make and and in here just set it to UT so let me now come to this use State have a cly bracket and add the array type in here this will fix this issue so the file list that we're getting in here in the div let me make a function for mapping so file L do map say file but it is still having an issue array type does not have the map this is difficult for me so let me just proceed with this so you can say P or not a p an image tag first make a div and just have this like what is this an image okay we need an image tag sorry let me have an image tag from in here from Tailwind search for let's say image we have Avatar no we don't need Avatar we need picture if do we have image I guess not let me check no we don't have it so basically just add an image source and add file dot what is the property image link now gave this a class name of basically styles do image link like let me come to this show files module so save this as well and we can see the files but we are not yes we can see the files here perfect now we need height the same because we want to make them as a square so make 200 and then object fit contain not contain cover fine this will be in squares like this images or basically files what about this issue property map does not exist in type of array type so if I come to interface add a map and make it a function what will happen Okay this is working but I guess we need to add a type in here as well so basically this is an object so make it as an object with the image Link in here I guess so yes perfect so we have done this let me now come to or give this Diva class name of we can say Styles dot we can say we can say we can say files grid so in here we can say files grid display of grid grid template columns Auto auto and auto to show three in one row so we can make this as 300 I guess let me also add the width here no not width here should be add width width should be 70% what about this so we can just add a gap pile as well 20 PX between them okay not 20 let's say 30 let me increase the with to 80% what about 90 no this will not work basically we need to arrange them in a center so we can just have specify content Center okay we have to give the width as 100 then now they are in the center fine perfect if I add one more Auto it means four Ino so this is the image that we are having here images but this should not be images this should be like we should not see a like a image here we have to make a div so make a div with the class name of files I mean this what is this styles do files let me commment this and let me style the files here this should be height 300 and width 300 as well background color let's say accent or whatever this color is so if I just come to what font no this is the font so so so we can we can have colors here do we yes we have BG accent so we can use this so what is the code for this if I check accent color we have hsl then this okay we don't have the color code for this so we can just add them in here as well so just do uh template lit and BG accent let me wrap this entire thing in in like a we can say template literal make this as a like what is it make this as a string now let me have this and add it in here now it will be working let meit F font key so we don't need background color here so remove it so okay we are seeing this files with the BG accent okay but if I add background color as as let's say red this will be visible so we're not seeing anything because I think the color is not matching with this so we can try BG green this let's see no not working so I guess we need to add some colors from our own custom we can say like we have accent color we need to have the what I can say the background color of this so accent color code Tailwind okay we have this F perfect let me add a background color and add this color here we are seeing this but it is not like it's very bad so let me just have Excel or accent black what is this we just have accent or BG accent let me try this one I think this is fine now we need a we need one folder link or file link here so so whenever we click it yes so we need to make the cuts pointer so yes whenever we click the file or this link or this we can say the card we should open the file in a new tab or download it so let make the Border as rounded so border 10 PS not border border radius so yes we need a rounded sorry not rounded we need a part file what I'm saying we need a file icon so do we have icons in here no I think we need to install some Library so make it let's say add react icons in here simple save it so we need icon for file so search it in here so we need we need we need let's say we can add or use this one AI file or AI fill file text so come to show files import the icon from react icons SL AI then render it out here in this div now let me check we are seeing the icon but it is very small so make size as say 40 maybe 70 or 80 make it 80 it's not bigger now we have to center it so in the styles. files we can just do display of flex justify content enter align items now they are in the center it is in the center correct yes so when we click any file here we should be opening a new tab with the link so the link is simply this let me commment this file. image link so make a function here const open file this will receive a let's say we can say a parameter called file link which will be a string we will use window. open and string I mean this file link and in a new tab so we can say what do we have to open it a new it open it in a new tab Target okay let me just first hook this up with the I with this diff so on click open file and we need to pass this as a call back with the uh file. image link save it click it yes so it is opening in the new tab already so we don't to we don't need to worry about that so it's working we can also show the file name in here but we don't have the file name in the fire store so let me add it so we are saying or we are sending the file to the file upload so when second where are we okay where are we doing this so we have files in here file upload we are having here okay add files it is taking downlo URL where is ADD file it is here let me add add image name so the image name we have to pass from somewhere so we have the files or the file here let me just open it again the file pro do this so we have file so we can just also share file do name for the file name so we have to get the name here or we can say image name as a string then pass it here sa the both files and we can try again let me just delete the entire collection for now let me create a file this one it is getting uploaded and once it is done you will see the file in here now as I said that I am need to add the nam