Trigr Landing Page - Design to Build - FULL Video

hello everyone today we're going to build up this landing page in react.js so let's get started i'm going to open up my terminal and i'm going to set it into my desktop and into the work folder on my desktop and then i'm going to say npx create react app and i'm going to call it trigger okay now i'm not going to let this run because i already have a folder called trigger because i already bootstrapped it right here but for your case then you're going to have to let this run so that you can boost up a new react application for you and then once it's done i'm just going to cd into that folder called trigger and then i'm going to open vs code into that folder okay and then as vs code opens then i'm just going to go back into my terminal and say npm start which will start my development server now i'm going to show you where we're going to get this svg image okay and i'm going to just going to grab the colors from right here so let me just grab it and copy this okay and then uh did i run this no okay npm start come on could you run please okay there we go okay so i'm going to go into this is the default react application and i'm going to go into my source folder and into index.css and right at the top i'm just going to paste this in so i'm going to say let me just say root and call this primary color and set it to this which did i not copy it really set it to that okay so this is our primary color and i think we can get on with just begin to build it as we wait for the server to start so let me remove this and let's remove this as well because we're going to be using a font called rubik from google fonts which are also going to grab so above this let me just grab my alt selector and i'm going to say reset the margin to zero and reset the padding to zero as well and then reset the box sizing to butter box so what a box okay so let's save this and let's head over into fonts.google.com so that we can grab this font okay so once.google.com once.google.com what why why does this keep happening okay so my internet is down and i can't grab this font so what i'm going to do is we're just going to work with our react application as it is okay and then probably i'm just going to add in the font later so let me just place a comment above right here and say import rubik font and then i'm going to go into my app.js and let's perform some cleanup let's move this to at the top let's remove this header and then let's remove this as well and let's just return on each one that says trigger like so oops there you go and it should reset it should reload i mean what is happening okay there we go so it reloads and we have that on the screen so let's create a components folder inside our source folder okay create this just a bit let's create a components folder and then inside here let's have header.js and then let's also have uh hero.js i think those are the only ones that we're going to need and then inside header.js let's say underscore rfc okay which generates a react uh function component and this is coming from an extension called es7 react redux graphql and react native snippets so you can go ahead and install this okay so once we have this then inside my header let's just return a fragment first of all and then let's return a header tag and emmet always does this i don't know why it does this when i'm recording so let's return a header and then let's return a div and then inside this clip let's have an h2 that says trigger like so and then let's give this the a class name of logo then give this header a class name of header just that we can set it in our css and then below this div let's have um a now okay this now is going to be a ul with two list items so l i times two and this one is going to say uh what did he say actually it says about us and let's talk so about us and let's talk like so and then after this let's have a deal with the class of cta meaning call to action and then inside here we're going to have a button with a class of btn and it's the class of btn because it's basically the same button that we use here and here and this button is going to say get started okay so this is our header component let's just go back into our app.js and instead of rendering this then let's just render our header component and of course let's import it at the top so i'm going to say import header from dot slash components slash header like so and we should see on the screen right there fantastic now what we can do is we can go back inside here and we can begin dealing with our hero component so let's say underscore rfc okay and then let's have this let's remove this oops let's remove this and then let's render a showcase with the class of uh sorry as a section with a class of hero and then inside this section let's have a deal with the class of overlay and then let's have an h1 that says solve trigonometry problems on the fly okay and then below this let's have actually you know what what i can do is i can reflect at this so that's this becomes a button component so that instead of having to type this out once again then i can just run that a component so let's let me do that so let's have a button component and then let's create a new file here called button.js and then let's just paste this in it's actually not like that let's say underscore ifc first and then let's return a fragment and then paste this in okay and then let's import this button component at the top so i'm going to say import button from the slash button like so and then inside here let's have a button component and then let's import it at the top so import button rom from slash button okay probably you can call it a cta button so that it's a bit more descriptive but i think this is okay and then what i should do actually is these two should be inside the div well let me just call it an article like so and the reason i'm doing this is because if you look at the way i designed it then this is one grid and then this is another grid and that's what i want to do so this is article and let's have another article here that says the image the source for this is going to be coming from the hero image which i know we don't currently have and i wanted to show you where where to get it and i can see okay my internet is back so let's go into where was it first.google.com first of all let's grab our font and our font is called rubik okay and this font we're going to be using the regular 400 and the bold 700 let's use the import and then let's go inside here inside our index.css let's replace this with our input okay and there we go so this should automatically take effect let's look at that there you go so our phone has changed but let me show you where you can get this svg icon right so uh we can go into a website called andro.co and we can just say browse now and i'm just going to search for i think i search for map yeah there we go so this is our uh our svg image if you want to change the color then you can just go right inside here and you can select whatever color that you want and it's going to take effect as you can see right there so you can go ahead and just click on this and you can download the svg or the png for uh for your uh you know whatever reason that you want but for what i'm going to do is i'm just going to grab this from my sigma okay and then i'm just going to export it as svg so export this and then i'm going to export it into my desktop inside my work folder inside here and inside my source folder and then i'm just going to call this hero svg okay and it should be right there so let's go inside our hero and then let's import this image so i'm going to say import import hero from dot slash should be is it slash okay dot hero dot svg there we go so let's say that let's go back into updates and then below this let's render the hero our hero component like so let's import it there we go okay and actually what i've done there i usually do this uh like some kind of reflex okay so i was saying that if it doesn't give you the option to auto import it then what you can do is click right here and say control and space bar which will give you a drop down of the commands that can perform on that such as auto importing it at the top i usually do that subconsciously that i forget to explain it so let's save that and let's see what we have and this is what you have on the screen okay so let's place this to the left rather to the right and then this to the left and then we can begin standing this out so let's go into index.css right here and then on the body let's give the body a background color of black and the text color of white set the text color to right okay and then see how the image kind of is bigger than the width when you scale it down and it introduces a horizontal scroll bar let's fix that by targeting all the images and by the image tags i mean this tag right here so all the image tags and then we're going to say all this should have a max width of 100 which just makes sure that come on it just makes sure that it doesn't go outside of the container okay so there we go fantastic fantastic let's add um should i add the padding of the body let's see let me see padding of 20 pixels all round just to push it in once okay and then i let me remove these bullets okay so right here let's say for the another list let's say list and tab set this to none fantastic and then now let's go into the header so for the header what i want to do is display flex okay which will place them in raw form and then align item center which will bring the items down just a bit to the center and then justify content set this to space between actually you know what set this to center first of all and i'm going to explain why okay so this is set to the center because i want to add the flex direction here of column okay so they're going to stack one on top of the other and the reason i'm doing this is because i don't want these two links to show on small screens and those two links are the navbar right here so what i'm going to do is just target the header on the header now and i'm going to say display now look at that and then we are going to go into the header now and actually into the button with the class of cta so let's target the call to action button let me just place a comment here that says cta so target the cta to get the btn class is that how i named it yes so the city and then target the button the class of btn give this a background color of our primary color which is this actually adjust it in the inside variable okay and then add the border radius of one pixel uh remove the border so border set this to none actually know what let's say bought a one pixel and solid and set this to the primary color as well primary color okay let's have a padding of 10 pixels on the top and bottom and 20 pixels on the left and right change the text color to white change the font weight to bold which is 800 today is 800 or 700 700 so set this to 700 okay so let's save this let's work half and this is what you have on the screen and notice how buttons don't usually take up the um the font family from the body by default so you would have to specify that so i'm going to say font family set this to inherit i think in here it should work it works sometimes it doesn't sometimes okay but this time it has worked and let's increase the letter spacing so the button is just a bit easier to read because remember we have set it to a bold font so it becomes just a bit harder to read later spacing one pixel okay fantastic let's say font size set this to 16 pixels and then move it just at the top that should be good enough for small screens should be good enough and you know what for small screens what i can do is instead of this tucking one on top of the other i can paste this to the right so let's go back inside and then let's remove this okay and then let's set this to space between which will do that fantastic amazing okay and then let's go ahead and begin styling our showcase and i call it hero i'm so used to calling it showcase so for the hero let's say display grid and return the column set this to one fractional okay at a grid gap of 10 pixels should be fine and let's see and nothing actually changes which is expected by the way let's just say text align center for everything we should move this text to the center let's target the h1 so for the there's an h1 which i can say um one size let's increase the font size set this to 36 pixels that's fine let's say margin top margin top set this to 20 pixels let's set this to 50 and as you know what this is inside the class of overlay so hero overlay okay let's add imagine on the bottom of this so margin bottom set this to 10 pixels to push away from the button just a bit let's say 20 and then let's change this from display grid let's actually remove all of this and set this to display flex and then align it on center and justify content to the center and then add the flex direction of column reverse so that the image will come first and then the text on the bottom come on now you know what this is hirokovali it's been hero valley class there we go there we go that should be fine and then now i want to get this image because i just want to reduce its width just a bit so hero overlay ing set this width to let's say 80 reduce it just a bit okay okay okay looking fantastic let's add imagine on the top so margin top set this to 50 pixels which means i can remove actually this is fine this is fine this is fine that's fantastic now on the overlay i want to add a very slight background color so let me add a background color of 666 actually what is it it was mustang 666 was that it uh it had some 40 percent of positive so let me just change this to hsl so they can add opacity at the end of 40 opacity there we go so that we're going to have this let's have padding on this so let's see padding to 20 pixels on the top and bottom actually not 50 px on the top and bottom 20 pixels on the left and right come on this should be pixels and then let's add margin on the top so that it pushes away from the header right there so margin top set this to 50 pixels which means i was adding the margin top on the wrong place here so let's remove that and we're going to have that look at that looking amazing very simple landing page uh very minimal and then of course let's add a border radius on this so border radius set this to around 10 pixels should be fine that's looking fantastic and now all we need to do is just scale it up let's do that right away and i'm going to add a media query and i will say for a min width of 992 pixels then i want the hero and the overlay class okay set this to flex direction row so that it's going to go like so okay looking almost fantastic instead of setting this to row what i can do instead is just change it to color all the way by saying display grid and grid template columns to repeat twice and one fractional column each okay which will do that it will do that okay and then let's target this increase the h1 so hero overlay h1 i think how to imagine on the h1 so let's remove the margin so margin top set this to zero and then let's increase the font size to around 64 pixels okay and then where did they add the display flex i added text line center sorry right here so uh on the hero overlay let's say takes a line left text align left take this to the left like so okay looking fantastic and then the we reduce the image width by quite a lot right when you reduce the image with 280 so let's take it back to 100 so let's say hero overlay image set this width to a hundred percent okay let's see that that should be fine that should be fine and then let's uh oh let's return our links at the top right our links at the top so for the header come on it was the header and now i want to say display block right here was it the header now let me see where you had enough display none headed out of display block come on there we go so that it hadn't reloaded and then once we do that then let's take the u else inside the now okay and then we're just going to say display flex like so and then target the list items inside here so copy this down right here target the list items and i'm going to say margin of zero on the top and bottom and 10 boxes in the left and right to push them away from one another fantastic and then let's limit everything okay let's limit everything and probably what i could do is i can go inside app.js and wrap all of this inside a main with a class name of container so that i can go right inside here and add a media query this was at 9.2 okay just add at media let's say min width of 1280 pixels let's say for the container class i want to have a max width of 1000 pixels let's see how much that is too small let's say 1100 still too small 1200 1200 is almost correct um i would want this to come right here okay so let's make it 1250 not yet not yet not yet 1280 how much is 128 okay so 1280 brings it right there okay so that that means let's change this to 1440 pixels now 1440 is too big and this will span too much so let's just make it 1300 pixels let's make it 1300 and then of course let's say margin auto which will push it back to the center there we go so we have this and we have this and this image is looking just a bit too big that's why it goes all the way to the bottom and it introduces this kind of scroll bar so let's reduce the image let's reduce the image and actually i can just remove this from here okay so that we're going to have this look at that software problems on the on the fly and it's looking amazing hello everyone and welcome back to part two of the trigger landing page and today we're going to be building the get started page which is our login form if you need the link to the repository then you can head over to github to my profile and the repository is called trigger the link is going to be in the description as well and so what i've done is in my terminal i have navigated to my trigger work folder and i've just started my development server by saying npm start and this is what is running on logo host 3000 which is this right here now one thing that you'll notice is that in the design i changed the background color so that instead of being a dark a black color instead of a black color i have this dark grey color i think this looks much better in terms of even for this i think it looks much better and that is what we're going to be working with so i have my folder open in vs code and i'm just going to go inside my index.css okay and then inside here i'm going to change this to 111827 because that's the dark gray background color from table and css i should mention that i want to add tailwind because this is turning out to be a bigger project than i anticipated and we're also going to install react router dome to handle our internal routing so let me save this and it should reset in my browser right here let me place this to the right and this to the left come on reload okay so as this reloads it's taking quite a while i don't know what's happening it doesn't seem to be a problem with the server as this reloads i just want to head over into cdnjs.com so that i can grab detail in the cdn so tailwind i'm going to copy this link tag and then go inside my public folder and make this full screen and then inside my index.html and i'm just going to place this below right here and then i'm going to change this title to trigger just like that and then i'm going to remove this comment we don't need it and remove this comment as well okay and then we're going to remove this as well and now that i've remembered this i want to change this theme color to 1 1 1 8 7 and then i'm going to change this description into learn math and trigonometry online there we go so save this and it should reset if it doesn't reset then i'm just going to restart my server because this is kind of annoying so let me restart my server let's say npm start okay and i think i can close this but let's just leave it open but let me open this on locals 3000 okay and let's begin building so the first thing that i'm going to do actually is i'm going to create a new component actually not not inside components but i'm going to create a new folder okay so there we go so i'm going to create a new folder here called pages and inside pages i'm going to add get started the js okay and then inside pages still because we're going to add more pages i want to add an index.js file and i'm going to explain why and then inside components as well i want to create a new file and say index.js okay so i'm going to close these two index files and then inside in inside the get started i'm going to say underscore rfc once again this is coming from an extension called es7 react redux and graphql react native snippets so you can install this extension right here and then for the return what i'm just going to say for now is just an h1 that says get started okay so because we don't have react water dome installed yet then i'm just going to comment out these two components and then i'm going to render out get started instead okay there we go and it imported from pages get started and we're going to extract these inputs uh just a bit uh in the future so that we're going to have this on the screen okay so disable this because we don't have react or the dom setup yet so inside get started what i want to do is let me just check what i had in the design i've forgotten so we have our image here to the left and then we have our form to the right okay so let's do that let's do that right away i know this image is available to us so what i'm going to do is at the top i'm going to say import um hero from dot slash dot dot slash actually zip dot slash and it's called hero dot svg if i do remember correctly and then inside here i'm going to return a section and then inside this section i'm going to have an article and then inside this article is going to be my image and this image the source is coming from hero that the art is being the hero and the title is going to be hero like so fantastic and then below this article i want to render another article and then this article is going to have our form now this form um i'm not sure how i'm going to do it yet but it's going to be our kind of login form where we're going to do some authentication and then we're also going to add the ability to log in with google because it's much easier these days so this first one is going to have actually this should be a label come on type so label this is going to be for username okay and then below this we're going to have an input with a type of text with the type of text with the name of the username with an id of username like so and then below this we're going to have another label uh with an html for email like so and then we're going to have an input with a type of email with the name of email with an id of email and let's have a placeholder that says enter your email address dot dot and then let's have this as placeholder as well let's add a placeholder that says choose a username and then let's set this to required okay and then let's set this to required as well and i've just remembered that i need a password input as well so html for let's call this password below this label let's have an input with a type of password like so with a name of password with an id of password with the placeholder text that says choose a password and then set it to required as well and then finally below this we're going to have an input with a type of submit which is our submit button that says uh the value is going to be submit as well and actually not that's actually it because this is not technical button and you know what this is not what i wanted actually because this would mean that i would have to style it out again so instead we're going to do is create a deal with the class of cta and then inside here we're going to have a button in the class of btn because remember we have a button component and this button component is it gave a class of city with a button with a class of btn and that's our green button so i just want to reuse that and you know what what am i doing actually because instead of doing all that i can just render out the button i can render the button uh but then again i'm not thinking because this is not a submit button so let's do what we had sorry for that let's do this and then we can have the time for this to submit there we go so let's save this list on the screen and we're going to have this and of course it auto fills that which i don't like uh so let let's go inside each of these inputs here here and here let's add an attribute called autocomplete set these two off okay and i'm adding multiple cutters by clicking on where i want the cursor to be and then holding down the alt key like so and clicking and clicking and you can add multiple casters anywhere that you want okay so that's that's so let's save this let's reload this and it doesn't reload of course it doesn't lose let me add the attribute here so autocomplete set this to off okay so i don't know why it does that sometimes though and this is our button right here but this button uh it doesn't have the text okay so let's say log in there we go so that's our button text right there fantastic so let's begin standing this out let's go inside our where is it this is our section give this section a class name of padding all round of five remember we linked taylor just so that it becomes easier to stand all of this go inside this image give this a class name of width dash 9 over 12 which is about what is it 75 right okay and then once again let's say mx auto which will center it then like so and then let's say imagine bottom of 10 save that and you know what we actually need our header so let's go go back into updates and instead of commenting both of these out let's just comment the hero section out so we're going to have our header fantastic and then inside here let's go back inside here let's go inside the form right here let's give this a class name of lex and justify um center yeah just face it there we go and then of course flex directions should be column so flex call like so and then let's go inside the each of these inputs so i'm going to add multiple classes once again so right click right here hold down the alt key and click this and on this give all of this a class name of margin bottom of 5 of rounded and of a slide box shadow padding on the y of 2 padding on the x of 6 okay and then let's say that the text should be green dash 500 let's add a bit of letter spacing on the text of tracking wide and then let's change the text of the placeholder so place holder dash green dash 500 save this let's see and we're going to have that looking fantastic isn't it and then once again i've noticed that a mistake that i've done each of these labels should have some text inside so inside here let's have username so there we go username this should be email okay and then this should be password there we go so that we're going to have this so all we need to do is just scale this up on bigger screens so that this would appear on the left and then this should have a background color of white which i've actually forgotten to add let's go back into the article give this a class name of bg white okay we're going to have this not the best looking ui because now we can't read our labels okay so let's go inside the label right here and then here and then finally here give this a class name of text green dash 500 and you know what not text screen 500 let's do text gray dash 900 so that it it kind of matches with this because this color the text that have is the same color as the background text okay so let's see let's see the levels probably have a bit of spacing so that we push down as just episode let's imagine bottom one okay and then let's go back into our let's go back into our theme our thing which is where our article sorry let's give this a padding all round of five and the rounded border and the box shadow which is not going to be visible but it i just like having it right there okay and we're gonna have this so this is our login form and then we need to have our google button below this and i just remember that i don't have that button yet so in order to fix that let's say let's install react icons probably overkill but you know npm install react dash icons okay let's install that and then below this form is it below the phone yeah below this form let's have a div okay this div is going to have a paragraph that says log in with like so and then we're going to have an icon here that says if a google that comes from react icons so it's finished installing so let's import it at the top and we're going to say import as a named imports of import fa google that's why you have it in curly brackets this is coming from react icon slash fa so let's save this let's see what we have on the screen reload this and we're going to have nothing okay so maybe fa google doesn't exist let me just confirm let's search for google let's use this one okay fc google it's fc google so fc changes to fc change this to fc save this close this and reload and we should see it on the screen right around there okay fantastic and i can't see my text that's because it's white so let me change this give this a class name of text gray dash 900 there we go give this deal a class name of margin top of 10 pushed away from the login button and then let's say imagine bottom of two pushed away from the paragraph uh sorry not that's not the great thing to do actually this should have a widget now wait a minute i'm starting the wrong thing so let's tell the paragraph so let's say flex so that the icon is going to go right there and then let's say item center center so that it's going to be positioned properly if i can just type it there we go let's start this icon and give this a class name of text xl command xl let's say imagine left of 10 there we go log in with google and probably this would link to somewhere else but we're going to add that in later when we start dealing with our logic for the kind of back-end we're not really going to create a full and a full-on back-end so let's do that let me just increase this to 4xl make it just a bit bigger there we go you can add facebook and other stuff inside here but technically what i want to do is i want to use something called passport.js so passport.js and you can go through this if you want i i've used it before and i really liked it so that's what i want to use now let's let's let's just scale this up let's scale this up okay and let me see what media query i use so that we can just be more uniform we have 992 for mean with okay so instead of having this at 992 i actually want to change this to 1024 because 10 it doesn't have 992 pixels it has 10 10 24 and i want to be uniform across all the pages now let's go inside our article is there article nope it is our section let's say that for large screens which is 10.4 pixels then want this to be displayed as a grid and the grid columns should be 2 with a gap of 5. let's see let's increase this to here there we go so this is how it looks at 92 pixels and remember that we limited this remember how oh you know what you know what i forgot to change this tailwind has a class of container okay in our app.js we also have a class of containers so this technically is going to mess up with our styling so what i want to do is change this to wrapper okay and then go inside our css and change this to wrapper okay just so that we don't conflict with david styling oh and i should mention that this is the reason why this is black is because it's auto filled but if you just try to change anything then it's going to be the green text that we added in and that is what we wanted and the same for this and the same for this okay so let's increase this image back to a hundred percent let's go inside get started where we have this for luck screens are going to say with set this to auto and you know what not auto really but full we should just take it back to 100 of the image let's increase this gap to let's say that for xl screens then the gap should be 20 let me see how large that is that's fine let's go inside the section and i'm going to say for large screens i'm going to say display flex uh actually you know what that's that won't work that would work that's it that is going to conflict with this for large screens uh let me go before this police screens let me see imagine top of 10 which will push away just a bit from this so that would have this and then what i want to do is i want to add a class here i want to add a class here on large screens that is called items center which will shrink this down a bit there we go there we go fantastic so that it doesn't you know introduce a whole white space that we don't really quite need okay so we're going to have this login with google login and everything and da da da now what i want to do is let me see um yeah this should probably be a bit more uniform let me see if we can fix that let's go inside our get started.js and then let's go inside this let's say bg or gray-50 okay so let's not do that here let's say uh let me say bg white let me test something okay so this is bg white and then let's go inside our form not our form but our article let's remove this white from the article which will remove this and then let's also remove the box shadow from the article so that we were no longer going to see that okay and then let me go back inside here let's say add a box sort of rounded they ah sorry i bought the radius of branded and a sled box shadow and then let me go and say this article give this a class name of get underscore underscore started like so and then let's go inside our index.css let's target that class right here let's say dot get underscore that's good started then let's say bg white actually what am i doing let me say background color set this to white of course but i want this white to have an opacity of about carbon an opacity of about 20 percent let's see how this looks i do not what am i doing let's remove this let's say hashtag 666 like so and then change this to about a positive 20 percent there we go there we go there we go so it's almost coming along but not quite yet okay so i can see some issues let me just scale this up down first of all and what we can do is inside this article we're going to deal with this for a moment css can be confusing sometimes and you know what instead of this margin top only being here let me just add it hold on for all devices like so so probably adding this bg white here wasn't a good idea right it probably wasn't a good idea but then adding it here would be a good idea right bg white okay and this what's this margin this margin is this right okay so we remove that margin fantastic what we can do instead is here we can have a padding bottom of 10 so we have that fantastic and then you know what let's just say padding y of tensor we also have padding on the top of the image right there fantastic and then here instead of this border radius being on the top as well we can just say around the dash bottom so that there's not going to be a butter on the top but on the bottom it's going to be there like so and then let's add the border radius on this this thingy right here so let's say rounded desktop okay so it applies it applies and then when we scale it up we're going to need to do a few things okay which means i'm going to have to remove this item center okay and then i'm going to have to remove this gap of 20 right right right why why is there still a gap gap of five actually well it's right there i mean come on so gap of five we're going to have that and then what we need to change now is for large screens then we need to say that flat screens then the rounded should be on the left wait is this the form this is the form so the rounded should be on the right okay and then for this right here that i'm saying for large screens then they're rounded the body should be on the left okay so we are going to have this and then let's add a padding all round of this where did we have a padding right here so let's say that for last screens let's have a padding all round of 10 which just do that look at that looking fantastic and then let's move this form downwards okay so let's go inside here inside this article actually not inside the article but inside the form let's say that for the screens let's have a margin top of 20 of 10 actually 10 let's say 20 so that it's almost the center of the image and we have that let's have a padding on the um x axis of 10 push this inwards a bit of course and i need to add it instead of adding it here let me add it here that says lodging on patch screen should be what i said padding on large screens return i reverse the words so that this also pushes in once okay and we have that look at this form looking amazing looking fantastic now probably this contrast isn't all that great right this contrast isn't all that good for the inputs so what we can do is we can go inside this input so right here the first one click on this the second one hold down the alt click alt key and click on this we can have a border bottom and a border board gray of 900 okay let's see how this looks so that we can help this so instead of this thing bought a b let's say border dash to make it just a bit thicker uh border b dash 2 that's the class that's a class there you go we're going to have this and then let's say rounded let's remove this class of rounded remove this class here remove this class oops and then remove this class from the input as well okay so i'm going to have that so that this line doesn't look as as if it's carved and then let's remove the box shadow so remove this and remove this and remove this i'm selecting them by using ctrl and d okay so let's remove those and we're going to have this okay i think this looks much better this looks much better in my opinion probably we need to remove this kind of padding we need to move that padding let me just see how it looks on smaller springs first of all yeah let's remove the padding let's move the padding on the input and the padding on the input is the padding x of six so let me just select this and then ctrl d to select the next one and then control this like the next one and then you can move this okay so that we're going to have that it's a bit more uniform bit more readable and much more tolerable and that is our get started page so in the next video what i want to do is set up our react router because i want to be able to navigate between these two pages because what will happen is because i've disabled this if i enable it once again then this happens so we have our hero section and then we have our four menu immediately and we don't want that and of course the reason why this is inside just a bit is because we have a padding on the x of our section so let's remove that as well a lot of tweaking here and there but you know let's say for that screens then the padding should be zero a lot of tweaking but you know it still works and of course remember that we added a border just manually here and we have added this using tailing so that's why it kind of doesn't dive all that much okay so that is going to be it now what i want to do in the next video is i want to install react auto dom and then i want to also implement it because and by the way i should mention that the reason why this our logo now looks smaller is because of tailwind it resets some of the styling okay so don't worry about this we're going to fix this when we're dealing with the react water dome and dealing with our navigation okay so that's going to be it for this video and see you in the next video okay welcome to part three of the trigger landing page and in this video i just want to install and set up react router dom so that we are no longer going to be seeing these two components on the same page so i'm going to go back into vs code and i have my server running on locals 3000 already okay so you can go ahead and do that and by the way i should mention that if you want the source code then you can head over to my github um i'm going to leave this link in the description as well the repository is called trigger this right here and you can clone this you can clone this right here and then you have to run npm install and then npm start okay so let's go back inside here and let's begin by changing this we need to extend this out a bit better so that it becomes bold as it was in the first video remember in the last video i added tailings so that's why some of the styling has reset so let me place this right here and then we can begin so i'm going to go inside my header component and insert this h2 i'm going to give this a class name of fonts dashboard and then let's say text does xl how does that look let's say for xl to make it bigger okay that's too big let's say 2xl and then let me go inside this button because i need this text to be smaller so inside this button component oh it has a class of btn so let me go and set my index.css right here let me find the class of btn which is this one right here okay so right here font size i'm going to change this font size to 14 pixels okay and then i'm going to reduce this padding so let's reduce this padding let's say around 8 pixels on the top and bottom and 10 pixels on the left and right how does this look that looks fine okay the reason i'm reducing it is because on extremely small screens i don't want this button to take up the entire entire width okay and then i'm going to increase it so let me just add a media query right around here of course i'm going to say target the dot city class and then the dot btn i'm going to say font size increase this to 16 pixels and then let's say padding and take it back to 10px on the top and bottom and 20 pixels on the left and right and let's see how this looks right around here there we go okay so that's looking fine now the next thing that i want to do is open up my terminal in vs code you can do that using control and tilde or control control and j and then i want to say npm install react router dom okay so as this installs i'm going to go inside my app.js file right here and then in my app.js i'm going to import i'm going to say import browser router so browser router and then i'm going to import routes and then i'm going to also import switch and this is not the correct one so remove this so i'm going to say browser router this is coming from react router dom right there finished installing fantastic and then i'm going to grab all of this i'm going to grab all of this and set up a new tag here called browser router okay open and close it and then i'm going to paste this in okay but this is just a bit different and you know what so that it's not all that confused i'm going to comment this out and then i'm going to say the first thing that i want to render is the header and the reason why i'm rendering the header come on outside of a route component is because i want the header to appear on every page no matter the page that i'm on right and then i'm going to set up my switch component so switch first of all okay and then i'm going to start setting up my route so the first route is going to be going to the forward slash which is my home page and then i'm going to add an exact prop here and for this homepage i want to render the hero the hero component that's it now um the the reason why you have the exact prop here is because i want to make sure that only when we are on the homepage should this render and i'm going to explain why we need that uh once we create this second route so this second rod is going to be going to a path called forward slash get started like so i'm going to close this out and i want from that to get started route right now the reason why we need this exact prop once again is because only when this part matches the forward slash shoot this render now when you look at this technically this also has a forward slash so if i remove this look at this if i remove this let me save this and let's reload this just to make sure that it reloads properly look at that we are on the home page right we are on the homepage and we don't show the get started page that is correct but when i go to forward slash get started look at this even though we are on the get started page look at this we don't see our get started component instead we still see our home component and this is not what we want right so look at this when i come back inside here and add the exact pro now look at this now we see our get started component and we don't see our uh our homepage component so that is the reason why we need this right here okay now we have reset some of the styling inside here because of this main class wrapper so let me see if i can grab these two routes and then have a main with a class of wrapper inside here and i hope this will still work it should still work there we go so we have that and of course we need the header as well to be inside the class of wrapper so let me move this above this and then let's move this uh sorry not that one but this one let's move this down i think that should still work yeah it works correctly okay so let's go back into our homepage fantastic now what we need to do is actually set up this navigation so that it works right so let's go back inside our header.js and we have an about us page which i've not created we have a live stock page which we have not created either but we need to add the get started route so this is not actually the correct component we should be inside the button component now what i'm going to do is i'm going to remove this okay and then inside here i'm going to render a link component and instead of link i'm just going to run the nav link actually so now link this is going to be going to forward slash get started which is the router that we have created so this leveling is like an href and then is like the anchor tag actually and then the two is the href and this is going to first let's get started i'm just going to say get star 10 okay and then we need to import this because it's coming from react router dom so i'm going to say import nav link from react router dom save this and this should work let's see get started and there we go so we have our get started page when we click on it and then we need to be able to go back to the homepage when you click on this logo so let's go back into header.js and then let's grab all of this and you know what instead of grabbing all of this actually i can just do this i can just render the nav like inside here another link to this is going back to the forward slash page and then i'm just going to say um trigger like so so save this and let's see now link is not defined of course i always forget to import it so import this from react.com and i've done that by saying control and spacebar which gives me the options that i would normally have such as to auto import it so when i click this it auto imports it so save that and then let's go back into that one it does that sometimes so when it does that and you fix the error just reload it so yeah on the get started okay you can go back to our home page there we go so look at that get started really get started and then home page now now now i've just noticed something notice how i'm clicking on this button but nothing is happening that's because the link is actually on the text and not on the bottom so let's change that let's go back inside here and then let's move this upwards and then let's remove this text from here and then let's move this right here and then let's add the text get started so that now um it's going to be wrapped inside here okay so let's see now when i click on this i should go to get started and then trigger there we go so that's looking fantastic now let's just reset this a bit let's add the font size for this for the header for the logo sorry let's save that for light screens then the text should be for xl okay and then let's fix this as well let's go into inside our showcase which is where is it the hero i usually call it circus let's give this a class name of fontbold that one fontbold okay yeah that fixes it actually and there we go so that's it for this video and in this video we're going to deal with our contact us page and you know what instead of um postponing it let me just create the the rust that we're going to need so we have our get started let me add a route the path for this is going to be forward slash contact us okay and then it's going to render our contact us page so contact us that we don't have by the way and then another route the path for this is going to be forward slash about us and then it's going to run at the about us page okay so let's create these two components inside our pages let's create a new file called contact us dot js and then let's say underscore rfc let's return in h1 that says contact us and then let's create another page called about ask.js let's say underscore rfc come on and then let's return an h1 that says about us okay so let's save that and then let's bring in these two components right at the top so now i'm going to copy this down change this to contact us and then change this to about us there you go so save this and then let's see if this would work but it doesn't technically work because we need to change these links we need to change this list items into links so let me grab this let's say nav link so i need to render now link this is going to forward slash about us come on i keep writing use so now link this is about us okay and then let's grab this this is now link this is going to word slash contact us okay and it says let's talk okay and this is important fantastic so let's save this and let's see when i click on this we have about us and then when i click on this we have contact us and there we go now another thing that i do want to do is inside the app js i want to render an error page right so let me create a new page here called error.js error.js okay let's say underscore rfc and let's return an h1 that says error page and then below this let's have enough link that goes back to the home page so i'm going to say back to home page and then we need to import this as well i keep doing that okay so let's save that and then let's create the route for the error page now the route for this is going to be a bit unique because the path is going to be on a wild card right and that's the risk and we're going to be rendering the error page right error page right there now what this means is that every other route that is not listed here is going to match the error page and that is what we want now let's just import the error page come on i thought i imported it does it now let's just copy this down let's change this to error like so so let's try it out let's go to a part that doesn't exist right and we should see error page and backed homepage and when i click this it should take me back to the homepage fantastic so that is going to be it for this video and in the next video we're going to start dealing with our contact us page okay we are cruising along and we are at part four right now and we're going to build this about us page today now one thing that i've just noticed and that we didn't do in the last video is that notice how there's some kind of navigation indication right at the top so when when we are on the about us page then we have this about us link lighting up in green and then when we are on the get started page we have this lighting up in green and then when we are on the homepage then this lights up in green and so on and so forth now i'm also going to do that in this video and i'm going to explain why because what you noticed in the last video is that when we go inside our components and we go inside i think it was the header right we had the nav link and we didn't use the the link that comes from react or the dom as well we use the nav link now i'm going to explain why we needed this in this video and actually we're going to do a practical example okay as always if you want the repository then the link is going to be in the description you can go ahead to my profile and the pro the repository is called trigger and you can just go ahead and clone this so you can download the zip file and then once you extract it then you'll need to say npm installed and then npm start which will start your development server on localhost 3000 and this is what i have and i'm running it in my terminal right here on localhost 3000 okay and just to confirm that our navigation is still working we have the about us page we have the let's stop page we have the get started page right there okay fantastic now let's go ahead let's go into our header component right now right here i'm going to add uh an attribute or a properly this is a prop because it's a component that is called active class name active class name now what this means is that these styles will only apply when this is uh it is the active class um how do i explain that when for example when we navigate to the home page then those styles are going to apply because we're on the homepage if we navigate to the about the stage and i'm going to add active class name here as well then the styles here are going to apply when we are on the about us page now what we need to do is just say text green dash uh i think 500 should be fine right and then let me do that to this as well so let's say come on text green dash 500 so let's save this and then let's see what we have now look at this we are on the homepage right now this lights up as green and when you go to the bottom space now we might encounter a slight error and i'm going to show you that error and how to fix it so look at this we're on the about us page so this lights up in green but notice this even though on the about the space then the name for the home page which is technically this still lights up in green and we don't want that so let's first add this to the to the let's talk page right here let's add this copy data paste and then let's go into let's talk and look at that so that's looking fantastic right so what we need to do is that remember how in our app.js okay remember in our objects we had an exact prop on the path and this basically means that only when this path matches the forward slash that's when you're going to render the hero component right the same thing we need to do the very very same thing right here we just need to add the exact prop here which means basically only when it's it's the first that's then the styles are going to apply so let's save this and let's see look at that now it's longer highlighted as green and so on and so forth so we just need to add it to the get started link as well so the get started link is the button component so let's go into the bottom component so let's say active class name and we're just going to say text green dash 500 now this might not work okay and i actually think it won't work okay so let's save this let's look at this okay of course it doesn't work because this is shouldn't be here and let's add it on the top this should work let's see nope not yet but then that would mean that we need to reset a bit of the stylings inside here so index.css let's find where we have our big button with our button right here so let's say let's say cta and btn now let's just call this class active btm okay let's call it like this let's make it commonplace and then let's just say background color we're just going to reset the style so we're going to say background color set this to transparent okay we're going to say borders can remain we're going to say border um we don't need a border so let's say border none let's say padding is going to remain so the color is going to be um what's the talent color for green let me just look for that tailwind css colors i forget the heads of values so let me say this one 10b981 okay come on 10b i need one okay that's the table in green onto it can remain family fun family can remain font size and so on and so forth so let's save this and then let me see if this will work okay so let's see if this will work so active class name let's say dot active are not that but active btn let's see let's see it started still doesn't work still doesn't work let me remove this so now technically this applies okay that applies but we don't still have the the button class this doesn't seem to apply so what i'm going to do is this tells inside here i'm just going to remove this class name of btn and by there i'll just move this to the other side okay i've just moved it before the active class name and what i'm going to do is let me test something let me just say bg white let's see okay okay okay so maybe it's because we have the stats in our index.css file that's why it doesn't work so let's just fix that let's go inside here let's say bg green dash 500 let's say py2 px 6 rounded and other box shadow just we add the styles as they were okay look at that look at that now when we're on the about us okay now that that seems to apply that seems to apply as we wanted to actually so let's add a transition let's transition all let's say duration does 300 let's have a hover state where we're going to say bg transparent transparent and then for the hover state let's say text green dash 500 and then i just want to add a border of green dash 500 so that when you hover over it then the button is going to have a green border okay so let's see and we need to say border dash but actually just there we go fantastic yeah i think that that looks much better and it works as we expect it to work so let's go into the about us page and let's begin building so let's go into into our about us with our batters about us page right here and then we need to import an image which we don't currently have so i'm going to just say import about from dot slash should be about um let me just say about dot svg which we don't currently have now what i'm going to do is i'm going to grab this image from figma okay but remember like in the first video you can head over to andro let me say andrew.co and i don't remember what i searched for here i actually don't remember but let me just see if i can find it let's just say rubik's cube let's see rubik let's say month okay so this is this is the svg image that i used now when you search for month i don't know whether you can have an easier keyword to search for this but this is the svg image that we used and once again if you want to change the color you have to use go right here and then select your preferred color okay so you can head over and download this as an svg i'm just going to grab mine from figma so let me just do that let's say grab this and export export as svg okay let's export it into desktop work and let's say where is it it's called trigger okay into our source folder and right here so let's say about dot svg and while we are here actually let me do that for the contactors page as well so we need this for the contactors and let me see if i can find this one as well so let's just say contact search for that and here it is so this is the svg image once again you can change the color to your preferred color fantastic so let me grab this let's say export this as svg let's say contact okay fantastic and i think those are all the svg images that we are going to use in this project now let's go ahead and close this paste this to the side and let's begin building so we have about this dot svg where is it about svg right there and probably you want to put these images into a folder so that they don't clutter your workspace so let's return a section inside here and you know what actually by the way you know what this is most likely going to be the same way as our hero section okay so let me go into components let's go into hero okay let me copy all of this so just grab this and then let's go into about us let's return this okay probably i'm going to change these styles i'm still not sure let me see what i have for the hero styles right here uh where's the hero we have hero overlay and da da da okay so let me let me know let me not return these class names and then of course we don't want this h1 and of course for this section we want the image to come first okay so we have the image to come first i'm moving it by just selecting the text that i want and then holding the alt key and moving it up or down okay so we have the class name we have this we have the h1 that says what why does trigger exist so say why does trigger exist and then below this we have a paragraph that says this let me just copy it and paste it here this is just some random text if you're in vs code all you can say is you do something like learn 20 which will generate 20 uh dummy text for you okay and we don't need the button component here so let's move it and this should be it so let's save this and this is not here this should say about like so okay fantastic now let's see what we have on the screen and we have this looking amazing so let's begin starting this out we are using taylor so let's say padding y of 10 by the x of 5 and actually how much padding did i have on both sides say i don't want to remember let's say get started what did i have padding on five hold on okay that should be fine okay you can close this and close this and then let's go inside this uh is it inside this div let's say grid and grid columns one so display them as a group with the gap of five let's see how that looks fantastic and then on medium screens then we just say grid columns should be two okay so let's say that let's go inside this h1 font ball let's save text for xl increase the size let's say margin bottom of five pushed away from the text probably we can say margin top of five as well just push away from the image let's imagine top ten okay and then for medium screens let's reset the margin top to zero okay and i'm going to show you why that's necessary just so that it doesn't push away downwards more than the image okay but the progress did i add a line height on the paragraphs i should actually do that because the smaller the the smaller your screen becomes then the greater the line height should be just a principle of design let's see you know index.css let's see the paragraph where you i didn't have the paragraph line height so let's just add the paragraph line height i'm going to say for every paragraph then the line height should be let's see how 1.8 looks it should be fine 1.8 is fine okay that's amazing now what phone did i import i imported the 400 and 700 okay that's nice now that we have this let's just see how this looks on larger screens and that's all we need to do actually so let's increase this right around there look at that right on there then it goes to full screen right now i need to um just adjust it just a bit okay because i don't want this to happen and probably you know what you know what can do what you can do is right around here then we can add a margin top so that this pushes downwards even more right just go right in the section let's say for medium swings the margin top should be 20. how does this look 20 should be fine okay and then let's see for large screens now i want to do something different here okay i'm going to say that for large screens actually let's say for excel screens then i want this to be a flexbox okay flexbox which might just mess it up just a bit just a bit look at that you see that so flexbox let's say um actually is that a good idea no i don't think that's a good idea i don't think that's a good idea what you can do is just say item center so that this moves downwards so let's say that for large screens let's say items dash center which will possess downloads there we go so we have that let's say for large results again let's increase the gap to 10 the grid gap to 10 there we go and what else yeah i think that's actually it for this uh for this um i can't think that's it for the about us page so we have the homepage looking fantastic and probably i want to remove this background i don't i'm starting not to like that that this slide background so let's go into index.css and let's go inside where is it um should be the hero overlay let's just remove this background color i'm starting not to like it because it interferes with the flow of the entire page now probably um i did something wrong because as you can see this this color is not matching this and this and this and so on and so forth that's because we switched to tailwind after we had our uh our global css okay so i might fix that in another video but not this video because it will involve quite a lot of tweaking here and there and so on and so forth so in the next video we're going to deal with our contactors page and i hope to see you then hello everyone so between now and the last video i actually deployed our project to netlify so if you head over to trigger.netflight.app then you're going to find our project being hosted on that website so we have the about us page which we did in the last video with the last page which we are going to do now and then we have the get started now i thought that was necessary to mention because of something that we're going to do in the future which i'm not going to say right now so if you want to deploy your project as well you can head over to netify you can create an account or you can log in if you already have an account and then you can just say new site from git and you can select the repository that you want from your github or from whatever gate provider that you're using so that's that and once again if you want the repository this is the link to the repository it's going to be in the video description you can clone it or you can download the zip file and then you'll have to run npm installed and then npm start so in this video i want us to deal with our contact us page okay now my my development server is already running on localhost 3000 that's why we can see this and then for the contact us page what we need to do is come on where is it so for the contactor page what we need to do is almost something similar to what we've been doing actually it's just resetting a bit of the styling so what i'm going to do is grab this entire section okay i'm going to grab this entire section and i'm going to close this and close this and close this and then i'm going to go into our contact page right here contact us js and then i'm going to replace this with an empty fragment and then paste this section in if you're wondering about this fragment it's because you can only return one item in our return statement okay you can only turn one item and the fragment serves as the kind of parent for everyone you can return the section here as well but i just don't like doing that okay so this is going to be our about us page now we just need to change this import this is going to be coming from contact which is the name of our image so i'm going to say import contact from the slash should be contact dot svg okay and i want to save this then we should see this on the screen that's amazing now what we need to do is just change this second article because we're going to be displaying a contact us form okay and this contact us form is going to be powered by netlify so i'm going to show you how we can do that so i'm going to create a form inside here and i'm going to create a label and i've forgotten uh how i created this actually let me just confirm that so we have a kind of each one that says let's talk some so let's have that here let's say an h2 that says let's talk some and you know let's just have it as an h1 for reasons that um it's easily detectable by google so this one is going to say the label for this is going to say what is your name the label for this the html file is going to be name okay and then inputs with a type of text with a name of name and an id of name okay we're going to say placeholder that says your name and set this to required as well okay and then we're going to have another input with the type of email with the name of email with an id or email with placeholder that says enter your email and then send it to required as well and of course i forgot to add the label for email so let's add it at the top so level for email okay and by the way the autocomplete that i have is from emmett so if i just say label and press enter or tab then it's just going to create that for me it's just a bit faster so let me say what is it entire email i didn't have the email uh section here but we need to have it so enter your email address now it will be prudent for you to have some kind of validation function to validate whether the email enters correct or whether the name entered and in the string is not empty basically for the name and then some kind of rejects for the email but i don't want to do that and i'm not actually going to do that so let's have another label here for let's just say text area this is going to say i want us to talk about so i want us to talk about dot and then let's have a text area so text area with the name of text area with an id of text area column study rows 10 that's fantastic and actually that should be it ah you know let's add a placeholder so place all that i want to talk about go down and set it to required as well so let's save this let's see what have on the screen and we should have this very horrible looking right so let's tell this out let's go inside the form should be the form i think okay let's give this a class name of plugs items uh no let's say flex column let me see how this looks okay that's fantastic that's amazing and then the inputs and the text area should have a transparent background so let me go inside our index.css so that i can just add it once so i'm going to say input and text area let's say background color set this to transparent okay that's because i don't want to keep on jumping from this one to this one to this one and adding the same stacks okay so let's do that once and then let's begin standing this out and actually what we can just tell all the inputs inside here as well so let's say inputs like the input we're going to say border dash bottom and i'm going to say solid let's say two pixels solid and white say that how that looks okay fantastic let's say padding of 10 pixels on the top and bottom and 15 pixels in the left and right let's have a border radius of rounded oh sorry the saturation class let's say 10 pixels okay move this up actually at the top let's say font family actually yeah it has inherited the phone from so we need to need to specify that and then um what else do we need to do i don't think there's anything else we need to do on the inputs actually and this is not what i wanted okay now the reason why this is happening is because uh the padding that we have on the left and right is greater than the border it is that we have at the bottom so if i change this back to 10 if i just set it to 10 look at that it would be and actually that's the wrong thing it should be let's add that to fix 15 once again the border radius here should be lesser right let's see five pixels yeah it should be lesser so let's set this to around um let's say three pixels or you're not whatever it is okay you know what we don't even need to have a kind of large body this because it's not technically visible so you can have it at two pixels and that should be fine okay and then uh for the inputs let's see what you can do i can see margin bottom of 10 pixels to push the inputs away from one another but let me see how does 50 pixels look does that move away okay there we go 620 pixels those are why this scrubbing was introduced is because we have a text area at the bottom right here okay so don't forget about that and then let's see let's see we have the inputs and everything is fantastic so let's go back into our contact us and let's tell this h1 right here let's go inside this h1 where are you here okay give this a class name or flex uh flex what am i doing let's say text dash for excel let's imagine bottom of five push down from that let's say imagine top of ten okay let's talk some let's say font bold soft font bold make it bold fantastic okay that's looking almost amazing now one thing that i do have an issue with is i can't see the text area right i can't see the texture how did i okay so the text area has a rounded border so let's do that for the text area so let's say text area let's say border of um what do you have here two pixels so let's say two pixels solid and white as well okay so i'm going to have that let's add a border radius border radius of 5 pixels let's say margin top margin of 5 pixels fantastic let's add a padding of 10 pixels to push this text in was just a bit fantastic and hmm what putting there on the left and right here 15 so let's make it 15 so that it's uniform with the inputs as well okay that's looking almost amazing looking almost amazing we just need to scale it up and of course it's already scaled up because we copy the stairs but i want this to go to the left and then this to go to the right so let's go back into contact us and then let's just grab the entirety of this article from here to here cut this out and then just paste it above this okay and voila so we're going to have that now one thing that this is going to be a problem is that now when we do this now the image appears on the bottom i don't want that to happen so what i'm going to do is insert this div i'm going to remove this grid right here i'm going to move this gap as well and then actually now let's just remove let's just move all the styles and then let's say flex okay and then flex column reverse which will just uh bring the image on the top and then the our form on the bottom right you know what could would it be better if this h1 is at the top and then the image would that be better i'm not sure let's try to move it above right here i don't know let's see probably right probably it could it would be better let's just have it there and let's see how this looks okay and then let's go um right inside here let's say that for medium screens then i want to display this as a grid and then grid come on grid columns let's say columns two and then items dash center or for four medium screens of course so let's see that let's increase this to here not a fan of this not a fan of this because of item center so let's move that still not a fan of it let's add a grid gap to separate this image right here so let's say gap of 10 gap dash 10 so i'm not full column so gap dash 10 so that we're going to have this and of course as always i always forget the submit button but we're going to add that in a moment now what you can do is um i'm not sure about this h1 here so let me just try and move it to where it was let me see how this there we go there we go okay so let's just move the h1 downwards so that the image is going to move upwards and we're going to have that looking amazing looking fantastic now we need a submit button on this form so let's go to the bottom of the form right around here let's use add a button the type of submit that says send okay and we're going to have that and it's at the center because i have item center here no i have flex column so let me grab this give this a class name of block okay let's say text that's left should go back to the left there we go so let's imagine top of five let's say um bg white let's say padding y two padding x of six let's say rounded dash let's add a box shadow let's say text does uh let's say gray that's 900 okay so um we're going to have this now the reason why i added the slight background is because i just wanted to see how the button would look but i don't want this bg white so let's remove it and we're going to have uh actually not text green and underneath should now say text white so we see our submit button send right there okay fantastic and we can also see the light kind of box chart right you see it so um let's see let's see let's see let's see let's see let's go inside our form and let's say item start okay no i don't like that i don't like item stuff so let's remove this and you know that is going to be our our form but remember we added some margin at the top in the because we copied these styles right we added some margin on the top of the where's it right here imagine top of 20. so we can remove this actually and we're going to have that so let's talk some and da da and we have this and this and this so that's looking amazing okay now one thing that i didn't want to do is uh you will realize that this form is technically functional but if you try to submit anything then it doesn't go anywhere right so what we need to do is incorporate netlife into it right so let's go back into our index.html okay and this is a bit uh different in terms of adding netify from submissions but let's go into index.html right here and i think i'm just going to go in the body and i'm just going to say contact form place a comment subcontact form and you can press account by control and forward slash just like that it's a toggle okay okay and inside our index.html we're just going to create a similar form to what we had in our contact us right so i'm going to create a form inside here and then i'm going to create an input to the type of text with the name of name with an id of name okay we had a label right uh this is labeled for name and what did they say it says what is your name so what is your name now one thing you'll notice is that now we're in html so this is a level four but when you go inside jsx then this becomes labeled html4 and the reason for that is because javascript has a keyword of four that we can't use inside here remember jsx is just javascript in xml so let's uh let's add another one here we're going to have an input with a type of email with the name of email with an id of email and of course we need a label for this this label for email and it says enter your email address okay oops there we go and then what else did we have we had a text area so let's add a text area so label for text area let's just copy this and then oops let's say i want us to talk about. and then let's have a text area with the name of text area with an id of text area and that is that okay now one thing that we do need to do is we need to make sure that the name that we have inside here corresponds to the name that we we are going to have uh that we have in our text area here so this is the name of text error just confirming that that's correct and not um instead of this being text error let's just say message because it's a bit more descriptive right and then let's also change this name to message like so okay and probably if you don't know the four here refers to the id okay it doesn't refer to the name of the text here it refers to the id and then the input for the name for this is name so let's just confirm that we have the name here and then this is email and then that is image now what you need to do is add an attribute on the form here called netlify okay and once we do that and we deploy to notify the network is automatically going to add all the form submission stuff for us okay so let's save this and by the way if you uh if you want to prevent some spam from boss then you can also add um what's the attribute uh it's called netfly it's called netlify honeypot and then this is equal to buttfield but field come on and then we set this to hidden okay i think this should be okay you know what i think this should be okay so what i'm going to do is remember we deployed our project so i'm just going to redeploy this and then we're going to see if it's working so let's see the into pages here let's say git add contact us.js and git commit let's say contact us page let's see out of this let's indeed add index dot css what did i add in index.css add an input so let's say date commit style inputs and text area let's say git add let's first cd out of the source let's see into the public folder let's say git add index dot html let's say git commit and let's say um add netify form okay let's say git push now if you're wondering why uh my index.js is modified okay uh all i did is remove these semicolons that were here here and then change this to double quotes instead of single quotes so that's all that is changed in this index.html file so don't worry about that yours is not going to be changed okay i just thought it i should mention it in case you're wondering okay so that that will begin at deploy for us so we can go ahead into netflix to check how it's going on okay so let's go into notify and then let me log in and it should trigger an auto deploy and actually you know what it's already done it's already done so that's looking fantastic so let's open this up and we should see about us we have this we have let's talk and we have our image and so on and so forth okay so i've filled in some dummy data and we have this so let me say send and we should see [Music] oops it happens guys it happens okay so let's see what we have okay let's see what you have in the content oh and by the way you know what this is fantastic because i've also realized something else right now let me just go back into our original page and let me show you what i realized okay so notice how this is the home page right if you're going to be about a space we have the forward slash about us but notice this if i reload i get an error page but we'll be about as page which is not an error page right now let me show you how we can fix that let's go back into our uh into vs code and then i'm going to add a netify.tomlin file netflix.toml okay and then inside here we're going to have redirects it is and we are redirecting from equals to forward slash asterisk and we are redirecting this to uh what is it index.html like so with a status of 200. is that how um is that how you do it okay let me just confirm this let me just confirm this okay so this should say redirects into for slash index.html okay so let's save this and then let's deploy this network. so let's say git come on i hate it when it does that so let's say cd into uh as you don't need to you can just say get add netlify network.com file and get commits we can say netlify redirects so let's say git push and this should trigger our redeploy of our project right and actually i shouldn't have done that because we haven't yet fixed our our form issue okay so i think the reason why this is happening is because this form doesn't have a name okay so we need a name attribute for this and i'm just going to call this contact form and then i'm going to go into of course save this and then go into our contact us form and where is the form here we're going to add a name attribute to this and call this contact dash form okay and you know what i don't think we need to add this here don't think we need to add this here but we need to add a method of posts for this so that um we don't expose the data once we submit the form so let's try that again okay so let's say let's see cd into public let's say git add index.html and git commit let's say add name attribute on cd out of this and cd into the source and then say git add let's switch it in cd into pages so git add contact us to chess what did i add i forgot on that method post let's say git commit add form method and let's say get push which will trigger i redeploy once again okay so i'm still at the broken link and once netflix finishes this deploy then it's still building then once i reload this then it should work i just want to test it out but that that is how it's going to work so it's still building let's go into where is it the deploys and it's done okay it's done so let's let's reload this let's see and look at that now now that is possible because of the netflix and let's try again and fill in this form okay and then let's try and submit it and hopefully this works i hate this i hate this okay so let me just check whether this forms out okay we have two forms okay now the reason why we have these two forms is because the first one wasn't the first one didn't have a name attribute so we named this one contact form and we can delete this form actually uh this for a for previous submission of course let's say form one okay so delete this and i'm wondering why isn't this one working it should be working it should be working why aren't you working come on don't do this to me all right guys so it took about 35 minutes and five tries to finally get this correctly now i'm going to add some dummy data and then i'm just going to say testing okay and then look at this now when you submit it now we get this thank you your form has been received and that is quite now if i go into my dashboard right inside here and go into forms then you'll see that i have a contact form and we have a form submission that i've just submitted right now okay now i'm going to leave this link in the description because i'm not quite sure what i changed uh because i remember we had the name with the contact from right here we have the nettle file actually this the index.html file and then we have the netlife honeypot for the boat field so that it doesn't show the the uh what's it called it doesn't show a capture when we submit the form and then we have our labels and inputs in whether the labels are optional i've just read that the labels are optional in this blog post and then in our contact us form in our jsx what i've changed is i've added uh where is it this is the form the name is here the method is post okay i've added this input with the type of hidden for the form name this the value contact i think this is for the bots as well and then i don't think i've changed any of these inputs inside here but once we added this well i think it's when i added this that's when the contact form started working and i've deployed it to github so when you clone this actually when you clone this repository then you're going to have these corrections inside there but i hope you have enjoyed the code along and uh in the next video we're going to start dealing with our login and our sign up page okay guys so i wanted to explain something in the first video i think it was or the second maybe i mentioned that i wanted to use passport.js for our authentication but i've decided that instead of that i'm going to use netlife authentication service called netlify identity okay so if you go into your dashboard for your website if you have deployed this of course and you will need to actually deploy it by the way then if you go into the identity tab right here then you can see it says manage signups logins password recovery and more all without rolling out your own authentication service so what i'm going to do right here is just say enable identity okay and you know what i'm going to save this for the next video so see in the next video hello everyone today we're going to build out our login and logout logic using the netlify identity service and i built a small demo to show you what we're going to be doing so if i click on login because i don't currently have any kind of user i'm going to have to sign up first so i'm going to sign up with my email and the email should be here actually this should be my name and when i sign up then look at this now we have this text that's saying this will only show if you're logged in and then it has some text at the top that says welcome back and then whatever name that you're going to sign up with and then when i click on log out then it logs me out of course now when i click on login again because i already have an account with them so i'm going to just place in my email and then now i can log in because i already have an account now if i go into my let me log out if i go into my netify identity service then look at this i'm just going to reload this and you should see that i've created a new instance of myself logging in created that a few seconds ago which is actually correct so we're going to do the very same thing in trigger so on our website we're going to build out our authentication service and i've just remembered that we created our login form but we're not really going to use this one because we're going to use the model that pops up that you've just noticed it pops up from netlify right here okay so i can close this and then one thing that i should mention is that you should go ahead and deploy your website so if you have not done so you should go ahead and deploy your website to netlify okay because we're using the notify identity service and what you can do is you can go into netflix.com you can log in or sign up and then you can just say uh new site from git and then choose your git provider that you're hosting your your source code on mine is github so i can just select github and then what's once it logs in like so then i can select my repository which i want to um to deploy which will build up the website for me and then once you do that then you can go ahead so mine is called a trigger that's what i have so trigger.net if i don't up and i'm going to go ahead into identity right here and then i'm going to say enable identity okay and just like that we have our identity service enabled on netlife now we're going to have to do a bit of setup in our localhost before we can deploy it before we can actually test all of this out so i'm going to open up vs code i already have my dev server running on localhost 3000 okay so in vs code i'm just going to say open up my timeline using ctrl and j and then i'm going to say npm install neglify identity widget like so so we need the service to integrate with netify and i forgot to mention that we are going to use the context api for this just because it becomes easier to share data across all the components so as this installs i'm just going to close this and then i'm going to go into my source folder and create a new folder called context and then inside here i'm going to create a new file called auth.js like so okay now we're going to start building out our context so i'm going to say import import create context and use state and use effect okay this is all coming from react of course fantastic and then the next thing that i'm going to do is i'm going to say actually we need to we need the netify identity service so i'm going to say import netlify identity rom netlify identity widget which has just finished installing okay and then below this i'm going to say const of context equals to create context like so just going to initialize it like that for now and then below this i'm going to say export const auth context provider okay this is going to be equal to this an arrow function and then inside here i'm just going to say const user and set user this is going to be use state and by default it's going to be null because there's no good there's not going to be a user logged in right now come on don't do that okay fantastic okay so once we do this then i'm going to go below this and i'm going to say return all context dot provider row vita like so close it out and then inside here we're going to render out children okay and i'm going to explain where this is coming from in a moment so we need to access this inside here as a pro so we're going to destructure children right now once we do this when we return the earth context provider we need to return it with some kind of value and he as is the custom of our people we're just going to say hello world okay for now so i'm going to save this okay and then i'm going to go inside my index.js right inside here and then i'm going to say above the app right above my app component i'm going to say alt context provider which is going to auto import that for me and then of course remember to close it out so our context provider so we import auth contest provider from context auth which is just basically what we have about this okay and then just to test it out okay so i'm going to save this and then i'm going to go inside my components and then i'm going to go let's just go inside the header and then inside header i'm going to say actually about this i'm just going to say import of context from the slash should be context slash author like so so now we are importing uh where is it we are importing this okay and actually because we're importing it then i should probably export it right here so export default context don't forget that okay so once you finish importing it then i just want to show you how we can access this value that we have here which is the prop for the earth context provider right so i'm going to go inside below this and i'm going to say const value equals to use context which is a hook from react which you need to import and then this is going to be equal to earth context so let's import that hook so i'm going to say import use context from react okay and then right let me say right inside here okay inside my logo then i just want to access the value so i'm going to save this and then let's see what we have on the screen right here let's reload this and it says hello world right which is basically what we have inside our value inside here right so that means that we are able to access uh this prop inside the other component so we have set it up correctly so i'm going to change this back to trigger like so because that's our logo and then i'm going to go back inside my of.js and then we're going to begin a bit more of setup now let me explain this children right so inside index.js notice how we wrap the earth context provider we wrap the app component inside the auth context provider so the app component becomes the child of all of this remember that the app component is kind of our parent component for all other components right we are rendering all other components inside our app component so that means by wrapping the app inside the auth context provider then we can access all the all the data in our context api inside all other components in our application and that is very very necessary okay so let's go in let's go below this and then let's set up our use effect right and then let's set up an empty dependency to close it out so we are going to begin using our nightly identity service so i'm going to say netlify identity dot init which is going to initialize netflix identity and then i'm going to say once again that if i you know what we're going to do this a lot of them let me just copy this so i'm going to say netflix identity dot on right and we're listening for a login event like so where we want to access the user okay and then we just want to set user into the user okay don't do that set user into the user which just basically logs them in and then below this once again we're just going to see netflix.com and then we're listening for a logout event okay and then we want to say set user back to now which will log them out and actually by the way after doing this we probably want to close the model so i'm going to say net for identity dot close which will just close the model that is going to pop up and then below this once we log out then i just want to say netflix identity dot on and we're listening for the init event like so and they won't access the user and then we just want to say set user into the user like so so we're listening for the initialize event to initialize network identity and if the user exists then we just want to say set user into the user that exists okay and then we're going to need to clean up our use effect so that these don't run in the background so i'm going to say return like so and we're going to say netlify identity dot off and we just want to turn off the login event and then just copy this down change this to log out just to clean up our use effect so that all of these don't run in the background okay so once we have this then i'm going to go outside of this use effect so outside of the use effect which ends right here then i'm going to create my login and logout functions so i'm going to say const log in this is going to be an arrow function and i'm just going to say notify identity dot open which will open the modem right for the login model and then actually you know what i can just copy this because it's almost something similar copied this is going to say log out and this is just going to say dot close okay okay so once we have this then we're going to have to pass in this logout and the login and the user into our contacts right here so i'm going to create add my curly brackets and then i'm going to say user is going to be null by default and then login is going to be a function like so and then logout is also a function which we have just created like so so i can save this and now we need a way to pass in all of these inside the value right so what i'm going to do is i'm going to this structure the login the logout and the user and then pass them in inside the variable that i'm going to create and then we're going to pass them in inside the value here so i'm going to say cons let's just call this context and this is going to be equal to the user the login and the log out like so so the use of state value the login function and the logout function and then instead of passing hello world inside here then i can now pass in context right which means it's just going to populate uh the value with all of this so that's looking fantastic so i'm going to save this and then in header js okay so in header js now instead of just getting the value here right instead of just getting the value now i'm going to get the user the login and the log out which is basically the same thing that we have done inside here the user the login and the logout right this is of course use context and it's coming from off context which is what we have here okay fantastic now once we do this then what i can do is inside the um you know what uh probably i need this button i need ins i need the login and logout function inside the button component so i'm going to import usage i'm going to import use context if i can just type it without clicking other buttons this is from react and then we also need to import import of context from dot slash context forward slash up like like so and then we're going to say right here we're going to say const log in and log out this is going to be equal to use context and passing our context fantastic now once we do this then i want that when you click on this button right here which we're going to change by the way to say login so log in and this is no longer going to be a link so i'm going to remove all of these i'm going to remove this probably these class names i should copy them so just copy these and then this is going to be our button right now inside our button let me paste in these class names so class class names like so so that the the the button returns the class names now inside this button when i click on this then i want to trigger the login event right so i'm going to go after this and i'm going to say on click i'm just going to call the the login event right which will prompt me to log in so i'm going to save this and let's see what we can do probably i think that should be okay for now so let me save this header and let's test it out right so just reload this so that this changes as well so it's going to say login so when i log in and remember remember that i already have an instance of identity running from the demo that i showed you so you might get a bit of a different screen than mine so i'm going to say login and i'm just going to say clear local street url to be safe right and then i'm going to enter in my url for trigger so i'm going to say https it's called dot trigger.netify.app and then i'm going to say set sites url so that's why you need to deploy it okay that's why you really need to deploy your website so for the login because i don't have any instance i'm going to say sign up first okay so once i fill in the details then i'm just going to say sign up and it says a confirmation message has been sent to your email now for the purposes of testing i don't want to do this right so i'm going to go into netlify and then i'm just going to say settings and usage inside my identity so settings and usage and then i'm going to say um should be right here confirmation template so i'm going to say edit settings and i'm going to say allow users to sign up without verifying their email address just because i don't want to jump into my email right now to kind of show you right okay so i'm just going to reload this let's say login again i hope this will work i hope this will work email not confirmed so let me just do that quickly okay so i've confirmed my email but i'm still getting a small error here where it says email not confirmed right so what i'm going to do is i'm just going to deploy this so that it reflects the changes in my website because currently this is what is it because currently this is what i have which we have just changed right so let me deploy this to netlify so that it reflects the changes as well okay so once this pushes to github then it's going to trigger a redeploy on netlife which should then have the latest changes on our website so let me just monitor how that is going let's go into netlify let's go back to the top right here and it should say building and you know what we're going to get an error because these are assigned a value but never used so let's fix that let's just comment this out let's comment this out and comment this out okay so in button just now link is used so we have to remove this and comment this out and we should have this okay fantastic so you just say get all and get commit let's say remove unused variables let's say git push and it's going to trigger another redeploy because this one should have failed but it hasn't failed that's amazing usually it it has failed but it usually fails by now so let's see if that it has started okay there we go so it has failed so let's go to deploy details okay there we go so we can preview this and we should have this on the screen right so we have our website we have this and we can test this out so we can say login right okay so i'm going to click on login and i'm going to click on sign up now to create a new user and then once i create this new user then i'm just going to click on sign up okay there you go which means if i click on login then i should see logout instead of login right and there we go so that means that this is working correctly so logged in as me and there you go so we can log out once again and then it brings us this model so let's continue building this out in localhost and this should now work correctly and actually what i can show you is that if you go into your notify identity and then you just kind of reload this then you should see the users who are logged in currently which is me right so i'm going to go back into our development and i'm going to place this to the side now probably because it's going to be easier and then place this to the side okay and then now that this is logged in right now we need that when this is the when this is logging then we need to show our logout button right so i'm just going to add another button here and actually you know what i think we can do a conditional we can do a condition so let me get the user here right and then i'm just going to remove this and i'm going to place my curly brackets to test for a condition so i'm going to say if the user exists right if this is true then i want the button to say log out and if the user doesn't exist so we just say login so let's say this and let's see okay so it says login if i log in let's log in and after log again it should say log out there there we go that's looking fantastic so that's a very nice way to do a conditional so what this user means actually if you don't understand where this is coming from is that we are checking for whether the user is null or not and by default the user is null by because we have set the state value to now right inside here but once we log in right once we log in here then we set the user into the user who has just logged in okay and the network that close is what logs out a user by default now let's add the logout component okay let's add a logout button and as you know what i've just realized something that we have logged here and we have logout here okay so this is not something that i wanted and it's actually something that i've just noticed so this would mean that we have to go into into our hero js and we are going to have to change this component into a button okay we're going to change this into a button and remove this at the top and this button is basically going to say the same thing as the class names inside here so just copy this and paste them inside here and this button is just going to say get started okay and then when we click on this button on click we want this button to trigger the login event which we need to get from the context right so once again we are just going to say import use context from react okay and then below this we're just going to say we want to get the cons we want to get the login function and this is coming not from really but this is equal to use context and then we want to pass in all the context which we also need to import right there okay fantastic so it just say uh what what did they say it gets started okay get started login okay fantastic that's looking amazing so for the uh once we we do this then we want to also make a logout button and i've just realized that probably this was not the best idea okay because this button only has the login and we have placed a condition to check for the login or logout so i'm going to remove this actually because it's not going to help us so i'm going to say this should say login because it triggers the login event and then i'm just going to copy this so copy this down okay and remove this don't place a forward slash and this is going to say log out and then it's going to trigger the logout function which we need to get from here so log out like so fantastic and the logo function we also created it right here okay so let's save this and then let's test it out now notice how uh we have two buttons here we're going to fix that in a moment so if we say login i'm already logged in so i'm going to try and log out okay so log out log out nothing is happening uh let's let's see what we have in the console let's go into updates and then let's just say console.log logout event let's see that um okay so this oh you know what it's because this is not close this is logout this is logo not close okay so when we log in we open the model and when we log out we log out we trigger the logout function to log us out okay so sorry for that sorry for that so now when we say log out come on seriously are you serious let's see login logged in okay so logout really am i calling this function wrongly on click logouts on click and click logout log out what what is happening oh so it locked us out okay clogged us up correctly just took a while and it didn't it didn't trigger the log out console log that as i had hoped it would so let's just remove this oh we already moved it okay oh i removed it that's why it didn't trigger you know okay that's fine so it logged us out because now when i click on login then it gives them gives me the model right now this would mean that we want to check that if the user is logged in then we only render the logout button and if the user is logged out then we render the login button so that's very easy to do we can just go inside this code this button we're just going to cut up this button and then we're going to place a conditional we're going to say if the user exists and only when the user exists so we do a double ampersand which is a truthy and which means it will only execute the expression on the right if the left is also true so i'm going to paste this in so if the user exists that's when you want to enter our logout button and if the user doesn't exist then it's going to render this one so let's save this and let's see so there we go so no user exists so i'm going to click on login and then once i log in then it should say log out there we go so it says logout and we still need to fix this so i'm just going to grab this and i'm going to say place my other conditioner and i'm going to say when the user doesn't exist and do the same thing so here is not user and here is user okay so if the user doesn't exist this one renders and if the user exists this one renders so save this and there you go so when we click on log out then we should see login and we click when we click on login we should see log out so let me just place a comment here and i'm going to say render this button if the user is logged in and i'm going to copy this and paste this above here and this is going to say logged out so save this and there we go change this to capital r because it's bothering me there we go fantastic okay so we are progressing very very nicely okay and we when we click on the get started button remember we also trigger the login event so we need some kind of content and by the way just remember that we disabled because we are no longer going into the get started page then we need to go into app.js and we just need to disable this for now because we are not really using this part anymore okay so disable this okay fantastic now what we need to do is we need to work on our internal page which we are only going to display if the user is logged in right now for that if you go into the index.js you'll find that i have numbers api right inside here okay so this is an api that just shows random first about numbers because i looked for a trigonometry api but i didn't get any okay so we're just going to use this one for now and i'm just going to copy this link and i actually already have it and i'm going to go inside the pages and i'm going to create a new file called numbers.js or they can call it number facts but this is still okay and i'm going to say underscore rfc and then at the top i'm going to import your state and use effect okay this is coming from react and then i'm going to set up my state values so i'm going to say constant details and set details which is basically the details for the number it's going to be your state and by default i think it's going to be an empty string i think so actually and then let's just set up our use effect so use effect and we want to fetch data from that api so i'm going to say const fetch number data this is going to be an asynchronous function and we're going to say uh constraints equals to our wait fetch and we're going to pass in the url that we have inside here inside bug text because we're going to change this dynamically and then we're going to say const data equals to await res.json and then we want to set the details details into the data that we've get back okay and then let's just call this function subfetch number data like so and then add in our empty dependency array so that this only runs on the initial render and then inside here let's return a section and inside this section and then inside this section let's just have an h2 that says details i actually don't know what we get back from this but uh actually no let's just console.log here let's console.log the data and then let's just disable this for now and then we need to create the page that is going to render this so i'm going to go into app.js and then i'm going to render a route inside here the path for this is going to be dashboard you know just because it sounds cool and it's going to be rendering our what we call our number component okay so number and then close up the routes okay just check that this is imported let's import number so import number from pages what slash number okay so let's say this and then let's see what we have now number is a protected route okay so it's not accessible to people who are not logged in okay so i want to do something different for this number component okay and if you see the section where we are cutting up the use effect call and everything that he made it into the video but we're not going to do that anymore because of some issues with the api so what i'm going to do is right inside here i just want to return a fragment okay and then we're going to turn this section and then we're just going to turn on h that says number component and then at the top i'm going to import use date from react and actually not i think yeah okay this is this is correct actually and then what i'm going to do is we're just going to create some simple things i'm just going to say uh simple but interesting so i'm going to say const number and set number this is equal to use state and then by default it's zero okay so you're going to have this and then i'm going to display i'm going to get i'm going to create a component called a lot dot js and then inside i'm going to say underscore rfc and then i'm going to return a paragraph that says number is negative negative like so and then give this a class name of oops name of test red dash 500 okay and then back in number inside here we're going to have let me save this let's see what have on the screen okay so we have number component on the screen let me just place this to the side okay and close this so below this i'm going to create a button and actually not instead of a button let's create a div first and then the button this is going to say plus one okay and then just do the same about five more times so plus two plus three plus four plus five and then all of these buttons are going to have an on click event okay so on click on click we're going to say uh personal inline function lesson i'm just going to say set set number into number plus 1 of course this is going to be plus 2 this is plus 3 plus 4 and plus 5 okay now this is a bit overkill but you know it's interesting to do and then we're going to do almost the same thing but now in the negative so we're going to just grab all of this all of these and we're going to make this minus like so so this one as well as this one right here so minus 1 minus 2 and so on and so forth and then in the middle here we're going to have a paragraph that says uh what is it our state value is called number like so now when we go into the negative then we want our alert component our alert component to display and then when we go into the positive then we don't want our component to display so that's what we're going to do now once again we are doing this because we had trouble with the api and i don't really want to deal with that right now so just let's just save this for now and we should see this on the screen now for all these buttons let me just give all this button the class name because we're going to tell all of them the same and as you know let me just place this full screen because it's easier and then i'm going to click on this one and then hold down my alt key and then click on this one second third fourth fifth sixth seventh eighth ninth and tenth and all of these are going to have the same class names so class name of let's say bg um what should we say dj green are you know let me see how indigo looks so bg indigo dash 300 py2 py uh bx 4 and then rounded and then text white and then what else uh we can have border and border does indigo dash 300 and then we say for the hover states then we want the bg trans current okay and then we want the transition transition that's all and duration dash 300 for all the buttons okay and probably you can have all of this inside one class name so that you don't have to keep on rewriting it so that we're going to have this so that's looking nice so when you click on one it goes up plus one plus two and by two goes up by two and so on and so forth now when we go into the negative then we want to display our last component so let's go right inside where we have our number our paragraph rather and we're going to say we're going to remove this we're going to place a conditional instead and we're going to say if number is less than 0 if this is true then we want to render our large component okay and if it is not true then you just want to render the number okay so let's say this look at the salt number is negative and we have we have to go up by at least a few before we can go back into positive okay looking fantastic and so on and so forth so let's move this to the center let's grab this section and i'm going to say class name of uh let's say flex and items oh no no let's say flex and justify center justify center to move it to the center there we go and then of course flex column to align them in column form let's column really okay then that means we need to say item center as well okay let's say uh margin top let's say imagine top of 20 push it down once fantastic actually let's imagine top of 10 and then for large screens then margin top of 20. so we're going to have this and then number component let's give this class name let's say margin bottom five let's say want bold let's say text for excel make it just a bit bigger so number component and then let's deal with this uh our buttons so i'm going to go inside this they'll give this a class name of flex and actually no that's not not really flex but grid and the grid columns let's say grid columns four and a gap of three so that we're going to have this okay that's for small screens let me see how this looks so for small screens let's have one two three and not have just realized i just realized that we can probably push this downwards still here so that we can have all of these as positive numbers should i do that or should i just have one two three let's have a grid columns of three let's have this as so one two three and then this let's move this let's move our paragraph down cut it out just move it after after this and then let's say you are number is okay i think this this is much better kind of looks like a calculator right so these are negative negative one negative two and so on and so forth okay that's looking fantastic let's add a space here okay so once we have this then let's just make sure that this is a protected route right so when we go back to the home page and so on and so forth then we can navigate right and then when you click on login only when we are logged in should we be able to see our our dashboard right so let's add a link here called um dashboard so let's just go inside header.js okay let's add a third link let's copy this down here let's call this dashboard okay now for dashboard we want dashboard only to be visible if we are logged in okay that would mean that we need to get the user from here so let's enable this once again let's enable this and this we're not using the login and logout functions so we can remove them and then we're going to say we're going to grab this list item and we're going to say that only when user is true should this render right so i'm going to save this and nothing is going to happen because we're not yet logged in but once we log in okay then we should see dashboard right so we can go into our dashboard now and dashboard should go into forward slash dashboard but it goes into uh contact us because we didn't change this link so sorry for that so dashboard like so and also see dashboard so we have this for our dashboard now we need to make sure that you can't uh as well because if i log out okay if i log out and i go into forward slash dashboard then i'm going to see this which i don't want right so i'm going to go into updates and we're going to do the same thing where we're going to import our context so we're going to get the user this is coming from use context okay so let's just make sure that it imports it and then we also want all context as well so you deposit this let's move it to the top because it's a high level input so we have this const user and then we want to make sure that only one user is true should this path render so i'm not sure how if this would work okay i'm not sure whether this would work but let's just say um let's grab this let's grab the entire route and then say only when user is true that's when this file should render so let's see and we there we go so we have uh when we are not logged in right when we're not logged in then we have an error page and i've just realized that we didn't tell our error page but we're going to deal with that in a moment now when we log in so let's just log in once again so when we log in i want to display uh a welcome back message on the top right probably even in the place of this we can do that so let's go inside our number js and right at the top we're going to say inside here okay we want to access the user actually from our use context so below this let's just say const let's say what does it destruct at the user where do i keep writing from so this is use context like so and we want our context okay now what we can do here is we can say user dot um what's it called and after they have forgotten i've forgotten sorry for that so let's just consolidate the user so that you can see what we have console of the user let's do f12 to see what we have we have an event okay and we have user metadata right here where we can access the full name so you want to say inside our h2 we want to say user dot user underscore meta is it metadata in one word okay metadata dot full underscore name which will get the name that you log in with right here okay so we can save this and we should see welcome back or rather you know my name so let's just say welcome back let's say welcome back and we can probably make this through excel so that it's not so huge so welcome back there we go and we have that looking amazing so we can remove this console log and i think this is going to wrap up the trigger landing page uh actually you know at the error page we have the error page to style so let's go into error page let's go where you here and for the error page let's just actually not let's return a section then let's grab this and move it upwards let's give this a class name of flex and item center and flux call and justify center and age screen which will make it take a hundred people heights okay let's just go to error page so right here let's grab this h1 give this a class name of text dash for excel margin bottom of five and then let's go inside here give this a class name of uh padding on the y of two padding on the x of four rounded and uh bg green that's 500 that's what we're using right i hope so and then we have a border and border that screen dash 500 okay and then we should have a hover state where we change the border to transparent the background solid transparent and then transition and then a duration of 300 just so it's smooth there we go so we have this so error page so let's just change this to say sorry this page does not exist there we go fantastic so this is our page go back to homepage and then let's login once again so we are logged in and once we are logged in why isn't the dashboard showing why isn't the dashboard showing i think that's a bug okay okay so fantastic now i wanted to do something interesting here where we could fetch data from an api from a mathematics api preferably so that it just rhymes with our trigger landing page but i've tried to research and i've not really got one and the one that i wanted to use um backfired on me so that's why you have not really used it but i think this is it's a minimal project it's kind of almost useless but i think it's very nice right where we have your number is number is negative and so on and so forth so kind of like a a kind of error state okay so yeah i think that is going to be it uh we added netlife identity and the context again in this section in this video actually and this video is probably going to be longer than the rest but that's understandable and what i plan to do is at the end of this all then i want to splice all the videos together into one giant video probably around it's going to be around probably an hour and a half or two hours long but i think in case there are some who want to watch that then they can watch it and build without all the cuts you know yeah so i think that is going to be it that is going to be insulin just commit this to github and then yeah everything is going to be okay so thank you for watching and if you have wish this far then please subscribe to the channel and i will see you in the next video bye-bye hello everyone so i've just remembered that if you want to give people the option to log in with other services such as google then can go into your identity tab of your website then you can say settings and usage and then you can scroll down to external providers here and you can choose any of this this is the current one these are the current ones that netlify supports and if you add this then it's going to reflect immediately into your website [Music] [Music]

Channel: tsbsankara

Views: 85

Rating: 5 out of 5

Keywords: HTML, HTML5, CSS, css, css grid, css flexbox, javascript, es6, es7, react, reactjs, frontend, front end, web, web developer, web development, netlify, vscode, tailwind, tailwindcss, tailwind css, tsbsankara, trigr landing page, trigr, tsbsankara trigr, sankara trigr, netlify identity, authentication, authentication in react, react application, context, context api, reactjs context api

Id: TiiTOviGTAU

Length: 143min 30sec (8610 seconds)

Published: Thu Sep 30 2021