Full Stack Pinterest clone : Next Js 13, React js, NextAuth, Tailwind css, Firebase

hey there welcome back to TU guu Channel today we are going to develop this beautiful Pinterest clone application and this application is completely responsive and user friendly also we will learn a lot of Technology this app completely built on nextjs 13 react telin CSS Firebase next o and so on so watch this complete video and let's let me walk through this application first and then we'll talk about the technology which we are going to use uh in this particular course so if you see right uh once you land on this page you will see this beautiful grid option where you can open any of the pins which you want to see right for example if I open this particular pin you will see the beautiful view right you can even open the URL along with this one okay also if you want to create a new um post right obviously you have to login First so with the help of Google authentication we add the login uh functionality and once you log in you you can able to access your profiles pin as well right here you will create a new pins you will have option to upload image add all the details required for this particular post also you can go to a profile and here you will see all your pins which you created before okay sounds cool right so this complete application we are going to build with the help of nextjs 13 and react and with the help of TN CSS we are going to style this application and we store this all the data on Firebase fire store and the storage which is completely free okay you will not find the course like this anywhere on the internet so watch this complete video and we'll see you in next so to build this Pinterest loone application we are going to use a react framework which is the next CH and current is the most popular framework in the market and we are going to use next js13 uh in this course then we are going to use Firebase to store the data uh and the images as well okay so Firebase is completely free to use and we are going to use with the nextjs and you will not find this course anywhere on the internet so watch that one then for styling H we are going to use telin CSS which is the one of the best I framework in the market right now okay and if you don't know how to use tells don't worry I'm going to teach you everything okay then for the authentication we want to use next .js which is the best authentication for nextjs and uh how to use next or with the next js13 I'm going to teach you in this particular course okay and last but not the least we going to use the react icon I will teach you how to use this beautiful react icons okay so you don't need to save any assets for you with the help of react icons you can Implement a bunch of different icons in your application okay so guys watch this complete video and if you did not subscribe to my Channel please subscribe to my channel and please share this video with your friends family watch complete video and if you have any doubt any question put in the comment section and the source code of this particular one is in the uh description so you can check it out anytime but try this Pinterest clone and is quite interesting and various Technologies you will learn in this particular course so watch it and uh without doing any further delay let's begin so in this particular tutorial we are going to use nextjs 13 okay and if you don't know about the nextjs uh 13 or nextjs don't worry we will learn it everything from the scratch if you go to the official website of NEX js. org you will find this particular command in order to create the project okay so just copy this command and go to a project folder where you want to create the project then open the CMD and then just type the command which you pasted okay like this so npm create D next- app at the latest okay at the latest will help you to create a next JS uh 13 application along with use some option to select manually if I click enter then it will ask the project name so in in this case we will pinest FL okay I will do like this and then it will ask you to use the typescript with this project right we are going to use typescript for this project then uh will you like to use es link I will say no then like to use telin CSS this project CS so you don't need to manually add the telin CSS with this right this uh particular command uh to create the next application at the latest will help you to install tmin CSS as well okay say yes and it's saying you would like to use Source directory with this project say no and use app router say yes and we like to customize the default import Al so no okay now if you see right this all the things are getting uh these are the dependency getting installed for the application so we'll wait for a few seconds a few minutes later now our project is uh created okay now let's go to a project by typing CD and the name of the project so in this case is Pinterest okay and then open the vs code right using the command codespace do okay and with the help of that one we open our project in vs code along with all the files okay perfect now let's me explain the uh project structure okay so here very first we have this app folder right and inside the app folder we have Global CSS layout. TSX and txx txx is stand for the typescript XML okay now if you know the next JS okay so before it was _ app.js instead of layout. TSX okay otherwise it's quite similar okay but uh when we created the project uh we will learn more about that one okay so in L uh. txx okay you will see you will see this metadata and then you will see this body tag and inside the body tag we have children okay so children nothing but the page we are going to render in between that one okay uh and there's nothing else okay when we are uh start developing the project then you'll learn much better okay next we have page. TSX which is our default page okay right now and the routing is quite easy you don't need to do any configuration for that one so we will learn that one as well after that we have node modules okay we will ignore that part then we have public folder where we will store all our assets like image video music whatever we want to store we will store in public folder okay then uh we have next do uh d. TS file okay uh it just to um it's new file for this particular one and it's environment kind of file then we have next. config.js where we will put all configuration for application okay so regarding the next uh JS then we have the packet. Json okay and which contain the dependence and everything the post CSS and tailin config.js is used for the tvin CSS right and if you see the where need to apply this TN CSS classes that path is defined here if you are doing some manually you are adding some new folder make sure you have to add it here in order to apply thein CSS okay and then last is types config.js okay so first of all let's go to terminal inside vs codes click new terminal and let's run the project so just type npm run there okay and uh if you see our project is running on the Local Host 3,000 Port okay so let's open this port and it's loading so we'll wait for a few seconds and if you see our project is loaded okay let me show you the code and uh Associated uh view for this one right so if you go to the app right and and if you see here in page. TSX right here you will see this code okay so get started by editing so you'll see get started by editing right so this is our default page which called page. TSX okay so right now I don't want this code so what I will do I will remove this everything okay like this and just put a simple empty tag like this okay and inside that I will put h2 tag like type to tube gou okay if you do not subscribe to TU guruji please do subscribe and save it now you'll see subscribe to TU guruji Channel right now interesting part you will see here you'll see these lines right the reason is if you go to the uh Global CSS right in this root folder they added the start RGB RGB and end RGB right it's give the gradient kind of effect right and we don't want that one so remove that one okay along with you can remove this one you don't want it and like this and if you see our page is completely clean and that's where we will start our applic application to develop from the scratch okay now if you see the Pinterest website right you will see the header section okay we can we can call navigation bar and in that we have logo some button search bar user image this message icon and everything right and then we have the list of all the uh pins we can say all the post that which user posted right so we will divide this application into small components uh in order to implement right also if you if I go any of this particular post right you will see this navigation bar keep constant throughout the application okay so that's what we need to implement okay so let's go back to our application first okay I will open here and here I will create a new uh folder called components okay so let's call components okay and inside this component I will call header. TSX file okay so header. txx okay and here will add the template so if you did not watch my previous video okay please do what because in my previous video every time in the application I I informed or told user to add this beautiful extension called react uh es es7 plus okay so this extension will help you to uh write the code much faster okay so make sure you'll install this uh vs code extension so what it will do if you type RFC which is a react function export component right and enter it you will see this beautiful template created by the extension right without doing or writing any code it will automatically generate for you okay so you don't need to write every time right so that's the reason make sure you import that particular extension now our heer is component component is ready right save it now if you go to the layout. TSX here we will import that header component the reason is we want to use that header throughout the application okay so that's the reason we will put it in the header so what I will do because in children all our component is getting not component but page is getting rendered right and here I will add the header and make sure you import it the uh header from the component okay and then save it as soon as save it you'll see the header is displaying on the screen okay perfect now let's go back to heer and just write uh just start implementing it okay so if I go to this Pinterest website right let's go back to homepage you will see this beautiful um header section right so I already added the logo.png file in my public folder okay now we also want to use this icons right so what you have to do go to the react icons this official website of the react icons okay and here just copy this command in order to install it in your project right and then I will explain you how to use it first of all go to the project and paste it in your terminal okay now here you will see the bunch of different type of Icon where you can use it right if I go to the icon and if you see right different type of bunch of Icon you will find it you can just go copy it uh this name of the icon and paste it right and make sure to import this particular statement okay now let's start implementing the header so first of all we want to show the logo okay so let me open the project side by side as well okay so here first of all let's add the image right so in this case we will add the image from the next SL image okay and if you know about the image HTML tag it's similar to like that one only the image tag we are importing from the next image okay and then we have to provide the source okay so Source from the local um uh public folder only so I can do like logo.png okay and then we have to give some properties like Al tag so in this case I will write logo and then I will also mention the width okay of 50 height of 50 okay and save it and if you see logo is displaying on the screen okay now if you go back here and you'll see right on a how you'll see this uh gray color right on how so we'll Implement that that one as well so what what we can do do class name to this one and over here just write on how right so Intel wies it's very easy to implement that one right on how we can change the background color to Gray and this is the color code right see if I open like this and you will see the bunch of different type of color combination right uh so in this case I will select this 300 and if you hover on this one you will see the CSS property this is how in CSS we can return return but with the T CSS is just few line of it's just one line of code right then uh let's give some padding to P2 okay and if i h on it see it's coming right but we want the circular so what we can do uh just make rounded to be full okay and uh so put it like this round it to be full and I will make the cursor to be pointer okay and if I hold on it see how easily efficiently it's Hing okay perfect now let's add the some button okay so if you go to spest we have this U button called home explor create right so we will add home and create so let me add that one as well o sorry so let [Music] me bring this here like this okay then we will add these two buttons so let's add button so first button is uh home and the second is to create then we want to add the input as well okay so we can add the input uh uh Button as well so input text okay Division and if you see right here let me open this the search bar right we have this logo as well and the search icon right and we can take this logo from the um icons right so if I search so [Music] I'm I'm using this High sear right and I'm using this uh hero icons okay so let me bring this bigger size and here you can add this icon so I will add High search like this okay and make sure to import this uh statement as well right so I will import it I'm using this H Bill and chart icon as well okay from the same then after that one let's add the input okay so input of type text okay and I will add the placeholder as a search and after that uh two more icon I'm going to add so first is high Bill okay and the second is the high chop okay and lastly we want to show the image of the user right so if you go back here we want to show this image right and if you see right how we are getting this effect as well so we will add that one so let's see image source okay and I already have this uh image in the public folder right man.png so you can access it through the source code give the alt tag like user image you width of 50 and height of 50 okay and same uh class name I will add it here as well like this it be class name and save it now if you go back to our application it will look like this okay now let's bring everything uh in one line before that we will add the um styling to each of them okay so first of all let's add The Styling for this button so just write class name we want the background of black color so I will add black and text need to be white okay after that I will give some padding to uh two okay and let's see how it looks so see okay now let's make the corner to be rounded okay let me bring this side by side and uh I will make sorry I'll make the rounded to be full okay and uh also what I will do I will give the some padding on the xaxis to be uh four okay like this okay same class I will apply it for the create only thing is I will remove this black background and white text okay like this and I will add the the font here to semibold okay like this now uh these are ready Let's uh give styling to this input search box right so here I will add the class name okay background and I have the color code already right so in order to use the your own custom color code right you have to write the value in the bracket okay not only the background but everywhere else okay so like this so hash and the color code okay and if I save it you'll see the color code as well let's do some padding to three okay and what I want I want the two things in one line right okay so actually we'll put this bail chart and image outside of this de like this good then I will add the flex and I will add the gap of three so gap of three means the distance between these two right now if you go to the twiin CSS okay go to Twin CSS okay and if you open it right and if you want to search anything okay how to use the particular thing for example if you want to Gap what is gap right you can just search it and then you will find it how to use it okay let me search capap open it and see okay so it will explain you how it works okay so it give the distance between two items okay as simple as that so that's the reason I give the gap of three I will make item to be Center so it will become vertically to be Center okay and let's make the rounded uh corner to be full like this okay and we add the padding everything looks good so and what we will do uh let's add some styling to this uh search bar so add class name okay so this SE icon act like a text only so so let's give the same property like a text okay so if you see right I give the text value but you can give the in buil tell CSS text value like five oh sorry 5 Xcel 2 XEL like this right but you can also use a custom value like 25 pixel which is similar to the CSS and if you hun it you'll see the font size of 25 pixel okay and then I will change the color of this one to T to gra 500 like this okay perfect then for this input right first thing we want to make this transparent I don't want the white right so let's add class name BG background and transparent okay and if you H you will see the property background color transparent like this okay and uh let's save it perfect if I click on it you'll see this border we don't want that border as well so just write outline n and save it okay perfect also uh I will change the Bell icon size so text to be 40 pixel and text Gray 500 color of that one like this I will copy the same for the chart icon perfect now if I open it right it's showing vertically right now okay now let's bring everything horizontally so for this uh parent add class name and let's write Flex okay as soon as you write Flex everything will be in one line right now let's give some gap between the items so I will say gap of three and I will make sure that item to be vertical be Center okay and see how it looks see okay so if you see we have some padding all around all right so let's go padding of six for example and see it looks good right but if you search bar is acquiring the whole um the full size of the screen right so very easy for this particular search bar du right we have this D here just write we to be full and save it as as we to be full save see our header is almost complete okay and if you see this one is similar to this one the icon little bit Chang because we are using some different icons but that's fine the main point is we got the header similar to the Pinterest okay perfect here I made some few changes so if you go to here right and if I decrease the screen size right it automatically uh remove the search bar right uh it's similar it's kind of similar to uh this one okay if I go to the inspect panel okay and if I decree the size you will see this one right I change the size the layout and everything okay the similar kind of of things I did it here it's quite easy uh many times we did this before as well in my tutorial right so uh here first thing when the screen size is smaller I made the gap of three or screen size is medium I made gap of two and then for this search bar do right uh I'm hiding mean I put the uh class called hidden when the screen size is smaller and when the screen size is medium we will showing it as a flex okay and uh outside that I added this search bar it only display when the screen size is smaller otherwise on all other screen it will be hidden okay so this few tricks few ticks I added in this one okay if you have face any issue you can always check the source code and the link is in the description now let's implement the Google authentication using next okay so for that one uh we are using next okay and which is the best and easiest uh way to add the authentication in our nextjs application as we are using next JS 13 uh version right for the next JS it's little bit different to uh implementation and you will not find anywhere on the YouTube how to add next authentication in nextjs 13 uh very easily okay so first of all go to the next .js this website okay and just say get started here you will see this uh steps to follow right you have to install this next off first so then copy this command and go to your uh project folder and paste it here and click enter so it will install for you okay then you have to come down and then you have to add this API route okay so if you see right uh if you are using the normal next uh CHS so you have to add this you have to create this file in Pages folder SL API folder SL folder and then you have to create this file okay and then you have to paste this all of this code but if you if you are using nextjs 13.2 above version then we have to follow some different step as we are using the uh next JS 13 right then we have to follow this router Handler guide okay so click on this guide and here you will see how to add that okay so first of all if you see right in the app folder we have to create API folder inside that we have create o folder and next o folder okay so let's go to our application let me bring this here and inside the app folder first I will create the API folder inside that I will create another folder called a then copy this name of the folder and inside Au only I have to create this folder okay and then inside that we'll create a route. JS folder okay and then we have to paste this lineup code like this okay just paste it now we want to use the Google authentication correct so go back here and just click on providers you will see a bunch of different type of Provider as Google is very popular so I will cck Google and here you have to paste this lineup code provid ERS okay so copy this and just paste it in this Handler okay now once you paste it here we have this client ID and then we have this client secret key correct so you have to add that one so if you don't have any account on Google Cloud go to Google cloud and create a new project in that one and in the API and service section you will find a credential okay here you have to add new credential before that we have you have to add all consent screen okay and then you have to go to the credential and then you have to add the credential okay then click on authentication and uh here you have to just fill the form click next and then you'll get the client ID and client secret key okay copy this client ID and client secret key let me bring this here and create a new file called EnV which is used to uh add this all important and secret keys so that it will not expose uh to the other user right and add Google client key Google client secret key here okay so that it can be accessible and we can provide it to this provider okay and save it next let's go back here okay let me go back and O sorry and then if you scroll down right then we have to add this session provider now what in this case right we don't have this pagesor app. jxx right so this is the simplest way I I'm going to uh tell you how to implement right so first of all let's go here and inside app folder okay let's create one file called provider. TSX okay I already [Music] created now let's go to app do app so now go to the app folder and here create a file called provider. JS okay oh sorry it's TSX so TSX okay and here add the default template and here we will uh uh get props like children okay and here we will add the session provider okay so this session provider we will add it here okay and we don't want this session so I will remove this session okay and inside that we'll accept this or we'll pass this children okay like this and make sure you'll import this session provider as well okay now what you have to do just ignore this error now close this one and then go to this um layout. TXS where we want to wrap this session provider right but here we can't wrap it directly right so that you have to add providers like this okay so so it will be a provider actually provider and let me remove this okay and wrap this all content and children inside the provider so that this will render inside your provider okay and save everything now we we are pretty close now go go to our header right we have we created a header so inside component we have header file correct let me go in our application as well and if you see right we saying react Conta is unavailable in server component right we are getting this error because inside the provider we have to mark this provider as a client side so just inside the de basis we have to say client use client okay as soon as we Mark client the error will gone because this provider is available on the Cent side and not the server side okay that's the reason we have to mark this particular file as a client okay now here we will change this user to the button when the user is not login correct so go to the header. TSX for now for the testing purpose I will uh comment this image and I will copy this button okay and paste it here like this okay and just say login and if I inre size see login is coming up okay perfect now if you go to the next auth right if you scroll down here is the way you can login right so if I copy this on click method to sign in right ni on click sign in okay and make sure you inut this one and then in order to get the session you have to copy this command Okay this will help you to check whether you user is login or not okay this session information contains user image email and everything okay and then sign in perfect now we pretty much ready let's go back to our application and if you see right we got the error that use session is unable in server component again this header we need to mark it as a client side okay so just Mark use client and save it and you see array is gone now if you click login button okay so it's saying Google is Prov is not defined so we did not Define the Google provider so here right uh let me go to the provider and select the Google right you have to import this statement Google okay so inside the route. jss we have to add this provider okay now if you go back to our application let's see let's go back first refresh the screen and click login you'll see this login button now if you click on sign in you'll see bunch of option click any of this and see we login right now button is still there okay in order to check whether this user is login or not right you can print out the session okay so in header we already accepting this session right what you have to do just console.log and say session okay and save it and if you if you refresh it you'll see session information the user is login you'll see user email user image and user name perfect right now what you have to do once user log in you have to change this button to log out or user image right so what you have to do just scroll down okay and just uncomment this one right so what I will do if session is there a session question mark you user is there then show the image otherwise show the signin button okay and if I save it now now you will see this user image because user is login now what you have to do you have to pass this image as a user image correct so very simple right you have to replace this source with the session. user. image okay make sure it will be like this so what we got there undefined okay like this and save it if you go back you'll find the error that we need to add this particular domain the host name sorry or domain in your next config because we are trying to access the third party URL in our application and that's the reason we need to add this host name in Next docon .js okay that we will add that error we will solve this error now now in order to solve this error we have to make sure we will add this host name in our N.C config.js okay so let's go to a project and in here we have this next. config.js right inside this next config uh we have to add images okay and in that one in that one we have to add domains okay and we will provide array of all the domains which we want to add it here right so in this case is our lh3 googleusercontent.com okay and let add it here like this okay and save it now once you update this config.js file you have to make sure that you have to stop the existing uh Bill and you have to run it again okay so it's running okay let's go back to our project and then refresh it and wait for a few seconds so whenever you add any uh images from any different types of domain URL uh in the next days you have to add it okay now if you see right uh once is loaded it's showing it on the screen and uh you will see the user image is displaying on the screen okay perfect so that's what we wanted now sometimes if you refresh the screen you will see this login page until unless this get loaded correct so if you go to the uh header right you can add the condition uh to whether you want to display it or not okay now when user sign in with the help of Google authentication we need to save user data in a Firebase so uh in order to store data we are going to use fire storage Firebase database so let's go to firebase.com and create a new account if you don't have and just go to the console so once uh you are on the console create a new project if you don't have any new project okay and open the project here once you land on this page okay uh it will ask you to create a new application otherwise if you have already existing project you can create new application from here okay and just click on the web application okay now here do the name of the application so in this case is pin interest clone and just say register application so now here we need to install this npm install Firebase in our uh project so let's go to our project and in the terminal past this command okay and then you have to add this Firebase config so just copy every okay because we need everything and let's go back to our pro project and here I will create a new folder called shared okay otherwise you can create a new file directly here it's up to you okay so let's create a new folder call shared and inside that I will create a new file called Firebase config.js okay inside that paste the code uh code which you copied okay so this is the Firebase configuration which contain the API key and everything right now you can remove this API key from here and put it in environment variable as well okay right now I will keep as it is and uh make sure your fire bases uh you initialize the fire Bas here okay and save everything so now let's try to add uh user information to Firebase right if you go to the Firebase here is a documentation to how to add the uh data to the cloud fire store okay and it's quite simple so first of all you have to initialize the Firebase which we already did right and then we have to initialize the uh Cloud fire store okay using this particular line so before that if you go to uh go to the Firebase config and here we have to export default application so that we can use throughout the application right so just add export default and then we have to uh export this app uh reference right so that we can use it and save it now after that let's go to header. JS jsx where we are added the sign in and sign out functionality right so here what we will do uh we will use this line of account just copy it and paste it okay and make sure to add the import statement okay so I added from here and the application as well okay so if you see the import statement okay and then for the app as well the import statement for that okay now we initialize the database file store as well okay now if you scroll down right it's quite easy uh just this line of code to uh add the data in a Firebase database before that I will Define one method called constant save user info okay and this will uh help you to save the user data okay so what we'll do inside that we will check if session. user is there means user is login or not then only we will save the data so I will copy this one and paste it here okay now uh it's it use a so we have to make this function as a sync okay and make sure to add this set Doc and the document as well the import statement and if you see it's here right then you have to give the collection name so in this case user okay and then we have to give the document ID okay so let me show you the example right so let me go here right and if you see uh this is the collection name and this is the document name so sorry document ID and we give the document ID as a email ID and document ID should be of unique okay as we know email ID is unique that's the reason we said document ID as a email ID so I right now I will delete this okay uh this is for just for the demo purpose okay right now we don't have anything any uh collection name user okay that's fine now let's go back to our code Cod here we have to give session. user and inside that we have the user's email right as a document ID then we have to give username so I will write username then email and then user image okay and usern name will be session dot user.name okay same thing I will copy paste here and just change this to email and change this to image okay now we all are set okay and now we have to call this function in use effect okay and pass the empty okay so here right uh we have to we we don't need to pass empty we have to pass the session okay whenever session change because initially when you refresh the scene you will get the undefined sometimes because you'll get some it takes some time to verify or check whether us loging or not right to get the session information so that's the reason whenever get the session information this use effect will execute right that's the reason I added the session uh I'm passing session in this particular array and then just type call this session information okay and save it now already log in that's fine right and if you see uh if you go back Let me refresh this screen okay just to make sure and now if you go back to this one right let me refresh this one f store as well and then you'll see this new collection is get created with the email ID as our document ID and all Feld is created as well right email user image and username as well right perfect that's what we are looking so even though uh right now I don't know why okay so we got the error but so it's saying that right cannot read property of user undefined the reason is here uh we are checking we are hard Cod checking with the session. US iable so make it as a optional and then save it now you'll not get that error okay and even though you sign out and sign in right and whenever the session in uh information is available obviously this use effect will execute and saving user info we'll get call and then we can able to save this information perfect and don't worry even though we refresh the screen and and we will add the data in the fire store but obviously the ID document ID is unique then it's not create any duplicate uh information it will not s duplicate data in firor okay so don't worry about that perfect now once user click on this particular profile image we want to navigate to the user profile page okay and you can access the user profile page by just providing the uh ID of the user right and for ID we are using uh going to use users email ID because that is unique okay so for example if I uh go to this URL okay and type for example tube guruji the gmail.com and if I click enter it should supposed to open the profile page right now we don't have a page that's the reason it's showing a 404 error okay but if you passed the email address which is our ID then we should open this particular page okay so what you have to do let's go back to a uh uh application right and inside the app we will create one folder okay but this folder will give the name Dynamic name okay for the dynamic routing so in order to give the dynamic name we want to give the we want to write the name of this particular folder in square bracket right and here we will pass the user ID like this okay and then in inside that with the help of new nextjs we want to give the file name as page. jsx okay you can give TSX or jss I will give right now okay and add the default template okay and I will change this to profile and you whatever you want I will write profile okay and just to make sure like this and save it now if you go back here right right now we are on the homepage right now just type slash and the any user ID right so in this case I will add this to gmail.com as ID and if I click enter okay you will see I landed on the profile page okay this is how easy is you don't need any any special configuration for the routing okay so I hope you understand this how to uh route to the new page and just now we'll learn how to do the dynamic routing okay this is called Dynamic routing so for example if there is some user called XY j.g. comom okay and enter it you will see still you are on the profile page right it means uh the ID whatever the ID you provided it will uh jump to the profile okay now what we will do from here we will take this ID and then we will Fage the user information from our database if they is there anything okay perfect now let's implement the routing okay so first of all we have to Define the router here okay so Define route constant router is equal to use router okay so in this case uh as we know you know right we are using next 13 next JS 13 and in next JS 13 if you see this import statement use router right instead of importing from the next SL router we have to make sure we are importing from the next SL navigation okay otherwise it will not work so make make sure that you will import the user router using the next SL navigation okay then on the click of image right user profile image we want to navigate to the profile page right so here I will put on click event okay and you can Define method on image click or you can directly uh call the function here right like this so router dot okay and here you have to write push okay and inside that we want to only want to send the user ID okay so just write slash plus and session do user. email which is our user ID correct and that's what I Define uh I explained earlier how we want to navigate right and save it now now let's go back to our project let me clean this one okay um let me right now we are on this page right if I click on this one right if you see we navigate uh to the profile page right and this is this ID we are passing right it means even though if you share this URL right it will directly open this particular page right now another thing we want to get this uh uh email ID whatever the user ID okay when we jump on this jump onto this profile page so go to this profile page okay under this uh user ID uh folder and here we have to accept the parameter okay so you can Define params okay make sure you'll Define the param because when you route it right it dest structurize as a params okay and uh let's define a use effect and in that we will just consolle the parameter value okay so here I will pass the params okay so whenever we rece this param um value right then obviously this use effect will get called okay and just write console.log inside that we'll write the params okay and save it let me bring the project on the side okay and if you see right it's saying you u f uh issue right because we need to convert this part page. jxx as a server site so just write uh we need to convert into client site so just write use client and save it okay and if you see now the error go right and if I go to the inspect panel and go to the console you will see this object right and inside object we have the user ID okay so now you can just print the user ID as well so into the into this console log like you can Define params do user ID to just display the user ID right and if I clean this one Let me refresh the screen and then you will see the email ID okay now one more thing if You observe right the user ID contains this per 4 instead of at the rate right so in order to uh remove this particular issue right what you have to do just in the user ID dot just say replace okay and we have person 4 Z with ADD theate and then save it now if you let me refresh it and now you will see the exact email address whatever we are passing okay now here is thing right you can just pass this ID as well or you can create your own uh number ID or whatever the username uh you want to create you can create it right but as a Simplicity as this course is beginner friendly we don't want to go into deep okay so I hope you understand this part to one now we will use this email ID to fet the user information from the Firebase because we already save the fire um our uh users information in Firebase right so with the help of this um email ID we will face the data now once we land on the uh our profile page right and we already have this uh user ID as well as a email then we will face that uh document from the Firebase with the help pop email ID okay so if you go to this Firebase documentation here is the simple way to phas the data so before that we have to make sure we will initialize the database okay so just write constant DB is equal to get Firebase get fire store and we have to pass app okay as simple as that then I will Define one method called get user info okay and we Define and like constant and Define the arrow function okay and inside that I will just copy this code okay now once you copy this code as we are using a make it a sync function and now we have to import this top right and after that um we have to define the collection name so in this way in this case the collection is user and then we have to define the document ID which document we want to F uh fet right so in this case the document ID is this one correct so I will use this one or what you can do we can pass email as this one right and we will use the email okay and what we will do we will copy this get username and we'll call it here okay if we have the parameter value then we will call this one okay and we will pass our email ID like this okay now we have the email ID and we have the document reference okay and we will just get the snapshot of this particular document reference using this G Talk method and make sure you'll import this G talk and we also import the document already okay then it will check whether document snap has some value or not right if you put you put the wrong email ID then obviously documents s will be empty right if document snap exist then we will return the document snap. data it will return the uh documents so it will return email the name and user image okay otherwise it will say no such a document okay so let's try this particular uh code save it and then go back to a project okay let me clean everything and refresh the data as as refresh right you will see we got the document right so we got the email we got the user image and the username as well so this data we already storing in our database right that's the reason we got the data now for example if I open in uh some other terminal right and let me go to the inspect panel as well right and here we did not login if you remember right we did not log in here and if I enter it right still we are getting data right but we did not log in here right because we already stor the data okay so that you can share your profile as well just with the help of URL and user can see it right if they want to post something obviously they need to log to their account and then only they can post on the Pinterest so that's how uh Pinterest will going to work and that's what we are going to implement as well okay I hope you understand this particular uh scenario or particular section okay if you have any question any doubts let me know in the comment section or you face some challenges you can anytime you can uh um refer the source code the source code is in the the link is in the description so you can check it out anytime now let's implement the profile page we already have the all the information which we required so in this case we will Define the uh we will display the user profile image usern name and the user ID which is the email ID okay so let's go back to our project let me close this one and here uh we are already in the profile page right and we will divide it into two components so I will create a new component in the component folder and I I will call it as a uh user profile or just write user info user info. jss okay and add the default template using the RFC okay and we have the US user info as well here okay now just import this user info okay so you can add the user info like this o sorry user info I don't know why it did not import directly let me import it here okay so just add import user info from so it need to be user Ino and then give the path okay in this case components slash user info okay and save it as soon as save you got the user info here right so it get imported successfully now go to the user info and let's define some information before that we have to make sure we will pass the necessary information so we got this data right um so that we will store it in one state so we'll call constant user info comma set user info is equal to use St okay and then make sure to add this used State okay means you have to import it here like this and save it right and now go to this um our method here right where we are consoling the user information and set WR set user info and here we'll set this doc snap data like this I will remove this one and then save it now we have to pass this user information into this one okay so write user info like this and we'll pass it like this okay and for the uh I will check it first right whether do we have the user info and then only it will render the data otherwise it will show null okay and save it now I accept it as a parameter so I will just write user info here okay and save it now you can console it whether we got the user info or not so let's console user info say and save let's go back to our project go to the inspect panel say console and clean it and just refresh it right and if you see we got the user info right at the line phone number four four and we have email username and user image now we got the all the necessary information which we want right now let's display that so first of all let's define image inside that we have to Define source so before that we have to make sure that we'll import the image from the next SL image okay then we have to provide the source inside that we have to give the user info dot user image that's what it is and then use alt tag call user image may have to give width of maybe uh 80 and a height of 80 okay and let's save it and just check whether we are getting data perfect we got the data now let's give some style so go class name say rounded to be full okay so it will be rounded okay next we want to show name of the user right so I will increase the size of this one little bit bigger so just make it 100 and here also make it 100 then Define some tag and inside that we'll show the username so user info do username okay and then apply some class is for this one so I will say text of 30 pixel okay and then then I will make font to be semi bold and save it I think this is look good right similar to this one perfect and then at the last we have to show the email address just write user info do email okay and save it see we got the email address we'll change the color so what we will do L right so just type last name t Gray maybe this one okay yeah it look good to me okay now bring everything into the center so right class name Flex okay and we want Flex column and item to be Center like this as simple as that right if I increase size it look good just think uh the margin is okay I think okay you can increase the size if you want I will keep as it is and you can check every time when you are doing right how it looks on the mobile view as well right and the UN responsive site as well right see it's perfectly responsive I hope you understand this one okay so we easily uh implemented this one now if you have new email address you can just type it and you can with the help of this one you can just share it okay with your friends and family next next we have these two buttons called share and profile right we will not add the profile functionality we will just add the share so I will add the share button as well here so after this S2 time I will add the button and it will say share and let's give some styling to this one say add class name and let's say background to be gray 400 okay 400 is it darker me 300 give padding to be two okay and I will give padding X to three and then round it to be full like this and let's see whether is similar to this one okay if perfectly similar I will make more lighter and again let's make font of semibold and it will look similar kind of similar let's VI Mar top to five perfect and let's see how it looks perfect it's similar to this one now okay next uh we pretty much completed this section as well right we successfully um showing the user information now next what we'll do on the click of create button we will show the form okay and then we will implement the form information how to F the form and how to save it in the fire store F database okay now if you go to the create and create PL right it will navigate to the pin Das Builder and there you will see this form okay the same kind of form will buil in our project so first of all let's go to our code and here we'll create a new folder okay so called pin Das Builder okay inside that we'll create a page. jsx okay and add the default template so we can call it as a pin Builder okay and and save it now let's start make sure we navigating correctly so let's go to the header so in components we have header right and here on the click off create we already have this button called create right so let me bring this down and we'll add the on click method okay and on this one we will say uh router. push and here we will push the pin dash Builder Okay and then save it I click on this create okay let me check let me ref the screen o sorry to local 300 okay okay and if I click on create you see it's navigate to the pin Builder and we'll jump it on the pin Builder okay here we will Design this particular form so I already created the form uh to add the post in a Pinterest okay so let me explain how I implemented so first of all in the our main page okay I added this du and inside that I added the component called form okay and I added some background some padding here okay depends on the screen size inside the form. jsx okay I divided the form into two section okay one is the upload image to upload the image section and the other is uh the user input okay and I kept in one single uh form. jsx okay in upload. image if I go to the upload. image I just added the some uh styling and margin I will show you how it looks okay and uh also I created one more component called user tag which contains the user image name and email address okay and that I will uh that will as well I will show you to you okay so let me show you everything so let me put this this way okay and this is our sorry so this is our form okay it will looks on mobile like this if I extend it it will look like this okay and it's quite similar to this one let me delete this see okay now as I say uh to upload the image I create this particular component this is completely separate component and this form which on the right hand side is completely another different component this so two components I put together okay and the save button and the form. jsx another component I made it which is the user tag okay which contains this image name and uh email okay so let me show you that one so if you see right user tag so here is the image and two h2 tag to show the usern name and email okay very straightforward uh with the help of TN CSS only I implement this one okay so if you face any issue then uh you can anytime you can refer my source code with the link is in the description but you can try this one okay which is quite simple form and as I say it's responsive okay perfect so now our task is when the user enter this information okay we have to make sure uh we are fing that information and we'll save it in one state okay and after that we will store it in the database now let's record the user input value okay so when user select image or enter some value and on the click of save we will console all the information okay so that we will structurize it and then we will send it to the Firebase fire store okay so first of all uh let's define some of the states so first of all I will Define constant uh data and session okay so from this one we will get the users information okay the current login user information which we need when we click the save button right and then along with the post information we will send the user information as well so that in the database we will get to know okay who save the uh data and everything okay then second is the constant title set title to set the title information okay use State make sure to add this uh use state in the react okay then constant set description comma set description is equal to use State this will be used to save this information and last is link okay it need to be a description only and the link equal to set link okay and the last is file so we also want to store the file information so I will set file like this okay now first what we'll do uh so we got one error let's see what's the error okay so we have to import the user session okay use session so I will copy from the existing one and paste it here so uh one one more thing right uh we by mistakely putting put keep this in upage we want to put it in form okay I will keep it here in form. jss we have to add this all this uh State and all Okay then if you scroll down for each input we will add the on change method okay and we will uh save the information in state okay so for example for this title we'll set on change okay and this will be a event e okay and we will set the value so in this case we will set set title e. Target do value okay like this I will copy this and P to for the second input which is here and here will be set description okay and another is okay so so this need to be here actually and for this one it's a set link okay perfect now let's try to print it out okay so what I will do I will create one method called on Save okay so this will be execute on the save button click okay and I will just console.log title title will be sorry title description destion description and then Link Link okay and then I will call this on save for this button so on so we'll add the on click method here on click we will call the on Save method and save everything now let's open our application and let's open the inspect panel as well and in the console just type title info some information this link console and if I click save okay we got the error that discrimination is not defined let me check what the issue here okay so it need to be a small DC we clean this one and then click save if you see that we got the title we got the description and we got the link as well okay perfect now let's impl for the image so obviously we put this image in component in different component right so that's from where we have to handle this uh file and then we have to store it here right so let's go to upload image first and here we have method called on input right in in that we have to call property called on change okay so on chain method will give us a selected file input right first of all let's console what we are getting right so this will be a event e and inside that e. Target do files and we have first first file okay and if I save it let's open this one I open any of this image right and see we got the file information okay now this file information we have to pass back to the parent component which is the form. jsx right so let me remove this console.log and we will say set file like this okay and this set file will pass it as prop okay so in the form. jsx we have to accept here okay like this and again we already have the set file here correct we will set the file again so it should be like let me Define file and set file the file value okay now what we'll do let's print the file value as well okay so I will say file and I will just show the file here like this and save it now let's test it C everything let's upload some image okay and if I click save you will see the file okay so title along with the file information obviously it's not showing on the screen but we will show it don't worry okay now in the upload image okay uh I added one state called selected file and say selected file okay and and uh on the change of this particular input right of type file first we already added this set file and along with that I also added this set selected file okay and the same value I'm setting so this value selected file I'm using to check whether the file is selected or not okay if the file is selected then I'm showing this image okay or if the file is not selected then I'm hiding the uh the click to upload and this icon okay let's test it out so if I click on um this particular one right and I open any of this particular Banner for example this Banner you see it's displaying on the screen along with that we also hiding this click to upload and this um upload icon as well okay perfect so this is how it works and we also showing the preview of the image as well right if you click again it will again select some other image for example you select this one and you'll see the image okay and then we will uh upload this one to the fire store so let's upload the file on Firebase storage okay if you don't know about the storage then it's uh go to this Firebase uh console and you will find this option storage where we can upload the file images video music lot of things okay just say get started and you will be launched on this page okay make sure to update the rules okay so that you can able to write it or upload the file on the storage okay now this is the documentation uh for the upload the file on the storage okay so with the help of that we will upload the file so first of all I will create a new method constant upload file okay and here the first thing we need to do if you you see here right we have to define the um reference of the storage so just Define constant storage and get storage okay make sure to import this G Storage and pass the app reference okay now inside the upload file we have to Define constant storage reference okay is equal to so this line okay then we have to give the reference make sure to import the reference right I imported already and then add the storage uh the storage reference here and then you have to give the path and the file name so in this case the path is [Music] pinest slash okay and the name of the file so in this case our file name is we are getting from file. name because we already store the file name here right sure to add plus sign here okay like this so this file name contains the name of the file along with this extension okay this is very important you have to add the extension once you add that right just if you scroll down here what we have to do we have to upload the file right this particular documentation now let's say upload byes okay and then we have to pass the storage reference and then we have to pass the file okay and they say then get snapshot of that one and just console it that up file uploaded file uploaded okay and then let's test this out now on the save button you have to call this upload file okay so just call upload file here like this that's all and save it right now go back to our application let me clean everything and uh let me refresh the screen as well okay now if I click on click upload and if I uh upload this file add some sample text test test okay and just click save so as you click save right you got this um message called file uploaded okay and let's check it out whether it's uploaded or not so just refresh these files and if you see this folder is created okay very first time and then the images uh store or uploaded on this particular storage if you see right our image is stored you can click on this one and you see this upload the URL of this one right now our file is uploaded so we are good with that right but we need the URL of uploaded file right so if you see right uh this okay so this URL we need it right so how to get this URL because this URL we have to store in our database right so again for this one right just uh refer the documentation and if you scroll down okay here you will see to uh one method called get download URL right and from there we will get the URL so it's very easy just write then here okay then the response and inside that you can write get download URL okay so make sure to import that method and pass the storage reference here okay so go don't go one by one I refer my code because this is more uh cleared and more simplified okay and wants to pass the T reference then pass 10 because this is promise and then uh URL is console.log and just pass URL like this right let me pass download with console this URL first and let's see whether we are getting correctly or not okay and then save it now let's go back and test it so let me refresh the screen add some test some value and let's upload the image now if I upload the image and click save you will see the URL okay perfect if I open this URL you'll see the the image is open right now this URL we will store along with our object okay and then we will store everything in our database now let's store the information okay so in the upload file right and we get this download URL okay so here I will create one object called constant um post data is equal to and inside that I will add the title which is title okay so this is the fill name and this is the title value right we which we are getting from this state okay then we have description and we give the description then we fill name name link and we give link and last it image which is the URL okay and now we will send this we will store this in our Firebase store fire store okay so first of all we have to define or initialize the Firebase so let's constant DB is equal to get sto get sorry uh fire store and just pass the app okay and then if you see this documentation right uh how to set the documented document so it's quite easy right so inside this one I have to define a wa okay say Doc and set doc make sure you'll import the set Doc and you have to set only one doc so just set doc give the reference of database and here you have to give the collection name so in this case the collection name is we will give the Pinterest sorry Dash post okay after that we will add the uh ID of the document right so what we will do in order to add the ID right so here at the top we will Define the ID okay so what we will do uh after this one I will say constant post ID is equal to date do now okay so it will give this time stamp uh which is obviously unique because every time uh we get the current time it will be unique right and we have to convert it into string okay so let's just write to string we got document ID should be a string only okay now this post ID we will use it here okay as our document ID and after that we have to send the our data right so we already have this post data so I will pass it here like this and then that's all okay and right now it's AWA so we have to make this as async okay so I will just write here as async okay perfect and the error is gone okay and uh that's all right and you can put the do then method whether it's say or not or you want when we are going to show loader and everything that time you can set the value here okay so just write uh save okay and save it now now let's test this one okay so let's go back to our project so right now okay so everything is good let me go to the inspect panel go to the console okay just to make sure everything is clean and add the first uh post right so taste first one okay first link test okay and upload the image so in this case I will upload some image okay take this image and just click save so as soon as you save right we got some error that the doc is not defined right so what happened uh here we have to import the document right so make sure to add the document I don't know what happened here and add the document okay from fire store and I think then we are good let's try it now let me clean this one and let's click save okay so as I save it it said saved right and along with the you file image also uploaded and data is also saved Let's uh check in our uh fire store right let me refresh the store and if you see the Pinterest post is get the new collection is getting created and the new ID is get created document ID and along with the uh information right but there is one missing part here right now we had all the information but we don't know who post this one right so obviously we need to add the user information as well for each post okay so what we can do after this one right you can add the usern name okay as a from the session so you can add the username from the session dot uh user dot name okay after that we have to add email so just add session. user do email okay and then again we can add the uh user image as session sorry session. user do image uh it's okay image only right and then save it now we have this information as well let's try it and test it whether we are getting all the data correctly right so I have ADD test first two first two link test two and save it right now I saved this one and now let's go back to our Firebase fire store the new ID is get created and which contain our username user image and the name where is the user email as well right and all the information perfect that's what all we need right so I hope you understand this one and every time it's get created new ID it's a unique so don't worry about that one as well right perfect now here we will make some quick update so first thing on the click of this uh logo right we want to go to the homepage right so first Implement that one so go to the header okay where we have the logo and for this image right this is a logo image We'll add the on click method and then we will route it right so just add router. push okay and just add add the homepage right like this slash only and save it and now if I click on this one right it will go to the homepage see right perfect so now I also added this log out button in the profile section okay and on this click of this log out we will uh log out from the session and as well as we also uh navigate to the homepage right so on I added this on click method for this logout button and I created one method called on log out click here I will add the sign out method okay and which is coming from this um next okay make sure to import this one after the sign out we also want to navigate to the homepage so uh we will add the router here so let add conone router is equal to use router okay like this and and make sure to import this router oh sorry it's need to be use router okay and make sure to import this uh use router from next SL navigation okay because this is next js13 and just Define router do push and we want to navigate to the homepage so I just Define default slash okay and save it now let me uh go back here right here and and if I login now sign in with Google let me log in and if you see I log in now okay I if I go to the profile page we will see this everything and if I click on log out right we log out and we navigate to the jump page I think I don't know whether we naate to Homage or not let me go to the spect panel and check go to the console and I think we don't I did not navigate to the uh homepage actually okay also one more thing we want to make sure that if user is not current user that then we don't want to show this log out button right so let's define the constant here okay data colon session is equal to use session okay make sure to import this use session let me get the input statement from here okay and add it here like this so and then we have to make sure that the session email ID is equal to that um user email ID then only we want to show this logout button so I will Define here session do user. email okay and make sure is optional field session. user. email is equal to equal to the user info. email user info. email then only show this button otherwise show null okay and save it so if you see it's not uh able to see anymore okay now let's go back to homepage let's log in it now sign with Google me close this one let me sign in and if you see profile image is showing now let's go to profile and then you will see this log out button as well okay now on the create button if user is log out right we have to make sure that a user need to First login right so let's go to header so let me go to the header. jsx right and uh inside the uh create button right so we have this create button here right right now we are pushing pin Builder right I will remove this code and I will add on create click okay method so we'll add the on create click so constant on create click okay and in this meod I will check if session dot or maybe a session is available then go to this pinu Builder else go to the router. push right and the login uh button right so if you see we already have the login uh this one right it is so sign in button sorry okay then we have to click sign in not we don't need to navigate because we are directly log in okay so just say sign in and save it you see right I'm on create button the user is not login if I click create it will never get to the signin first right perfect that's what we wanted otherwise you can show the message that okay you have to first log in okay here I added the loading indicator right so I added this image tag and inside that I added this um uh loading indicator PNG file okay and uh I also wrap this save button inside this Pam okay not button just a text okay now it will look like this if you see right it's saving button now what we have to do on the click of that one we have to show this loading and we we want to hide the save button okay and then we will it will navigate to the homepage not sorry it's on profile page okay so let's go back here and Define one state okay so I will Define one state called constant loading comma set loading okay equal to use State okay the default value I will show it as a false okay now once you click on Save Right uh let me remove this console now we'll set the loading value as true okay and once the uh loading is is completed we will set the loading value as a true so set loading to be true okay now here in the image right we have to Define one condition if loading true mean if it's true then show this image otherwise show the span sorry show the save button okay and save it now and let as soon as I save it will look like this now let's try to update upload something right so let's upload some image so let me copy some image from somewhere I don't know okay so let me copy this one okay so uiux design web we copy the same here I don't know I don't have any URL let me copy some random URL okay so I have this URL I will paste it here okay and just click save as soon as you click save it will show loading button okay and now it will navigate to this homepage on this homepage we going to show all the users uh post on uh or pins on this particular screen now in order to display the uh users spin right we want to create a new folder in the component section okay so I will create a new folder called um pins okay and inside that I will create one file called pins list okay so let's create file pin list. jsx and add the default template okay now let's import this pin list in under this paid. jsx okay so under the user info we want to show the pins list okay so pin list okay make sure to import it so let's go back back here and import pin list from and Define the path sometimes it will give you the suggestion sometimes not so you have to import it manually okay pin list okay and then save everything now let's go back to our project and this is how we want to display right let's go back to our project and so it's saying pin list is not defined Let me refresh it let me bring this on the right side okay so it's supposed to be pin list and save it and as you save it's showing the pin list right right here perfect that's what we wanted now let's face the user pins okay so first of all let's go to page. jsx and here we have to pass this user info to the pin list as well okay like this and accept it here so we will get the user information on this particular pin list component okay after that Define the constant DB and then we have to initialize this fire store right is equal to get fire store and then add the app as well okay so we already did this right to face the user information same thing we have to do it here as well after that I will Define one method called constant G user pins okay and here let's uh F the information right so here is thing right uh we need to add uh we have to uh face the multiple documents right and here is the documentation uh on Firebase to face the multiple documents from The Collection right here for that one we have to create the query first then we have to create the snapshot of that query and then we have to uh face the data okay so we'll do one by one so first of all let's add constant I already have the query right I will just paste it here so let's add this query so in this query right uh we have this collection passing the database then I'm adding this Pinterest post as a collection name and here we are passing the we condition okay and where in the we condition we will check whether email is equal to equal to users info. email right that current users information okay then only uh uh face the information right and after that just C copy this line of code and just paste it here perfect right now we are just consoling the information okay so it will print the document ID along with the document data it's uh we are using AWA so we have to make this function a okay and now in the US effect we have to call this gate user pins okay so I will pass the empty so only once we will call when the component get load and like this and save it now let's go back to our project here go to the inspect panel go to the console let me clean everything Let me refresh and right now we got one error right so it's saying query is not defined so it means we have to import the query so here we have query right so just import it query okay so here it's imported and what else we need to import collection as well we need to import get talks so make sure you import everything okay we have to import where as well okay and save it now now if you go back clean this one Let me refresh the screen and now you'll see we got the ID and user information in the user information we have description email I also added the ID okay the image link title user image the ID is nothing but document ID so I I'm also saving it in our database okay so let me show you the so in jxs I added one more field called ID okay and I'm passing this post ID which we already defined here okay perfect so now we got the information let's store it in one state so here we will do some quick modification so pin list we going to use this here right but we also want to use same component on our homepage okay to display the list of pins so in order to do that right let me go to profile and I will just copy everything okay uh this line of code I will cut it from here and in the page. jsx okay so this is our uh page right and here I will add it so I will add one more we have get user info right after that I will add this one okay so and make sure to add everything so constantly we already defined so no need to use this one we will use get user me so we already have one use effect here right so you can use that or we can use separately as well okay and uh then make sure to import all the input statement so I will just copy everything from here and paste it like this okay perfect and what we have to do instead of passing this user info right we will pass the actual data once we store it uh in one state right and this data will pass it to the pin list okay so I will remove this one right now let's save everything make sure everything correct so right now we got one error called get fire is not defined is defined multiple times so let's see where we Define multiple times so maybe okay so I think we copy this one again right so I will remove this one doc here and let me remove this okay want to show do and let me save it now let's see whether we are getting any error now everything's look good let me clean this one Let me refresh the screen and we got one error let's see what is in cannot read property of undefined email right so here what we can do uh once we get this one in use effect right we'll Define if okay so sorry so right now if you see right we are using the user info right but user info is not set so what we can do we pass this user info here and only one user info is there then only execute this get user pins okay and I will also write G us like this okay and save it now let's test it let me clean this one Let me refresh the screen and now we don't have any error and we are getting the all the data perfect now we got the pins and we conso it right now let's store it in one state so let's define one state called constant let's say list of pins comma set list of pins is equal to use State okay and pass the empty array now with the help of set list of pins we will set the value so let's come down and inside this do data right so here is the thing we want to because right now we are getting document one by one right and we want to append that document in the array so what we can do here we have to Define in such a way sorry so here we have to define the I will say list of pin okay you can give any name and then you have to define the dot dot dot then again list of pins because the previous pins with the new pins so doc. data like this and now it will save the list of pins now this list of pins we have to pass it I will remove this console and this list of pins we have to pass to the pin list okay so I will just pass it like this list of pins perfect and now go to the pin list accept this here and just consolid the pin list of pins okay and save it now let's open this one clean everything and if you see we got the list of pins okay so we got this five list of pins I think okay perfect that's what we wanted now here in order to display it let's iterate this list of pins so just Define list of pins do map inside that we will provide item comma index as well and then we have to Define du tag okay and let's define key value as well okay so in this case I will put index now inside this one just try to print item. title and check whether we are getting information or not so if you see right you got this uh six pins right the one which this user is created okay perfect now what I will do uh instead of writing the code here I will create another component inside the pins folder call pin item do jsx okay and add the default template let remove this one okay and now let me save this one and instead of item. tile I I will call add this pin item item okay don't know why it's not suggesting me but let's import it in item from slash do/ pin item this see we got the pin item P item now this item value we'll pass it here so I will add as a pin add the item value okay and in pin item just accept it as a pin okay and if you try to print the title here now with the pin. title you will see the title see now we have to design this component let me go to the Pinterest like this right so see how it looks so it's simple image and the name of the uh title of this particular post and users image okay and the name and on how it uh it's showing these buttons okay this link this upload button and everything right so let's do it this is challenge for you if you face anything uh then uh you can let me know in the comment section or you can um access the source code any time the link is in the description so I already created one component called pin item and inside that I already defined The Styling an HTML tag right it's quite simpler you can refer it anytime right and uh right now it's not structured right and on how you'll see this uh overlay okay so if you see it's not structurized correct it's showing only if I increase the screen size it's just showing in one line now go to the pin list okay and here is we are rendering this list of pins right so let's define class name okay and uh If You observe one thing right this Pinterest uh grid is little different and this kind of grid we want to ACH and it's quite simple in t CSS that's what I'm going to teach you now so here uh we want to First Define the for the small screen right this is small screen we have to Define like uh columns okay so how many columns do you want so in this case we want to show the two columns right so two columns I as as right see the magic right immediately it change the layout and it show the similar gr grid like the Pinterest okay now let's apply some styling as well before that uh I will give some um margin top to seven okay so it will come like this and I will also give the padding X to two Okay and when screen size is medium and you padding uh x25 now on for the smaller screen size we have we already G this Columns of two when the screen size is medium we will give the columns sorry columns to three okay when screen size is larger we do columns to four and when the screen size is extra larger we will give The Columns of five okay so if You observe right a Pinterest right if I this is on extra last screen and 1 2 3 four five five column is showing on the screen okay and as soon as I decrease the size see the change right so now on medium is showing three on large it will show four and on maximum it show five okay perfect so that's how we are going to show also uh let me show you so here as well right is touching to this next p pin right so let's do some spacing so add set space on the y- axis means vertically I I want to give the space of for example six and then save it right and margin X I will keep it ATO now if you see right it's completely perfect right if I increase the size right let me refresh the screen right right now it's showing three only because let me go back here right we have to uh did we miss anything okay so on medium we we showing three see on large screen we have to show four so not column span it should be a columns four and here as well columns five okay I did it if I increase the size see 1 2 3 4 five five post is visible on the screen okay you can give some Gap more gap between this one I will keep as it is it look good to me okay and if I decrease the screen size okay as soon as decrease the screen size see on this this is the last screen this is the now this is a medium screen and now this is a smaller screen okay and if you see right the GRE structure you don't need to do any uh special configuration for this kind of gr structure right uh T CS is already taken care of that one and if you want to see the behind CSS class for example if I hover on this one you'll see the minimum width and everything everything will be already defined okay so I hope you understand this one if you have any doubt any question then please uh reach out to me or you can put a comment in the comment section and anytime you can access my code okay so in know homepage as well if you go to page. jsx right uh the same logic which we use for the to face the user spin right I copy the same logic in page. jsx only change it I remove the wear condition because we want all the pins which is available in that collection okay so that's the reason I use this one and I'm setting the same value whatever we have okay now what you have to do let's remove this one for now okay and here we'll Define the pin list okay and for this pin list if you see right we want to pass the list of pins okay sorry so let me go to this um p. jxx and hit here we will pass the list of pins okay is equal to list of pins if I save it and now you will see the all the list of pin will display on the screen okay uh let me check what okay so it's not showing because we want we need to call this first right so here in use effect we have to call get list of pins and let's pass empty ARR when the um component Lo first time and if you see the list of pin is displaying on the screen Let me refresh the ones okay and if you see the list of pin is displaying perfect so I hope you understand this section as well right so if you go to profile right now only profile pin will show and if you go to the homepage all the pins will display on the screen now uh due to the the video length right is getting longer I also implemented the uh details of this pin right if I if you click on any of this particular pin for example if I click on this one right it will show you the uh pin detail right if you see it's beautifully showing the pin detail with the image um the title the user who added this pin uh the link on if you click on this link it will open the source of that one right and you can go back as well from this Arrow okay if I open this one see how easily it's open right so this one is I already added it's quite simple it's uh the layout is similar to what we designed for the create uh page right so let's show let me show you so I created the W folder called pin uh sorry uh the pin / pin ID right and if you go to the let me go to the home and if you open any of this pin right you will see the routing so I create one for C pin and inside that I added this uh another folder with the pin ID and then page. jsx okay in that page. jsx I first I added this back button and then I added the layout okay and uh in the format of grid and I divided pin image and pin info in two different column okay p in pin image straightforward just displaying pin and making the corner to be rounded and in the pain info I'm showing on the right hand side what are the information we want right for example the title the user tag which I jum passing the user right and we already getting the pin detail as well and then button to open the URL also in order to get the pin detail right um we already have the parameter which we are getting right so in this case is this ID and I'm using that ID to pass it uh here to get the document of that particular ID this logic we already implemented for the user right is similar one only just change is the collection uh right the collection name is in this case different and we are using get doc only not docs okay we are using get doc because we are only fetching single uh document and then we are saving it in a set pin detail which is the state okay pin detail and set pin detail like this and that's all this is how uh we are going to uh show the details of the pin okay I hope you understand this one if you have any question you can use uh my source code to work it out okay and as I say it's completely responsive okay and if you open this one right and even though if I decrease screen size it responds you okay on mobile view it will look like this okay let me go back okay see perfect so let me know uh if you have any questions okay and this is the end of our course I know it's little bit fast for this Pinterest but next tutorial will be very very interesting and you will like it right so in next tutorial we are um willing I'm creating two different course one is to drag and drop talk manager second is video streaming application and another one is uh the uh document manager okay so these are the uh courses is coming up next so if you did not subscribe to my Channel Please Subscribe now and tell your friends to subscribe my channel as well and if you like this video press like button if I get the 150 to 200 likes I will uh release the next course immediately so guys uh see you in the next tutorial

Channel: TubeGuruji

Views: 17,015

Keywords: javascript, nextjs, react, nextjs project, nextjs 13, next.js tutorial, Full Stack Pinterest clone, Next Js 13, React js, NextAuth, Tailwind css, Pinterest clone, pinterest clone using nextjs, fullstack nextjs react tailwindcss

Id: lpHQCzXoP_g

Length: 117min 27sec (7047 seconds)

Published: Thu Jul 06 2023