Build FullStack LinkTree with React, NodeJs, MongoDB | MERN Multi user Auth & CRUD Operation

foreign [Music] this is the website we will be creating with next chase this is a link trick clone where users can showcase their custom links as well as their social media the website is made with Tailwind CSS it has Google analytics integration it has page loader animation on hopping over to each page it has dynamic head component which is very much helpful for search engine optimization we also have responsive nav bar we have putter you won't find this type of scalable crack project with next.js on the internet coming over to the design we have a form here this is the footer and let's create an account enter mail okay I will use the default credentials that I used for creating another account back then I will choose the account typed creator let's take a look at the pricing before creating the account this is pre-tier and talking about its responsiveness It is Well responsive in Mobile [Music] and the nav bar is working well okay so coming back to the account creation we will register success form backend we can just customize this notification never mind and this is the email verification process we have skipped this part for now so we will log in with that same credentials we will log in okay so this is the dashboard so coming to this portion this is okay I will cut this so this is our link tree we have a demo URL that is provided upon creation on your account you can edit this later so coming to the profile we will click on edit profile and let's set a name check out my custom link tree this is the bio and this is my image that will be showing on my account we can also edit this and I will click on Save profile profile saved successfully and let's give it a refresh you can see the name as well as the bio is updated okay so the links the Social Links you can see those are slightly animated you can see the URLs are undefined for now so what I will do I will add the links for them I will just add their ID no need to add the URL so the IDS are added save Social Links and now let's give it a refresh you can see the URLs are now working this is working just fine okay cool [Music] yeah this is the demo that I will be creating this is from my portfolio website let's give it a refresh and see the framer animation okay never mind we will talk about that later and now let's edit the link tree we have this demo URL as I previously said we will remove this and add our own this we can also remove this let's add a link thank you okay we have added two links and let's click on Save links let's click on Save links saved successfully and let's give the link to your refresh you can see those two links are updated let's add another link and let's add a demo.com and demo save refresh demo is updated so we can also remove this click on remove save and the demo is gone okay let's refresh this this is working just fine you also get this share button here upon clicking on this it shows a notification that copy to clipboard and let's see what is in our clipboard this is the URL that we get for this link tree you can also share this to your friends or whatever so let's go back to the dashboard okay so dashboard you can log out from this by the way talking about the use cases of a link tree you can share this link on your social media or to your friend or whatever profile you have on online or you can even share this link in offline mode too via QR codes so I will click on this link tree and you can see it opens up in my portfolio website and we have some custom codes here just like this this is a better version that we will be creating and this one I have in my portfolio website this is a static version that cannot be dynamically created I have created the Json file back in there but the one we will be creating in this tutorial will have a dashboard where you can edit all these links and their titles so this is it the demo we also have this analytics that measures the links and other features we will be checking it out in another course so without wasting any more time let's dive into the tutorial [Music] in this project I'm using next year is to take the privilege of dynamic routing and other useful features like router let's and that comes with next.js the dynamic routing will help us where users will be able to create their own link tree exactly after the domain URL followed by their user handle for that we will use use router that comes within next and we will use router query to get their handle but that's for the later part if you have just basic knowledge of reactors you're good to go and for The Styling path if you do not have a televisionist knowledge but you are familiar with CSS in general I'll be explaining the television CSS classes along the way so let's start implementing it I have a directory I can right click on and do open with code and it will simply open vs code but if you haven't set the settings while installing the vs code there are a couple of other options too you can go to the file path and write CMD and then do code Dot and press enter it will open the vs code but that too comes with the settings you have to enable it while installing and another way is to open a new vs code window where is it open a window and drag this one trust and here we go so let me open up my terminal you can do this with control and backtick to create the next JS project you can follow this it says npx create next app just like create reactive although the react CRA is dead almost so you can do MPX create react app at the rate latest then if you want to use typescript use this flag I'm I'll be using eslint so I will use this flag so never mind I have created a starter template with custom features like Telvin CSS Google analytics page loader animation dynamic head components for SEO responsive navbar footer font setup eslint and others I'll be explaining all of them in later part so let's copy this URL and we will simply use this template so in the terminal let's create of directory I will name the front entirety site let's go to the directory CD site and let's clone this using the command key to clone and paste the URL make sure the URL has dot kit in the end as copied from the GitHub repository and press enter it will start loading the project so the cloning is done this template is using the stable version of next.js with no type script no experimental app directory with linting on so that it's easy for beginners to debug we will try on this template using npm Run tab to start the project on okay we have to do npmi which will install the dependencies and create the node modules folder installing and then after that we will run this we will now do npm run Dev to run this project make sure you have node.js installed in your computer you can check that out via terminal I'll open a terminal and type node Dash key it is showing me the version so my computer already has node installed and let's see npm version let's close the terminal and let's see the changes [Music] the localhost is running on Port 3000 this is the template we will change the complete interface to this currently this is a responsive website you can see let's talk about the features of this template let's take a quick look at the features that I have implemented in the lengthjs template and how you can take advantage of those as you know Tailwind is already configured in this template Google analytics is being used via next script tag which is inside this app directory you can see this is the Google analytics code you can change your tracking URL as well as the ID this is using the script tag that comes within the next and let's take a look at this page loader animation that takes place when switching to another path when we click on apply you can see there is a loader going on again going to the home page and then coming back to the apply page for that loader animation we are using a library called in progress this is the npm package for in progress and progress is a JavaScript library that adds the loading progress bar to your website as you just saw in the script it's been used to show a progress bar when the user navigates between other Pages like this the script starts by implementing the use router hook we have imported this and this hook allows us to access the router object which we use to listen for events that indicate when user starts navigating to a page inside this use effect hook we have created to function one is handle start and another is handle complete and we Define three event handlers for the route change start route change complete and Route change error events when the route change start occurs then it calls the function which sets the loading to true and do in progress dot start this is a function that in progress provides as you can see on the documentation and when the route change is completed then it caused the handle complete function which sets the loading to false and M progress to turn and finally in the use Vector we clean up these event handlers by removing them from The Rocker object when the component is unmounted using the events dot off method in the return statement we render the nav bar let's take a look at the nav barcode this is the Tailwind CSS nav bar nothing too complex we are using this set mobile menu options for toggling the menu and this is the function for toggling mobile menu now coming back to the app.js so we are rendering nav bar for all the pages and the toast container is to show a toast notification for user feedback I thought of covering the Tailwinds uses basics in this tutorial but we have to work on our backend for backend I could have used the next GS API directory here it is but for scalability purposes I have chose to work with node.js for backend we will create a directory on the same level as the front end I will link This Server and let's split the terminal and locate to the server directory CD dot dot for going back to the tree and then the server let's create a index.js file okay the Linux commands don't work here so I have to work on this index.js and let's clear up the terminal here extend this a bit and let's do in Pim init with the flag y this will inert node without asking for package status recurringly done let's also install the packages that we will be using in our project for that we use npmi or npm install and then in the package games for Server we'll use express for database Connection in mongodb we will use Mongoose and for cross origin resource sharing we will use pores for now let's install those so the node modules file as well as the package.json's file is generated first create a detect node and let's exclude the node modules from git that's for safety purposes before writing any basic code for our backend let's take a look at the extension we will be using for this course let's come over to extensions and search your react yes [Music] Snippets [Music] I believe this is the plugin es7 plus react slash Redux slash react native Snippets so what this does is let me show you a demo let's create a page called dashboard.js and write rafce so upon writing on rafc it gives us a suggestion react error function export component when click on that or press enter it will automatically import this whole snippet so you don't actually have to write this whole thing manually it just makes the work simple and for Tailwind CSS you can use intellisense in Delhi sense till went so this is the Tailwind CSS intellisense plugin so let me show you demo on that H1 dashboard so when we add any class to this class name text y BG gray so it suggests some classes from this and then round it this will add some border radius suggestions let's say I choose this border radius class so upon hovering on this you can see it will show the underneath implementation of that CSS class and what is the CSS for this we will cover more about the element CSS in the next part so let's see what is the browser extension we will be using for react it's called reactive tools we are Developers tools and this is the extension that will help us with States and context and others I will click on ADD extension and the extension is added now let's go to a page and press F12 or click on inspect whatever and let's exchange the Chrome developer tools and give it a refresh you will see the components tab is here I will drag it there and now all my react components are visible and when we create any states in our react application or context everything will be visible here the state is false let me zoom in a bit you can see all the states and other context and everything will be visible and it will be very much easy to debug the whole application we have seen what are the extension we will use now let's create the basic back end [Music] let's do const Express is equal to require Express and let's create const app is equal to express app this will create an instance of Express it's to app.get on home path request draw response and this will send a demo response hello let's define a Port const Port is equal to process dot NV dot port so when we are using any hosting Services the port is defined in their servers so we don't actually manually Define the port and if Port is not defined then we can use alternative Port which is 8080. we won't use port 3000 as that is being used in our front end you can see where it is the port 3000 is used in our front end so we don't have to use that [Music] and let's app Dot listen to Port and as a callback VR console log on this console.log back take server running on Port Dash this port we can install another package for easy code editing that is called npmi node mon we'll install it as a Dev dependency so we'll do Dash save Dash Dev this will install this package as Dev dependencies you can see these are the dependencies that we previously installed course Express and Mongoose and this is JF dependencies so while deploying the code this Dev dependencies will be ignored so let's make a script the script will be named start so when we do npm start this code will be executed and the code will be node Mon and your main file name which is index.js so let's do npm start you will see node mod has started the main advantage of using node mon is when we make any changes to the back end the server will automatically restart let's at least to remove the semicolon and server will restart again let's see the response on localhost 8080 localhost 8080. it is saying a response hello or we can also do this service listening on or Flash back take and back tip you can see upon changing this and the server is already restarted and let's refresh the server is running on Port 880 so this is the basic setup for our front end as well as our back end and we will continue the rest of the tutorial in the next part [Music] Elven CSS is a utility first thesis framework that allows you to quickly and easily style your components and elements using predefined classes unlike traditional CSS Frameworks like bootstrap material UI that provides pre-built components there when CSS focuses on providing a robust set of utility classes that you can use to create custom designs Tailwind allows you to create highly customized and responsive designs without having to write a lot of custom CSS code coming to the setup of Tailwind CSS in our project we have already set up those three in our globals.css let's take a look this is inside the Styles directory globals.css I've already set that up I have imported this globals.css in the underscore app.js so it is available in every page you can see and now let's do some Hands-On of Tailwind CSS by creating some pages so we have applied.js that we get from the template so let's run the code and see what this is currently and we will remove what it is right now and start to code from beginning we have started the front end and it will take some time to start the server okay let's check the localhost over to apply page so this is the design and we will remove this completely let's remove this and let's see the changes okay great so let's start coding the apply.js page first we will create a react Arrow function using the snippet rafce this will help us to create that Arrow function with a flash [Music] let's name this apply and let's create a fragment I will create a section here and inside that I will create a tip with class Main and now let's add some classes to this section so I have opened the reference image to what we will be creating we will be creating this interface so this is just here for reference and as we are using custom background so Tillman does not allow us to do that easily so we will be using our normal CSS so we already have this normal CSS we will delete that and code over from beginning for custom CSS we will use module based CSS so here we have apply.module.css and we will import that here import DOTA slash Styles slash applied dot module dot CSS and we will name this import styles from this and now any classes that will be using this custom CSS will have to be named with the styles so I will make this classes dynamic and we will name this like Styles dot background so with this when we create any class name background let's say background foreign black this will be applied to this section so let's let's take a look at this as you can see this is having a black background and let's add elements uses along with this custom CSS so we will do a plus and then start writing our normal deal with CSS or classes that we usually do so make sure to put a space here so that this class and another class will have a spacing in between them so I will name this minimum age screen so that it takes up the whole screen space you can see the black background so I will also add display Flex to this and justify Center so each element will be horizontally centered and item Center so each elements will be vertically centered too and let's remove this demo and inside this class we will add a content the content so this is not any television CSS class this is just semantic purposes classes so I am just using those classes to remember what this div is using for so I will be creating a form inside this form and we don't need this action we will be using on submit but that's for later purposes let's first start designing the form before that I will add heading to the form the auto suggestion is showing that apply is the H1 tag but we won't be doing that we will say join the top one percent creators and it has give some Auto suggestion classes let's see what is the styling for now okay as we have black background so we won't be seeing that let's change this background color remove this and let's see how this is join the top one percent creators but the title is too big so hovering over this you can see the font the font size is 2.25 rem or 36 pixels so we will do this like 2XL so the font size is 1.5 RM and now this is looking just fine so we have to add the tagline to so for tagline we can add create link tree party is your brand and okay I will I should just split the screen so it's easy for me to see and let's uh close this one and now it's well enough and let's resize the windows for a better view okay now it is looking fine and let's Center this for that we will use class name text Center text Center and it will be centered and inside the form okay inside the form we need three input places one is for handle one is for email and one is to set password and if you want you can also input other fields but we don't want to make the form look so much complicated that's why this Simplicity purpose so I will create three input fields input type first one will be will be email and then next one will be input type password password and the user handle will be input type text default text okay so the input types are not properly visible so what I will do I will add class name to them shadow empty medium shadow so the input types will be visible I believe and let's add a border border of two okay those are being styled horizontally so what I will do in the form I will add a class name add display flex and flex row so they will be okay uh sorry not row actually column so there will be a displayed column wise and let's add a gap of five so all the child inside this Flex property will have a gap of five so let's decrease this by three no four okay four is fine I believe and inside all this I will add padding X of 3 and padding y of 2 and add a border radius rounded MD and the field is so well enough and I don't want this black border on Focus so what I will do in three of them on Focus after adding focus and colon the classes I'll be adding will only be enabled on Focus event so I will add outline none so when focusing those outline will be gone let's add placeholders for uh each of them placeholder is equal to social handle Place holder is equal to enter your email Place folder is equal to enter okay set a password not enter set if password as you can see we also have a Instagram icon here before to that Instagram handle so for that we will have to convert this input field into a spanner so I will add a span and inside that I will add image tag and after that I will add this input field and inside this image field I will have to do something that will bring me that Instagram icon to grab some icons I will head up I have couple of resources so these are some resources and I will choose SVG viewer so I will search for Instagram and let's choose a relevant icon for this this one I believe is good okay uh I have to full screen that for a better View okay this one is good and its size is also low lower than others so I will click on optimize and I don't need width so I will delete that copy this SVG I can use this instead of this and this will work just fine but I have to resize that okay I have to resize that as I said so I won't be using that in this way so what I will do I will do Ctrl Z and I will open up the files and inside the public directory I will add a folder name SVG and then I will add this svgs ig.svg and then I will paste this so this SVG is now saved and let's change the SBG stroke color to gray that will give me a better look and let's see how we can use that by using slash we can use all the public folder static items and inside that we are using SVG folder so SVG and inside SVG folder we are using ig.spg IG dot SVG and now we can see the S which is visible dynamically so we can just change this portion and it will dynamically fetch any image or any asset we have inside the public folder so now let's style this and let's give a width of 8. okay I believe this is working fine but just we have to make this row wise so I will add Flex display flex and flex row and you will see this is now working and one thing notice that the shadow is not covering the whole screen so this will look something odd so what I will do I will just simply copy this dialing and cut it and then the styling will be added inside this pan so this is just working fine as in our example so the icon should be a bit more smaller so I will add a W6 yes that's it fine and after the SVG I will add a spacing so I will do m r which will add margin right and margin of 4. we have a spacing after this and users can simply type it but still you can see as we have removed the removed the classes from this input field so the outline is still visible now and we will again add this focus focus outline nine so now the outline will be gone and let's decrease the margin to 3. R2 now everything is working fine and let's just uh increase the font size a bit so for the phone specifically I would add the form size of text MD is normal so I will add text LG let's see okay the form is well visible and let's add a margin top empty of five great and let's take a look at this whole form so this is the content and add a border to just to debug that how it is looking border two so you can see this is the we will remove that border definitely later if we need to but let's add a padding X on the x-axis let's add a padding of uh three see and this is uh taking the shape padding four okay and padding y average five or eight how does it look so we don't actually have to remove the Border this is looking fine just need to add rounded value so it adds some border radius around it LG okay uh for better to excel double XL so this is looking great and now add some shadow box shadow of MD let's see okay now LG let's try yeah this is looking great but let us compare with the thing we are cloning trying to clone we have to add this to start building your Hub okay uh we we need to find this Emoji but let's skip the emoji for now which you can always search on Google let's just focus on the designing part for now and we will add this tag again so after this tag here comes the another tag what was that again start building your Hub okay start your hub and this one will be having class name of text Center obviously and if you notice that it will have some spacing on top and bottom so it will have spacing of p y on the y-axis and of 5 pixels let's try yeah this is looking fine and font was bold of course font was bold and let's text color set text color to text Gray 500. let's try it this is taking the shape the main thing that is left is this account type which was a check box type for that we will start adding the check boxes so immediately after the input Fields where is it okay immediately after the input Fields I will add a heading let's say heading 5 account type let's Center this and also make this font a bit smaller class name text SM text Center and immediately after that was those check boxes so for those checkboxes along with this if you can see and the check boxes are also having this label so we won't be using directly labels so we will add the check boxes and then add paragraphs along with them let's start add a span for this checkboxes so they can be done clicks for each check boxes we will create a label let's say label we don't actually need to add label but we are using this semantic label tag for better understanding we can also use the span tag but we are using label to differentiate from other semantic tags like span now inside this we are creating an input input type will be check box you can see the checkbox is visible we can you can also use that let me resize it again and we have a checked attribute in the input tag checked while it is checked so we have to do some changes so let me create a variable State we will named const checked set checked is equal to U state so we haven't imported used it upon clicking on this as it is showing this icon it will automatically import the user you can see it has added this portion inside the import part so we are going to import your state by for now it is empty okay so let's not give it name of checked so it will be confusing for us so let's give it a name of category category and we will also use category so while it is checked the category will be set to whatever the value will be so let's also add the value or else I will be confused so for now it is created was it Creator yes it was created let's not focus on this error for now we will fix this so when it is checked the value will be created and add this insight Commerce and and to use this checked we also need to interact it with the function on change when it will be changed a function will be called let's name it what a handle category change handle category change and let's create this function to or it will always show errors and it is receiving a parameter event and first do e dot prevent default rewind it's not necessary until you are just receiving a form but we will do that for practice purposes and how we will use this so when this will be called this function will be called it will cache the event and from whichever element the function will be called it will cache the event and it will ask the event Target and this value will be set to category so the category will have event.target whichever element it is the event at Target and its value so when we are using the targets value we also have to add a value to this so the value itself will be passed to the category State data so we will add a value which is uh the same as this we are passing in the category so when we are clicking on this this will be updated but we can actually uncheck that until we have added one or more so let's copy this and paste it here and we will name this agency agency and let's copy this value will be same category will be same let's try this when I click on this the category will be set to Creator when I click on this the category will be set to agency again when I click on this the category will be set to Creator and let's set another one and this will be added as brand let's add multiple items together and this is brand and now the styling is a bit mess and we will fix that in a moment so we select all of them together and add class name and this will be Flex Flex row let's see how where it goes and each of them will have a padding again a margin right three and let's add border to see what is the progress for now we will keep adding the border and inside each check box we will add a class of adding class name P of X2 let's see padding does not work here we will probably have to make inline block if that doesn't work too okay that does not work and we will now have to work with this paragraph class name padding of left two three two two is fine I believe okay two is fine and now we can just remove get rid of this what was that order we can get rid of this border okay we have to get rid of this border for all three items so that looks quite catchy so the designing is done and now we have to add this register button we have created this one this one this one and we also have successfully created this account type but obviously this color is missing now and we now have to do this portion now okay great so first things first let's make the color text indigo and let's choose what color next Indigo text indigo 500. and see this is probably fine or make it work with 400 and now the submission button input type will be submit you can also do button but I prefer input so the value will be registered register or as this is the apply page we have registered here but I will keep this buttons value as applied as the actual Pages for application so let's style this button last name BG Indigo 600 let's see what is the color okay and let's make the text color white the vertical padding would be three or two okay and add some border radius rounded MD or maybe more rounded let's see how that was yeah almost looking similar and when hovering over this I want cursor to be pointer tight cursor Dash pointer okay so one thing is left so when someone submits the form it actually calls a function so we haven't added on submit okay now I have to add on submit function on submit it will call it function and the function name will be handle register and we create this function now or else it will keep giving us this error cons handle register which receives the parameter event and again we will do e dot prevent default function and we are missing an e so one thing I have noticed that while clicking on this check boxes I have to click twice in order to get them actually clicked I believe it is for this event.crement default so I will actually remove this even dot prevent default and let's try this it is seamless now and now coming back to our background which is actually we need to add using custom CSS we have this background class which we have set up at first so I will come to this background class I will do position position what is going on position relative and I will add a background image background URL and we have the images background images this one is for desktop and this one is for mobile I will show you in a bit how to use both different images for different purposes so we have it under public which is uh which stands for Slash and then images then the background image actually so I will do images and then what was the name I will just simply copy that I don't actually have to type it over and over and this one is named what um background mobile so I will paste this and let's see these changes have taken places and now uh we haven't actually set a background color for this so let's just set a background color for our total content form so BG White so we have set the background and now let's take a look at the mobile how it looks in the mobile the image is actually a bit distorted so we will use a separate image for mobile we'll copy this and we will do media queries at media cream and maximum width 768 pixels and then paste this and change mobile so different image now will be used you can see the different image we had inside this public folder this image is being used as a background for our desktop and this image is being used as background for our mobile so we have one thing missing the image is too shiny so our main form is actually not that attractive so we have to dim out the image without actually editing the image so how we can do that we can add a pseudo class before the background we will do background colon colon B4 and the content of blank which position will be absolute that is the reason we have done position relative and we don't need position relative here because we have already set a position relative for background the only thing we are changing for mobile is the background URL and this thing will be available for mobile also so position okay I don't know why I keep misspelling the position absolute and top will be zero and we will make the width full so that's why we are setting top and left to zero or width 200 and height to also 100 and now the main thing we will add a background color background color of we can also add black so this thing whole thing will be added to black but we don't want complete Black we want a dimming feature so I will add RGB colors so Black is Black stands for zero comma zero comma zero so this is complete black but we want some kind of opacity control so we will add zero point almost five so half black half image so this is it we have completed the background Imaging now anything else left I don't believe anything else is left okay so we don't actually have any footer for this link tree if you take a look at the professional link Tree website they don't actually offer this kind of photo because because they are too distracting for other users we are who are opening link tree so we will add this kind of footer coming back to the footer component where we have it let's close this server and components footer we will delete this whole thing that we currently have let's go Let's see we have deleted the footer and now start adding this footer the features of this footer is when whenever someone clicks on this this will open up in a affiliate or a campaign link so the main feature as I said it will open up a link so I will add next link I will have to import the link upon clicking on this it will automatically import the next link or maybe I had imported the link as I previously had a footer obviously so I will add a link path for now I am adding the Home Path and this will have Target blank so it opens up in an another tab so let's start adding the content for this for now I am editing an image source is the icon for this website which is favicon dot Ico which is located under public images and so Dash is for public and then for images and then fevicon.ico [Music] we don't need that semantics and now self closing tag the image is working okay the image is working we will uh set this to Absolute so that the background doesn't work um we'll see that in a bit and now let's add what was that was it okay that was a heading I believe uh heading off five let's add uh try link tree was it trial entry and you can also add this Unicode Arrow or you can search on Google and copy that I won't be adding that for now and let's add a class name to this text indigo 3 400. that what is it okay I have to make it a flex row so inside the link I will add a class link Flex Flex row okay and now item Center so they are now vertically centered and the H5 will have a padding left of five four okay three will work fine better and it will have a bold font font bold and on hovering it which it should change color so let's just close this mobile responsive window and on hovering it should change color so what I will do I would add hover event and then text color will be a lighter so text indigo 300. so on hovering the color will change but I don't want it to change colors so soon so I will add a transition property so transition uh you can set colors but I will say transition all and the transition duration will be 300 milliseconds or 400 milliseconds so the 400 milliseconds animation is working fine but the animation I will be adding I will be adding inside in the links just because I will also add a rotate animation to this logo so whenever someone hovers over this image the image will rotate to class name forward rotate six or five okay five does not work I will leave six works yeah six works I don't I want you to rotate a counter clockwise so this will now I have to add a minus and let's add more and let's add 45 degrees of rotation so this works just fine so now add a transition to here and transition and duration the transition is not working for the H6 we will have to add transition separately here and we will remove the transition from the parent element see when we are hovering over this this is affecting this form so we will add display absolute absolute and let's get rid of this background color and text white remove that we are using a only text that is using a custom color so we don't need that actually we will remove this absolute from here too and make it fixed and let's uh it is gone so let's add a position bottom zero let's see where it is uh let's add bottom three left half one by two so it will come here and we have to translate it 50 so it comes to the middle so we will use minus Translate Dash X so it translates on x-axis and 50 defines by 1-2 let's define this you can see on hovering it is showing that translates minus 50 percent so it is coming back minus translate and on translate x axis and this is for 50 percent you can see it has centered so let's just position the footer a bit over like almost like a five let's compare this with this uh I believe the background color is a bit more blurry than this one coming over to this apply module and let's not make it 50 but 80 percent dim okay now the footer is much more visible and it looks more appealing great great so with this I guess the front end is front end for this apply page specifically is done yeah this is just fine let's try this out we don't actually have the backend as of this moment we haven't created that but we can try out this one of course test test and we can do one thing we can try out this form by using a front end so coming to this we will have to import the toast in both toast from reactostify we have installed this Library so upon clicking on this handle register it will say toast dot you have submitted the phone okay now you are registered you are registered you are registered successfully yeah this should be what the phone says let's see all the fields should be required to uh we should make all of them required so that users does not miss any field specifically the required username I mean user handle so make the email required the password required and most of all the social handle should be required okay great and okay this should be email obviously let's try your registered successfully but uh I have a debugging thing in my mind let's try this out uh required gmail.com never mind it is not going to backend so we can just set anything here so when we are clicking on this we haven't actually added any type of account type that too is being uh sent to the back end so we can also uh cut this off when let's say the category is empty right now at this moment so if category is empty let's check let's add a checkpoint here uh if category is not here category then you are returning here with the toast error add a category add a category let's say we have our backend function here backend call so if there is no category it will simply cut off the function via this return statement we are using required attribute in this three input Fields but this category is not using actually any required field so we are handling this with this if else statement there is no else actually so we are using if if there is no category it will return and cut off this function it will no more go to the backend call so this is the actual thing so let's try it out again required gmail.com and I will set this as password and test and when we click on this it will say add a category so upon adding a category and let's apply this you are registered successfully so in the next video we will be implementing the backend for this registration as well as we will uh create another form which will be much easier because we will be just cloning this form to login form and we will also add a login functionality register functionality from the backend [Music] previously we created the apply or register page and now let's take a look how that was so let me start the server [Music] give it a refresh [Music] and this was the apply page and now let's create the login page as well so inside the Pages directory I would create login.js and the login page is quite similar to this apply page so inside login.js I will just copy everything that we created inside the register page and paste this here and now let's head over to login page and you can see it is exactly the same thing so now let's start customizing it so whatever we don't need we will just get rid of it let's make it well indented and we have to name handle register handle login and we don't need category just because we need that while signing up so we will get rid of handle category and we will get rid of it this pan and everything let's see how that looks okay so we don't actually need the social handle we just need email and password and in the email field we need email icon so again we will go to SBC viewer and search for email and let's look for a good icon of lower size this one is 348 bytes and this one is 295 bytes this one looks more beautiful than the previous one we don't need width so get rid of it and the fill color should be Gray and let's copy this one and inside public directory SVG we need to create email dot SVG and paste this here first change this to email and inside this input we are just gonna replace this with this input and we have to make changes the shadow will be not individual let me show you this is having a individual Shadow as well as a border we don't want that so we will get rid of this Shadow and Border for this let's see how it is we don't actually need padding for that too and we don't need rounded and we just need this outline property so that when some user clicks on this they don't see the outline and we will get rid of this secondary email Remove that looking great and now modify these headings you are now among top one person creators or let's just remove this one person top to readers let's modify this tagline also access your dashboard everything is looking properly fine but we need to find a way to navigate to the register page and then again navigate back to the login page so we have to add a link here but before that we have to change the apply to register let's change the value sorry not register but login and now after the fall we have to add a link I will add H4 new here and then add a link reference apply make sure you have imported link so I haven't yet import link from next link next link and let's give it a URL of apply page so whenever someone clicks on this there will be landing inside the apply page so going back we have to move this outside of the content so we will get it out of the div and let's see check it yes it is outside the div and let's style this add class name text Center let's divide the page into so it is better visible and let's collapse this part text is now Center and make it text White and for the link part I will add a separate color so it's better visible and add font bold too and last name font hold better and let's say add a color of text red 400. 400. yakul so let's add a padding top PT 8. okay too much pt3 will be great greatly and the same thing we will be back linking from our apply page so coming to our apply page after this tip we add this and let's head over to the apply page okay if we haven't imported link for the apply page let's import it here too so it is doing great but it needs a modification I will add this to login and the hyperlink will be login And the tagline for this thing will be something new we will say already have an account so login and change the text to login let's refresh I don't know why this isn't working okay we are doing it for login.js I don't know why we just did that mistake let me let me just swap those two we have added both and change it here for register page we have a backlink to login and for login page we have this so both two pages can navigate to each other via this link before moving to backend I want you to know that the components we are using here are uncontrolled as we are not using any state variable for those components there is no way to pass them to backend actually there are a few ways but that's not a good practice so we will create variables for them const okay this is for login let's first start with the register page we will do that later and this one we already set for a category and similarly we will use U State hook to create them const handle and set handle this one is the variable name and this one is the function that updates the variable and we will use U stick and this is initially blank and similarly we will create one for email and one for password and another good practice is to create a single one for all the info and store objects for them but for Simplicity purpose we will just create separately const email set email password and let's modify the input Fields so for input what is it this is social handle we will set up value the dynamic value will be what is the name it is handled the dynamic value is handled so as we have initially handle is empty so we can't actually type anything here so when we add on change attribute I will change when when we type anything in this input field you can execute a function but we will write inline function which will have a event parameter uh the and we will call the set handle function that I previously said is used to update this handle variable the set handle function will have access to the event and event.target and the value that we have here initially that was empty and when we start typing anything that value will be updated to this handle so let's start typing this and this will be having the value handled and handle variable will be having this value whatever you type in here similarly we will update all of them this was email and on change let's just copy the template and just do this repeatedly and change and just copy the whole thing paste this here this is password and says set password and this one should be email make sure to make it capital okay I believe all of them are now fine let's start typing okay great give it a refresh so that they're gone and now follow the similar with email so what we will do we will copy these two as we need in login to and we will copy this password field and make sure that this is type password and paste it here and let's copy the same for email and inside the email field this one is for email field paste this and let's head over to here when we try to login it will show error this should be an email so test at gmail.com and let's try category is not defined okay we probably have copied the whole thing so that's why it is happening let's see where it is the 14th line where is 14th line okay we don't actually have any category so that's not necessary at all let's try you are registered successfully this should be changed to you are logged in let's try again you are logged in and you can do also one thing uh when the function is completed then you can set the email value to blank again and set the password value to blank again too so upon logging in those will be blank again but as we are just developing this application we will have to fill the form again and again so we won't be doing that but on deploying you should do that actually we have created the front end login page as well as the register page we don't need to save this so now let's head over to the backend and let's start implementing the backend so we will minimize the front end for now and full screen this let's go to the back end ex.js and let's start working on the back end now we will have to use mongodb so we will require the Mongoose package balanced mongoose is equal to require Mongoose a good practice is to create a DOT EnV file in the root not in the root but in the root of the folder and set your URL here underscore URI or whatever name you want to give it and use this inside your index.js like Mongoose dot connect Mongoose dot connect process.env dot uh environment variable but we won't be using it this way we will just simply copy this your DB name copy and then we will use this the manual way but in deployment you should follow that syntax and in case you haven't set up your mongodb you can try out mongodb Atlas mongodb at last which gives free credits to students as well as they have free tier but I am using mongodb Compass in my computer and one thing to make sure that mongodb runs on this port but make sure that in latest update of node.js they are not actually supporting this localhost instead you have to type the host which is 127.0.0.1 then name your collection let's name it link tree 9. and when the connection is established you get these functions so upon establishment of this connection we will have a callback so inside the Callback we will console log console.log mongodb connected mongodb connected and if the connection fails then catch enters and catch will have a parameter named error and this will console log the actual error Dot message and in development so that we don't run into any issue we will set strict mode for query conditions to false for that type mongoose Mongoose dot set tricked query to false and let us now start with the functions so we will use app dot post and on path API slash register we will have a callback which will have parameter request and response for now we are sending a response we won't send this we will have register you can use Postman to check this path and for that we have to obviously start the server so let's head over to server and do npm start a note 1 has started up close all the rest of the tabs don't save always discard [Music] and open a new tab and let's make it smaller and I will do what I will just split screen again so mongodb connected it is showing that and let's go to localhost 8080 localhost 8080 and then on path API Dash register we'll send a post request a wise isn't it full screen I have to make it full screen it's not that responsive so when we send this post request it sends a response of register so the path is working fine I will just minimize this and start working on this you can also separate out this function this is a great concept so I will just cut this one and create a function here called register user const register user and this function will be the same function we just cut out from here and this function will now be used as a callback function and let's now test this thing again with Postman so when we do that we get our response this is just awesome and this just produces the concept of controllers and if you don't know much about controllers in node.js and you are new to node.js then you can check out this blog post by indig I have written the blog post this uses examples to make you understand what is controllers and it also differentiates between routes and controllers which are almost controversial to beginners okay coming back to our project so we will cut this function and we will create a directory inside the server named controllers and inside that we will create auth.js we will paste the function here and this need to export the function module.exports registered user and in order to use that function we have to just import the function const the function okay sorry the register register user function name and we have to put the path obviously require dot dot slash where is the file controllers okay so dot slash controllers controller slash auth so the function is now imported and we are using this function as a callback now let's try again and again the response is coming back let's try changing the response uh let's open this and register from called callback and let's try this is working fine voila and in the same way we can create const login user function which will have the same parameters I understand for now and we will export the function login user login user okay let's just close all other tabs and they are so much confusing for now and let's create another path app dot post API slash login and this will use the function called login user and we will have to import that include it here login user let's try sending a request to login API slash login from callback is a response and let's now write the actual functions but before that we have to create models for our users so users will be signing up so we have to save all their information for that we will create a models directly and inside the models we will create a file name user.js user.js so we have to require the Mongoose const mongoose is equal to require mongoose and then we need model and schema as well model schema from mongoose this is the Mongoose we are requiring first and from that Mongoose we are using model and schema but make sure that you are using capital letter of this is when using the schema we will first create a schema for our user user is equal to new schema so user will have a name which will be type string and it will not be required by default as we are receiving user handle so user handle will be required and we need bio bio will be as well type string so better we just copy this type string portion and paste this for each one and we need email again type string and this one will be required so we need this upon signing up required set it to true and everyone's email should be unique so set unique to true when someone enters the email that the database already has so it will return a duplicate key error and we need Avatar this will be the user's image URL so this will be the string type as well and we have to set a default value for here but we will do that later and we'll need password obviously which will be stripe string as well as required true upon signing up and then we need role which we just saw in the pricing page that we have three roles we also have that on register page creator agency and brand so we have to define the roles here in the database little bit type string but it will have three variations so what will be those it will have creator brand agency and another one we have is admin type we haven't used the admin type in the front end because that will be for backend purpose and this will be much more secure in this way and when users sign up there will be a assigned default role will be which will be created if they haven't chosen anything like brand or agency they will be assigned the Creator role so we will add a default value Creator default default will be creator and now the user handle this will be type string again type string this will be required and this should be unique this is a must and when users try to add their links the links will be a array type so we will have an array and each array which array of links will be having a URL which will be type string and each link will have a title and later in the next course we will have icon for each link and as we need social media of those users so we will add a field of social media social media and this will be an object let's first start with Facebook then Twitter then Instagram then YouTube then LinkedIn and then GitHub for scalability purposes you can also add website uh website we have already that inside the links so we don't need website but if you want to accept donations that we will be covering in the later part if you want to do that then you can also add a donations array so this will be an object and then we you can accept Paypal links when more links and others so that's a different purpose we don't actually need them and let's let's just remove them and we have to name our collection so we will name the collection what will be on the collection will be name user data what is user data link tree and now let's create a model from this we will name this user model model from schema user data from user okay it was Capital I've been inbuilt and now we will have to export this module dot exports user model user model and upon exporting we have to obviously import that inside our backend so as we are not using Mongoose directly inside here so inside the auth we will import the user model cons user is equal to require dot slash models slash what is the file name user I don't know why the server crashed let's check this cannot find the module model slash user okay we are using the same path inside this so we have it outside another directory so we have to go outside the directory and now let's check mongodb connected now we have set up our model and let's delete this resend now we are ready to receive anything from our front end so let's open the front end and start sending anything let's open to register page and inside the handle register function now we have to implement the backend back-end part we will be using fetch that comes within JavaScript so we are not using anything like xeos inside this you have to pass the backup path where you will be making the call to so we have the backend path like HTTP localhost on port 8080 slash API slash register so let me explain this a bit the path the backend was on localhost let's let me divide that and let me show you this is the backend URL localhost 8080 and this is the backend code and inside the back end we are heading over to API slash register path this is the API slash register path upon calling this we are executing this function if we have a post request so defining post request we have to add this method as post make sure post is on capital letters and we have to set a header's type which is con content Dash type to application Json make sure this is slash instead of a dash like content type and we will add body but before that make sure as you are using a content type Json you have set up the express Json middleware so for that we will make some space and you app.use Express dot Json this is a middleware for interacting with Json as we are making call from another Port we also need cross origin resource sharing so for that we will require course Choir Oh what is it required course and we have to use course as a middleware for each and every request you can also specifically Define the path for the course request like localhost and specific domain names but for now we are accepting each and every call from any domains so now coming back to the apply.js Now set the body type now stringify everything we will be sending Json Dot stringify and let's find what we'll be sending to backend we will send handle email password and category so let's type them handle email password and category these are the four things that will be sent to this path and let's open up the backend let's open the resistor those four things these will be received in the backend we will destructure them handle email password and category and we will destructure them from what request dot body as we are sending them via body here you can see we are sending them via body and that was a request so request body and we are destructuring them to each and every variable and let's now for debugging purpose console log them request dot body when we receive a call we will just console log them and see if they are being received properly or not and let's try sending something open the apply page and let's open the network tab also I will bring that here to see what requests are going to backend so I will handle test at the rate gmail.com and let's name it test one and set a password test type Creator and send apply your register successfully but not actually I'm registered That was supposed to be sent without any type of checking so let me just check this this is a option three Pride request and this is the actual post request which is I believe not actually sent properly so this is the type of we are not getting back any response right we are receiving everything inside the backend so we have to send a response obviously now send a response dress dot Json the response will be message success and status 200 let's check this and in the front end we will remove this one and add a condition here only if our fetch request is properly done then do something then whatever response we get convert them to Json and then whatever data we receive after the previous function then do this if data Dot message what was the message again if data Dot message is equal to success if data Dot message is success then only this notification will be sent or if that doesn't work as expected then we will receive this toast we will paste the same toast here but instead of the success message we will receive the error message error Dot message let's see let's give it a try username will be Test 2 and this will be test 2. let's see QR registered successfully let's see the backend console and Test 2 is received this tool at the re gmail.com is received now let's work on the register function upon receiving all these details let's now create an user cons user await to use the weight we have to make the function asynchronous async await user dot create we will pass handle and email and the password is named let's see the model password is as password where is it password is password but one thing is different here we don't have any category field in our user model instead we have role so we will pass that category as role role category and for users to have at least single link we will create a default link const default link this one is optional but this can sometimes crash your application so it's safe to add a default link so whenever there will be no link your application might crash so we will add a URL type finance.com title will be type finance and you can add anything whatsoever that does not matter and icon will be a blank obviously let's check again we had three Fields URL Titan lion we have added three fields you can also just simply add blank here that does not matter as long as you are adding something but I will add that and we have to pass that default link also in the links field we are adding array element default link and we are good to go but when we are creating any users we have to also make it secure so for that we will use Json web token for now just stop the server we have to install two packages npm install Json web token which will be used for signing JWT and another one is JWT key code we will install both of the packages Deno installed so let's start working with them I will just make the front end smaller and let's import the JWT in the auth const JWT with wire Json web token and whatever we receive from the user we have to verify first and then sign it and send it to the user so for that we will create token const token and we will use a property of JWT JWT DOT sign and what we will sign we will sign the email you can also grab the user ID from mongodb and merge it with this and send the token to front end and in order to sign this you need a secret key you can just do secret or whatever your passcode but I will make it properly scalable so for that we will use dot EnV and inside the EnV we will use our secret key secret underscore JWT will be test key and we will now use this secret key but for that in index.js we have to require the dot EnV it will be like require dot EnV and run the config function of it and then you will be able to use the process.env anywhere inside this index.js as the function is being imported and run on the index.js finally so we don't have to again import the dot EnV here so we can just do process for dnv and paste the name here and when we are sending response so add the token here this will be named as token and the token will be passed and along with that we will pass the user ID to so we will pass user which was this user so we will pass this ID in mongodb the ID object ID is stored as underscore ID and we have a status the status I will add success and message will be user created [Applause] [Music] and we we will have to return this and let's just add a try cache block so we don't run into problem we'll cut this everything and let's add a try catch block and inside try we will add our main code and when any error happens this will be caught by the catch and the error message will be returned we will copy the same syntax here we used here and inside restart Json we will add error happened okay so the message will be custom we will do error Dot message the actual error message will be sent as message and the status will be error and we won't be passing any token as well as not any ID and now let's create an user and see it reflecting in our database we will come to our front-end dashboard and clear up the network tab let's make a actual user and name it actual and the email ID will be actual gmail.com password will be actual and let me open up the mongodb compass I will connect and open up my link 3 9 that I had open this up start applying the request is pending fail to fetch let's see what happened okay we stopped our server while installing the Json web token we have to again start the server Run npm start command the server has crashed let's see what is the reason cannot find dot EnV we probably haven't installed dot Envy so let's install this dot CMV and let's start it again and let's see if mongodb is connected mongodb is connected before returning we will have to console log the user to debug this console.log user so if user is created then it will console log this and before that we will add a message user yeah that's great now let's send request the fetch request is post okay fine preview we get a preview so this is the token that is being sent to us and this is the ID that means that we have it we have created the user let's give it a refresh and yes we have created the user the password is actual the handle was actual that we just did so let's try to send another request and this time this is option request and this is post request as you can see the message is having duplicate key error collection and we don't have actual user we have the same user we had previous time so this is working just as we expected and let us just send the duplicate key error to front end so user can understand that someone else is using this handle so that they won't scratch their mind off so let the users know that someone else is using that in the catch we will modify this and send a toast dot error try a different username I believe setting only this won't work we have to tweak the backend where is the backend code and let's check what was the error key the error key was one one zero zero zero and let's work with it when the catch is happening if error dot code is this then we are going to Center response as return response dot Json and let's copy this and send a customize message [Music] try different handle or email this is the error and when the duplicate key error occurs that's basically for duplicate email or duplicate handle as we are using unique true for both of them so we are just warning users that try different handle or email because the one you are just trying has already been used by someone else when if is not activated this will just simply send the error message so this is a great way to let the user know of what error they are actually receiving now when the backend is completed now let's head over to the register page and do something like local storage saving local storage and if data Dot message is equal to success we will just extend this function and we want to set an item to local storage and the item name will be link free token make it unique and we want to set the token to local storage with this name we are receiving make sure we are receiving the token we are receiving the token that we just created via jwd.sign to our front end and this data that we are passing we are saving data.token so the token that we received let's see in the first call this is the token we received to our front end and this will be set to our local storage and why we are actually saving this it will help us with the authentication and let's do something new let's make the user interface more user friendly so we will also check when the form is actually submitted for that we will create a state variable submitted and set submitted use State initially it will be false and when actually the registration is successful we will set it the set submitted to true instead of rendering a new item upon signing up when any user signs up and the registration is successful then we can just forward them to login page we have to import the router import juice router user use router from next router and we have to initialize it const router is equal to use router and successful registration we can just remove that but I will keep that for now because I have some other plans on that so upon successful registration we will just simply push we can do router dot push the URL we want users to navigate to we will do login and let's try this out let's refresh this demo 2 demo to at the rate Gmail oh why this is capital gmail.com and set this as password agency type yeah you can now see on creation of account we have moved to the login page but we don't actually need login page because we already have saved our token let's check the token this is the token that is already saved to localhost and now we can do anything we are already logged in let's first close this Dev tools let's say we create a page which will actually check if you are logged in or not and if you are not logged in it will transfer you to login page so it will actually validate your authenticity so let's try implementing it okay I accidentally removed the content that I had here while talking so let's see the dashboard page right now which does not use any authentication at all this is the dashboard page let's Center it so it's more visible and I will add this section dot Main and it will be here and it will have a flex Flex column no I don't need that I need justify Center so it is at the center so now let's import use effect hook and upon loading the use effect hook will run once we will do use effect and the Callback function with the dependency array and we will keep the dependency array empty so that it will run only once and if the local storage get item what was the item name it was link tree token if the item is not there then we will return and we will move to Window dot location to link to page login and let's try this so when we refresh as we already have this item so this won't send us to login page as soon as we delete this item remove item so the item is now gone let's check it by doing get item we don't have this token so let's give a refresh and you can see it is now sending us to the login page now try logging in we haven't actually implemented the functionality for login so now try registering again for an account but immediately after this we will add login function for our backend so now let's create an account account 39. and we have Triple C gmail.com created and we have this this has been console locked and let's now try getting the item we have it and let's move to dashboard and we will now be allowed to access the dashboard yes and now as I said let's implement the login and now we will do backend implementation here back in here and coming to our login user we will receive the same from request body but we won't receive the handle as well as not the category we will only receive the email and password from the front end let's open up the login page coming to the login page we are receiving email and password and everything else will be just like the register we will add right catch block and inside try we will find a user const user is equal to user dot find one this is a method that Mongoose provides and we will find them via email the email they provide in the form and the password and email both should match we will query via email and password and we will console log the user and if there is no user if no user that means we haven't found any user with that same email or password so we will return from here return response.json status is error the error is invalid 310 Shields so one one one very important thing here you should not say you should not say that the email is wrong or the password is wrong you should always say that invalid credentials when we just expose that what specific thing is wrong in your credentials then hackers can actually modify their query and their task will be very much easy to crack your database so we should always say invalid credentials then the hackers will be confused that which one is actually wrong the email or the password so that is it and now let's generate a token just like it JWT sign we will use the same syntax we will sign the email with this secret key that we have in our EnV environment file and we will send it as a response return rest dot Json and copy this same thing user created we have to send change the message user found and strategy success token is this and ID is user ID that we have in our mongodb object ID this one so when any error happens then we will return something else return maybe return the same thing we return for creation of accounts and now coming to the front end we have to implement it now we will again use fetch and now the path is http localhost 8080 port and it is API slash login let me make sure that the path where it is at index.js yes the path is APS slash login yep and the method is post message post let me again make sure that the method was pushed or else I'll be confused to have an error so method is post and we have to set headers content type content type application slash Json and then the body Json stringify and we will be sending email and password email comma password and let me make sure that we have them okay we are sending email and password as body our headeries content type application Json and we are using Json passer and fetch URL HTTP localhost 8080 API login okay all set and then we use dot then the response will be passed and then whatever response we receive as data we will process it if data dot status what was the status let me check if it is successful then status is success if data dot status is equal to success then do this if data dot error okay no we don't have any error passing here if our status is error and this is a both are our status errors so I will name this something else I will name this not found not found if our data dot status is equal to not found then we will send a toast toast dot error user not found and if any error occurs then we will do catch error console.log error and when we have found the user successfully we want to set local storage item also local storage set item and Link tree token and the value will be data dot token make sure we are passing the token this is return we are passing the token yes let's try logging in I actually forgot all the username and ID let's try this one the password is actual okay let's log out first local storage remove item and we are now logged out and let's try logging in the password is actual and login okay there is some error post is not defined okay we forgot something we actually forgot to add the commas let's try again you are now logged in and let's clear this up and check if we have the token yes we have the token and now we can access the dashboard yes we can access the dashboard so the login function is now also implemented we can also add a step here just as we did with the apply upon signing up via were redirected to our login page so upon logging in we will be redirecting the user to the dashboard so we will import use router from next router and we will implement it here const router is equal to U router and when everything is successful then router dot push dashboard let's try this again also so we will for logout we will use this remove item we are now logged out when we refresh this it will redirect us to login page and then again login actual then try to log in and you can see it has moved us to dashboard and I actually have to get rid of this this keeps popping up every single time so this is it we have implemented the login page from content so in this tutorial we have implemented the login page the register functionality the login functionality and in the upcoming tutorials we will be implementing the dashboard page the link tree and the social the profile editing everything so stay tuned [Music] foreign of this course as we previously said we will start with the dashboard designing and let's say what is our progress with dashboard let's start the server and this is the dashboard right now we haven't actually done anything at all we only have this validation user check so we will remove the content so everything is gone now let's start designing it first create a parent div and let's not give it a class name for now and I will create a main section the menu is being created just for semantic purposes and inside the main I will create sections first I will create a section and there will be another section which will be for analytics so we won't be implementing the analytics for now but we will keep the section for now and our whole content will be inside the first section and before the main we will have our header we will implement the header later so we will just keep it there and let's start designing the dashboard boxes let's first create a box and we will copy it four times before designing it let me open the reference image for it so I have opened my dashboard reference image here this dashboard has three levels first one is header second one is the boxes and third one is the analytics we will be implementing only the header as well as the boxes that will have information individually but we won't be implementing the analytics part for now that's for another time and let's start coding first split this up so it's much more visible and I will switch to our page so inside a simple box I will give it a display Flex items Center and let's just close this terminal for now so it's better visible and collapse this part so before starting to design the Box let's take a look at the reference box image so this one is having a complete box and two separate section one is SVG and another one is text so we will create two divs and this one will have our SVG the first one and the second one will have our text so let's add the image right now image SRC let's see what is which do we have inside the public directory for now we have email and IG let's use the email one and later we will change it obviously and let's add a bit to this for that we will add w six let's see it's visible now and let's add a demo title and let's now style them taking a look at the reference image we have a actual number which will keep track of our growth and all and another title so for that we will create two spans first one will be having our numbers this will be inline block text size will be a bit larger and font will be bold and it will have a number and another one will be a bit lighter so that will be our title it will have it text color of Gray 500. let's say let's name it links and let's give it five links so it's visible that five links we have and we can also change this to a URL SVG but we will do that later let's first focus on our designing let's style the SVG let's give it a background color of let's say BG red 400. then inline Flex and flex shrink zero and if you hover over this it will show that the flex shrink is being applied and let's Center it by item Center and do justify Center also give it a height 8 16 width will be also 16 and after adding the height and width you can see the item Center and justify item Center is now on action and let's now give it a border radius I will give it a border radius of circular so that will be rounded full and give it a margin write of let's say 6 and now let's style the outer box for that we will come to this section and give it a padding padding of 24 pixels and background white give it a shadow and let's just give it a border for now and give a bit of Border radius and now the main twist is here we have to make this box Dynamic so that we don't repeat it actually so for that we will cut this whole box out and create a component for it we will come to components and create a component named Link Box and inside the Creator react add a function component and paste this give it proper indentation [Music] and let's import it make sure it is being exported and let's import it here import Link Box from components slash Link Box let's use it here so it will be visible and let's now copy this and paste this twice so two of them will be visible and now the main twist will be here that we will make all the content dynamic so for that we will edit this link box let's collab this again and we will be receiving props which will be Link Box title for this title and we will be receiving Link Box number Link Box SBG this one is the title this one is the number this one is the SVG and we will also pass this background color also for that link Link Box theme and let's use them inside here so this one will be lb title this one will be lb number five let's change it with lb number and where is it the SVG will be dynamic in this way so make it Dynamic then use backtick then SBG for path this is SVG folder path and then make the SVG component Dynamic so for that we will use template literal and we will pass this one here and then SVG this might not be visible right now but we will just Implement in the dashboard and let's do this background color Dynamic also for that just cut out every class we have right now and make this dynamic let's add PG then template literal then this one LV theme then Dash whatever intensity or background color you want I want 500 then give a plus and then double quotes then again paste our classes make sure to keep our Dynamic class inside backticks so now nothing is visible let's now make changes to our Link Box we will pass the props here lb title Link Box title should be links lb number make it let's say something 12 LV SVG we had it this email and lb theme red and let's see if this works or not red is not working let's see what is the problem here let's try making it manually if this works yeah now this works I don't know why it happened but it just happens in localhost copy this one and replace it with our next Link Box and let's change this blue and make sure that it works no it does not work and we will have to again manually tweak this make it blue one so that it loads up and then Ctrl Z it will work now and let's change this this one should be IG IGS video we have here that's why the IG is working or else if you just put random words random this will not load up we have it in our SVG folder that's why it works so make it growth this will change and put any number like 30 percent okay now zero percent not make it 30 and this will be change and later we will not be passing static data here this will also be fetched from database and let's now style this whole section for that I will add classes and make a display grid on medium type of devices it will have grid template columns too let's see yes this works and on extra large devices grid columns great columns will be four let's try it once yes minimize it again and let's copy them and try it out ourselves you can see the columns are four and let's add a gap between them so there will be Gap 5. yes Gap 5 looks well and let's now download some svgs for them because these ones does not look good on them so let's change them let's search for URL and this one is good as usual we will remove the up width and height and copy this one full screen expand and inside SVG folder create url.svg paste this one and change it to URL see this will be changed to URL and let's try out some other svgs like growth let's use something minimal copy this one create growth dot SVG paste this change it to growth yes this one works and now let's implement the user header that will have majority of our links so this one will have this pan some other buttons and two other buttons at the left side which will have this link tree editing button and this profile editing button so let's come to our code and let's create a component out of it so we will create a component name user header and let's create it actually user header dot Js react Arrow functional component snippet and okay we have probably misspelled it here inside dashboard user header and let's now import it also import user header from dot slash components slash user header let's remove whatever we have currently and ended this properly let's add fragments and for header we will use header tag and for two separate section two separate divs the first one will be having two separate buttons edit profile and edit URL let's add two button to them this is first button and this one will be second button let's take a look at the designing of the buttons a single button will have a SVG icon followed by a title so let's come to SVG viewer and search for profile and this one is good looking let's delete width and copy this create an SVG user dot SVG and paste this here let's add the SVG here image source slash SVG slash user dot SVG let's see if that is visible split screen and we probably have not added any width class name W6 yes it is visible let's now collapse this sidebar and add a title to the button edit profile we probably have to add inline Flex to this so let's add class name inline Flex make it full for now so in Mobile it will take up whole space but in larger devices it will have width Auto so for that Medium W Auto and in order to take its full width we have to also make the two buttons column wise so for that we will add flex and flex column and in desktops we have to make it Flex row so let's copy this button and paste this here let's see what is the progress and we now have to style this button we will be styling both of the buttons together so just select both together and let's start adding padding X5 adding y 3 it will start taking the shape and text will be purple so we will be changing the text color for single one and we will do that later but for now let's just add this text color purple and font bold and on Hover we will change the text color let's just make it full screen on Hover text should be a bit darker purple 700 and also on hovers make the background color change background color should be purple 100 and give it a border radius rounded MD and the margin bottom of three let's see what is the change so this does not look that good right now so let's make some other changes first change this to text red let's see how it is this one should be red and this one make it also red so on Hover this is the color this is the color and let's add some spacing after the SVG so for both of the SVG let's add margin right mr4 too much so MR3 will be good and let's now add border to hold button that is the main thing that will differentiate those two buttons add border let's see how it is border is too light so we will add border too and let's also add some border color to border purple 500 and for this we will make border red 500 so make it red and this button will have a left margin ml 4 yes but in mobile devices we don't need that margin let's see how the mobile design is see we have the margin left in the mobile and this is looking kind of bad so we will make only it available for medium to large devices so this is looking kind of great now and when we zoom out this is it and let's just keep some padding to the whole header so we will add padding eight let's see how it is and too much so we will add padding five let's see how it is it is looking great now and let's just change this this one should be edit links and the URL should be URL okay great and now we should add the user here and this will be inside this second div for that let's take again a look on the reference image this is having an image then whatever pack we have chosen then the username and some other icons so first grab this image for that we will use flat icon and here we will type Avatar and this is the Avatar we've been using if you want the same styling but other gender we have this character too but I will use this one copy image address and while creating our database model I once mentioned that we will be needing an avatar default URL so let's just add it right now we have Avatar here and let's add a default value to this so default image URL will be this and users can later change this one so move it here let's cut that one let's first create a div inside this we will have two separate divs one will be having our username and the pack we are using currently and another one will be having our user image so let's first create the one that will be having our username as well as the Creator pack this one make it text size extra small and in medium devices the text size will be normal it will have a display flex and flex will be Flex column and make it Flex wrap and now let's add content pan inside that this will be our username we will make it Dynamic but for now let's just see the design and another span that will have our roll pack divide the screen take a look at this this is not taking the shape at all so let's just play with the image this will have another div as I said and it will have user IMG let's add image use image source and whatever the model was we just pasted it here for now just for now we will copy this image URL and paste it here and close the tag collapse it again give it a class name as well as width W10 let's try it W10 is fine and make the div class in line Flex this will start taking shape in order to take the user box to its actual place we have to add header styling class name Flex Flex row so it will be positioned on row level and now do justify between and now for vertical leveling make item Center and we can also add some padding here because this does not have any padding or margin at all so specifically for the user box this one is the user box let's add some margin right 5. okay this one looks kind of great and for the name we will add separate styling this should be font bold so that it differentiates from other texts font bold the image should have some margin at left side as well so we will add margin left 5. and I think the letters being right aligned would be a better looking one now take a look at the difference image here the texts are right aligned so we will do text right and also for vertical aligning inside this user box specifically we will do items Center and let's add some background color to this user box so for that we will do BG gray 50. let's try 50. 50 does not actually look that good so we will do 100 let's see how it is 100 is not that much visible at all so let's try 200. yes this is visible and let's add some padding padding X will be 5. okay great padding Y is 2 and let's now add some body radius great and now let's add some notification icon and log out icon as well this is the parent dip for the right portion so inside this we will add two images actually svgs let's try them out first email dot SVG let's see what is the positioning so it is now rendering column wise so make it flex and flex row [Music] add some width to this SVG W6 and let's just search for notification icon this one is looking kind of good let's optimize this delete this width and height copy this create another SVG [Music] notify dot SVG paste this and inside user header notify.spg let's try it out yes this is looking fine but just needs a little bit of modification and now also search for our logout icon log out this one is kind of slim so we shall look for other icons this is looking great let's cut this one create logout icon log out dot SVG paste this I believe we haven't deleted the width and height so we will delete width and height and come to our dashboard split screen again and also copy this and paste this one change this to logout SPG log out yes now add some margin imagine margin right five each of them will be having margin right 5. now the designing is all set and now we have to implement the backend for this user box as well as the logout button so we can just implement the logout button right away for that maximize our vs code and add an on click to this image it will execute a function called handle logout and let's now create the function what this function will do this function will just simply remove the token that we have stored in our local storage and then it will forward us to login page so for that local storage remove item our token name was link tree token and then router.push but for that we have to import the user router import use router from next router and implement it const router is equal to use router and now we can do router dot push to which page login page and now let's try it out and let's refresh and let's click on this it will log us out and let's try to access the dashboard again dashboard now it will again forward us to login page so the logout button is working just add cursor pointer to both of them because so now let's make this Dynamic the dashboard for that we will come to our node.js in index.js create app.post on path data slash dashboard and it will execute a function named dashboard data and we have to create this function as well in controllers create dashboard dot JS now the function it will receive two parameters request and response and before implementing we also need the data so for that we will come to our front end and make a call here we will use fetch API for that now just minimize this one and to the path http localhost port 8080 data slash dashboard and it will be a post request so method post headers content type application Json and the body we will stringify and we will send what we will grab the local storage item get item and our token name link tree token and we will send this as token mail and inside backend we will grab it and let's close other tabs so it's not much confusing for us we will receive the token mail const token from request dot body and before implementing just export this function module dot exports dashboard data and let's import it in our backend const dashboard data from path controllers slash dashboard and upon receiving we will first console log this console.log token mail and then add a try cash block so the token we are receiving is actually encoded in JWT so we will have to decode that for that we will import our jwtd code const JWT underscore decode from JWT decode that we installed previously and this will help us decode the jwd token we will store this in this variable fonts decoded token mail is equal to jwtd code and this will receive the token Mill that we just received from our front end and the secret key that we have inside our environment variable so we can access it via process.env and what was the name again secret underscore JWT and now extract the email from it const email is equal to decoded token mail dot email so it will extract only the email from the decoded string and let's just console log this and give it a name decoded email and now we will be finding any user with this email so for that we will have to import our model cons to user is equal to require dot or slash models slash user from this and we will find it for that we will use await and we have to also make the function asynchronous in order to use a weight user dot find one via email and the fields we need for this purpose is const we will save them in an object const user data let's name it user data inside that name field will have user dot name the user we are finding here the name field will contain the name of the user then roll user dot role then we need the Avatar Avatar user dot Avatar okay the spelling is Avatar and we need handle user dot handle and the links count for now we are just receiving the links count to show it in our dashboard here this will be here so user dot links and we need the length actually if you look at our schema carefully there is our link array if we have seven links so array will be having seven items so we are requiring the length item for this purpose and now return the response return race.json message is success from backend user data the object which is created and status okay and if edit happens we will return a response race dot Json status will be error and the exact error will be sent as error.message era Dot message this is the error and error Dot message AKA this error will contain the exact error that has taken place and let's come to the front end and receive the items so on successful completion of the first request we will do dot then whatever response we get pass it restore Json and then whatever data we get from this we will check if data Dot status if data dot status is error then we will just return it return toast dot error error happen and for that we will import toast import cost from react toastify and if error hasn't taken place then we will have to save the data somewhere for that we will create a state variable const data and set data used it we have to import that too and initially it will be blank object come here and you set data function it will save whatever data we receive and we have passed the user data so data dot user data and after this we will create a local storage item local storage set item and we will name this user handle and the data for this will be data.userdata dot handle let's check this again let's cut the user model and we were receiving the handle and then the user data so the data will be actually data dot user data dot handle and after the success we will toast dot success we will do beta Dot message which actually was success from backend or make it better user loaded we can change that later so don't mind about that and let's now handle any error so we will do catch error console.log whatever error is there and now we have set the data after successful completion of the first request now make use of this data so we will pass the data to user header as a prop ER and let's now receive it where is the component yes it is here so we will receive it here let's destructure the data const what we had here name roll Avatar handle links name role Avatar handle links from the data and let's replace all this data as Dynamic value in the place of name we will use name in the place of roll pack we will use role and where are the other fields this is the Avatar so as SRC we will change this we will use Avatar and we can do one thing we can just replace this with handle as initially we are not accepting any name when user signs up so we are receiving the handle so the handle should be inside their dashboard and let's come to dashboard and as we previously said we will make one of the Link Box dynamic so here we will just replace this as data Dot what we were passing the links length so if there are 15 links it will return 15. so we will pass data.links so let's see what our output is so we haven't actually logged in let's see still what is the output we have to login and we don't remember any password so we have to create another ID demo user11 gmail.com let's copy this and make it password creator type the backend is not working okay the backend is not working so we have to split the terminal c d dot dot slash server npm start let's start the back end okay crashed let's see why it is so it is saying cannot find module underscore modules what is it okay we probably have typed something random I don't know what that is we will have to replace this with the user and let's see I don't know what that came from and let's try again you are registered successfully and let's login you are logged in we have one default link that let's see we have this default link that we have in register function where is it yes this is the default link that we have that's why it is showing that we have one link and let's see we have the username demo user11 and we are using Creator pack that's why it is showing that let's now try logging out we are now logged out and let's login again to check this login let's remove the notification and this is working fine and in the next tutorial we will create the link editing page as well as the profile editing page [Music] hey guys welcome back to the part 5 of this course in previous part we created the dashboard page and now in this part we will be implementing the user link to page to create a user's unique link tree we will be using Dynamic routing by next.js let's take a look at that this is dynamic routing where you specify a page name inside square brackets and whatever page you call on that path can be received via router query and can be used further to make backend calls so let's get back to coding and I will explain further there let's create a page inside square brackets obviously handle close the square bracket and Dot JS create a reactor functional component and let's name it handle you don't necessarily have to keep it inside square brackets I will remove this text and the link to we will be implementing we will make another component for this name it link tree link tree and let's create a component for this link tree.js and for this create another reactor functional component let's start designing the actual entry page use react fragment inside that create a section and first will be our Avatar image so let me open up the reference image for this this is the reference image as you can see first we have our user image then the username then the user bio and then we will have our link tree then we have social handles and at last we have our sharing button so the linky component we are working on will have only this portion where we have image name bio and links and the social section will be inside another component and the share button will be our third component so here I will add an image The Source will be currently blank I will later make it Dynamic that will get the data from backend and then H2 which will have the username and make it Dynamic too let me do one thing let me just suppose that we are receiving a prop name data and let me restructure it first name Avatar bio and what was that links array links so now it will be much easier for us to code so if name is there then put the name or else put no username and let's just replace the source as well it will be Avatar now the bio will be inside a P tag bio we will style them later and create a div for the links now comes our animation we will use a lightweight animation Library called framer motion let's give it a try let's see their website it is very much catchy so you can try this out and we will now go to documentation you can see there are quite a few example components you can play with them and there are some examples you can tweak them and see and you can see there is a prop that has been changed when we change the slider the prop value is being changed so what is framework motion let me go back to his home page framer motion is a powerful animation library for react with primer motion we can create smooth and interactive animation with ease we'll be exploring only two components animate presence and motion dot div let's come to their example and let's come to animate presence animate presence is used to manage animations when components are added or removed from the Dom and motion.diff is a wrapper around the standard div that allows you to animate it using framer making it perfect for animating any element in your UI let me zoom in a bit and let's talk about the initial and animate prop the initial prop defines the initial state of the animation and the animate probe defines the target state of the animation and let's just understand them via coding okay we have an error here we have to set the data yes yes inside the deal as I previously said let's take a look at the example we have everything inside this animate presence component so I will copy this and paste it here give it proper indentation and every animation will be inside this animate presence wrapper we will have the links array so we will iterate over it using our map function it will have two parameters link and index let's use motion dot div let's see what is the syntax and inside that animate presence we have motion dot div so let's copy this here the whole syntax and then we will modify it the key will be our index for each link component let's indent it a bit and we don't need the exit so remove this line initially our opacity will be 0 and after animation the opacity will be 1 and let's not close the tag here and we need also our link component and here will be our link component and let's close the tag here motion dot div and inside this we will create our link tree card let me show you what is linked record each link will be a link tree card so we can scale this link tree easily let's create a component link tree card link free card dot Js and react our functional component copy this one for now and apart from just opacity animation let's add some positional animation so initially y Position will be 40. and upon animation completion y Position will be original and we will also add a transition animation for that we will add transition and give it a delay we will add delay dynamically for each index we will multiply it with 0.1 and add let's suppose 0.5 seconds of delay for each element increasingly so for first element the delay will be 1.1 0.1 plus 5 will be 0.6 seconds of DeLay So for second element it will be 0.2 plus 0.5.7 seconds of delay and for third element it will be 0.8 seconds of delay and increasingly further so let's now start working on our link tree card here I will remove this and add our fragments it will be a span inside the span we will have link obviously we are creating link tree so inside this will be our link and we have to import link from next link add class name and inside link we will have let's see what was that we will have a image or icon and a title and the whole link will have a URL so let's create the image keep it for now and there will be a title which will be H4 and the URL will be dynamic as well so we will have to pass those as a prop we will pass title URL and image let's add image as Dynamic image image then URL as URL and then title of the link which will be title and now let's pass them here as well title as link dot title as we have links array and each link is rendering link tree card separately so we will be using link.title and then same for URL and image link dot URL image link dot image and we are still not receiving any data to the link tree let's get back to the handle.js and we are not passing anything and as we are using Dynamic routing we can use the powerful features like get static props and using get static props we can just do things like this export async function get static props can access the dynamic value and then make calls to the backend like this const slug is equal to params and then const res is equal to await fetch like this to back and call but we will keep things simple and use use effect hook to face data dynamically on the client side so let's just delete this thing before the return we will use use effect use effect we haven't imported it so click on this it will be automatically imported the function and the dependency array in order to get the dynamic value we have to import the router as well import use router from next router create a router const router is equal to use router and inside this we will create an if condition if router query is available if router dot query and the query name will be handled so if handle is available then only execute this piece of code inside the save condition and we will call the use effect again when the router query will change router dot query initially it will run once and then if the router query changes the use effect will run again give it a spacing and inside that make a fetch call and we have not implemented the backend yet so let's come to server index.js create a params based function app.get on the path slash get handle and name the Callback function gate user data get user data create this function come to controllers name a file you get user data.js const get user data it will be a async function request.response and now come to front end to http localhost 8080 slash get slash slash template literal in order to use template literal we have to convert it to backtick now braces router dot query dot handle now you know why we use this question mark here and it will be a get request so we won't be defining the methods now dot then pass the Json response and after that whatever data we received from the previous work on that let's implement it in the backend open up the gate user data function now we will receive the params as name const handle is equal to request Dot atoms dot handle check it again once we received as a handle now we will use try cash block here we will try to query the database with the name const user will be await user dot find one and for that we have to import the user model const user equal to require dot dot slash models slash user Now find the user buy a handle and after the user is found console log it now create an object from the user which will be named user data it will have name which will be user.name from this user we grabbed Avatar user dot Avatar bio user.bio and links user dot links and after this we will send the user data as a response so so return press dot Json message found user data that we just created and the status will be success and if any error occurs we will console log the error and return response restore Json status error and the error will be actual error we get error Dot message and we are not yet exporting the function module dot exports the function name and we will have to import the function const the function name the path here slash controllers slash get user data now coming back to the front end when the data is received we will evaluate it if data dot status is equal to error then we will return a toast error and the exact error will be sent as notification and if data dot status is success then we have to store it somewhere for that you will have to store it cons data set data and initially it will be an empty object we have to import use State here and if data.status is equal to success then set data whatever data we received and the name that was where it is the object name was user data data dot user data and let's attach a cache block to and if error is taking place then console log the error console.log edit and now we can pass this data to our link tree data the whole object will be sent as prop and here it will be destructured to name Avatar bio and Link we can do another thing we can see if a user is found or not for that we can create a variable user found set user found initially it will be false and when the data status is Success then we will go to we will set user found to true and after that we can also add a validation to this return we will first check if user is found if user is not found then we will render this return div and if user is found then we will return whatever we have received inside this currently I will say user not found and let's just focus on the designing and after we have done everything then we will focus when user is not found let's start our server and see how it is we will first split it CD site npm run Dev and here we will start our backend CD server npm start all right we have opened up our dashboard and we have to somehow add a link to our user handle but now we will manually open up our link tree we will replace the dashboard URL with this the link tree is not defined I believe we have not imported this so yes we have not imported the link tree here import link tree from components slash link tree and inside link tree we have not imported the entry card let's again do that import link tree card from dot slash link trick card let's try give it a refresh animate presence is not defined we have not installed the framer motion yet to install it let me search it on npm npm framer motion open it up npmi frame or motion paste it and it is now installed and in linktree we will import it import what we used animate presence and motion div so we will import the motion as well from framer Dash motion let's start the server again this is looking very bad without styling but the success is that we have received data from our backend let's now style everything come to First Link G card we will start styling from the first let me add class name and the span will have width full and let's give this Flex display Flex Flex will be row wise and then vertically align the items item Center padding off to let me add a border radius border radius XL text color will be white and we have to make background Indico 400 no 400 will be fine 400 and on Hover we will change the background color however BG indigo 300. let's just minimize this for now give it a margin bottom of three margin X of 2 and on Hover we will add some on Hover animation Translate x-axis 1 hour Translate y-axis one and we will add transition all as well as transition duration duration will be 500 milliseconds we will have to give some sizing to this image as well image background will be white rounded will be fully padding will be one width will be set 11 and margin right 5 and give the name some sizing class name for medium devices text LG let's see how it is this link animation is fine the image is too big so we will come to link tree and where is the image we will add some width to it let's add class name W10 let's see how it is let's just split the screen so it is much more better visible and we have to make it Center let's give the link tree class name relative and we will make the image absolute change the width to 20 this will be a pretty big rounded full let's position the image to Center we will do left one by two so it will be left 50 percent but we have to center it here for that we will do minus Translate on x axis and the value will be 50 percent so it will come to Center give it a margin top margin top of two yup and now style those others coming to the H2 text Center text size will be large font bold and padding top let's say 30 pixels 30 does not work here so we have to give 28 so now this is looking fine so we are not receiving any bio let's check the network what is the problem foreign and where is our request why so we are receiving the Avatar and the links we are not receiving any other thing like handle or bio let's see why is that happening let's go to the backend code get user data name bio let's first console log the user here we have been console logging the user so let's open up our console give some spacing restart the server and now reload this it shall be console logged so we don't have any bio here we will yes so we don't have any bio here as while signing up we were not collecting any bio and while returning we are returning the user's name but instead we want to return the user handle for now we will return user handle and refresh this and the no username will be changed to demo user one one and let's just add the demo users bio manually I will open the database connect we had LinkedIn 9 and collection open demo user one one we will add a field named bio will be software developer and let's update this refresh this and you can see the bio is here we have to center it of course let's split screen again collapse this link tree class name text Center and padding bottom five and let's style this div that is containing all the links we will add class name give it Flex Flex column so the links will be column wise justify Center and set a maximum width of 7xl let's see what is the 7xl value so it is having one two eight zero pixels and margin Auto now on medium devices margin on y-axis will be 5 and which to be full and on medium devices width will be 2 5. it works in a way if there is 5 units of space you will use only two units so if you hover over this it will be showing 40 percent so if you calculate if there is if there is 100 it will be using forty percent if we divide 2 by 5 we will get 0.4 which is actually 40 percent now we have successfully implemented showing the links now we have to do something when any random text is put here and no users Exist by then name we have to style this user not found let's come to handle where sandal.js and we have to style this now create a div inside this that will have not found class name this is just for development purposes and it will have padding X3 let's add content inside this heading 1 user not found and if you can you can just add an emoji I will search for an emoji emojipedia.org sad let's use this one I would close this this one and then add a break then add a text if you are looking for a specific page double check the spelling if you are looking for a page double check plus pattern now we shouldn't have added the break it looks much better without that so now we have to Center this or that use flex justifies center items Center and let's add height so item Center will now work now make the heading a bit more bold so we will add font bold as well as text size large and we will also add a link so that users can create their own link tree right under this paragraph for that we will use Link tag import the link track and the link will be of apply page [Music] and we will say create your own and inside the link we will say link tree and we will now have to style this link tree link so add a spacing here yep and now class name BG indigo 600 padding of x to yup and margin left two text byte and on Hover background will be indigo 400 let's see let's add some transition transition all and duration will be 500 milliseconds so when someone clicks on this there will be redirected to the register page this is looking great I believe in my opinion all right now we have to implement the Social Links so let's come back to the link tree page and we have to implement the Social Links here we will be creating another component called social tree and now create the component social realtor.js reactor functional component and now don't forget to import that like previous time in import social tree from dot dot slash components slash social tree before editing the social tree we will be creating the data locally if you remember that I once mentioned that instead of creating same type of data separately we can just create an object so we will follow that now const social and set social is equal to use state and now we will create an object which can have separate social media links so first will be our Facebook initially value will be blank Twitter initially value will be blank and same will be for Instagram YouTube LinkedIn and GitHub make sure we have those fields in our models let me check again what were those Facebook Twitter Instagram YouTube LinkedIn GitHub Facebook okay we have all those fields and we will pass this social to our social entry and we now have to grab the social from our database for that create another user effect it will again run when a router query is updated again we will use the same syntax almost the same syntax so I will just copy paste here and instead of the gate path we will use git slash social path or name it socials as we have multiple links and the same handle will be passed as parameter and the data we will be saving will be set social and we will name something else instead of user data and we don't need set found here and let's now implement the backend for this I will full screen this come to our index.js create a git function on get slash socials and the parameter is handle and the Callback function name will be get user socials create this function we will create it inside this same controller const gate user socials but let me first import this because I forget this every time so I will import this that now let's implement this it will be another async function as well request and response we will receive the handle the quiz Dot params dot handle add a try catch block inside that first console log what we receive handle and then a user will be queried from user model so for that use await user dot find one and we will find them by handle and in Social we will save user.social media I believe this was the name that we used in our model okay this is social media I forgot to add the L this will create some problems here as all those users will have social media in their data so that's not a big problem we will create new user that will have the social media in their models so now after receiving the socials we will send it to our front end for that return response.json message will be found [Applause] the data will be socials array we just created and the status will be success and if any error occurs then return this dot Json Json status is error and the error is error.message and now open the front end and we have received the social and the data dot let me check what was the name data dot socials data.socials will be containing the social media object and this will be stored inside this social variable and we are passing the social variable as a prop to this social tree now open this up and we will receive the prop like social and now restructure it const Facebook Twitter Instagram YouTube LinkedIn and GitHub is equal to social and now we can use all those variables inside our social tree we'll use react fragment create a div named social inside that I will create a link the link will be automatically imported and I would like to open the link to a new tab for that use Target underscore blank and the link will be dynamic let's say for Facebook the link will be like https facebook.com and the username slash template little and what is the username Stone Facebook and we will use the value as Facebook and we can further modify this via adding Facebook SVG or icon for that we will have to create icons for those six social media I will create that let me find them first just split them up so it is much easier first create facebook.svg and let's find Facebook Facebook this video here is I believe crashed or something so let me open SVG repo.com and I will search for Facebook let's search for a good icon this one looks kind of good edit this and copy SVG and paste it here let me make sure that everything is well okay and let's use this here image source will be slash SVG slash Facebook dot SVG let's see if it works or not yes this works but we have to style this obviously and I will add a class name W let's say six yes the sizing as well and we have to search for others to Twitter first Twitter edit vector and then copy SVG where is the SVG file let's first create all the sbgs twt dot SVG paste it then LinkedIn a link dot SVG search for LinkedIn now GitHub now Instagram we already have Instagram and speechy but let's just create another as we are creating Instagram dot SVG the name is wrong paste it as we are following the same style that's why I created a new instagram.svg so all of them will be same styled and any other social media is left let me recheck social tree we have Facebook Twitter Instagram we have YouTube left so search for YouTube copy this YT dot SVG paste this and now all the svgs are created let's roll and let me first style this single one and we will copy paste it five times more close this one and split screen collapse it [Music] add class name background will be white icons body radius will be full padding will be 2 and on Hover it will have a little bit of grayish so hover BG we can add gray but I will go with zinc zinc 100. for the color change we will add transition transition applicable to all and the duration will be 500 milliseconds and on Hover I want to increase the size also so scale and we have couple of values 100 is normal 105 is a bit more and 95 is a bit less so we want something like 110 it shall have a shadow and Border one border shall be gray 700 and on x axis I will have a margin of 1. and it also can't be selected so select none and now to make it Center I will add Flex to its parent div Flex row wise and justify Center yes now everything works you can see there is the animation and on y-axis add some margin Yep this works so now I will have to just copy paste this five times just copy it now this is for all the social media and let's just change them this will be Instagram this one will be as YT YouTube then LinkedIn then we have GitHub and how can we forget that Twitter now we have to change the corresponding URL also in Facebook we had the URL as facebook.com Facebook ID this is Instagram so Instagram will follow the same syntax and YouTube follows almost similar syntax but the newer YouTube update has YouTube at the rate at someone's Channel but if someone is adding them manually they can add the at the red button so don't mind about that and in LinkedIn we have the similar thing and same is for GitHub and Twitter let's hover over them you can see the linkedin.com github.com as we don't have any social media ID for now all right so we have implemented everything we could I believe we have only one thing left that is the share button so for that we will come to handle.js and create a component called share foreign and let's create this component [Music] share button.js inside the components directory react Arrow functional component return a fragment and inside that create a div with position absolute and we will create a function named copy link the function will copy the actual link for the user so that he can share the link to their friends or social media or anywhere we will have to grab the user handle for that import the package use router use router from next router and create instance router is equal to use router now inside the div we need a SVG icon so I will find the source for it let me go to SVG viewer and this was not working previously so we will go with SVG repo and find for share let's find a good icon this one looks good so we will copy this SBG and create an SPG here inside our public directory we will name the share.svg paste this and in the source we will do slash for public then SVG then inside that share.svg that we just created so let's see the output share button is not defined so we haven't imported it let me close the public and we have to import the share button import share button from dot dot slash component slash share button and we have to add some classes let's add width of 4. the button is now visible and give it a alt tag alt share and let's give some styling to this button for that we will give it a cursor type pointer cursor pointer give it some positioning top 28 let's see where it is and give some left positioning left 10. okay good and let's give it a background PG indigo 200 let's see how it is and give some padding padding of two okay and add give some water radius too all right almost good looking we have to give it a positive Z index so for that at Z10 and add a shadow medium in order to differentiate the icon from its shadow we will add a border border of two let's add border color indivo 400. yep looking good now we have to implement the click functionality for that we have to continue the coupling function inside we will do Navigator dot clipboard dot write text and the text we will be writing is the domain name let's suppose your domain name is example.com or linktree.com or anything we will put it here and you can just do process.env and put your domain name in the environment variable here we will do it manually http localhost Port is three thousand slash then template literal router dot query dot handle and after copying let's give a notification to the users post copy it to clipboard and we have to import toast import react toasty file and now let's use this function on click of this div so let's add on click on this on click copy link so let's try it out when we click on this it says copy to clipboard and when we paste this you can see this is the text value that we copy it and press enter and this will load up the link tree so any user just can click on this and share this link to their GitHub Instagram or anywhere in the next part you will learn how to update their profile including the image how to update all the links we will create a separate page where users can include the URL and title for them and another page will be created where users can include their social media links so stay tuned for that [Music] hey guys welcome to the part 6 of this course while editing the previous video I found some modifications so let me come to the first one in the back ends index.js we missed slash here and we are making two separate calls for our dashboard so we will comment it out and implement the same task inside a single function we are grabbing handle in both the functions and the second function is returning the user's social media and the first function is returning the essential Fields so we will merge it via this we will require the social and pass the Social with the first function and give a comma here so now we will see the front end where these function calls are being made this is at handle.js so this is the extra call that is grabbing the social handles so I will comment it out and this was setting the socials so I will copy this and I will paste this here as this call is now returning the socials also this should now work we have two more modification in the user header we will put the link tree Link in our user box so we have our user box right here so I will wrap this inside a link now let's first start the server to see the changes CD site npm run Dev CD server npm start let's refresh this let us open the dashboard and we don't have the dashboard direct link in our header so we have to edit that too we have the nav bar and we will change this to dashboard and change its text to dashboard now I have logged in with the account now this should redirect us to the user's link tree so we have link tag here so now we have to change the link to the user's link tree for that we have to use braces then inside that we will use template literals then the domain name then we will use template little and the user handle and let's see the change when we hover over this at the bottom you can see the link tree is here and this is now visible so another modification we can do here is that we don't have any default icon here for the default link so I have a URL so I have this icon URL I will copy this so I will come to our register function where the register function is and in the icon field we have blank so we will replace it now still it won't be visible because where we have implemented the link tree we have passed link image but if we see our model it is having icon field not image so this was a Mist typing that we did so I will change it to Icon and now I have to create a new user to see the changes I will come to my website go to dashboard then log out and create a new user user 12. give it an email ID set that password and login you can see when I click on this the icon will be appearing I can change its full border radius to somewhere like I will come to link tree and I will change the rounded full to rounded medium let's see how it is yeah it is looking good so we had these kind of modifications and there are several more modifications but I will discuss them later the data we are acquiring in the dashboard which is role handle and Avatar we will be requiring that at many places so we will make the data globally available using context API for that inside our client directory create a directory name context and inside that create a file name user context .js now import the create context from react now create a simple null context and the name will be user context create context and we have to now export this user context and now come to underscore app.js we will import the context so import user context from dot slash context slash user context now create a blank State object which name will be const user data and set user data used it and initially the object will have blank values like name roll ah Avatar handle and now we will wrap our main component inside user context dot provider user context dot provider and the value we will be passing is user data and the set user data function we will have to wrap this inside another braces and now we can use this user data and set user data globally so where we need access to the data like name roll Avatar and handle we can use this user data and at places where we need to update the data we can just require this function and use it to update the data so we will now come to our dashboard and import the user context import user context from Context user context we will change this address to manual dot dot and in the dashboard we will be importing the set user data const set user data is equal to use context so this is the hook we have to import it from react and this will be using this user context and we will be updating the user data on successful fetching set user data to data dot user data and now after this process the user data variable will be having all those four fields we can just do better instead of just repeating it every time we will copy this and we will come to our user header and paste it here proper indentation and we will import the user context user context from dot dot slash context slash user context here instead of just the function we will be also importing the data user data and in order to use this use context we have to import it so import it from react and we can also get rid of this dependency from our dashboard we will comment it and we will copy this simply and down to this we will paste here we don't need the name field we don't need the links field for this user header and instead of data we will be using user data so from user data the role Avatar and the handle will be destructured and we can simply remove this from here and in the dashboard we don't need to pass the probe anymore now let us refresh the dashboard and open the link tree it is working fine now we can move forward to editing profile page for that in the Pages directory I will create a folder name edit and inside there I will create profile.js create a react at a functional component and when now I open our home page slash edit slash profile now it takes us to the profile page now we shall be working on this but before that we will just in advance create the Links Page too links.js and create another functional component and let's check it out edit slash links this is the Links Page and now we have to create backlinks to those pages from our dashboard so we will come to dashboard and we have it inside user header I will expand this and now we will have to wrap them inside a link link to edit slash links paste it here cut it here and wrap it inside a link to slash edit slash profile and let's check it when we click on edit links it goes to the Links Page when we click on edit profile it goes to the profile page so now let's start designing the profile page let's close other things as our profile will be needing the user handle so we will import the user context that we had and that will provide us the user handle and other things so we will import user context from from Let's see we have two directories under so we will do dot dot slash dot dot slash and then from context then user context use context and we will be needing the use effect later as well as the use date so I will just import them in advance now import the user data user data and set user data and use context we will be using this context indent this properly and in order to update the socials we have to locally create a socials object which will have all the data we can find the same from our handle.js so I will copy this and paste it here and for our form we will create State data name set name used it initially they are blank const bio set bio initially it will be blank to const Avatar set Avatar and initially let's give it an initial URL that we used in our model so I will give this icon as initial image and now we will check if the user data is available and If the user data is available then we will fill up the name bio as well as Avatar use effect if user data is available then set name user data dot name let me again check what was that in underscore app.js it was name and our handle can't be changed so we will change the name so it will be name set Avatar user data dot Avatar we are not currently importing the bio so let me create a field for bio2 and go to the backend function where it is working we will export the bio user dot bio and this will be inside the user data and let me go to user header header where it is so you can see the set user data function is being updated by the user data so now we can set the bio user data dot bio and in the dependency array we will pass user data so if initially user data is not available don't worry but when the user data is updated then run the use effect again and these fields will be updated now coming to the designing part I will collapse this and remove whatever we have default use react fragments then inside that I will create a div and we will import and here we will use the user header which was this user header and we will have to import it to import user header from dot dot slash dot dot slash component slash user header this is spelling okay okay the spelling is okay now create a main tag I will create a section tag inside this and let's create a div and let's not go much deeper so I will just indent it negatively let's open up the reference image this is the reference image we already have this user header implemented so now we need to create this section where we have edit profile section with three fonts one is for updating name one is for updating bio and another one is for updating the avatar and we can save it from here and later we have fields to update Facebook ID Twitter ID Instagram ID and other social feeds so now let's hop into coding so I will open up our main page and then go to profile then split screen collapse this area and now we'll do negative indentation so that we get much more spacing in the first dip we will be creating section to edit the profile I will give a heading H4 edit profile then create a div and create a form inside it we don't need the action so I will remove it in order to create this kind of field for our form we have already implemented that in our probably register pages so I will open this up and see how it is I will copy that from there this is the span I will copy it to save more time let's send it this properly open it up handle is not defined I don't need it right now I will remove this as well as this on change let's see how it is currently it's an uncontrollable form that does not matter as long as we are now focusing on the design and after the design is completed we will focus on the logic so I will have to repeat these Thrice let me find some icons for user bio and Avatar so I will go to SVG repo and find for user this one looks good so I will copy this go to rsvg under public create user.svg okay we already have user.svg so I will create bio.svg and search for text let's see what we get um this one can be good and the buyer.s VG I will paste this and let's come to profile editing page and let's try out our user.svg what we had I don't know what it is and this is looking kind of dark but we can manage with it and let's try out our bio.svg bio dot SVG this is looking good and for our Avatar image we will replace it with user.svg and now change the placeholders for each of them for Bio enter a bio and for name we will do set a name now give some padding to each of them so I will select them together I need to give some margin margin bottom let's say five too much let's give three red and let's give them width 11 by 12. and let's do margin Auto to Center them and then let's see we have a button here at the end I will add a button input type button and value will be save profile I will have to add classes give it a background green 500 padding on X will be 4 padding on y will be will be 2 and Border radius will be medium border will be 2 border green 800 a deep color and then just medium shadow shadow MD and the cursor type will be pointer and the text will be white so I have to center it as well as all the items so I will add display Flex to this Flex and flex default will be column and do justify Center now let's give it a width w32 let's see now after doing Flex column our main axis has changed so I will do items Center which will do align item Center and it will come to Center and similarly we have to create our Facebook ID Twitter ID and other edit social page and we have to Center this profile tag I will add class name do font bold as this is the heading and text Center and add some margin bottom margin bottom of 5 grid now let's take a look at this so I will just copy this div and paste it again let's see in the second tip we will give a margin top of five let's try it we have to give some more so let's try margin top 10. let's differentiate it we have some more so let's try giving it 14. okay great now we have to focus on others we need three more Fields so copy this again and paste now let's change the social medias first one will be Facebook dot SVG second will be IG dot SVG or we had probably instagram.svg and then twt dot SVG for Twitter and then for LinkedIn we had a weird name lnkd i n r l n k d n probably this was it I don't know why I renamed this like this and for GitHub we have GitHub and for YouTube we have YT yeah and now let's edit their placeholders too enter Facebook ID and copy this paste the same for others and we will edit after this [Music] for Instagram we will add Instagram ID for Twitter we will add edit Twitter ID for LinkedIn we will add enter LinkedIn ID and for GitHub we will add edit GitHub ID and for YouTube enter YouTube ID and after that we will add a address so user can understand that by means of the new update to YouTube we have a address before users Channel ID so let's see how it is so the designing is well now we have to implement the logic for this let's make it full screen as we don't need the front end right now so coming to our edit profile section we already have the state variables name bio and Avatar so what we can do in the input field we can set the default value as a name initially it is empty and we can set one change we will execute this function where we will be having an event and in the inline function we will run the set name function and the name will be set to event dot Target from where it was called and its value will be updated to the name similarly we will update this with bio and Avatar so value bio and let me copy this whole thing so we don't have to type it repeatedly let me change it with bio set name to set bio and again Avatar and make it capital and currently this Avatar field is taking the link of any image and we can display the image so we will do image and make the source Dynamic and the source URL will be whatever we type in this image field we will remove the alt tag we don't need and let me check it now I will do full screen I have an image online in my website so I will copy this and I will paste this link here and you can see the image is visible but we have to style this one but before that as you can see the text is only limited to this area we will have to add width full to all the input fields here I will select all of them together yes now we'll do W full let me check if it works or not paste the link yes it works now we have to style this let me go to the image added class name limited to 10 width 10 paste the link and this is looking great now give it a border radius probably border radius of full so rounded hole let me check paste this again and we can just do one thing we can add a border as well as Shadow so it looks great for that I will add border 2 and Border white and Shadow medium let's check it I will paste the link and this looks kind of premium Now similar to name bio and Avatar we have to update the social so that we can make backend calls so welcome to our front end and we already have the socials object we have to fill it up right now to update the socials I will create a function named handle socials and it will have an event I will set social which is this function and I will use spread operator and whatever the social had previously will be set to the Social and it will add something what will be added the event dot Target dot value and the value shall be assigned to only these six items so for that we will have to add some ID for each input field we will have to add ID like Facebook and now we can do event dot Target dot ID now this event.targets ID which is Facebook will have the targets value now we have to add ID to each of them the ID should be from this we can't change the ID other than these so for Twitter we will write Twitter for this was probably Instagram for Twitter I will write Twitter for LinkedIn I will have to write for LinkedIn for GitHub I will have to write up GitHub and for YouTube I will write YouTube and now we have to implement this function here on each field so I will add a value which will be which will be this Facebook for our Facebook input field but in order to use this we will have to use it through this social so I will do social dot facebook currently it will be initially blank and on change and on change I will call that function handle social which will be having the event via that event or Target it will be updating the values so I will do that for others as well select everything together paste it just change it Instagram for Twitter I will change it to Twitter for LinkedIn change it to LinkedIn get up to GitHub YouTube to YouTube and now if I type and we can type here now we have to implement the back end for that I will create a function const save socials it will have an event we will do event prevent default so that the page does not reload and we will do a pitch call and before implementing the fetch call now we have to work on the back end I will go to index.js let's add a post function on path save slash socials and the function name will be safe socials we have to create this function inside controllers I will create a file name save items dot Js how to command store function name this will be async function it will have access to request and response and now first export this module dot exports save socials and let me import that too const saved socials from require dot slash controller slash save items and now let's see what we can fetch to backend add the path we will be calling localhost 8080 slash save slash socials and the method will be post headers content type will be application slash Json we will send the data via body so do Json dot stream ify and we will send the token for that obviously user have to be logged in will grab the token from local storage dot get item and the token name was lintry token and also and we will be sending our social array which is this one we will name it to socials and before implementing further we will come to our backend where I will close this app.js come to this safe socials function and now let's accept them via request.body will receive token Mill comma socials from request dot body let me console log that for once request.body now let's add a try cash block now we have to decode the token for that I will have to import jwtd code const JWT underscore decode from from require JWT Dash decode we will save the decoded mail to a variable called decoded token Mill and we will use the jwtd code function which will take our token Mill and this secret code which is test key we can access it via process.env process.env dot our code name and then we will extract the email from decoded tokenbill dot email and now once console log whatever email we have decoded now we have to find user for that we will have to import the model const const user is equal to require require dot slash models slash user and now const user will be user dot find one and we will find users with email with email and we will set the user's social media which is let me again check the social media we will update the social media field of this user user.socialmedia will be the socials we are receiving is equal to socials and then we will do user dot save to save the changes and now we will return response.json message saved and status success if any error Dockers then return response.json status error and error should be the error message let's see what is the error okay we have probably mistyped this quotes I don't know where it came from and index.js we are having some problem what is it we have a comma here I don't know where this is coming from let's go back to our profile and when the fetch is successful then pass the response list.json and then the data we received we will work on it if data dot status is error then we will return the function immediately with post dot error and the error message shall be data dot error whatever error we received we will just show it and else we will toast success socials saved success fully and we will now have to call the socials function and we will be calling on submit on submit when the second form is submitted then we will call this save socials function and one more thing we have to edit is instead of type button we have to change it to submit type submit I just mistyped it type submit and let's come here and let me edit my Facebook ID and other IDs and let's click on Save we have to fill out these fields too and let's click on Save toast is not defined okay I forgot to import the toast import toast from reactostify and now all the fields will be reset yeah I know I'll just paste everything here [Music] and clear the networks tab user.save is not a function so let me check the back end we are doing it properly and when we find a user let me console log the user console.log user and let's expand the terminal let's give some spacing clear the network tab and send again request let's see what we have here expand the terminal we are receiving token mail properly we are receiving the socials object as well and let me see what is the error I probably have missed the await so let me expand this again give some spacing and let's call this again save profile social successfully now let's see it has console log the user and let me open my mongodb to see if the socials are actually updated or not mongodb Compass we have link 39 database this collection and now we have social media object if you see the other users are not having the social media field but the last user is having a social media field which is the object and all the social media is having their value so now minimize it let's cut this and when we refresh the page you will see all the items are gone and now we want to make sure that if we previously save something this have to show up so we have to load the previously saved data so for that I will just collapse this and come to my front end and we have to save the load data I will do that on juice effect use effect first we will validate a user if there is no token so I will validate user local storage get item and that is link 3 token if a user doesn't have it then we will send him to another page for that we will use router but I probably haven't imported router so let me import it import use router from next router create the router for that I will do const router is equal to use router then come to our user effect do router dot push to login page if a user is not logged in then it will open the login page after that we will fetch and now we have to work on our backend for that I will come to index.js I will create a post function called load slash socials and the function name will be load socials and I will have to create it under controllers I will name this load previous which shows that we are trying to load the previous data load socials this will be a async function and have access to request and response and from a save items I will just copy them because we'll be needing them let's come to our profile let's give a call to localhost ATT slash load slash socials and it will be a post call so method will be post headers content type application slash Json and the body we will be Json stringify and we will send the token Mill and the token Mill value will be this now go to backend load previous we will receive the token token mail from request.body let's add a try cash block first we have to decode it like previously then we have to find the user we will just copy it from our previous function and we will paste it now we will load the social media we have user dot social media and we will send all the social media as our response so we'll do return race dot Json message found the socials we just created and the status will be success and if error occurs then return race.json status error and the error will be error Dot message let me come to profile we added this colon and we don't need it actually here and when the fetch is successful then we will pass the response desk.json then the data we receive we will check if data dot status is error then we will return post error and the error will be data dot error there we actually received and if that doesn't happen then we will set the social to data dot socials make sure it was socials in our load previous that we passed yes now let's come to our front end and load this this does not work probably we have missed something here failed to fetch and we'll expand the terminal oh okay probably our backend has crashed load socials is not defined let me open the index.js we have not imported it so I will just quickly import this require controllers slash load previous now Windows Server shall restart or we will have to manually restart it again crashed and this is another error it is showing it is because probably I haven't imported this let me check yep I haven't exported this so I have to export the function module exports load socials and now the mongodb shall be connected now let me open this and refresh this now the fields are now updated let me update my LinkedIn and click on Save social saved successfully Let me refresh and see the updated field is here and let me update my YouTube also let's save social saved I will cut that and refresh it is retaining that that is just nice and I will have to add some margin under this save profile option and this is not actually profile this is social so I will have to edit them I will go to profiles this one title should be edit socials and the button should be edit buttons or save but save socials and I will add a margin bottom of 10. let's see how it is okay if I change something and save it will be saved to database and by loading the page the data will be loaded and now load up our name bio and image for that I will just collapse this one again I believe we are having this name so let me just open my Dev tools it is inside components then here we have profile expand this a bit let's check the context provider the Avatar bio handle all of them are empty let me check why so initially our Avatar was supposed to be this URL and when we load this this is blank so I believe we have made a call but we were unsuccessful to load up the states so let me see why it is happening it'll be just inspect all the calls that we made this is dashboard let me see the preview we received the role the avatar the handle as well as the link count if you see we are just receiving Avatar handle links enroll we don't have the name field as well as not the bio field so we have to first Implement those and after when we save then we will inspect further so for that I will be creating a function called const save profile this will be similar to our safe social so I will copy it and we will do some modification so the path will be save slash profile and the function will be implemented inside save items it will be again similar to our safe socials so I will copy paste this the name will be save profile and rename the function and in index.js I will import this save profile function create a path app.post save profile on this path the function name will be save profile okay so now update the function here we will receive not the socials but the name bio and Avatar and rest of the decode process and finding users using the email will be similar and after that we won't be updating the social media field of with the user we will update user.name to the name user.bio to the bio we just passed from front end and user.avatar to Avatar then we were doing user save and if that is successful we will return message saved and Status success let's come to front end check the part once save profile save profile and here we won't be passing our socials object instead we will pass our name bio and Avatar and here on success we will post success profile saved successfully I will use this function on submit of the form on submit let's call this function let's try it once I'll refresh this set my name here and image link this click on Save profile and it is showing that saved let me check the database refresh and you can see my name field is updated to my name the bio the Avatar is updated now when we refresh let me take a look at the dashboard call I will extend this the Avatar is being received the bio is received and the name and all the fields are received now let me just only have to debug that why the context is not updating the states so finally I have solved the issue I came to my user header where the context was actually saving so I console logged it and when I opened my terminal so let me reload it once you will see set data is not defined and it is not also console logging this I will just comment outside data as we have not used set data instead we used a context so now when I come it will be console logging this and the names are updated as well so I will refresh and it will be retained let me just update this I'm a developer and let me save the profile refresh and this is updated and voila this is working just great and you can see the top user box is also working but we have a simple glitch here I want the profile image to be rounded this is not an issue at all but I will just do it so I will come to user header let me go to the image where it is keep it rounded full rounded full okay the spelling is rounded full let me check now it is rounded it is looking great when I refresh this this is working fine all right now we will open our link tree let's see our social media is working or not this is opening my Facebook check my GitHub this has opened my GitHub and all the social media is working but I see one thing here the name field is showing our user handle initially when we try to develop the application then we didn't have access to the edit profile section that's why we showed the user handle but now we can edit our username so now we will show the user name here so now we will go to the user header now we will go to the handle and then inside this link tree where it is rendering this we are getting the name from handle and let's see where is the data coming from the the data is coming from get and it is inside probably get user data and here we are passing name as user.handle let's pass user.name and now let's see give it a refresh and now the actual name is being rendered now if I change my name like only my name save this and when we come to this it will show my only name here we have only one link we will implement the edit Links Page currently we have this only now we will come to this where is the page edit slash links.us I will remove the current content react fragment and I will create a div I will use our user header it will automatically import this I will change this to manual directory and then let's see how it is components user header or we have to go another level dot dot slash dot dot slash let's see the user header is being imported let me do split screen let's collapse this part inside this we will create main tag inside that is section tag I will add a heading add or customize your links I have to Center this for that I will do class name text Center font bold text size will be 2XL let's see how it is 2XL is uh pretty big so I will make it Excel and let's give it a color text Gray 600. great now we have to create a div for our form and now we'll create a form I don't need the action just as always inside the form I will iterate through our links for that I will create a state const links set links used it and we have to import used it use stick and we will import use effect and use context as well because we will be needing them in future initially the links array will have a object with two Fields URL which is blank and title which is again blank let me create title state to title set title U State and this title will be blank I will write use effect and inside that I will call the links that we already have from our backend so we can use the previous Snippets that we wrote from our profile I will just copy this use effect that we had here and come to our link storages paste it here tweak something and the path will not be load slash socials instead it will be load slash links and in body content we will send Token build let's implement it in the backend I will do full screen then expand this load previous this is the load socials function and the load links function will be almost similar so I will name this load links and I will export this and let me import that where is it it is here I will import this and let's create a path it will be on path slash load slash links and the function name is load links yes so let's come to where it is load previous it will find a user by email and instead of saving the socials I will save the links array user dot links and I will pass links as a response let's come to our links.js instead of saving to socials I will set it to links set links data dot links now let me iterate over the links links.nap it will take each link and index and I will create a div for each link each link will be having a key index it is not suggested to use index as key but we will do it for now each team will be having two Fields one is for URL and another is for title let me create a label I don't need to use it for labeling actually I just need it for semantic purposes I will copy it again first one will be for URL I will name this URL and here we need an input field and the second one will be name title again an input field the value will be link dot title that we have the link each individual link and again for the URL field the value will be link dot URL let me check this in our model it was URL and title we probably forgot to put a parenthesis after the map and on change I will add inline function event then create a function actually handle link change we will have to implement the function const handling change it will be receiving parameters let me Define it here I will pass three arguments first one will be index second one will be field which is URL for our case and third one will be value which is event.target.value and now let me receive them as a parameter index field and value and on receiving that I will create a copy of the links array named updated links use spread operators create a copy of the link to update and update the specified field name it link to update update and again use spread operator update it links that we just created and for specific index let me update the field value let me explain this a bit let's suppose we have a array and for a specific index of this array if the field is URL whatever value we have been passed in that specific field let's suppose the field is URL and the value is google.com we will pass that in the specific index of this array let's suppose now the field has changed to title and the value is Google for that element in that array the field now will be title and the value will be Google so the array will be storing this object now in the updated links at index we will update this one Whatever We just created we will just replace the old link with the updated link and now after operation is done just set links to updated links now the Links will be changed to the updated links now let's do it for title field 2. on change I will just copy this paste and let's change the field to title and outside the links I will add two button for that I will use a div create a button this button will be for adding mode links and create another button for submission name is save and its type will be submit and the add links type will be simple button but it will execute a function so on click create a function with name handle add link now we have to implement this function here const handle add link fat Arrow function I will create a new link object and add it to the end of the links array for that I will do set links red operator the previous links then create a blank object with the fields URL and title blank now we also need some way to remove a link for that inside this div I will create a button and its type will be again button type button and on click it will execute a function let's name it handle remove link it will receive the index of which the link will want to remove so name it remove link and let's now implement this handle remove link function [Music] const and remove link and it is receiving the index parameter now create a copy of the links array const updated links just like we did previously with spread operator now remove the link of the specified index from the copy of the array updated links dot splice we will use splice function we will use index and single link to remove and now update the state with the new array of links updated links if you have understood the first function and then it will be piece of cake let's now try it let's open up the terminal and let's see how it is refresh this is working but the styling is needed let's add some styling for start with this first start with this button strip so they need class name first collapse this one let's name it buttons or buttons give display Flex Flex will be row and in between two buttons let's give a gap of five and margin y 1. and in both the buttons let's add class together background indigo 500 text byte PX4 padding y two add some border radius medium let's add a little shadow and width will be full let's see the change let's change the color for Save let's give it green okay great now style the remove link button class name let's copy this same thing try it out with the Remote Link but we don't need the width full so I will remove the width full and let's check yes it is now in line and now let's style this and now let I have accidentally removed that now let's add a new link Indy geek.com title will be I and D geek add link when we save this it is saved I believe it is saved no it is not saved because we have not implemented the backend for saving so first just dial them let's style the input Fields let's select both of the input Fields together and start adding class name for them outline will be none and give a border of two border Gray 200 bit of Shadow medium and then rounded medium let's see how it is we have to add padding as well padding X2 and padding normally one split the screen again so it is better visible where is the other one input field I missed this one let me add some margin left of two and for this button let me add margin laptop 3. or I can do one thing this is the form and this is inside this div so I will add last name Flex Flex row justify you even click let's try this yeah this is working fine now we just need a bit of spacing from this title so I need margin left to we just need a bit of margin on y-axis so on the main diff I will do margin Y2 let's see okay great now we have to just implement the backend functionality for saving so for that I will full screen this create our function name cons save links it will have access to the event let's do event.revent default let's create a new array that contains the values of the links object name it links array object dot values from the links this links and same will be done for titles titles array from object values from titles actually we have title only no titles and now in the links data we will map over this links array and with each individual link we will also pass its index and the link is link and from titles array with this index we are passing this and we are saving this as title and now let's wrap this whole thing inside a parenthesis now we will have to just send this Link's data to our backend for that I will do fetch at http localhost 8080 slash save slash links now we have to create this path in the back end let's go to backend load previous no save items here we can create this const save links this will be async function request and response we will receive let's see what we are gonna pass let's just copy the methods and others from this we will just copy this so that we don't have to type it again and again and we will be passing the token mail for sure for authentication and then pass the links data as links so we will receive it in the back end token mail comma links from request.body now let's do the similar thing we will just grab a user we won't be saving the name bio and Avatar so we have removed it we will create a variable name new links and then do links dot map that one we are receiving we will be iterating through it and then for each link we will extract the links link URL the URL field the title field and the icon field which is actually empty we will again wrap this thing inside a parenthesis for your ease of understanding as we are using link.link twice so you can just change this to l and make them l dot Link at lot link so it will be better to understand but we will keep it link and when the new links is created we will save it in user.links field the new links so we will do a weight user dot save because this function might take a bit of time so now we will export this function and come to where it is and come to index.js import this function and create a post and let me open the path what was it save slash links I will do save slash links and the function name was save links rename it and let's see what error we are getting here where is the error okay we have problems type this now I have to put a comma Now let me see if this works or not when I add a new link and test indicate.com add int kick as title click on Save I'm not sure if this works or not and we have just made the fetch call but we have not added any related functionality when the fetch is successful then pass the response restart Json take the data if data dot status is error let me check again that we if we have error yes there is error field if that is error then we will return immediately with toast error notification and the error notification data will be having data dot error and if that's not the case then we will do toast dot success links saved successfully and in case any error occurs we will do catch two catch error and we will toast dot error error Dot message let's see let's add a link let's add the same link let's open up the network terminal and see add a link probably it reloads let me check if it uh if we have implemented the event dot prevent default properly event pre-event default we haven't used the save links function so on the form submission I will have to do this on form submit I will have to use this save links let's come here and just add this same link here same title do save toast is not defined just as always we forgot to import the toast again import toast from react prostify let's try again and click on Save links saved successfully refresh those two load up create an ad link now let's add a new link id.com give title IND geek click on save link save successfully let's reload let's click on our user handle and you can see our link tree is just working like putter let me open dashboard edit links let's change this two turbo Turbo hosty.com change this to Turbo hosty save this go to link tree you can see it is changed but when we click on this it will actually redirect us to this so we have to change the implementation of this linked record so I will come to linktree card where is the component linked record and where the link is implemented so this is the URL I will create a backtick and then https then the URL using template literal URL let's try this when we now click it will take us to the Target website now we want the link tree to open in another tab so we will do Target underscore blank so now when we click on turbo hosting it will take us to the website now let me click on my Twitter let's see if social media is working it is taking me to my Twitter let's click on share button let's paste it here and press enter it is opening my link tree let's go to dashboard edit profile let's change the name I am a software developer let's change the bio as well click on Save and you can see the name and the bio is updated all right we have completed this series on full stack link tree web app development I hope you had fun and you learned something new if you like this series make sure to subscribe and if you want to share your feedback don't forget to comment have a good day [Music]

Channel: IndGeek

Views: 17,304

Keywords: nextjs, nextjs project, nextjs free, nextjs code, next mern, nextjs mern, nextjs full stack, nextjs backend, nextjs crud, nextjs dashboard, nextjs mini project, Next.js tutorial, MERN stack tutorial, Linktree website, Full stack web development, Backend design tutorial, Frontend design tutorial, Node.js, Authentication in Next.js, Authorization in MERN stack, RESTful API, CRUD operations, JWT in Next.js, JSON Web Token, Database management in MERN stack, Routing in Next.js

Id: m5xjlSib2ls

Length: 271min 10sec (16270 seconds)

Published: Fri Apr 14 2023