Creating a Sign Up and Log In Functionality with Netlify and JavaScript

To create a sign up page that allows users to log in, we can start by creating an async function that will handle the login functionality. We'll use this function when the user presses the "Log In" button on the sign up page.

First, let's define our sign up button with the label "Log In". We'll also add an onclick event to call our login function.

```javascript

// Define the log in button

let logInButton = document.createElement('button');

logInButton.textContent = 'Log In';

logInButton.onclick = async () => {

// Call the login function here

};

```

Next, we need to define our login function. This function will be called when the user presses the "Log In" button.

```javascript

// Define the login function

async function logIn(email, password) {

try {

const response = await fetch('/api/login', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ email, password }),

});

if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

const data = await response.json();

// Set cookies and user ID

document.cookie = `token=${data.token}; expires=${data.expires}`;

document.cookie = `user_id=${data.userId}; expires=${data.expires}`;

window.location.href = '/dashboard';

} catch (error) {

console.log(error);

}

}

```

In the login function, we use the Fetch API to send a POST request to our `/api/login` endpoint. We pass in the email and password as JSON data.

We also set the cookies for the token and user ID using the `document.cookie` property.

Finally, we redirect the user to the dashboard page.

Let's test our login function by calling it with an example email and password.

```javascript

// Test the login function

logIn('annie@example.com', '1 2 3');

```

When we call the login function, it should set the cookies and redirect us to the dashboard page.

However, we need to make sure that our code is properly handling errors. We can do this by adding a try-catch block around our fetch request.

```javascript

// Test the login function with errors

logIn('annie@example.com', 'wrongpassword').catch(error => console.log(error));

```

This will catch any errors that occur during the login process and log them to the console.

Next, we need to prevent the default behavior of the button click. We can do this by adding an event listener to the button's onclick property.

```javascript

// Prevent the default behavior

logInButton.onclick = (e) => {

e.preventDefault();

// Call the login function here

};

```

We also need to import the `useCookies` hook from our environment module.

```javascript

import { useCookies } from 'react-cookie';

```

This hook will allow us to access and modify the cookies stored on the user's browser.

Finally, let's clean up our code by formatting it and adding a DOT get ignore file to our project.

We'll also add an EnV file to our project to make sure that we can use environment variables in our code.

By following these steps, we've created a basic sign up and log in functionality using Netlify and JavaScript. This is just a starting point, and there are many ways we can improve and expand on this functionality.

"WEBVTTKind: captionsLanguage: enlearn how to turn figma designs into code using AI in this course anbo will teach you how to speed up development using looi she will demonstrate how you can easily create and deploy front-end code starting with just the design locco provided a grant to make this course possible hey everyone and welcome to this course in which I'm going to show you how to not only use an AI tool to convert your designs into production ready front end code but also deploy it as a fully functional application that's right this is what the app is going to look like at the end so a Homestay rental app like Airbnb called Local Host it will map out all of our property data as well as deal with authentication or in other words use the signups and signant my name is Ana Kubo and I'm a software developer as well as course creator on free Camp as well as on my own channel and today I will also be your guide this means that you'll be able to turn designs that you have created in figma into code and make tweaks to the code too if you want if you would like to make some tweaks then naturally some coding knowledge will be required but don't worry I will walk you through this step by step and in fact here is an outline of exactly what we will be covering in this course so first off we're going to start with the introduction followed by what exactly is figma then we're going to have a look at the design followed by locy lightning and Loco Ai and that's when we'll start building out our app we're then going to learn how to single app to get Hub as well as create a database and create authentication by building out a backend and finally we're going to deploy our app okay so great I'm excited in this course the app we will be building we'll have react for the front end node.js for the back end mongod DB for our database management and netlify to manually deploy the application so let's go ahead and check out the design first the tool we are going to be using for app design is a tool called figma it has a great reputation as one of the leaders in collaborative web design and allows users to come up with user interface or UI designs as well as user experience or ux designs as a team in real time and as a bonus it has a free tier that we can use so what are we waiting for we are going to first open up a design file all together so we can look at it first okay so here is what figma looks like this is the website on figma decom and I do already have an account so I have already signed up to this and all we're going to do is just get the link in the video description let's go ahead and get it this is what the full link should look like so here it is I've just pasted it and just hit enter okay so this is the design don't worry I'm going to talk you through it in a bit first up however let's open up this design right here this design for a holiday home hosting website in figma so just go ahead and click open in figma and of course it's going to allow you to create an account if you don't have one already but I already do so I'm just going to go ahead and select continue with Google which will give me this popup and I'm just going to select the Google account I want to sign in with in this case it's Ana at cod with anna.com and it should take me into figma so that I can open this up so open in figma once I'm already signed in okay so great this is just the cover for the figma file so don't worry about that what is interesting however is under getting started we can see all the pages that make it up so here is the homepage as you can see here and this allows you to essentially filter through lots and lots of Holiday Homes based on where they are the check-in date the checkout date and the number of guests staying okay so this is what it will look like this is the design file and of course if we click into one of these so for example if we clicked into Brightwood cabins the page or the property Details page should look like this so we have one image that's showing up as large as well as lots of lots of other images that we can click into as well as the title of this property which which is Brightwood cabins the location of the property the amount of reviews left on this property as well as the average rating which seems to be very high it's five stars you also have the ability to like this or not as well as a description of the property as well as of course how much it is to stay here per night as well as some analytics on best time to book of course we also have the option to actually book the property as well as have some information about who this is hosted by about this home here well we have a lot more information about it as well as the immunities that are applicable to this property and of course if we select here we will be able to see more what's great about this is that you also have a map based on the coordinate or the longitude and latitude of the property as well as some weather information about your state what is also cool is that you can see reviews that users have left as well as simp s stays in the Local Host website we will also add a sign up page which allow you to sign up by asking you for an email address a password and a way to confirm the password just to make sure you haven't made any errors or you can sign up with Google Facebook or apple and of course this is the sign up page we also need a way to log in which just requires the email address and the password so wonderful these are the design design files if you haven't used figma before then please go ahead and just familiarize yourself with it a little bit more before moving on okay so it's all very useful if you look in the drop downs here the header is split as a component the hero container and if you keep going into these it will break them down even further wonderful let's move on okay now that we have walked through the design of our app we are going to start using a figma plugin this plugin is called the LOI plugin and allow us to utilize something called locy lightning that will essentially convert this figma design to high quality production ready front end code in just one step Loy lightning is powered by Loco AI that leverages their in-house large design models trained on millions of designs and web apps it is also important to note here that while you might be following along with exactly what I do the AI might have generated something slightly different for you so just keep that in mind while watching this tutorial and let's have a look at the quality of this code that got generated for me now okay so first things first we're just going to sign up to loc. a we're going to try for free so please go ahead and click on this button right here we're just going to sign up to a free version so this free trial can can be extended every 3 weeks so just keep that in mind I'm just going to go ahead and continue sign in with Google so this should bring up this Google popup in which I I'm just going to select my Google account in order to share this information with loc. a and to log in okay so I'm just going to go ahead and continue and great I'm going to choose to have my name as this as a default please put free to use whatever username you wish and hit enter now I'm going to just go ahead and select which one describes me most I'm going to go ahead and select founder and I'm going to go ahead and put full stack developer so just choose the same as we are going to be building a full stack application or choose something that is more suited to you if you want the prompts to kind of be catered to you as well I'm going to go ahead and put startup and we can go ahead and put our company name if we want I'm just going to put code with anna.com and hit next again you're just going to be asked to answer a few questions here and then the design tool that we're going to use today is going to be figma so I'm just going to select that option and select next we can also choose the Frameworks that we want to use and today we are going to be choosing react as that is what we're going to be using for the front end so please go ahead and select the same and just go ahead and click next great so we're all signed up now let's go ahead and get the figma plugin so just go ahead and select that and this should open up in figma now so if you don't have a figma account please go ahead and sign up I'm just going to go ahead and click on this button right here and continue to sign in to my figma account once again just with my Google account okay great I'm going to select continue and wonderful so we are now in figma as you could see by the URL and we are adding the locy lightning plugin to figma so in order to add this plug-in to figma of course we are on figma Doom at the moment I'm just going to choose open in and because we already are signed into figma it should come up with all my figma projects of which one is the Local Host website so I can choose to select that and it will essentially open up my Local Host website once more and then show the plugin so I can choose to select run here and then that will run the localy lightning plug-in on this design so you could have done it that way or if you're also new to figma another way to add plugins is by selecting the plugin from here and then you can manage plugins or for me I already have it here it's Loy lightning as a recent plugin and it should take you to this popup as well great now before clicking let's go we actually need to select the files that we want to convert into code so in order to do this I'm just going to select getting started once more and let's just select all of these okay so all of these four pages and now let's get up the plugin again so this one right here and let's go through the steps so let's go ahead and select let's go and I'm happy to name this project on loc. a localhost website just so it's the same as this figma file and we're going to make a web app I'm going to select react for the framework I'm going to keep this as it is we can change this later so I'm going to choose typescript we're also going to have CSS variables the St is going to be CSS modules units we going to have pixels over REM I'm fine with Pascal case and we are also going to choose material UI however just because this will allow us to have optimal preview and code conversion so let's go ahead and select create so now this is going to convert our designs to code make sure you've selected those four frames and hit let's go so what exactly is happening here well as it's scanning there's a lot of stuff actually happening under the hood there is a responsive design being created and I'm going to show this in a bit as well as locy AI is automatically tagging interactive elements such as inputs and buttons so they can add some functionality to them it's also creating reusable components so just like you would in react and also recommending human readable layers and class names to make your life easier now it's important to remember that AI is never perfect and that can be moments when it doesn't get everything 100% as you would like Loi lining has a feature that lets you review all AI decisions and change them to make some fixes this would include things such as tweaking responsiveness for the header or the scroll and so on and here we go so this is looking great we have the code for our pages so first things first I just want to show you that this code is in fact responsive we of course have the default of what this looks like on a web browser or a smaller web browser in which there's three property showing an even smaller one like this and then we have more so perhaps a tablet like so in which there's only two or a mobile phone in which it looks like this this is looking cool so let's go back to the default that is in fact responsive and if you want to view it in different responsiveness you can be way more specific by Chang changing it here what is also cool is like I mentioned that the inputs so all the input and buttons have may given functionality so by this I mean I can actually select a date and it will be shown here and even the select input has been generated to fit the design of this website so this is looking pretty cool okay and of course if we click into one of these as well that will work and take us to the correct page so that is also amazing that it figured that out great and let's go back to our home page so that's it for the responsiveness and what is also great is the code and it's readability so I think the class names that have been chosen are pretty good I I would have chosen the same so I'm pretty happy with that and of course just like in rea all the components have been split out so we have a lot in here we have the homepage which is composed of these different components such as the header component the hero container the search section header and the listing items onto which data will eventually be mapped out at the moment we don't have any data in here so we've created a reusable component or to be specific the AI has created a reusable component which has been reused many times here with data fed in which we can later map out if we connected to a database okay so that is example of a reusable component in action wonderful of course if you like to see the code and full you do have this button right here where you can focus on it if you would like one thing I also did mention is that we can actually change the settings of this project later on so as you can see I chose to use CSS variables and I chose to use CSS modules but if I just wanted CSS and I wanted JavaScript then that can be applied too and as you will see that's now changed so there you go it's really up to you and whatever you're comfortable with and the best part is that you can change it later on and those changes will be reflected in the code so as you can see here this has also been changed great and the typescript has been removed and we just have JavaScript code right here and the file names have also been changed so we used to have TSX and now we have Js fantastic now this code has been generated because looy has been traded on hundreds and hundreds of designs but you know sometimes maybe something isn't quite like you'd like it don't worry about that because we can change it so on here so just just to the right hand side if you scroll down we can actually review Loco ai's decisions so everything that's happened so the design Optimizer the tagging the responsiveness as well as styling the interactions of the inputs the layer names and the code components and props can all be reviewed so I'm going to show you an example of how to do this now and of course once you learn how to do this you can then apply this to anything you want so I'm just going to actually minimize this code and let's say that we are not happy with how this looks when the screen is 1,60 pixels by 665 so as you will see perhaps you want the images to you know go all the way to the sides not kind of be stuck in the middle so I'm going to show you how to do this now so let's review the responsiveness and then under here in the stay section under homes so let's go ahead and select listing item so this one right here and you can select edit and then all I would do so these are the CSS rules that have already been applied and I can add some Advanced CSS properties and this is really allow me to use my CSS knowledge as a developer I'm going to apply Flex one to this and save and done so now you will see that it is stretching to fit the whole thing and I just need to apply that to all the items here too so let's go ahead and add Flex one save and done and that should now be stretching out evenly and just carry on doing this for all of them as well so that is something you can do that is just a very simple example and you will see how this row is now nicely stretching out to this whole container whereas this row which has not been giving the Flex one CSS property is as it was before I'm just going to quickly apply this to all of these now as well so they all have these same CSS attributes and they all stretch out okay of course there's so many things you can do in here this is just one of the things that can be applied you don't even have to have advanced CSS properties you can play around with stuff that's already there and wonderful so now this is looking so so good I'm happy with this an option to do a bulk update on all these components will be released soon so keep an eye out for that now another thing you can do is review the tagging and I'm going to show you what this means for this I'm actually going to go ahead and head over to the sign up page so this is a sign up page and you can review the tagging you can actually just select one of these right here so maybe the one with the password so let's go ahead and go into the input right here so here is the one for the password and if I edit it I can edit the properties so at the moment the password input it has a type of text but we can be much more specific we can give it the type of password and for those of you who are familiar with the inputter type password it just means that this would be treated as a password input instead of just a normal text input so that is something you can do and there's a lot of other stuff you can select as well such as making this required great so at the moment without this changes the password well if I type you can see it but if we added the type of password then if you save this and type in here it will show up as do because the input with a type of password will have the text show up as dots as opposed to if the input had the type of text great let's go ahead and do the same for confirm password so edit properties scroll down here change the type to password once more and then also make this required let's just go ahead and select done another thing you can do is add your own custom code or just simply notes to a software engineer in order to you know make suggestions about what other code should be added so for this let's go ahead and go back to the homepage say we wanted to essentially make this button show more of these cards so we would need to add some functionality to this right well if I select edit and then select the button I can go ahead and select actions and interactions add an action and and here is where you can write your own code or you can simply add a comment to it so we can go ahead and put please show more list items on click of this button and this note will be added essentially to the onclick action of this button so that is something that we can do or we can select from these pre-made on click actions above and let's click done so now if we go to the code I'm just going to move this up a little bit and of course this is on the homepage if we go down here and find the button so on show more button click and then find that function up here that has been added so let's go and find it you will see on show more button on click that too has been added so that is exactly what we wrote that is a pretty cool way to essentially leave notes for engineers if you're not maybe aware of how to code or where this should go exactly cool okay so let's go back to preview so now let's talk about layer names so if I go ahead and select review you will see what the figma layer name was called as well as the recommended layer name that was generated so I'm quite happy with these of course error Handler is much more clear than frame 98 data combine is much more clear than frame 44 but of course if you want to edit it then you are more than welcome to you can just replace it just like that I'm not going to do it but if you need to do it then that is where you would go okay so under preview and then just select the layer names and then edit the one you want and click done great now one more thing I just want to show you so because we will be hooking this up to a back end and we will be mapping out lots of data onto components such as these reusable components right here we also might want to review what props these reusable components take or any other components in fact so I can go ahead and review this and I can select the listing item for example so you will see here the listing item there's 16 instances of it so these are the listing items once more just as a refresher and it takes 13 props so let's go ahead and have a look at this so the first instance of it so this one right here now you might not want to take all these props because I would imagine some of these stay the same so for example here you can see the prop name listing image well that would be unique so that would be a prop fed in the listing title would be unique listing subtitle also unique rating 4.9 and price would be unique also so these you'd want to keep the same but if you didn't want one so for example if the heart icon was fed in well the heart icon is the same on all of these so we would be able to delete that simply by removing the prop however the AI did a really good job here I'm really happy with these props so I don't want to change a thing I'm going to keep this as it is great when it comes to the style props I don't really want to feed these in because I'd want them to all be exactly the same so for example I could just go ahead and delete all of these and go ahead and click save so now only seven props are being added to these components and let's go ahead and click done this is looking good now that we have the UI of our app built let's continue continue making our app an actual usable product in order to build upon the code generated we will need to sync the code to the logi Builder locy Builder is a platform that enables you to modify your code settings create components and bind Data before integrating it into your Ci or CD pipelines as well as a bunch of other stuff that we will be exploring together now okay so I think we've explored the preview which by the way is running on Live code that logy lightning generat ated I think it's now time to have a look at the locy Builder in order to build out this app even more okay so in order to sync to the Builder we're just going to select continue in Builder and make sure that we have all selected frames so select all the frames so there you go and just go ahead and select sync to build so now the syncing is in progress once we have the Builder up I'm going to show you the live sharable prototype feature I'm also going to show you the auto components and props the code configuration and then we're going to sync this code to our GitHub in order to actually run the project and then we'll go back and add State variables and data biding in order to flesh it out further and great let's go ahead and do it so amazing here we are back on locy AI this time and and here we see our code once again if you select on a component such as the header content right here the code will show up for us so as you can see here here all the layers that make up our up or in other words you can see here by the little icons that this essentially is a component and then here we have all the elements that make it up so here we go here's a component here's another one and here is a another one and you can deep dive into as many of these As You Wish what is also great is that if you select on localy components this will make it easy to link up this code to an app like storybook for example which lets you manage all the components in an external Place great and you can see what these components look like once again in a default in a smaller screen and so on and in a Mobile screen as well so as you can see here I've just selected the header or you can just select the footer or you can just select the details card as you can see here wonderful I'm just going to select on homepage again now you can also create components and props I'm just going to go back to all settings to show you where I found this so under settings you will see all of these right here code components and props will allow you to Essen you create your own components ones that have have not been generated by the AI and will also allow you to add your own props as well okay so here you can view the current code components and props so for example here I've selected the header on the home page the head out on the property details and you can see what it looks like on all the pages or once again if you want to create your own just under make your own component you would select create after selecting a layer that you want to work work on so for example say you want to do this in the frame here is the frame you would select create component name the component and so on wonderful I'm just going to go back to all settings one other thing you can do is data binding this will allow you to bind data to UI elements using State variables you can bind directly to layers components props or set up database rendering for repeated components you can also configure your code code in which you configure your framework settings and screen settings before exporting your code and of course we also have the sync export and deploy which allow you to SN to GitHub as we will be doing in a bit as well as deploy to things such as netlify or V out so as you can see here the Loy Builder does offer a lot we can also actually view the Prototype so if I select view prototype this essentially is what it would look like once you have actually deployed it so you you can see it in all its different stages as in its responsive stages just right here and you can of course share it so if I click share prototype you can select which screen to share so I can go ahead and select one homepage is the one I'm going to choose and you can copy the link or you can send the link via email in which you just have to put an email address in here and send that link over so if you copy this URL and just paste it you can see see what this website will look like once it is deployed and Tada so this is looking so so good I'm happy with this wonderful and of course we can click into each one of these to get a preview too I'm just going to close that down for now so now let's go back to editing in Builder so now that we've seen the actual prototype will'll be going live I'm going to also talk to you a little bit about the code components that we saw before so in order to actually change these and edit them once again you would select view here and you can see all your components there's 15 existing components on the homepage and of course you can edit them so for example perhaps you don't really like what one of these is called let's go ahead and say that you don't like the name of the frame compon component you think this is too generic just go ahead and select the frame component this will of course highlight the component that you're talking about and you can edit it so you can call it whatever you wish maybe I want to call this the property display okay and you can save it I'm not going to do this now but it's good to know you can now this doesn't have any props but if you wanted to change the props instead so let's go ahead and check this out we know that the listing item has props so let's go ahead and select that and you can of course rename them here once again you would select edit you can rename them you could delete them so you can really do whatever you want you saw us editing this in figma as well so you could do it here too here however you do also have the data type that has been applied which you can either choose to put in or leave it as it is once again it's important to highlight that this will be syn to localy components the same thing that I showed you that is applicable for when working with story books great let's move on so wonderful let's go back to all settings we've viewed code components we've already discussed that you can create new components and pass through props we've talked about binding data and configuring code which once again is just the same as what you had in figma that allows you to change these settings and change whatever you used in your code so at the moment we have JavaScript selected CSS we changen pixels and we have Pascal case for file naming great I'm just going to keep that as it is so wonderful and let's go back to settings so finally let's go ahead and sync this right I'm going to select sync and we're going to sync our project with GitHub of course there are other things you can do you can of course pull this code into vs code so there's a v code extension for this if you want to explore that or you can choose to deploy this code as it is to nfy or Vel so those are two options as well we're not going to be doing that here today from here because we want to actually extend this code and in order to do that we're going to S this project to our github's account so we can add to it as well so let's go ahead and select sync project we're of course going to have to connect to our GitHub account so please go ahead and do the same I'm just going to insult authorize locy AI so click install and authorize and then I'm just going to put in my authentication code and then it's going to redirect me like so so great that connection is now done we're going to create a new repository let's go ahead and call this localy app and then I'm just going to confirm repo and brunch so wonderful of course this is going to take a while to do a it's thing I'm going to push to GitHub we can of course choose to review files or you know select the ones we want and select the ones we don't want but I want all of them so let's go ahead and push that to get up so that is now doing its thing of course this might take a while so just come back when this is done okay and great so that has been done you can of course choose to go to the repository to check it out so once again this is on my GitHub now it's called locy app and here is the code along with the read me so amazing I'm just going to go back here and select done and now let's actually get this code onto our computer so I'm going to get this code I'm going to copy this I'm of course going to get up my terminal so here we are I'm just going to go into a folder where I like to keep all my projects using the CD command on a Mac and I'm just going to clone this so get clone paste that URL and hit enter so now that's moving that repository it's cloning it to be precise onto my computer in a folder called development that lives on my laptop okay so once again we're just going to waiter this to do its thing okay and that is now done so now let's go into locy app so I've just used CD to go into that app and now we need to install all the dependencies using the command npmi so wait for that to do its thing it's just going to install all the dependencies that are in the project and then we're going to start it we're going to make a run on Local Host 3000 so once again we're just waiting for this to do its thing and great so those have all been installed now let's do npm Run start and that should start up our app on Local Host 3000 so this should happen automatically okay there we go and we can see our app and great so this is looking so good I'm just going to open up the code in VSS code and this is what it should look like so you have your components your pages your CSS files and everything in here now we want to be able to add some functionality as we said mainly to buttons like this one so for example if we click here and want to show more so for this we're going to have to extract all the data that's coming into these re usable components so we can essentially map them out and add some more data to this so what I'm going to do is let's just go ahead and make a Json file just for us okay just so we can essentially work with it so I'm just going to create a state object Json file and this is going to be an array of 16 items okay because here we have four * 4 four so 16 and I've actually already gone ahead and done this so what I've done is gone in to the pages the homepage and on each of these I just extracted this data right here okay the listing image the listing title the listing subtitle rating price best on show and so on okay and I've essentially done this so please go ahead and do the same it might take a while you have to do it for all 60 of these okay of which you can only click on the first one for demo purposes at the moment so don't put that on here okay just leave that one out leave out the on click once again to show this if we click on the first one you'll be able to go into details about it as we saw in the preview but this won't work on any of the other ones at the moment okay now let's go back to the Builder I'm going to show you how started buying some data so on the homepage what you want to make sure is you have the parent of all the listing items so here it's called homes you're going to now make a component so make sure that is selected once more go back to settings and create a component make component let's just call this card list and click create and now once this has been created we need to create a state variable make sure the data type is an array let's just call this card State and we're going to have to paste in all of the content of this state object Json into there so just copy it and I'm just going to paste this all in like so however making sure for now that we need to have HTTP Local Host 3000 at the front so just make sure to add Local Host 3000 just like I have and you're going to have to do that to every single one so please just go ahead and take your time in doing this do it this slowly as you don't really want to make any errors so maybe do it a little bit slower than I am but just make sure to have that at the beginning of every single image in here and of course you have to have Local Host 3000 running otherwise those images will not show up so once again that's all I am doing just filling that in and then let's hit save so now let's bind this so all I'm going to do is Select bind data I'm going to add the plus sign I'm just going to select the first item click repeat and the data source is selected and if you just look down here you will see all the props along with their values already populated for me so this is looking good I'm just going to hit save and great so now that has been binded you will see all those images showing up so now all that data has been binded and if you look in here we have actually created another another state so here this piece of code is new the const card State Set Card State use State and we've just passed through that whole array with objects into here so that's the starting state of the app and that's being mapped out now onto the listing item so now that we've done that we can also sync this to GitHub so that the latest changes reflect in our code so all we're going to do is Select sync sync project you can choose an existing Branch or create a new Branch confirm repo and branch and here you'll see the files that have been changed it's the card list and the card list CSS and you can push to go okay great and now let's click done and of course now we need to pull in those changes because this code will be updated as you will see here 1 minute ago okay we have obviously updated something in here we know what it is and now let's pull that in so I'm just going to get up my terminal again I'm going to stop this from running I'm going to do get pull so we can pull in those changes and we will see them in here okay so we don't actually need this state object Json file anymore because if we now look in components and look at the new component that has been created so here we have the card list you will see that state so use State along with that array with all the images so all the objects that represent the images in here that is being mapped out onto one listing item great this is looking so so good I'm happy with this so now maybe let's hide the last four and apply the logic for the show more button first off however let's just make sure this is running so do npm Run start in order to start the app okay so that is running and now let's go back to the code now in order to show more items so let's go ahead and find Pages homepage I'm just going to minimize this here's the on show more button and if we click on this button we essentially want to affect something in the card list so let's go ahead and import use state in here and I'm just going to do it super simple okay um const show in or show all set show all and use State well we're going to start off with this being false we're not showing all so make sure that that is done and in here I'm just going to do this very basic if show all is not true then we're going to use set show all to be true okay else we're just going to do set show all to be false uh this is just a super basic example of how to make things Dynamic okay so what we want to do now is send show alsoo pass this through onto the card list so this value is either true or false depending on if we've clicked the button and how many times we clicked that button so now let's go to the card list so go to Def definition I'm just going to pass through show all and I'm going to essentially get the card state so let's go ahead and do this here perhaps const cropped card State equals and if show all is true well we're just going to get the card State and assign it to crop card State otherwise we're going to get the C card State and we're just going to bring back the first 12 items okay so we're going to use slice for this so now we're going to get the cropped card state and instead of the card State we're going to map the cro card state so this is just very basic of course I just want to show you this works um this is on the assumption that we only are ever going to have 16 cards okay so at the moment 1 2 3 4 5 6 7 8 9 10 11 12 so 12 because we essentially chopped four off but if we show more there's 16 now a cool way to take this project further would of course be to you know be like show less where you reverse this but that is something you can do in your own time I just wanted to show you this as a quick demo of how you can essentially add functionality to buttons on your site great now let's get to looking this up to a database and for that we're going to have to build that a node.js backend so let's get back to doing this one thing I'm also going to do is perhaps just hide the show more button you know because if show all is true we don't really want to show it as well okay so I've just wrapped that in there and it just means that that won't be visible once you show them all cool so now let's go back here I'm just going to shut these down and then let's make a node.js back end so all I'm going to do is simply I'm just going going to get up my terminal again and I'm going to maybe let's stop this for now because we're going to have to import some packages so first off we're just going to I'm going to create index JS file on the same level as my package Json so index JS and this is going to be our backend essentially so the things we're going to have to do is Define a port I'm going to Define it as Port 8,000 we're going to need Express so cons Express requir the package express we're also going to need course so require course to get rid of any pesky course messages and then we're going to listen out for changes on here as well so we're going to get Express after we've installed the package it's release all of its wonderfulness into Express I'm going to call it to release it even further and save it under the qust app so now this will have all the methods and properties that come with the Express package so what I'm going to do do app use and then course and then call it like so but also app Listen to listen to out any changes on the port so console log listening to port and then we could just do the port name great so now let's go ahead and install those packages so making sure you are in the app npmi Express and also course I'm also going to use secret variable so EnV is another package that we're going to need and hit enter okay so that is now doing its thing and wonderful so now let's run the back end and the front end so all I'm going to do is go down here this is start the front end so I'm going to change that start script and then let's also do start back end like so and we're going to do no demon to listen out for constant changes on the index JS file so no demon is another package like I said it's going to listen out for constant changes so it's one we're going to have to install mpmi noemon and wait for that to do its thing of course please also make sure that all the packages that I've installed are these versions because if you're watching this in the future and doesn't work it could be down to the package version that you are using so just revert back to these great so now let's start our front end so npm start front end and let's also start our back end so once again I'm going to go back here I'm going to create a new tab and do npm Run start back end this time okay so this will start with backend on local home post 8,000 okay so let's go back here and if you look in the terminal listening to Port 8,000 listening to Port 8,000 this is looking great make sure to pass the port through in here as well as the Callback function so now perhaps let's work on something else I'm going to essentially work on signing up and signing in so once again this is just one feature of this website this would be way too long to finish out everything from the whole website but I just want to give you a taster of working with a database for this project so let's go ahead and find the sign in page so we can navigate to the signup page simply by going to Local Host SL signup page so let's go ahead and work on signing up first before working on signing in okay so I'm just going to head over to mongod DB which is going to be my database of choice and I'm just going to choose to sign in okay and if you haven't signed up already please go ahead and do so now so I'm just going to choose to sign in with Google and great so here is my organization called annus organization and I'm just going to create a project so let's go ahead and select new project here and this project well you can call it whatever you wish I'm going to call it locy database okay so Lo I DB and then I'm just going to go ahead and select next so I'm going to give myself the permission so let's go ahead and create this project great now I'm going to create a deployment so go ahead and select that button and let's select the free version uh I'm going to leave as clust to zero in fact I'm going to leave all of these as they are so just the default settings and I'm going to create a deployment wonderful so let's go ahead and create my database user so that password and username have been saved and we're just going to get rid of my IP address so that anyone can access this so first off we're going to choose a connection way uh we can choose any of these I'm going to choose the driver so let's go ahead and install GB so once again I'm just going to perhaps open a new tab and do npm install mongodb so that it's installed into this project and next we're going to have to have a connection string so just go ahead and copy that because we're going to have to use it okay so let's review those steps there we are let's just change the IP access so I'm just going to delete my IP address from here so that anyone has access to this so I'm going to add an IP address this time and allow access from anywhere and click confirm great so that is now doing its thing and here under database users if you have forgotten your password you can edit here and then edit password and auto regenerate a secret password I'm just going to show you mine copy it and keep it somewhere safe okay and update user wonderful so now let's shut this down for now and continue with this at at the moment I'm done so I'm just going to click done on that and great so that is now done let's go ahead and look at cluster zero so just go ahead and click on cluster zero and at the moment it's just loading all our new data sets to clust to zero in the meantime let's go ahead and connect our data with nodejs and JavaScript so let's go back here okay to the index GS file I'm just going to remove that for now and we're going to to require the client from mongod DB we're also going to do app use while we are here and Pa through Express Json so that we can work with Json being passed from the front end to the back end and so on now we're also going to have to define a urii and that is going to be essentially the URL that we saw here so if you click connect again and click through all of these just copy that one right here again and go back to your code and paste it like so but of course in quotation marks as I have done right here and just put in your password your password can of course be stored on the back end or you could just put this whole URI in a EnV file to keep this secure so perhaps let's do that I'm just going to create a new file EnV file and then we can put you r i let's take all of this right here process EnV URI making sure this SP exactly the same as you did here I'm just going to paste that we don't need it in quote as that is a string already and then just put in your password here so this is my password please go ahead and get your own we are not done yet however cuz we're going to have to put our database name here but we actually need to find out what that is first great so now let's go back here so we've got our UI next we're going to get the client so get the client that we just got from client so let's just get client instead and pass through the URI and we should now be connected we are also going to have to await the client connect just like that now let's go ahead and actually put this in a function right so perhaps let's write our first root let's say that we want to sign up so this is going to be for signing up I'm going to do app post and then we're going to go to sign up like so there's going to be an async function request response just like that and then we're going to essentially get the email and password from the front end so const email password this is going to be from the front end I'm going to touch it to the body of the request we're then going to have to essentially salt the password so consult equals bcrypt so bcrypt is a package we're going to use in order to essentially uh add some salt to our password before we hash it okay so I do have plenty of tutorials where I go into this in a lot more detail so please check out my channel for this for now I'm not going to go into a deep dive onto the bcrypt package because I'm going to assume you already have knowledge on it so hash sync and then we're going to pass through the password along with the sort so let's go ahead and install that package right so let's go ahead and do it NP by bcrypt let's also maybe go ahead and add Json web token while we are here npmi Json web token just like so okay so once we have that hashed password the email we're just going to keep as normal in our database that is fine it's just the password that we are worried about I'm just going to try something and catch any errors so console error the error so we can can read it in our back end so what do we want to do well we want to sign send over this and this to our mongod DB database right so perhaps Also let's just get this in here I'm going to put it up here and we can add a finally statement too so there's our catch statement finally we're going to also await client close and we're going to close that connection for now let's just list our databases as we we said so let's head over to Cluster zero so browse this collection and there's going to be some sample data in here we don't really want this I'm just going to delete it sample mflix drop this okay and let's add our own data so let's just call this localy data The Collection name for this is going to be user and then I'm happy with that so let's go ahead and click create okay so there we go there's users and let's go ahead and insert a document so you could do it this way or you could do it as uh Jason it really is up to you so so far we have an ID let's go ahead and add another field this is going to be email and let's go ahead and for now I'm just going to put in Ana test.com and then let's also put in a hashed password so let's Hash a password okay obviously this is going to be very fake uh let's say my password was password the cost factor is 10 so that's like the salt generate hash okay I'm just going to copy this for now so I'm just going to paste that in the password like so in fact maybe let's put hashed password just so it's really obvious and insert so now that we have something in our database that is good that's kind of the format that we're going to apply to everything else so let's try send this over of course we do need to link this up to the front end so let's find where our form is so sign up page here we go and then let's scroll down here here's the form here's the text field so we're going to have to save this to State we've got the email address so let's go ahead and get the values from these so let's go ahead and add a value here that's is going to be the email and let's find it for the password as well so value password and let's save it to state so use state and here I'm going to save it so const email set email use State and we'll start off with this just being an empty string and let's do the same for the password so password set pass word use State and we'll have it as that we should also probably have the confirm password right confirm pass word set confirm pass word we want to make sure that these match so use State like this uh and then let's find the confirmed password so it's the second one in here confirm password that's right value confirm password and then on change we'll go to do set confirm password and pass through the E Target value pass through the event we're going to do the same for all of these so let's find the on change for the other one so here is the text field set password this time and of course the set email so let's do set email okay and then we only really want to be able to sign up if password and confirm password are the same right so let's find that button that allows us to do this here is a button let's add an onclick to it on click and obviously we're going to maybe write a function to sign up so let's define it up here const sign up just like so but only if password and confirm password match do we do something okay great so make sure this is an async function okay we're also going to eevent default so we don't want the whole page to reload and then what we're going to do is await Fetch and we're going to essentially here we're going to have a URL so whatever the server URL is going to be so I'm going to do process EnV react app server URL and then we're going to have the endpoint which is sign up okay so we're going to await that but also we're going to have to actually send through a bunch of other stuff too so we're going to make an object uh this method is going to be a post method as we saw we're posting information headers we're going to pass through as well we're going to do content type application Json and the body well we know that we're going to pass through a few things we're going to pass them through Json stringify and we're going to pass through the email and the password okay so that's all we're going to send and once that is done its thing let's save this as the response let's get the response just so we can see what is going on let's get it Json let's await this const data because we're going to have to find out if this worked and if it did we're going to set some cookies okay so for now I'm going to just console log out the data on the front end because e needs to be put here so great if we click on the sign up button this should send it to the back end let's just go ahead and add the server app URL as well so for now I'm just going to go with this Local Host 8000 but we will of course change that when we need and great let's go back to the index JS page so how are we going to insert a document now so first off however I'm just going to move these things as well so let's get the client I'm just going to put that in here we can delete this I'm going to cut this out and put this in the try so cons database equals client DB and this is going to be locy data const users it's going to be database collection users because that's what we called it I'm just going to make this the same and then con existing user equals oh wait users find one and then we're going to pass to the email okay so we're looking by the email this is kind of like the unique identifier now if existing user already exists then we want an error right so I'm going to return rest status 409 and send user already exists please log in okay but that's only if that exists otherwise I'm going to sanitize email sanitize the email because we want to make sure that everything is lowercase and I'm going to get the email and just make it to lower case so to lower case great and once we've sanitized the email let's actually put in the data right so cons data equals uh let's get a user ID I'm going to actually generate that using uu ID let's get an email which as just the sanitized email really and let's get the password which is now my hashed password so hashed password here okay and we don't want to save as password do we how do we save it here we Sav it as hash password so let's go ahead and do the same now my user ID well I'm going to install another package for this so npmi U ID okay and now we're just going to get that package const we're going to get version four of it so uu ID V4 require package uid okay so now we can actually use this so all I'm going to do is go down here and maybe let's do it up here so just where we salt everything I'm also going to generated user ID call that so we can use this and that will essentially create a unique identifier for us so that is the data that we are essentially going to send over so this time I'm going to do con inserted user equals 08 users insert one and then press through the data okay great one other thing we need to do is make a token so const token equals JWT sign inserted user sanitized email and then expires in six multip by 24 so we gave an expiration time and then we're just going to send this over so res status 2011 Jason we're going to send over the token the user ID which is the generated user ID as well so that's going to be sent over so we can essentially store it and save it as a cookie make sure this spells sanitized email exactly the same here here so we can get a token this should be that they equal by the way not just that they exist so make sure that is the same one thing we also need to do here is just require the EnV package and then add the config like so and of course we need to use the token so cons JWT equals require Jason web token just going to move that up here as well so let's go ahead and require bcrypt con bcrypt equals require bcrypt so cool let's give this a go so let's head over here let's go back to here and let's go with Tony at test let's put the password as password password and sign up okay so that is good and if we check in here I'm just going to refresh amazing Tony is signed up so that is looking really really good I'm happy with this so great we are signing up Tony and if we try to sign up again it says user already exists right so that is something that that comes back to us so let's go ahead and go here so we're sending that over but this is really just going to us so we can just console log this out instead so console log user already exists so that we know that you know a user already exists and we can use it so now let's go back here so of course here we are posting that email and password however that's only if the password equals the confirmed password already so that is looking good and of course if the user already exists then we just get some text for us in the back end I'm not going to work on you know displaying error messages that's outside the scope of what we're doing today however one thing that we have done so let's go ahead and look at this is we want to also save this to the cookies right so we are console logging out that data so what we should be sending is the adjacent of the token and the user ID we can just do red status instead and let's return out of this so let's do Annie at test.com 1 2 3 1 2 3 sign up go check in here an it has been added and of course we get the token back and we get the user ID so let's go ahead and say that as a cookie next so let's go back here instead of console logging the data so this is the data I need to get the data token and the data user ID so let's go ahead and do that I'm just going to do set cookie email data email or token data token and we can also do the user ID if we wish set cookie user ID data user ID okay great and then we're going to reload the window so that we don't see the sign up page anymore so window location reload great now set cookie is done from another package so I'm going to have to install mpm react cookie just like so and now we can use it up here so import use cookies from react cookie so great so that's how you sign up however let's just say that we want to redirect to the login page if we are already signed up however now I'm just going to go head over to the app page where we show all the pages because we only want to show certain pages if the or token exists so let's go ahead and get that or token now and for this we're going to once again import use cookies from react cookies cookie even okay so what do it use cookies react cookie yeah that's right so now I can get the O token from this page essentially so let's go ahead and set those cookies here so const cookies set cookie remove cookie then use cookie null and I'm just going to go ahead and copy this line and put it on the sign up page as well so right here so set cookie of course we're already using in the signup page we're using it to set the O token and now we're going to get the or token so save this and we're going to go into the cookies to get that o token so down here I can just get or Define the or token or token by going into the cookies and getting the or token so however we saved it here that's how we're getting it with DOT notation there so if the or token exists then we want to see the homepage right and only if that exists we also only want to see the property details if we have an or token too so make sure to wrap that like so uh the sign up page we don't need an author token for that and the sign in page page well I guess if the or token exists we don't really want to see the sign up page because we are already signed up so if no or token exists this is the only page that we should be able to see great so now we should be able to see all these pages of course however first let's actually save that all token cuz we weren't doing that before so let's go ahead and do again right let's go ahead and do Danny test.com now password password sign up and this time this should be saved so let's go ahead and go to application and under cookies Local Host you should be able to see the all token and the user ID so there is an or token at the moment this is looking good which means that we can see this however if I deleted this or token so let's go ahead and delete that and delete the user ID we don't see this anymore great so this is looking good now I have saved the all user ID to cookies this is for the future if you want to you know be able to know which user is signed up so keep that there however this might be outside the scope of what we will be doing today but I've left that in here if you need so if you need to identify the user by their user ID for later okay so this is looking great let's do the sign in page so once again I'm just going to wrap this in an off token cuz if one exists we don't really want to see the sign up page at all so great let's work on the sign in page now so I'm just going to do that and here's our signin page so here do we just want to be able to sign in right so let's go back here and let's write another root so just going to delete this for now and let's work on signing in so for this I'm going to do app post and let's do login just like that it's going to be an asyn function I'm going to do request response just like so once again let's go ahead and do const client equals new mon go client I'm going to pass through the URI const email and then let's do password CU that is important so I'm going to get that from the body so Rec body we're going to try something and we're going to catch any errors we're going to console error the error and then finally we're also going to do something and that is the close the connection so we're going to do await client close okay and what we're going to try well we're going to await the connection so await client connect just like so let's define the database once more so client DB and it is localy data now let's define the collection okay so const user as it is and we're going to go into the datab base I'm going to get the collection of users okay and the user what we're going to Define this we're going to await the users we're going to find one I'm going to do it by email as that is our unique identifier now const correct password we're also going to Define test I'm going to await bcrypt and we're going to compare the passwords we're going to pass through the password that we have from the front and so whatever is being passed to the form and whatever the hashed password is that's attached to our user so let's make sure just spell this exactly the same as we did here hash password is going to compare our password to this hash password so that is something that BCP can do again I have a whole tutorial on this so if you're interested please check it out on my channel now if user exists and the correct password exists then we're going to get another token right so we need another tokens token equals and I'm just going to actually copy it from here so let's copy that like so however this time we're just going to pause through the user and the emo okay because we don't need to sanitize it or anything like that CU it's already been sanitized when it went into our database great and then we're just going to do res status 20 one Json we're going to send over the token the user ID which is the user user ID so just like that I'm going to spell it the same way otherwise if that does not work I'm just going to console log out just so you can see in the back end invalid credentials we're not going to send any error messages or show them on the front end it's outside the scope of this tutorial course cool so now let's get up our sign in page so I'm just going to find it now so that we can essentially write the code for this so once again we're going to need reactor use State because we're going to save the email and password so const email set email use State empty string const password set password make sure that is in Brackets like so use State string and then we're going to find the text field so the value of this is going to view well the email unchange we're also going to change this so pass through e and we're going to do set email pass through the E Target value each time it changes and let's just copy this cuz we're going to do the same for the password now so here it is however we're going to do password set password and then set that Target value great so now let's write the function so const login is going to be my function that we go and it's going to be an async function and this is going to be called when we press the button so let's find that button right so wherever we sign up I'm going to do an onclick so here it is so on click log in so now let's define it right here is my login button and all I'm actually going to do is go back to the sign up page and we're just going to copy all of this so everything that's in sign up okay just like so paste it in here and just change a few things so we don't need to really check if the passwords match because of course there's no checking of passwords in here so just get rid of that we're going to prevent this from reloading we're going to await the response from log in this time we're going to make this a post method we're going to pass through email and password we're going to wait the data and then we're going to of course set the cookies the O token and the user ID as well and then we're going to reload the window so let's check if this works first off however we do need an e here as we are preventing the default one other thing we need to do of course is because we use cookies in here is also so import use cookies so let's go ahead and do that here and then of course we need to get this line of code so for when we actually get the cookies and use the cookies and set the cookies so I'm going to paste that in here as well and great let's give this a go so I'm going to go with let's have a look at here let's go with Annie I'm just going to paste in Annie and our password is 1 2 3 and sign in and great so now we are logged in this is looking good and of course we can't see this because you know we're signed up so perhaps we need to do a redirect so perhaps after this has done let's not reload the window I'm just going to navigate to the dashboard okay so let's try this again just going to delete this delete this let's put Annie a test 1 2 3 and then it should take me to the dashboard great and let's do the same for the signup page too okay so instead of reloading the window we just navigate to the dashboard once we are signed in and of course it would be nice to have a log out function as well where you remove the cookies but again I think this is fine for this tutorial it's just a taster of what you can do some other things that I would recommend doing are of course adding a log out button adding this data to the database itself but implementing the filter feature and there's a bunch more but those are my top great so I'm super happy with this I'm just going to clean this up a bit by searching for any console logs I want to keep that one I'm going to keep that one I'm going to keep that one as those are helpers for us otherwise I think I'm quite happy with this I'm just going to format this code a little bit better so format document just like like so I'm going to format the document for this one too because I'm going to commit this to GitHub okay so format document let's format this to so now I'm just going to go ahead and add a DOT get ignore to which I'm going to add EnV as well so do my EMV file and now let's go ahead and commit every changes so yes I'm going to commit it let's add sign up functionality added I can also put log in to be precise click here save and then we're going to pull and push commits okay great so now you will see that un localy app if you refresh that has been added so now let's go ahead and deploy this so I'm just going to head over to netlify okay please feel free to use whatever you wish and I'm going to go ahead and log in going to choose to log in with GitHub I'm going to authorize netlify and let's add a new site so I'm going to import an existing project I'm going to deploy with GitHub and this is just going to essentially give permission to GitHub so I'm going to authoriz netlify and let's search for it so I'm going to go ahead and search for localy and there we go so now that you've found the repository you can then do the next steps in order to deploy this app with netlify you'll have to deploy the front end here and then you also have to deploy the back end separately too in order to do this you will have to read the netfi documentation this is outside the scope of this tutorial so we will leave you with a documentation here in order to go through the next steps and please check out the support forums if you get stucklearn how to turn figma designs into code using AI in this course anbo will teach you how to speed up development using looi she will demonstrate how you can easily create and deploy front-end code starting with just the design locco provided a grant to make this course possible hey everyone and welcome to this course in which I'm going to show you how to not only use an AI tool to convert your designs into production ready front end code but also deploy it as a fully functional application that's right this is what the app is going to look like at the end so a Homestay rental app like Airbnb called Local Host it will map out all of our property data as well as deal with authentication or in other words use the signups and signant my name is Ana Kubo and I'm a software developer as well as course creator on free Camp as well as on my own channel and today I will also be your guide this means that you'll be able to turn designs that you have created in figma into code and make tweaks to the code too if you want if you would like to make some tweaks then naturally some coding knowledge will be required but don't worry I will walk you through this step by step and in fact here is an outline of exactly what we will be covering in this course so first off we're going to start with the introduction followed by what exactly is figma then we're going to have a look at the design followed by locy lightning and Loco Ai and that's when we'll start building out our app we're then going to learn how to single app to get Hub as well as create a database and create authentication by building out a backend and finally we're going to deploy our app okay so great I'm excited in this course the app we will be building we'll have react for the front end node.js for the back end mongod DB for our database management and netlify to manually deploy the application so let's go ahead and check out the design first the tool we are going to be using for app design is a tool called figma it has a great reputation as one of the leaders in collaborative web design and allows users to come up with user interface or UI designs as well as user experience or ux designs as a team in real time and as a bonus it has a free tier that we can use so what are we waiting for we are going to first open up a design file all together so we can look at it first okay so here is what figma looks like this is the website on figma decom and I do already have an account so I have already signed up to this and all we're going to do is just get the link in the video description let's go ahead and get it this is what the full link should look like so here it is I've just pasted it and just hit enter okay so this is the design don't worry I'm going to talk you through it in a bit first up however let's open up this design right here this design for a holiday home hosting website in figma so just go ahead and click open in figma and of course it's going to allow you to create an account if you don't have one already but I already do so I'm just going to go ahead and select continue with Google which will give me this popup and I'm just going to select the Google account I want to sign in with in this case it's Ana at cod with anna.com and it should take me into figma so that I can open this up so open in figma once I'm already signed in okay so great this is just the cover for the figma file so don't worry about that what is interesting however is under getting started we can see all the pages that make it up so here is the homepage as you can see here and this allows you to essentially filter through lots and lots of Holiday Homes based on where they are the check-in date the checkout date and the number of guests staying okay so this is what it will look like this is the design file and of course if we click into one of these so for example if we clicked into Brightwood cabins the page or the property Details page should look like this so we have one image that's showing up as large as well as lots of lots of other images that we can click into as well as the title of this property which which is Brightwood cabins the location of the property the amount of reviews left on this property as well as the average rating which seems to be very high it's five stars you also have the ability to like this or not as well as a description of the property as well as of course how much it is to stay here per night as well as some analytics on best time to book of course we also have the option to actually book the property as well as have some information about who this is hosted by about this home here well we have a lot more information about it as well as the immunities that are applicable to this property and of course if we select here we will be able to see more what's great about this is that you also have a map based on the coordinate or the longitude and latitude of the property as well as some weather information about your state what is also cool is that you can see reviews that users have left as well as simp s stays in the Local Host website we will also add a sign up page which allow you to sign up by asking you for an email address a password and a way to confirm the password just to make sure you haven't made any errors or you can sign up with Google Facebook or apple and of course this is the sign up page we also need a way to log in which just requires the email address and the password so wonderful these are the design design files if you haven't used figma before then please go ahead and just familiarize yourself with it a little bit more before moving on okay so it's all very useful if you look in the drop downs here the header is split as a component the hero container and if you keep going into these it will break them down even further wonderful let's move on okay now that we have walked through the design of our app we are going to start using a figma plugin this plugin is called the LOI plugin and allow us to utilize something called locy lightning that will essentially convert this figma design to high quality production ready front end code in just one step Loy lightning is powered by Loco AI that leverages their in-house large design models trained on millions of designs and web apps it is also important to note here that while you might be following along with exactly what I do the AI might have generated something slightly different for you so just keep that in mind while watching this tutorial and let's have a look at the quality of this code that got generated for me now okay so first things first we're just going to sign up to loc. a we're going to try for free so please go ahead and click on this button right here we're just going to sign up to a free version so this free trial can can be extended every 3 weeks so just keep that in mind I'm just going to go ahead and continue sign in with Google so this should bring up this Google popup in which I I'm just going to select my Google account in order to share this information with loc. a and to log in okay so I'm just going to go ahead and continue and great I'm going to choose to have my name as this as a default please put free to use whatever username you wish and hit enter now I'm going to just go ahead and select which one describes me most I'm going to go ahead and select founder and I'm going to go ahead and put full stack developer so just choose the same as we are going to be building a full stack application or choose something that is more suited to you if you want the prompts to kind of be catered to you as well I'm going to go ahead and put startup and we can go ahead and put our company name if we want I'm just going to put code with anna.com and hit next again you're just going to be asked to answer a few questions here and then the design tool that we're going to use today is going to be figma so I'm just going to select that option and select next we can also choose the Frameworks that we want to use and today we are going to be choosing react as that is what we're going to be using for the front end so please go ahead and select the same and just go ahead and click next great so we're all signed up now let's go ahead and get the figma plugin so just go ahead and select that and this should open up in figma now so if you don't have a figma account please go ahead and sign up I'm just going to go ahead and click on this button right here and continue to sign in to my figma account once again just with my Google account okay great I'm going to select continue and wonderful so we are now in figma as you could see by the URL and we are adding the locy lightning plugin to figma so in order to add this plug-in to figma of course we are on figma Doom at the moment I'm just going to choose open in and because we already are signed into figma it should come up with all my figma projects of which one is the Local Host website so I can choose to select that and it will essentially open up my Local Host website once more and then show the plugin so I can choose to select run here and then that will run the localy lightning plug-in on this design so you could have done it that way or if you're also new to figma another way to add plugins is by selecting the plugin from here and then you can manage plugins or for me I already have it here it's Loy lightning as a recent plugin and it should take you to this popup as well great now before clicking let's go we actually need to select the files that we want to convert into code so in order to do this I'm just going to select getting started once more and let's just select all of these okay so all of these four pages and now let's get up the plugin again so this one right here and let's go through the steps so let's go ahead and select let's go and I'm happy to name this project on loc. a localhost website just so it's the same as this figma file and we're going to make a web app I'm going to select react for the framework I'm going to keep this as it is we can change this later so I'm going to choose typescript we're also going to have CSS variables the St is going to be CSS modules units we going to have pixels over REM I'm fine with Pascal case and we are also going to choose material UI however just because this will allow us to have optimal preview and code conversion so let's go ahead and select create so now this is going to convert our designs to code make sure you've selected those four frames and hit let's go so what exactly is happening here well as it's scanning there's a lot of stuff actually happening under the hood there is a responsive design being created and I'm going to show this in a bit as well as locy AI is automatically tagging interactive elements such as inputs and buttons so they can add some functionality to them it's also creating reusable components so just like you would in react and also recommending human readable layers and class names to make your life easier now it's important to remember that AI is never perfect and that can be moments when it doesn't get everything 100% as you would like Loi lining has a feature that lets you review all AI decisions and change them to make some fixes this would include things such as tweaking responsiveness for the header or the scroll and so on and here we go so this is looking great we have the code for our pages so first things first I just want to show you that this code is in fact responsive we of course have the default of what this looks like on a web browser or a smaller web browser in which there's three property showing an even smaller one like this and then we have more so perhaps a tablet like so in which there's only two or a mobile phone in which it looks like this this is looking cool so let's go back to the default that is in fact responsive and if you want to view it in different responsiveness you can be way more specific by Chang changing it here what is also cool is like I mentioned that the inputs so all the input and buttons have may given functionality so by this I mean I can actually select a date and it will be shown here and even the select input has been generated to fit the design of this website so this is looking pretty cool okay and of course if we click into one of these as well that will work and take us to the correct page so that is also amazing that it figured that out great and let's go back to our home page so that's it for the responsiveness and what is also great is the code and it's readability so I think the class names that have been chosen are pretty good I I would have chosen the same so I'm pretty happy with that and of course just like in rea all the components have been split out so we have a lot in here we have the homepage which is composed of these different components such as the header component the hero container the search section header and the listing items onto which data will eventually be mapped out at the moment we don't have any data in here so we've created a reusable component or to be specific the AI has created a reusable component which has been reused many times here with data fed in which we can later map out if we connected to a database okay so that is example of a reusable component in action wonderful of course if you like to see the code and full you do have this button right here where you can focus on it if you would like one thing I also did mention is that we can actually change the settings of this project later on so as you can see I chose to use CSS variables and I chose to use CSS modules but if I just wanted CSS and I wanted JavaScript then that can be applied too and as you will see that's now changed so there you go it's really up to you and whatever you're comfortable with and the best part is that you can change it later on and those changes will be reflected in the code so as you can see here this has also been changed great and the typescript has been removed and we just have JavaScript code right here and the file names have also been changed so we used to have TSX and now we have Js fantastic now this code has been generated because looy has been traded on hundreds and hundreds of designs but you know sometimes maybe something isn't quite like you'd like it don't worry about that because we can change it so on here so just just to the right hand side if you scroll down we can actually review Loco ai's decisions so everything that's happened so the design Optimizer the tagging the responsiveness as well as styling the interactions of the inputs the layer names and the code components and props can all be reviewed so I'm going to show you an example of how to do this now and of course once you learn how to do this you can then apply this to anything you want so I'm just going to actually minimize this code and let's say that we are not happy with how this looks when the screen is 1,60 pixels by 665 so as you will see perhaps you want the images to you know go all the way to the sides not kind of be stuck in the middle so I'm going to show you how to do this now so let's review the responsiveness and then under here in the stay section under homes so let's go ahead and select listing item so this one right here and you can select edit and then all I would do so these are the CSS rules that have already been applied and I can add some Advanced CSS properties and this is really allow me to use my CSS knowledge as a developer I'm going to apply Flex one to this and save and done so now you will see that it is stretching to fit the whole thing and I just need to apply that to all the items here too so let's go ahead and add Flex one save and done and that should now be stretching out evenly and just carry on doing this for all of them as well so that is something you can do that is just a very simple example and you will see how this row is now nicely stretching out to this whole container whereas this row which has not been giving the Flex one CSS property is as it was before I'm just going to quickly apply this to all of these now as well so they all have these same CSS attributes and they all stretch out okay of course there's so many things you can do in here this is just one of the things that can be applied you don't even have to have advanced CSS properties you can play around with stuff that's already there and wonderful so now this is looking so so good I'm happy with this an option to do a bulk update on all these components will be released soon so keep an eye out for that now another thing you can do is review the tagging and I'm going to show you what this means for this I'm actually going to go ahead and head over to the sign up page so this is a sign up page and you can review the tagging you can actually just select one of these right here so maybe the one with the password so let's go ahead and go into the input right here so here is the one for the password and if I edit it I can edit the properties so at the moment the password input it has a type of text but we can be much more specific we can give it the type of password and for those of you who are familiar with the inputter type password it just means that this would be treated as a password input instead of just a normal text input so that is something you can do and there's a lot of other stuff you can select as well such as making this required great so at the moment without this changes the password well if I type you can see it but if we added the type of password then if you save this and type in here it will show up as do because the input with a type of password will have the text show up as dots as opposed to if the input had the type of text great let's go ahead and do the same for confirm password so edit properties scroll down here change the type to password once more and then also make this required let's just go ahead and select done another thing you can do is add your own custom code or just simply notes to a software engineer in order to you know make suggestions about what other code should be added so for this let's go ahead and go back to the homepage say we wanted to essentially make this button show more of these cards so we would need to add some functionality to this right well if I select edit and then select the button I can go ahead and select actions and interactions add an action and and here is where you can write your own code or you can simply add a comment to it so we can go ahead and put please show more list items on click of this button and this note will be added essentially to the onclick action of this button so that is something that we can do or we can select from these pre-made on click actions above and let's click done so now if we go to the code I'm just going to move this up a little bit and of course this is on the homepage if we go down here and find the button so on show more button click and then find that function up here that has been added so let's go and find it you will see on show more button on click that too has been added so that is exactly what we wrote that is a pretty cool way to essentially leave notes for engineers if you're not maybe aware of how to code or where this should go exactly cool okay so let's go back to preview so now let's talk about layer names so if I go ahead and select review you will see what the figma layer name was called as well as the recommended layer name that was generated so I'm quite happy with these of course error Handler is much more clear than frame 98 data combine is much more clear than frame 44 but of course if you want to edit it then you are more than welcome to you can just replace it just like that I'm not going to do it but if you need to do it then that is where you would go okay so under preview and then just select the layer names and then edit the one you want and click done great now one more thing I just want to show you so because we will be hooking this up to a back end and we will be mapping out lots of data onto components such as these reusable components right here we also might want to review what props these reusable components take or any other components in fact so I can go ahead and review this and I can select the listing item for example so you will see here the listing item there's 16 instances of it so these are the listing items once more just as a refresher and it takes 13 props so let's go ahead and have a look at this so the first instance of it so this one right here now you might not want to take all these props because I would imagine some of these stay the same so for example here you can see the prop name listing image well that would be unique so that would be a prop fed in the listing title would be unique listing subtitle also unique rating 4.9 and price would be unique also so these you'd want to keep the same but if you didn't want one so for example if the heart icon was fed in well the heart icon is the same on all of these so we would be able to delete that simply by removing the prop however the AI did a really good job here I'm really happy with these props so I don't want to change a thing I'm going to keep this as it is great when it comes to the style props I don't really want to feed these in because I'd want them to all be exactly the same so for example I could just go ahead and delete all of these and go ahead and click save so now only seven props are being added to these components and let's go ahead and click done this is looking good now that we have the UI of our app built let's continue continue making our app an actual usable product in order to build upon the code generated we will need to sync the code to the logi Builder locy Builder is a platform that enables you to modify your code settings create components and bind Data before integrating it into your Ci or CD pipelines as well as a bunch of other stuff that we will be exploring together now okay so I think we've explored the preview which by the way is running on Live code that logy lightning generat ated I think it's now time to have a look at the locy Builder in order to build out this app even more okay so in order to sync to the Builder we're just going to select continue in Builder and make sure that we have all selected frames so select all the frames so there you go and just go ahead and select sync to build so now the syncing is in progress once we have the Builder up I'm going to show you the live sharable prototype feature I'm also going to show you the auto components and props the code configuration and then we're going to sync this code to our GitHub in order to actually run the project and then we'll go back and add State variables and data biding in order to flesh it out further and great let's go ahead and do it so amazing here we are back on locy AI this time and and here we see our code once again if you select on a component such as the header content right here the code will show up for us so as you can see here here all the layers that make up our up or in other words you can see here by the little icons that this essentially is a component and then here we have all the elements that make it up so here we go here's a component here's another one and here is a another one and you can deep dive into as many of these As You Wish what is also great is that if you select on localy components this will make it easy to link up this code to an app like storybook for example which lets you manage all the components in an external Place great and you can see what these components look like once again in a default in a smaller screen and so on and in a Mobile screen as well so as you can see here I've just selected the header or you can just select the footer or you can just select the details card as you can see here wonderful I'm just going to select on homepage again now you can also create components and props I'm just going to go back to all settings to show you where I found this so under settings you will see all of these right here code components and props will allow you to Essen you create your own components ones that have have not been generated by the AI and will also allow you to add your own props as well okay so here you can view the current code components and props so for example here I've selected the header on the home page the head out on the property details and you can see what it looks like on all the pages or once again if you want to create your own just under make your own component you would select create after selecting a layer that you want to work work on so for example say you want to do this in the frame here is the frame you would select create component name the component and so on wonderful I'm just going to go back to all settings one other thing you can do is data binding this will allow you to bind data to UI elements using State variables you can bind directly to layers components props or set up database rendering for repeated components you can also configure your code code in which you configure your framework settings and screen settings before exporting your code and of course we also have the sync export and deploy which allow you to SN to GitHub as we will be doing in a bit as well as deploy to things such as netlify or V out so as you can see here the Loy Builder does offer a lot we can also actually view the Prototype so if I select view prototype this essentially is what it would look like once you have actually deployed it so you you can see it in all its different stages as in its responsive stages just right here and you can of course share it so if I click share prototype you can select which screen to share so I can go ahead and select one homepage is the one I'm going to choose and you can copy the link or you can send the link via email in which you just have to put an email address in here and send that link over so if you copy this URL and just paste it you can see see what this website will look like once it is deployed and Tada so this is looking so so good I'm happy with this wonderful and of course we can click into each one of these to get a preview too I'm just going to close that down for now so now let's go back to editing in Builder so now that we've seen the actual prototype will'll be going live I'm going to also talk to you a little bit about the code components that we saw before so in order to actually change these and edit them once again you would select view here and you can see all your components there's 15 existing components on the homepage and of course you can edit them so for example perhaps you don't really like what one of these is called let's go ahead and say that you don't like the name of the frame compon component you think this is too generic just go ahead and select the frame component this will of course highlight the component that you're talking about and you can edit it so you can call it whatever you wish maybe I want to call this the property display okay and you can save it I'm not going to do this now but it's good to know you can now this doesn't have any props but if you wanted to change the props instead so let's go ahead and check this out we know that the listing item has props so let's go ahead and select that and you can of course rename them here once again you would select edit you can rename them you could delete them so you can really do whatever you want you saw us editing this in figma as well so you could do it here too here however you do also have the data type that has been applied which you can either choose to put in or leave it as it is once again it's important to highlight that this will be syn to localy components the same thing that I showed you that is applicable for when working with story books great let's move on so wonderful let's go back to all settings we've viewed code components we've already discussed that you can create new components and pass through props we've talked about binding data and configuring code which once again is just the same as what you had in figma that allows you to change these settings and change whatever you used in your code so at the moment we have JavaScript selected CSS we changen pixels and we have Pascal case for file naming great I'm just going to keep that as it is so wonderful and let's go back to settings so finally let's go ahead and sync this right I'm going to select sync and we're going to sync our project with GitHub of course there are other things you can do you can of course pull this code into vs code so there's a v code extension for this if you want to explore that or you can choose to deploy this code as it is to nfy or Vel so those are two options as well we're not going to be doing that here today from here because we want to actually extend this code and in order to do that we're going to S this project to our github's account so we can add to it as well so let's go ahead and select sync project we're of course going to have to connect to our GitHub account so please go ahead and do the same I'm just going to insult authorize locy AI so click install and authorize and then I'm just going to put in my authentication code and then it's going to redirect me like so so great that connection is now done we're going to create a new repository let's go ahead and call this localy app and then I'm just going to confirm repo and brunch so wonderful of course this is going to take a while to do a it's thing I'm going to push to GitHub we can of course choose to review files or you know select the ones we want and select the ones we don't want but I want all of them so let's go ahead and push that to get up so that is now doing its thing of course this might take a while so just come back when this is done okay and great so that has been done you can of course choose to go to the repository to check it out so once again this is on my GitHub now it's called locy app and here is the code along with the read me so amazing I'm just going to go back here and select done and now let's actually get this code onto our computer so I'm going to get this code I'm going to copy this I'm of course going to get up my terminal so here we are I'm just going to go into a folder where I like to keep all my projects using the CD command on a Mac and I'm just going to clone this so get clone paste that URL and hit enter so now that's moving that repository it's cloning it to be precise onto my computer in a folder called development that lives on my laptop okay so once again we're just going to waiter this to do its thing okay and that is now done so now let's go into locy app so I've just used CD to go into that app and now we need to install all the dependencies using the command npmi so wait for that to do its thing it's just going to install all the dependencies that are in the project and then we're going to start it we're going to make a run on Local Host 3000 so once again we're just waiting for this to do its thing and great so those have all been installed now let's do npm Run start and that should start up our app on Local Host 3000 so this should happen automatically okay there we go and we can see our app and great so this is looking so good I'm just going to open up the code in VSS code and this is what it should look like so you have your components your pages your CSS files and everything in here now we want to be able to add some functionality as we said mainly to buttons like this one so for example if we click here and want to show more so for this we're going to have to extract all the data that's coming into these re usable components so we can essentially map them out and add some more data to this so what I'm going to do is let's just go ahead and make a Json file just for us okay just so we can essentially work with it so I'm just going to create a state object Json file and this is going to be an array of 16 items okay because here we have four * 4 four so 16 and I've actually already gone ahead and done this so what I've done is gone in to the pages the homepage and on each of these I just extracted this data right here okay the listing image the listing title the listing subtitle rating price best on show and so on okay and I've essentially done this so please go ahead and do the same it might take a while you have to do it for all 60 of these okay of which you can only click on the first one for demo purposes at the moment so don't put that on here okay just leave that one out leave out the on click once again to show this if we click on the first one you'll be able to go into details about it as we saw in the preview but this won't work on any of the other ones at the moment okay now let's go back to the Builder I'm going to show you how started buying some data so on the homepage what you want to make sure is you have the parent of all the listing items so here it's called homes you're going to now make a component so make sure that is selected once more go back to settings and create a component make component let's just call this card list and click create and now once this has been created we need to create a state variable make sure the data type is an array let's just call this card State and we're going to have to paste in all of the content of this state object Json into there so just copy it and I'm just going to paste this all in like so however making sure for now that we need to have HTTP Local Host 3000 at the front so just make sure to add Local Host 3000 just like I have and you're going to have to do that to every single one so please just go ahead and take your time in doing this do it this slowly as you don't really want to make any errors so maybe do it a little bit slower than I am but just make sure to have that at the beginning of every single image in here and of course you have to have Local Host 3000 running otherwise those images will not show up so once again that's all I am doing just filling that in and then let's hit save so now let's bind this so all I'm going to do is Select bind data I'm going to add the plus sign I'm just going to select the first item click repeat and the data source is selected and if you just look down here you will see all the props along with their values already populated for me so this is looking good I'm just going to hit save and great so now that has been binded you will see all those images showing up so now all that data has been binded and if you look in here we have actually created another another state so here this piece of code is new the const card State Set Card State use State and we've just passed through that whole array with objects into here so that's the starting state of the app and that's being mapped out now onto the listing item so now that we've done that we can also sync this to GitHub so that the latest changes reflect in our code so all we're going to do is Select sync sync project you can choose an existing Branch or create a new Branch confirm repo and branch and here you'll see the files that have been changed it's the card list and the card list CSS and you can push to go okay great and now let's click done and of course now we need to pull in those changes because this code will be updated as you will see here 1 minute ago okay we have obviously updated something in here we know what it is and now let's pull that in so I'm just going to get up my terminal again I'm going to stop this from running I'm going to do get pull so we can pull in those changes and we will see them in here okay so we don't actually need this state object Json file anymore because if we now look in components and look at the new component that has been created so here we have the card list you will see that state so use State along with that array with all the images so all the objects that represent the images in here that is being mapped out onto one listing item great this is looking so so good I'm happy with this so now maybe let's hide the last four and apply the logic for the show more button first off however let's just make sure this is running so do npm Run start in order to start the app okay so that is running and now let's go back to the code now in order to show more items so let's go ahead and find Pages homepage I'm just going to minimize this here's the on show more button and if we click on this button we essentially want to affect something in the card list so let's go ahead and import use state in here and I'm just going to do it super simple okay um const show in or show all set show all and use State well we're going to start off with this being false we're not showing all so make sure that that is done and in here I'm just going to do this very basic if show all is not true then we're going to use set show all to be true okay else we're just going to do set show all to be false uh this is just a super basic example of how to make things Dynamic okay so what we want to do now is send show alsoo pass this through onto the card list so this value is either true or false depending on if we've clicked the button and how many times we clicked that button so now let's go to the card list so go to Def definition I'm just going to pass through show all and I'm going to essentially get the card state so let's go ahead and do this here perhaps const cropped card State equals and if show all is true well we're just going to get the card State and assign it to crop card State otherwise we're going to get the C card State and we're just going to bring back the first 12 items okay so we're going to use slice for this so now we're going to get the cropped card state and instead of the card State we're going to map the cro card state so this is just very basic of course I just want to show you this works um this is on the assumption that we only are ever going to have 16 cards okay so at the moment 1 2 3 4 5 6 7 8 9 10 11 12 so 12 because we essentially chopped four off but if we show more there's 16 now a cool way to take this project further would of course be to you know be like show less where you reverse this but that is something you can do in your own time I just wanted to show you this as a quick demo of how you can essentially add functionality to buttons on your site great now let's get to looking this up to a database and for that we're going to have to build that a node.js backend so let's get back to doing this one thing I'm also going to do is perhaps just hide the show more button you know because if show all is true we don't really want to show it as well okay so I've just wrapped that in there and it just means that that won't be visible once you show them all cool so now let's go back here I'm just going to shut these down and then let's make a node.js back end so all I'm going to do is simply I'm just going going to get up my terminal again and I'm going to maybe let's stop this for now because we're going to have to import some packages so first off we're just going to I'm going to create index JS file on the same level as my package Json so index JS and this is going to be our backend essentially so the things we're going to have to do is Define a port I'm going to Define it as Port 8,000 we're going to need Express so cons Express requir the package express we're also going to need course so require course to get rid of any pesky course messages and then we're going to listen out for changes on here as well so we're going to get Express after we've installed the package it's release all of its wonderfulness into Express I'm going to call it to release it even further and save it under the qust app so now this will have all the methods and properties that come with the Express package so what I'm going to do do app use and then course and then call it like so but also app Listen to listen to out any changes on the port so console log listening to port and then we could just do the port name great so now let's go ahead and install those packages so making sure you are in the app npmi Express and also course I'm also going to use secret variable so EnV is another package that we're going to need and hit enter okay so that is now doing its thing and wonderful so now let's run the back end and the front end so all I'm going to do is go down here this is start the front end so I'm going to change that start script and then let's also do start back end like so and we're going to do no demon to listen out for constant changes on the index JS file so no demon is another package like I said it's going to listen out for constant changes so it's one we're going to have to install mpmi noemon and wait for that to do its thing of course please also make sure that all the packages that I've installed are these versions because if you're watching this in the future and doesn't work it could be down to the package version that you are using so just revert back to these great so now let's start our front end so npm start front end and let's also start our back end so once again I'm going to go back here I'm going to create a new tab and do npm Run start back end this time okay so this will start with backend on local home post 8,000 okay so let's go back here and if you look in the terminal listening to Port 8,000 listening to Port 8,000 this is looking great make sure to pass the port through in here as well as the Callback function so now perhaps let's work on something else I'm going to essentially work on signing up and signing in so once again this is just one feature of this website this would be way too long to finish out everything from the whole website but I just want to give you a taster of working with a database for this project so let's go ahead and find the sign in page so we can navigate to the signup page simply by going to Local Host SL signup page so let's go ahead and work on signing up first before working on signing in okay so I'm just going to head over to mongod DB which is going to be my database of choice and I'm just going to choose to sign in okay and if you haven't signed up already please go ahead and do so now so I'm just going to choose to sign in with Google and great so here is my organization called annus organization and I'm just going to create a project so let's go ahead and select new project here and this project well you can call it whatever you wish I'm going to call it locy database okay so Lo I DB and then I'm just going to go ahead and select next so I'm going to give myself the permission so let's go ahead and create this project great now I'm going to create a deployment so go ahead and select that button and let's select the free version uh I'm going to leave as clust to zero in fact I'm going to leave all of these as they are so just the default settings and I'm going to create a deployment wonderful so let's go ahead and create my database user so that password and username have been saved and we're just going to get rid of my IP address so that anyone can access this so first off we're going to choose a connection way uh we can choose any of these I'm going to choose the driver so let's go ahead and install GB so once again I'm just going to perhaps open a new tab and do npm install mongodb so that it's installed into this project and next we're going to have to have a connection string so just go ahead and copy that because we're going to have to use it okay so let's review those steps there we are let's just change the IP access so I'm just going to delete my IP address from here so that anyone has access to this so I'm going to add an IP address this time and allow access from anywhere and click confirm great so that is now doing its thing and here under database users if you have forgotten your password you can edit here and then edit password and auto regenerate a secret password I'm just going to show you mine copy it and keep it somewhere safe okay and update user wonderful so now let's shut this down for now and continue with this at at the moment I'm done so I'm just going to click done on that and great so that is now done let's go ahead and look at cluster zero so just go ahead and click on cluster zero and at the moment it's just loading all our new data sets to clust to zero in the meantime let's go ahead and connect our data with nodejs and JavaScript so let's go back here okay to the index GS file I'm just going to remove that for now and we're going to to require the client from mongod DB we're also going to do app use while we are here and Pa through Express Json so that we can work with Json being passed from the front end to the back end and so on now we're also going to have to define a urii and that is going to be essentially the URL that we saw here so if you click connect again and click through all of these just copy that one right here again and go back to your code and paste it like so but of course in quotation marks as I have done right here and just put in your password your password can of course be stored on the back end or you could just put this whole URI in a EnV file to keep this secure so perhaps let's do that I'm just going to create a new file EnV file and then we can put you r i let's take all of this right here process EnV URI making sure this SP exactly the same as you did here I'm just going to paste that we don't need it in quote as that is a string already and then just put in your password here so this is my password please go ahead and get your own we are not done yet however cuz we're going to have to put our database name here but we actually need to find out what that is first great so now let's go back here so we've got our UI next we're going to get the client so get the client that we just got from client so let's just get client instead and pass through the URI and we should now be connected we are also going to have to await the client connect just like that now let's go ahead and actually put this in a function right so perhaps let's write our first root let's say that we want to sign up so this is going to be for signing up I'm going to do app post and then we're going to go to sign up like so there's going to be an async function request response just like that and then we're going to essentially get the email and password from the front end so const email password this is going to be from the front end I'm going to touch it to the body of the request we're then going to have to essentially salt the password so consult equals bcrypt so bcrypt is a package we're going to use in order to essentially uh add some salt to our password before we hash it okay so I do have plenty of tutorials where I go into this in a lot more detail so please check out my channel for this for now I'm not going to go into a deep dive onto the bcrypt package because I'm going to assume you already have knowledge on it so hash sync and then we're going to pass through the password along with the sort so let's go ahead and install that package right so let's go ahead and do it NP by bcrypt let's also maybe go ahead and add Json web token while we are here npmi Json web token just like so okay so once we have that hashed password the email we're just going to keep as normal in our database that is fine it's just the password that we are worried about I'm just going to try something and catch any errors so console error the error so we can can read it in our back end so what do we want to do well we want to sign send over this and this to our mongod DB database right so perhaps Also let's just get this in here I'm going to put it up here and we can add a finally statement too so there's our catch statement finally we're going to also await client close and we're going to close that connection for now let's just list our databases as we we said so let's head over to Cluster zero so browse this collection and there's going to be some sample data in here we don't really want this I'm just going to delete it sample mflix drop this okay and let's add our own data so let's just call this localy data The Collection name for this is going to be user and then I'm happy with that so let's go ahead and click create okay so there we go there's users and let's go ahead and insert a document so you could do it this way or you could do it as uh Jason it really is up to you so so far we have an ID let's go ahead and add another field this is going to be email and let's go ahead and for now I'm just going to put in Ana test.com and then let's also put in a hashed password so let's Hash a password okay obviously this is going to be very fake uh let's say my password was password the cost factor is 10 so that's like the salt generate hash okay I'm just going to copy this for now so I'm just going to paste that in the password like so in fact maybe let's put hashed password just so it's really obvious and insert so now that we have something in our database that is good that's kind of the format that we're going to apply to everything else so let's try send this over of course we do need to link this up to the front end so let's find where our form is so sign up page here we go and then let's scroll down here here's the form here's the text field so we're going to have to save this to State we've got the email address so let's go ahead and get the values from these so let's go ahead and add a value here that's is going to be the email and let's find it for the password as well so value password and let's save it to state so use state and here I'm going to save it so const email set email use State and we'll start off with this just being an empty string and let's do the same for the password so password set pass word use State and we'll have it as that we should also probably have the confirm password right confirm pass word set confirm pass word we want to make sure that these match so use State like this uh and then let's find the confirmed password so it's the second one in here confirm password that's right value confirm password and then on change we'll go to do set confirm password and pass through the E Target value pass through the event we're going to do the same for all of these so let's find the on change for the other one so here is the text field set password this time and of course the set email so let's do set email okay and then we only really want to be able to sign up if password and confirm password are the same right so let's find that button that allows us to do this here is a button let's add an onclick to it on click and obviously we're going to maybe write a function to sign up so let's define it up here const sign up just like so but only if password and confirm password match do we do something okay great so make sure this is an async function okay we're also going to eevent default so we don't want the whole page to reload and then what we're going to do is await Fetch and we're going to essentially here we're going to have a URL so whatever the server URL is going to be so I'm going to do process EnV react app server URL and then we're going to have the endpoint which is sign up okay so we're going to await that but also we're going to have to actually send through a bunch of other stuff too so we're going to make an object uh this method is going to be a post method as we saw we're posting information headers we're going to pass through as well we're going to do content type application Json and the body well we know that we're going to pass through a few things we're going to pass them through Json stringify and we're going to pass through the email and the password okay so that's all we're going to send and once that is done its thing let's save this as the response let's get the response just so we can see what is going on let's get it Json let's await this const data because we're going to have to find out if this worked and if it did we're going to set some cookies okay so for now I'm going to just console log out the data on the front end because e needs to be put here so great if we click on the sign up button this should send it to the back end let's just go ahead and add the server app URL as well so for now I'm just going to go with this Local Host 8000 but we will of course change that when we need and great let's go back to the index JS page so how are we going to insert a document now so first off however I'm just going to move these things as well so let's get the client I'm just going to put that in here we can delete this I'm going to cut this out and put this in the try so cons database equals client DB and this is going to be locy data const users it's going to be database collection users because that's what we called it I'm just going to make this the same and then con existing user equals oh wait users find one and then we're going to pass to the email okay so we're looking by the email this is kind of like the unique identifier now if existing user already exists then we want an error right so I'm going to return rest status 409 and send user already exists please log in okay but that's only if that exists otherwise I'm going to sanitize email sanitize the email because we want to make sure that everything is lowercase and I'm going to get the email and just make it to lower case so to lower case great and once we've sanitized the email let's actually put in the data right so cons data equals uh let's get a user ID I'm going to actually generate that using uu ID let's get an email which as just the sanitized email really and let's get the password which is now my hashed password so hashed password here okay and we don't want to save as password do we how do we save it here we Sav it as hash password so let's go ahead and do the same now my user ID well I'm going to install another package for this so npmi U ID okay and now we're just going to get that package const we're going to get version four of it so uu ID V4 require package uid okay so now we can actually use this so all I'm going to do is go down here and maybe let's do it up here so just where we salt everything I'm also going to generated user ID call that so we can use this and that will essentially create a unique identifier for us so that is the data that we are essentially going to send over so this time I'm going to do con inserted user equals 08 users insert one and then press through the data okay great one other thing we need to do is make a token so const token equals JWT sign inserted user sanitized email and then expires in six multip by 24 so we gave an expiration time and then we're just going to send this over so res status 2011 Jason we're going to send over the token the user ID which is the generated user ID as well so that's going to be sent over so we can essentially store it and save it as a cookie make sure this spells sanitized email exactly the same here here so we can get a token this should be that they equal by the way not just that they exist so make sure that is the same one thing we also need to do here is just require the EnV package and then add the config like so and of course we need to use the token so cons JWT equals require Jason web token just going to move that up here as well so let's go ahead and require bcrypt con bcrypt equals require bcrypt so cool let's give this a go so let's head over here let's go back to here and let's go with Tony at test let's put the password as password password and sign up okay so that is good and if we check in here I'm just going to refresh amazing Tony is signed up so that is looking really really good I'm happy with this so great we are signing up Tony and if we try to sign up again it says user already exists right so that is something that that comes back to us so let's go ahead and go here so we're sending that over but this is really just going to us so we can just console log this out instead so console log user already exists so that we know that you know a user already exists and we can use it so now let's go back here so of course here we are posting that email and password however that's only if the password equals the confirmed password already so that is looking good and of course if the user already exists then we just get some text for us in the back end I'm not going to work on you know displaying error messages that's outside the scope of what we're doing today however one thing that we have done so let's go ahead and look at this is we want to also save this to the cookies right so we are console logging out that data so what we should be sending is the adjacent of the token and the user ID we can just do red status instead and let's return out of this so let's do Annie at test.com 1 2 3 1 2 3 sign up go check in here an it has been added and of course we get the token back and we get the user ID so let's go ahead and say that as a cookie next so let's go back here instead of console logging the data so this is the data I need to get the data token and the data user ID so let's go ahead and do that I'm just going to do set cookie email data email or token data token and we can also do the user ID if we wish set cookie user ID data user ID okay great and then we're going to reload the window so that we don't see the sign up page anymore so window location reload great now set cookie is done from another package so I'm going to have to install mpm react cookie just like so and now we can use it up here so import use cookies from react cookie so great so that's how you sign up however let's just say that we want to redirect to the login page if we are already signed up however now I'm just going to go head over to the app page where we show all the pages because we only want to show certain pages if the or token exists so let's go ahead and get that or token now and for this we're going to once again import use cookies from react cookies cookie even okay so what do it use cookies react cookie yeah that's right so now I can get the O token from this page essentially so let's go ahead and set those cookies here so const cookies set cookie remove cookie then use cookie null and I'm just going to go ahead and copy this line and put it on the sign up page as well so right here so set cookie of course we're already using in the signup page we're using it to set the O token and now we're going to get the or token so save this and we're going to go into the cookies to get that o token so down here I can just get or Define the or token or token by going into the cookies and getting the or token so however we saved it here that's how we're getting it with DOT notation there so if the or token exists then we want to see the homepage right and only if that exists we also only want to see the property details if we have an or token too so make sure to wrap that like so uh the sign up page we don't need an author token for that and the sign in page page well I guess if the or token exists we don't really want to see the sign up page because we are already signed up so if no or token exists this is the only page that we should be able to see great so now we should be able to see all these pages of course however first let's actually save that all token cuz we weren't doing that before so let's go ahead and do again right let's go ahead and do Danny test.com now password password sign up and this time this should be saved so let's go ahead and go to application and under cookies Local Host you should be able to see the all token and the user ID so there is an or token at the moment this is looking good which means that we can see this however if I deleted this or token so let's go ahead and delete that and delete the user ID we don't see this anymore great so this is looking good now I have saved the all user ID to cookies this is for the future if you want to you know be able to know which user is signed up so keep that there however this might be outside the scope of what we will be doing today but I've left that in here if you need so if you need to identify the user by their user ID for later okay so this is looking great let's do the sign in page so once again I'm just going to wrap this in an off token cuz if one exists we don't really want to see the sign up page at all so great let's work on the sign in page now so I'm just going to do that and here's our signin page so here do we just want to be able to sign in right so let's go back here and let's write another root so just going to delete this for now and let's work on signing in so for this I'm going to do app post and let's do login just like that it's going to be an asyn function I'm going to do request response just like so once again let's go ahead and do const client equals new mon go client I'm going to pass through the URI const email and then let's do password CU that is important so I'm going to get that from the body so Rec body we're going to try something and we're going to catch any errors we're going to console error the error and then finally we're also going to do something and that is the close the connection so we're going to do await client close okay and what we're going to try well we're going to await the connection so await client connect just like so let's define the database once more so client DB and it is localy data now let's define the collection okay so const user as it is and we're going to go into the datab base I'm going to get the collection of users okay and the user what we're going to Define this we're going to await the users we're going to find one I'm going to do it by email as that is our unique identifier now const correct password we're also going to Define test I'm going to await bcrypt and we're going to compare the passwords we're going to pass through the password that we have from the front and so whatever is being passed to the form and whatever the hashed password is that's attached to our user so let's make sure just spell this exactly the same as we did here hash password is going to compare our password to this hash password so that is something that BCP can do again I have a whole tutorial on this so if you're interested please check it out on my channel now if user exists and the correct password exists then we're going to get another token right so we need another tokens token equals and I'm just going to actually copy it from here so let's copy that like so however this time we're just going to pause through the user and the emo okay because we don't need to sanitize it or anything like that CU it's already been sanitized when it went into our database great and then we're just going to do res status 20 one Json we're going to send over the token the user ID which is the user user ID so just like that I'm going to spell it the same way otherwise if that does not work I'm just going to console log out just so you can see in the back end invalid credentials we're not going to send any error messages or show them on the front end it's outside the scope of this tutorial course cool so now let's get up our sign in page so I'm just going to find it now so that we can essentially write the code for this so once again we're going to need reactor use State because we're going to save the email and password so const email set email use State empty string const password set password make sure that is in Brackets like so use State string and then we're going to find the text field so the value of this is going to view well the email unchange we're also going to change this so pass through e and we're going to do set email pass through the E Target value each time it changes and let's just copy this cuz we're going to do the same for the password now so here it is however we're going to do password set password and then set that Target value great so now let's write the function so const login is going to be my function that we go and it's going to be an async function and this is going to be called when we press the button so let's find that button right so wherever we sign up I'm going to do an onclick so here it is so on click log in so now let's define it right here is my login button and all I'm actually going to do is go back to the sign up page and we're just going to copy all of this so everything that's in sign up okay just like so paste it in here and just change a few things so we don't need to really check if the passwords match because of course there's no checking of passwords in here so just get rid of that we're going to prevent this from reloading we're going to await the response from log in this time we're going to make this a post method we're going to pass through email and password we're going to wait the data and then we're going to of course set the cookies the O token and the user ID as well and then we're going to reload the window so let's check if this works first off however we do need an e here as we are preventing the default one other thing we need to do of course is because we use cookies in here is also so import use cookies so let's go ahead and do that here and then of course we need to get this line of code so for when we actually get the cookies and use the cookies and set the cookies so I'm going to paste that in here as well and great let's give this a go so I'm going to go with let's have a look at here let's go with Annie I'm just going to paste in Annie and our password is 1 2 3 and sign in and great so now we are logged in this is looking good and of course we can't see this because you know we're signed up so perhaps we need to do a redirect so perhaps after this has done let's not reload the window I'm just going to navigate to the dashboard okay so let's try this again just going to delete this delete this let's put Annie a test 1 2 3 and then it should take me to the dashboard great and let's do the same for the signup page too okay so instead of reloading the window we just navigate to the dashboard once we are signed in and of course it would be nice to have a log out function as well where you remove the cookies but again I think this is fine for this tutorial it's just a taster of what you can do some other things that I would recommend doing are of course adding a log out button adding this data to the database itself but implementing the filter feature and there's a bunch more but those are my top great so I'm super happy with this I'm just going to clean this up a bit by searching for any console logs I want to keep that one I'm going to keep that one I'm going to keep that one as those are helpers for us otherwise I think I'm quite happy with this I'm just going to format this code a little bit better so format document just like like so I'm going to format the document for this one too because I'm going to commit this to GitHub okay so format document let's format this to so now I'm just going to go ahead and add a DOT get ignore to which I'm going to add EnV as well so do my EMV file and now let's go ahead and commit every changes so yes I'm going to commit it let's add sign up functionality added I can also put log in to be precise click here save and then we're going to pull and push commits okay great so now you will see that un localy app if you refresh that has been added so now let's go ahead and deploy this so I'm just going to head over to netlify okay please feel free to use whatever you wish and I'm going to go ahead and log in going to choose to log in with GitHub I'm going to authorize netlify and let's add a new site so I'm going to import an existing project I'm going to deploy with GitHub and this is just going to essentially give permission to GitHub so I'm going to authoriz netlify and let's search for it so I'm going to go ahead and search for localy and there we go so now that you've found the repository you can then do the next steps in order to deploy this app with netlify you'll have to deploy the front end here and then you also have to deploy the back end separately too in order to do this you will have to read the netfi documentation this is outside the scope of this tutorial so we will leave you with a documentation here in order to go through the next steps and please check out the support forums if you get stuck\n"