Transforming a Design into a Fully Responsive App in an Hour

imagine transforming a stunning design into a fully functional app in just minutes using the power of Ai No More wasted hours writing repetitive template code from scratch instead focus on the exciting and complex logic that brings your projects to life in this video you'll learn how to transform a real estate figma design into a fully responsive and functional application with the help of lockify an AI tool that turns designs into production ready code we'll use nexjs13 in tailoring CSS to create a two-page masterpiece covering search Properties by area latest properties contact Section and a full properties list with pagination and filter layouts and all of that of course is completely responsive the true magic lies in our secret weapon AI AI tools are built to support developers to ship websites faster and not to compete with you with AI you can seamlessly convert Your Design into production ready code effortlessly switch between JavaScript and typescript adapt to your preferred styling framework such as Tailwind CSS modules material UI or and design and if you ever need to switch libraries you can transition between react nextgs View and even react native in a single click and the best part you'll be up and running in no time I'll personally walk you through the step-by-step process of using AI to set up your project and automatically break it into reusable components once AI generates your code you can sync it to a new GitHub repository or export it as a zip file that's going to allow you to use what AI provided and then add as many additional features as you want and deploying your Masterpiece to platforms like netlify or oversell it's simpler than ever hey it almost sounds too good to be true right are we going to use a no code tool absolutely not it's a low code tool built to support developers to ship apps faster and to prove this point we'll take our app a step further and integrate Super Bass to dynamically fetch the list of properties just imagine the endless possibilities now you may be wondering what prerequisites do I need to get started the answer is simple nothing not at all we provide all the tools that you need and everything is completely free to use together we'll start from scratch and I'll guide you every step of the way towards success so get ready for a transformative Journey that will not only enhance your skills as a developer but also impress potential employers with a remarkable project in your portfolio the power of AI is at your fingertips waiting to unlock your true potential with that said let's dive right into the project foreign [Music] this time we won't start from our Visual Studio code rather we're going to start straight from the figma design so in the description down below you can find a link to this design and you can open it up on your screen just so we are on the same page once you do that you'll have to duplicate this design to your drafts by clicking this arrow on top and then duplicate once you do that you should be able to see the same screen as before but now with edit access which means that you can install some plugins so simply right click right here in the screen go to plugins find more plugins and then search for lockify you'll be able to see a lookify free beta and simply click run this is going to open up a new small window on top of your design asking you to connect your local fi account then you can create an account and once you register you'll have to answer a couple of questions which is going to take less than a minute and then you'll be connected which means that now your figma and localfi accounts are connected so let's simply head back to our figma design and start using the plugin inside of here you'll now see a different screen you'll first be able to go through a series of explanation videos where you can learn what lookify is all about but thankfully you're watching this video right now so you don't have to go through those so simply click got it here you can select your project in case you created one at the start that's fine but we're going to create a new one soon here you'll be able to follow the steps in total we have about seven to eight steps to finalize our application the first step is to optimize the design then we'll be able to tag some elements in step 2. in step 3 you'll be able to edit the styling and the layout in Step 4 we can add some actions to make things work then we'll be able to view our live Prototype at all times and even export the code from the local file Builder so let's get started first we'll need to create a new project in this case I'm going to call it JSM real estate and I'm going to choose a framework next.js then immediately you can choose from a lot of options regarding your project you can choose between typescript and JavaScript for now I'm going to select JavaScript to show you how easy it is later on to switch back to typescript you can choose the styling method in this case we're going to use Tailwind but CSS modules style components and even CSS and JS is also supported you can choose your preferred units I'm going to use pixels and Kebab case and we can click create and finally we are ready to start going through these local five steps so let's click fix on the optimize design step here immediately you can choose between two frames because this design contains two pages as you might have seen once you first opened it up so let's go with the first page first click optimize here it's going to immediately show you some optimizations for the figma design which is great right out of the box the design structure is good but then we'll have to apply the auto layout so in this case we have two options for responsiveness so let's go ahead and view what those do let's click viewfix options and this is pretty cool so we can move this local fi plugin to the right side and we can explore what's happening with the design so here they are applying a fill container to all the children elements so if I click it you can see how it applies it to some of the elements on the page specifically on the header but if we try it out a bit you can notice it's great for mobile devices but if you expand it it doesn't really fit to the rest of the screen which is how it should be on the design so in this case unfortunately we won't use the fill container because we prefer it right out of the box so we can click back then we have the properties row and here it's going to suggest to fix this little row by applying the space between or applying the fill container but we can notice that both options don't really work because there's some weird spacing happening right here so I prefer to keep it as it is just like this so for now we can click back so in this case everything looks good so we can click done with this screen we can now do the same thing for the other page click optimize and here it gives us some options for the cards but again if you try it out you're going to see that it loses some spacing between the top and the bottom of the card which we need to have so it's not ideal I prefer it to keep it as it is so once again I'm gonna go back and click done with this screen and that finalizes both of the screens which means that we can say done fixing designs which essentially means that we're done with the first step because the design was already optimized to its maximum that means that now we can move to the Second Step which is tagging interactive elements everything in figma is just a rectangle with some text within it if you look at this button right here it's not really a button even though it might look like that so if you open it up you can see that it is just some kind of tabs container and then here this is a rectangle with a text of rent but it's not really a button and figma cannot know that it is so by tagging interactive elements we can give them some meaning so let's click tag and here you'll be able to do a couple of things you can use auto tag which is going to provide you with tagging suggestions which you can approve or we can do manual tagging let's give it a shot with auto tag and see what it figures out AI is 100 sure that this button is a match so we're gonna definitely accept this then it asks you to select a UI library in this case we don't need any you can even add some additional attributes or basic attributes to this button but in this case we can simply click done the sale is also a button so I'm going to accept that in the sale you can also choose a UI library and you can even Select A variation of that button in this case I'm simply going to go back to none and then Mark it as done and then you can go through a couple of these we can accept another button and tag all the elements for example these images the share images are not really inputs so this here is a mistake but of course as with AI nothing is 100 sure so we can accept only those that we manually believe are true and that are correctly tagged this is the beauty of AI because people think it's going to replace developers well not yet it is just here to help us make faster decision and have all of these odd attacked so now we can go back to home and then go back to the Second Step we'll have to still manually tag a couple of things so let's do that right away first you need to select a frame that we want to tag for example let's go for this search button I'm not sure if we selected it before you have to go a couple of levers deep and yes we or the auto selected it as a button that's great now let's check how these drop down elements so I'm going to select select your city and you can see that it is a drop down that already has some values added right here which is pretty cool this is an interactive preview so if I right here go and choose that this is an and design drop down you can even change the style of that drop down it can look like this or you can be a basic link then what you can also do is see the preview live and even add some options such as New York let's do Los Angeles as well and now if you hover over it believe it or not you can see the output of the code live this is pretty cool not only that I'm going to show you something on a bigger design right here Properties by area so let's select Centerville right here you can not only select it as a button but as a link that's going to point to a specific page and then you can point it to a different page with a different URL even or just automatically link to a different figma page such as this one so for example once we click on this in the code later on it's going to immediately know that this is going to point to that other page which is pretty cool not only that now we can preview the entire thing in this huge window so keep in mind here we had only the design right but this right here is not the design this is the actual Live code as you can see it is responsive well we're going to make it more responsive later on but this is the real code if you hover over it you can see the actual drop down and you can also click on this link which is going to point you to the different page this is huge because you have a live testable application that you can test how it behaves on different devices right here within your figma without doing any code how cool is that now we can close this by clicking back to home and we can go back to tag and then you can keep tagging other things but of course we have to close the preview to be able to tag them so now of course you can repeat the procedure for everything else you can link all of these cards to different pages just a point there and then it's going to immediately work within your code so let's select card three let's go ahead and select it as a link and then link to a page and I think you get the gist right you have the ability to tag different things to do different stuff so this is going to be a link and finally the last one a link going to the same page now you can also go through these properties by area and you have these read more buttons so if you go all the way down to it it's currently just a text element but you can make it into a button that's going to have a no UI library and that is it so you turned it from a text element from A P tag to a button and you can repeat this for every single other read more and I hope you get the point of it right it is incredibly intuitive you just go through different things and tag things manually but of course as AI advances the AI Auto tagging feature is going to be so much better so it will be able to do most of these things for you automatically now of course if we want our app to work fully you'll have to link these two to do something I think this button got already linked automatically yep that's correct and then same thing for these buttons and finally the contact form so let's see how we can tag a specific input let's go all the way to the first name and currently it's just an element so let's go ahead and turn it into an input let's select none and you'll see a configuration for the name ID value Etc you can select type of text you can select 100 as the max length and 2 as the Min length and you can check the required box it is as simple as that and now if you click preview again we're going to get this huge window and it's going to preview the actual field so if you go here you can now start typing and I do believe it's going to be required right now the submit button is not doing anything but later on we can hook it up and in the live preview you should already see first name is required so now let's close the preview and let's repeat the procedure for other fields as well I mark this as down and yeah this is now a live input we can repeat the procedure for last name it's also going to be an input we're going to make it required and click done we can now go to the email and tag we have to go all the way to the email field and then Mark it as an input none type email required as well click done and finally comments or questions is also an input but rather this is a text area so we can select the text area and we can do rows 10. it's also going to be required finally we can tag the submit button so right here it is already tagged as I can see as a submit button so now if we preview this entire form as I told you we should be able to see exactly what it's going to look like on the finished website so here if I click submit it's not doing anything it's going to look exactly as it does on the finished website so you can start typing something and that's it of course you cannot submit it yet but this is it it's pretty cool to see that you can test your inputs live in here and also see how it behaves on different screen sizes let's close the preview and with this we're pretty much done with tagging the elements on the first page there might be a couple of things we need to tag on the second page so right here we can tag this default order so let's go to tag select the default order and this is going to be a drop down and I think it already has some values in it if not you can simply add them right here separated by commas great we can mark this as done and now everything is set to move to the next step step one and two are done one thing we can do to just really mark them as done is go back into step one go into a page and just ensure to Mark the step as dismissed so if you go to the page one and click optimize you can select these two options that it recommends and then simply click ignore this is going to let locify know that we've seen these options but we don't necessarily need them right now and you can click done and repeat that for the second page as well and click done fixing design now we are on step three which is editing styling and layout and here you'll be able to customize different media queries and States like adding hover effects and configure Styles based on certain breakpoints to make your design responsive so let's click edit and as you can see you have different options to choose from and you can add specific styles to specific elements based on those options so what we can do is we can go back to latest properties for rent right here which is right here you can select this entire container and you can click preview in the preview you can see that the cards are overflowing so they're not appearing nicely in the screen on smaller devices that's not responsive but it's also not a problem so what we can do is we can select this complete frame by exiting the preview we might need to select the container where the cards are so that means this one right here once you select this container you can go right here to where it says fixed on top right and then move it to fill container if you click that and then go back to preview you'll be able to see how that interacts with the code so now we go back to the latest properties and check this out it's actually moving them and because of the figma properties they are appearing nicely one below another even to complete mobile responsiveness great so we can close the preview and we're done with this next we have to fix our nav bar so if we go right here you can notice that now we have both the links as well as the hamburger menu which you don't want to have right you want to have the hamburger just on mobile devices so what we can do is you can select the hamburger icon go all the way to it and then you can simply hide it on devices larger than 1 200 pixels and then on desktop and smaller you can simply go to show okay so now if we click done and if you go to preview you should be able to see that now we cannot see it but if we just go smaller you can see it appear right here but now we don't want to see both the hamburger as well as the links so now let's target these links which is the navigation right and then only the links within it and then go to edit styling and layout and this time it's going to be opposite so for large devices we want to keep it showing but for desktop and lower we want to Simply hide the links so you can click done you can go to preview and now on large devices we only see the links but if you go to a smaller desktop or tablet or a phone you can only see the hamburger menu this is pretty cool that you can test it right here within your figma that's great so now let's close the preview and in this step we now have been messing with the layout but we can also focus on changing the styling so let's click edit and let's select the search button this one right here go all the way down to it there we go and you can change different normal hover pressed or disabled States as well so let's click so let's select hover and go to The Styling section so here we have displays layouts flex and then we have the styling options so in this case we can change the design from something like 4a60a1 to something like 404 f7b it's just a different shade of blue you can do the same thing for all the other buttons but also for all the other elements depending on different states such as the screen size hover disabled and so on now the cool thing is that you can immediately preview those changes because this is not only the design I have to keep repeating myself because this is so cool it's the actual code so now if you hover over it you can see it actually works and just to remind you these links that we've done before actually work as well so they navigate you to different pages pretty cool stuff I'm gonna close the preview and with that we have done our step three of course you're free to keep playing with it keep testing it out keep changing the responsiveness even more and changing different styling elements of different buttons you're here to learn how easily you can generate all of this code using lockify as a final test I guess we can do one final preview switch to a mobile device and just see if everything is looking good so here everything falls nicely in one line remember these cards we fixed them before this is looking good and yep that is it everything is completely mobile responsive right out of the box wonderful now let's check the same thing for the second page just to be 100 sure so I'm gonna go all the way up click on a card and now switch to a mobile device and here as well everything is looking great that means that we are done with step 3 and we can move to step four which is adding actions so now that your designs are responsive and styled you can move to this step where you'll be adding click actions such as open URLs changing pages and so much more so in this case you can click on a specific search button and then you can make it do something like change a page scroll into view open a pop-up or even open an external URL in this case we won't be adding many actions but just so you know that's possible as well now step five is for once we are done with the design portion of our file it's time to move away from figma to local file Builder so once you're happy with all of the previews you want to sync the design to lookify Builder to view it as code I'm sure you're interested in seeing how that's going to look like so simply click sync and that's going to sync different pages to your project that we created before and allow you to do many different things such as create reusable components Define props add scripts and meta tags use the preview mode or even exported sync it with GitHub and deploy it so let's go to Old frames and let's simply click view code in Builder the syncing process is going to take about a minute so simply pause this video and let's continue when it's done finally you'll see this view code in Builder button so let's click it and check it out okay let's take a tour of local 5's Builder together first we have our project and team collaboration on top then right here we have the file explorer on the left side after that we have our layers which are the same layers that we've seen in figma and finally we have GitHub where you can connect and push your projects to GitHub then in the middle we have our design viewer and Screen tabs so you can move between different screens in the bottom you can view your code both the next JS code and the CSS code and there is our sixth step we had seven or eight steps with the export and we were left at step five if I'm not mistaken so now we are moving back to step six but this time within local fights Builder step 7 is to configure the code and step 8 is to sync export or deploy it so let's get started together our steps are on the right hand side and we can collapse all of the steps in the Local 5 plugin and move to the step 6 which is to make components so right here we can click create and immediately AI found 13 different components so let's click review as you can see it immediately and correctly recognized that this top component is a header so we can accept all two instances of the header then we have the address card and we can change its component name to property card and click accept 12 instances then we have a raised container which actually is just a footer as you can see right here even though it recognized it correctly it didn't know what to call it so we can rename it to footer and click accept two instances we have the Centerville link right here and that's going to be an area card so we can call it area card because it shows different locations we have the home container which is going to be the info card so we can rename it to info card then we have the Washington container which is going to be the property rent card we also have the address container which is going to be the properties grid container we have the home finder container which we can rename simply to Hero because it's the hero section the first thing that the user sees we have the Area Properties div and we can rename this to areas container or area container and then we have Area Property container which is going to be area feature card container or even simpler feature container we have the rent properties container which is great and the rent properties form which we can accept and finally the form so we can call this contact and click accept and with that we have accepted all the components which means that the step 6 is now done from the layer panel you can select one of these components and immediately you can see the top header component which now includes the code of the header and you can see it highlighted right here on the landing page same thing for the hero you can immediately see that it is its own hero.js component one thing that we can do is also create components on our own so you can select one of the cards and then simply turn that into a component it's not a component already which is a pretty cool thing immediately separating different parts of the code right here through this interface and for this component specifically as well as all the other components that have props within them right here on the bottom right you can see the prop section this component has the pro background image padding and box sizing but this just lets you know that you can add as many props as you want right here within local file Builder definitely a great thing to know for the future because you can instantly shape the way your components take in data but now that we have some of the components created for us right here and all of this is looking great we have different section and the code it's time to go to step 7 which is to configure the code a bit so let's click configure and here you can enter the title tag in this case we can go real estate you can enter The Meta description we can say something like this cover your perfect home project settings can be between typescript and JavaScript so let me show you how simple it is to switch it between the two I'm going to pull this a bit up and here we have JavaScript code and if I click typescript and I click save check this out immediately it converts it into typescript this one was simple though right so let's go back to JavaScript and let's try to find some components that have some actual code that we can use such as this use callback one in the hero section so let's click typescript and click save as you can notice immediately it turned everything into typescript this one has a bit of code but maybe not too much code so let's try to find some more interesting ones let's see yeah definitely it's going to be the contact Section so in the contact we have all of these inputs so what we can do is we can turn this into typescript and click save and in just a couple of seconds immediately it turns this component into typescript and if you had some actual values and states for these fields it would convert all of that code into typescript with one single click for now I'm gonna bring it back to JavaScript you can also modify the styling between tailwind and immediately move it to for example let's do style components so if you do that check this out it automatically creates all of these components for us or this tasks for them and we can move back to Tailwind with one single click that's crazy from here you can also uncheck the memoize on click and click save of course feel free to play with these options if you want and with that we're now done with step 6 and 7 and we are ready to export our code in this video we're going to sync our code with GitHub this is going to allow us to clone the repo and run it locally on our machine so let's choose the sync project option and it's going to ask you to connect it to GitHub you can then log in once you're in you can authorize it and click install and authorize the second step is to either create a new repo or choose an existing one in this case we can create a new one let's type a repo name something like real estate underscore lookify and you can click confirm repo and branch now this is a pretty cool thing on the left side you can see your GitHub code and there's nothing there yet but on the right side you can see your code within local fight Builder so let's simply click push to GitHub this process could take a couple of minutes especially for the first time so pause this video and I'll be right back and there we go our project has been pushed to GitHub later on we can also look into the smart merging functionalities where you can immediately resolve conflicts between local file Builder and your GitHub repo to always be up to date but for now let's go to repository and as you can see the repo in that is there and it is a next js13 application that has the pages folder and within it it has two pages the app.js which is the home page as well as the landing page and within it believe it or not we have our code exactly as how you would write it with the import over global CSS and then if we go back we have all of our components that were created for us by lookify that's pretty cool I mean immediately having the header code right here using your preferred styling method in this case Tailwind is pretty cool it simplifies the process significantly although this is just a front-end so now that we have this repo we can clone it run it on our machine and then continue building it and continue adding additional features so let's do that right away to clone your repo simply click this green code button and then you can either open it with GitHub desktop or simply copy this https clone link once you do that create a new empty folder on your desktop and let's call it something like real estate and we can then drag and drop it into our empty Visual Studio code once you're in there you can go to view and then terminal inside of here we'll want to clone it so we can say get clone and then paste the URL that you just copied from GitHub press enter and you can see it's going to say cloning into real estate lockify and we are there and now we just need to CD into it so CD release date locify just like so and you can see that we now have a folder and within that folder we have all the files if you want to have a cleaner file tree simply right click real estate locify click reveal in file explorer and then simply drag and drop it within your Visual Studio code this is going to open it as a separate folder and there we go we already explored our code a bit but as you can see this is a complete nextgs application it even has proper Tailwind config that allows us to extend different colors font families board radiuses and more and this is exactly how I would write this code which is one thing that local fight does really well it doesn't just return randomly generated AI code it really tries to achieve that developer look exactly as how we would develop it ourselves so the file and folder structure is proper with all the icons and images the pages folder is here with two pages the CSS file and then finally the components folder so with that said let's try to run our application and see if we can actually run it on localhost 3000 so let's open up the terminal and then run mpm I to install all the dependencies which are within package.json in this case we won't have many we're using and design and design icons but of course you can use any other preferred library of choice and of course there is next and react so let's wait until the dependencies get installed and then we can run it finally run npm run Dev this is going to start up our application on localhost 3000 and then simply control click the localhost link and there we go our app is here now you can notice that right now even though we're on the localhost 3000 which is the root route we can see the properties and not the home page so if we go back to the code we'll just have to exchange those too as you can see the landing page is marked as landing-page.js which is the actual home page but then the index.js which is the properties folder is right here marked as index so we have to exchange these two and of course we'll have to make some modifications to ensure that the linking between the two works but for now let's simply rename the landing page or rather just copy its name and rename it to a the index is going to be renamed to landing page.js and then the a is going to be renamed back to index that way on the home page we now have the actual home which is great and we can navigate using the URL bar so if we go to forward slash Landing Dash page we should be able to see our properties which of course is not the best name for this page yet but don't worry we're going to focus on fixing all of that together the most important part right now is that we can actually see that the page 2 as well as the page one right here and look as good as ever this is great and keep in mind all of this code was generated by AI but what we're going to do right now is we're going to go through the code base a bit and try to fix it try to understand how these components were created and maybe we can create some even more reusable components so let's put the browser side by side by the editor and let's check it out there we go first let's focus on fixing up our index.js I'm going to zoom it out just a bit so everything fits and you can see that we're importing a lot of these different components which is good then we have our landing page with a head where we have the title of real estate and even a meta description of discover your perfect home exactly as we put it within the local file Builder now in this case you're gonna notice that the majority of classes look great they wrap our entire application such as relative BG gray white Flex Flex call and so on but this one stands out a bit adding a height of 5000 pixels I don't think that's necessary so we can kind of just remove it and everything is still going to look great you have to keep in mind this is AI generated so in some cases we will have to clean some of these things up another thing is that you can see that we're passing all of these props to our footer and these props are basically just links or strings so there isn't really a reason why we need to pass them there we can simply remove all of these props and then move into our footer get rid of them here from props and simply fix the styles to use the strings within it there's no reason to pass them as props so in this case we also don't need this footer section style which was created for us we just need a regular footer that's going to return something so let's see how we can improve those Styles a bit first we have this style object which we don't need then we also have things such as on medium devices self-stretch which we don't need on medium devices Gap 0 as well other than that this should be good now we're going to notice that it's going to complain about all of these image IDs and that's fine we're going to add them soon enough just by going through the code now in this footer tag right here we also don't need on small devices Flex unset which is going to be right here and we also don't need self-stretch these are some styles that were added but aren't going to change the look and feel of the website on this div we don't have to specify the height of 300 pixels and the rest of the Styles we're going to modify later on once we actually fix those sources so let's fix our first source which is right here image IDs this is going to be an image that's going to have a class name of 11 11. we don't need relative here and we're going to have a source equal to that's going to be just a string that's going to point to forward slash house line dot SVG if we save it that's good but you're going to notice that now we have some other issues so let's go to line 38 and let's fix the next SRC small image IDs is going to be just forward slash social Dash media logo.svg and we also don't need relative on this image the next one is going to be on line 45 this is going to be a string of social media logo.svg but it's going to be logo 1 and we have to start to build a forward slash and we can keep this going we have the next one which is going to be forward slash social media logo two dot SVG you already know the drill we're gonna have a social media logo three social media logo for and then we have the features or no I think this is it we have fixed all the props so now if we go back or rather down you can see all of these social media logos appear and we can even add some additional padding or styling or just modify the rest of the Styles so now let's go back all the way to the top of the footer right here and I don't think we need a height on our div within the footer so if I fix it you can notice it's still good for these divs below we can also remove relative we don't want to set a lot of elements to relative positions we just want to keep them as they are on the page um also we can remove almost all instances of self-stretch right here below we don't need that self-stretch property which is essentially a line self stretch and the age and we don't need a specific height right here because that then is going to fix the layout and it's going to provide the regular height also we can remove relative from all the other instances so you can hold ALT key and then select it and remove it below then we have this div right here with a width of 312 pixels which is here and we don't necessarily need it we wanted to take the usual width then we have our social media logos which I do believe look good right out of the box and then we come to our links which are here and in those links we don't need to have this height which is set by default and also we don't need relative on any of these links so if we fix it it's still gonna look good same thing for the links below we don't need those Heights that are set in stone we want our app to be dynamic and we can also remove relative from other places right here there we go same thing for the last one we can remove the height to make it Dynamic and then remove all instances of relative so this was a bit of a cleanup and we also don't need a self-stretch here as you might know so yeah as I said this was a bit of a cleanup but as you can see this is looking great and now if you want to go ahead and modify this even further such as changing these into anchor tags and adding ahrefs that is great you can do that or change them to Native nextgs links that's great but we do have the layout for the footer which is looking good on all devices and that's all that matters I notice I'm also zoomed out a bit so if we reset it's looking great and we can go back to the tablet view right here wonderful the reason why I was zoomed out is to still be able to see the regular screen view on this specific width so yeah this is great I hope you can get the point of this all of this code was generated by AI which is great but of course AI is not going to be an all-in-one Solution that's going to replace developers that's never going to be the case you will have to go through the code and modify it a bit to make it your own and to actually make these links work and to add additional functionalities of course we could have made these links work before if you wanted to immediately from the local fi plugin on figma by simply tagging them and adding links and functionalities to them but in this case this is good enough for now so now we can close the footer and with that take a look at how clean our homepage looks we have the head we have the div which wraps everything and then we have all of the different sections of our home page this is great now let's go to our second page which is the landing page right now which is not the proper name for it it's actually going to be the properties page so let's rename it to properties.js and let's see if we can improve it somehow first of all the AI thought it needs a lot of icons but in this case it really does not so we can remove all of these unused Imports there we go that's looking much cleaner and it looks like we don't need a button from ad design either the only thing that we have is just a couple of imports the header the properties grid and the footer as the last time in the footer we don't need to pass all of those props because we're using them within it and this is more or less it we can go ahead and check out the properties page right here it's looking great right off the bat but let's see if we can improve some styling and make it even simpler and better to understand for us as developers later on we're going to implement additional functionalities here such as fetching the data from Super Bass and that's the main point I want to emphasize lockify which is a local tool has never meant to replace developers a lot of these AI tools say hey it's done for web developers you can create simple landing pages using other tools right but that's not the case and it never will be because with locofi you can generate the pages but then you can come back to the code and as a professional developer you can Implement additional features so later down the line in this video I'm gonna teach you how to fetch all of this data from Super Bass with that said let's focus on simplifying some styling right here as before we won't need relative right here then below the header we're gonna update the BG top to Simply BG top like this if we save it it didn't really make a big difference but this is the right back on position top and this right here isn't then we can remove the relative right here from properties as well as right here from this div if we save it everything is going to be the same so let's move to this larger class name in this div and here we can remove self stretch we can also remove padding x0 it doesn't make sense to add it intentionally and then we can update the LG padding left to 120 pixels we can also remove the large box border and we can remove all of these MD properties as well as the small ones so it's just going to be like this at the end and you can notice that this didn't really make any difference if we expand it it's looking great and if we go to mobile it's looking great as well in this case we can remove this with we don't want to have specific widths we want to have the width to be kind of modifiable and that it naturally connects to your browser's web here an interesting thing is we can add a flex wrap in this second div right here that's going to allow us to wrap the elements within it so it's going to be Flex wrap which is going to make it even more responsive in this cases we can remove the relative for these images same as for the sort and here we have drop down this drop down is using overlay which is deprecated but thankfully as developers we know how to update it even Visual Studio code tells us to use the menu right here so what we can do is we don't have to have a view that looks like this we can remove everything within the drop down just keep the placement and the trigger but what we can do is we can say menu is equal to and then items is equal to default order and this is something that we're going to create right here at the top so right here even above the component we can say cons default order is equal to and for starters we can leave it as an empty array later on we can modify the default order based on the different parameters within it or you know what we can immediately add for now we can leave the default order empty and later on we'll be able to switch it based on different properties such as popular properties latest Properties or even recommended properties but for now it's the most important that we have those drop down that we have that drop down working in the new updated way below that we have our properties grid container to which later on we're going to pass Dynamic properties which is pretty cool and then this is a pretty cool where we have all of this pagination at the bottom you can see one two three and so on right and these are just basic buttons that say Arrow one two three four five six and so on right this doesn't really work so what we want to do is we want to remove all of these properties so that's going to be all the way from this div everything from within this div that is below properties grid container so we can select it and go all the way down to here there we go because this was just static data we want to remove that pagination and later on we're going to implement our own pagination in this case specifically we're going to use pagination from and design so we can scroll all the way to the top and we can import pagination from Ant d there we go and we can scroll down and we can simply use it imagination as a self-closing component we can set the default current to be equal to one and we can also set the total to be 50. now if we save this you can see we have a new pagination and later on we can make it functional great so now we've modified all of the styles from our properties page and we've removed some of the static data that we have and right away we can focus on fetching Dynamic data from Super Bass that's going to allow you to really see the power of lockify because you have this layout generated for you incredibly quickly and then you can dive right into the code and focus on what matters which is implementing logic and functionality so with that said let's get started to get started adding functionality to our great UI you can go to superbass.com Super Bass is an open source Firebase alternative where it allows you to quickly start your projects with a postgres database even adding authentication instant apis and more but primarily we're going to use it for database and storage in this case so visit database and sign up or sign in if you need to and then click Start your project sign in and once you're here create a new project let's call it something like lockify real estate then choose your database password and of course remember it choose the region and stay at the free pricing plan and click create your new project the project is being set up as we speak and they are provisioning our database for us in the meantime you don't have to visit the documentation because I'm going to show you everything you need to know to get started this process should take about two minutes so feel free to pause this video and I'll be right back after refreshing we are welcomed to our new project and we can get started by building out our database let's choose table editor and let's create a new table we can name it properties essentially meaning real estate properties and we can disable the RLS security just to simplify things to allow us to access the database even simpler inside of here we can add new columns we're going to keep the ID and created ad but we're going to also add a new column with a name of name and a type of text and another one with an image and this image is going to be of a type text as well or maybe they have a URL now we can go for text and finally we're going to add a price the price is going to be an INT 8 which is assigned 8 byte integer and we can click save now let's get some real estate properties into our table you can go to insert and then click import data from CSV in the GitHub just down below you'll be able to find a CSV file that's going to contain all of the demo properties that we're going to add so just go there copy it and paste it right here as you can see this is going to import seven different properties and finally we can click import data immediately seven rows are going to be added to our properties and we'll be able to utilize them from within our application the next thing we have to do is install super bass so stop the terminal from running by pressing Ctrl C and then y then clear it and run npm install add Super Bass forward slash Super Bass Dash JS and this took less than a few seconds so now we can rerun our application and collapse the terminal so let's see how we can get this data from the database into our application using Super Bass we first have to import right here at the top a create client which is coming from at Super Bass forward slash Superbass Dash JS then we can use it by saying const client it's equal to create client and we need to pass two different things the super base URL and the super bass key so let's see where we can get those from within our application we can go to our project settings API and then here is our project URL so we don't want to Simply put it here but rather we want to put it to our environment variables so let's create a new DOT EnV file and there we can say next underscore public underscore URL and that's going to be equal to this URL and we can also do a similar thing for the key by saying next underscore public underscore key and we can copy it from here and then paste it there now we can go back and we can use those environment variables by saying process dot EnV dot next underscore public underscore URL comma process.env dot next underscore public underscore key of course these relate to the Super Bass URL and the key now that we have the client we can actually fetch the properties and we can do that by creating a new use effect hook so let's say use effect and we want to of course give it a callback function that is right here as well as a dependency array we're going to fetch it only at the start and there we can create a new function called const Fetch properties which is an async function like so from within it we want to say const result is equal to a weight client Dot from properties and then we can do dot select which is going to be everything as simple as that and then we can create a new use State field where we can call it properties and set properties at the start equal to an empty array finally we can say set properties is equal to result dot data and then below we can immediately call the fetch properties right within our use effect okay and the last thing we have to do is actually use those properties from within our code so to do that we can go all the way here to our properties grid container and to it we can pass all properties prop which is equal to properties and later on within the properties grid container we'll be able to replace the dummy data with the new data so right now let's see I think we have to import the use effect from react so let's do that we can say import use effect from react and if we save it and go back we can see that the U state is also not imported so let's import use State alongside use effect and we are back so as you can see now we still have the dummy data but we can go all the way down to our properties grid container and start modifying this component to use the real data because we're passing it as all properties coming directly through props so let's focus on that next we can expand this just a bit so everything fits in one line nicely there we go and we can focus on implementing the layout as you can see currently we're using one two three four five six seven eight different cards and they're all simply repetitively typed right here but we want to delete all of that so let's simply delete them and in here we're going to map through all of our properties so we can say all properties dot map where we're going to get each individual property and then we're going to instantly return something and that's something is going to be a property card component a self-closing component that's going to accept a key equal to property dot ID then it's going to accept an image URL equal to property dot image just like so then a name equal to property.name and finally a price equal to property dot price great now if we save this of course you'll be able to see one two three four five six seven different properties exactly how many we have in our table which means that everything is properly being fetched and our connection to Super Bass is done in the right way but now our next task is going to be to modify our properties grid and then to modify the card to properly show the data so in this case we can look into our inner div and we can change the Gap 8 to 12 to give it some more space and we can also add a PX meaning padding horizontal of 2.5 that's going to just make it fit more nicely on larger devices if we Zoom it in Yep this is our card and now we are ready to dive into the property card component and see what we can do with it in this case we don't need any of these properties that we are accepting here we just need the new props that we are going to pass which is going to be the image URL the name and the price we also don't need to use the use memo and we can remove the card 1 Style now inside of here if we save it we're of course going to get an error because we don't have this card style and all the data is static but we want to show the dynamic data right now so let's first fix all the errors and we're going to start from top to bottom on fixing the styles first I'm going to remove this card one style as we don't need it then we also have some image Dimensions which are in line 9. this here is going to be the IMG URL we're passing through props next we have image Dimensions ID on line 26. if I'm not mistaken this whole div of different images is just for different amenities such as for bathrooms the square footage and so on so I think the first one is simply going to be an image of a car so right here we can do forward slash car.svg and we can remove the self stretch from this div as well as the relative from the image then we're going to have the image Dimensions IDs 2 which is going to be bathtub so again just a string that's going to say bath tub dot SVG and again we can remove relative then we have image Dimension values which is going to be arrows out like this indicating square footage we can remove the relative then we're going to have our image Dimension values 2 which is going to be forward slash ellipse dash 1 at 2x dot PNG so this is just going to be a specific user icon and of course you don't have to know these values by heart as I do right now you can simply visit your icons you can see the design and figure out which icons do you need to add here okay we can also remove relative and then for the next one image Dimension pairs it's going to be forward slash share Network dot SVG we can remove relative and then we have two more image Dimensions pair ID which is going to be simply a heart icon so forward slash heart dot SVG and then also the last one is going to be forward slash plus that SVG and we can move relative from both there we go now if we save this we have one more which is arrows out let's try to find where that is there we go here on square footage it was supposed to be a string of forward slash arrows out dot SVG and now if we save it hopefully it's going to become clear what I meant we have the price we have the car we have the bathtub and the square footage and then the links for the share like an ad there we go and now the good thing is these are the properties that are coming straight from Super Bass so we can expand that just a bit so we can see two in a row and this is looking magnificent this time with the data that's coming from a dynamically fetched location or a database in the same UI that was generated for us from the design isn't that great wonderful so with that said the properties page at least the fetching of the data is more or less done but of course you can add so many additional features to it so I'm gonna go back out of the property card and property container and here we said we're going to add some features for the default order so at the top on the default view we can create a couple of objects the first one having a key of A String of one and a label equal to a anchor tag that's going to say popular properties and we're gonna also give it a non-click that's going to have an event and then it's going to say e dot prevent default because we don't want it to reload the page once we click it we can duplicate this two more times one two change the keys to two and three and then it's going to be latest properties as well as recommended properties if we save that and if we now hover you can see all of these values right here of course this part is not fully functional right now I want you to keep working on this project and improve it even further create a new property Details page try it out go to the figma design follow all the best practices and design it and then try to use locify one more time to test everything we went through right now from steps 1 to steps 8 for local fight to generate your property Details page and then you can add it to your code that's the cool part now with that said you can also play with Super Bass a bit to implement different filters or sorts and you can also Implement pagination meaning only return a specific number of elements from Super Bass but other than that we are done with the properties page now let's go into the nav bar a bit by closing all the files and going to components and then navbar or it could be in the header yep and then here we have the Reyes real estate so right here at the top we can import link from next forward slash link we can turn this div wrapping this to a link and we can give it an href equal to forward slash so this is going to always lead us to home so now if we click it we go from properties to home that's pretty cool again you can also add additional functionalities for these properties right here but we can quickly check out how the local file know to immediately add those predefined values so let's search for New York maybe within the code and we can see it right here among values so we have a drop down that has values of New York and Los Angeles and this was created for us by just adding different values within figma plugin that's pretty cool of course you can modify all of these things and in some cases you won't need many of these icons that you can see so as I said AI is here to be your friend your assistant your co-pilot and it's here to optimize your workflow and it did that significantly because we now have a complete design and you can focus just on adding the functionality just so we can move to the second page as well let's make this rent button navigate to all properties so that's going to be in the hero and right here we can change the router.push you can see they already created the router that pushed for us and it's going to go to properties so if we save it and click not rent by rather search it navigates the properties you can go back and all of this is using the latest and greatest of what next.js13 has to offer now let me show you one additional Improvement that we can make if you close all of these files and go back to pages index.js on the home page remember there we're also displaying a list of properties which are these ones right here and that's going to be under rent properties container if I'm not mistaken here right now you can see that we are again going over all of these cards which is not what we want to do now one additional Improvement that we can do is close all of these files and go to pages index.js and then within rent properties container we don't have to pass all of these props to these cards anymore you can do two things you can display the dynamic properties like we did on the properties page or at least you can just pass the real props so first of all we can remove all of these props beside image Dimensions from all of these cards just to clean it up a bit we have four cards right here we can rename the image Dimensions to Simply IMG URL and immediately that should show us the image and finally we can now select these empty spaces on all of these four cards and add two additional properties such as name which is equal to let's do something like 92 allium Place let's do Orlando Florida something like that doesn't really matter and then finally you can pass the price as well which can be something like 590 632. and we can replace the dot with a comma Now if we save this you can see all of these values that works correctly and there we go now we're passing all of those values correctly but we are yet to update the actual card I think you can notice that the address as well as the price are still hard coded So within here we can replace the price with simply the price coming from props and we can replace the entire address with simply the address or I believe it's actually going to be name not address so let me see if I passed it correctly yep it's going to be name and we can save it and now you can see the new values right here the Orlando and you can of course make this data Dynamic you can do absolutely whatever you want with it this load more listing can easily point to the properties card so you can easily turn this into a nexgs link and give it an ahref of forward slash properties great I think by this point you can completely understand what local fi is all about it is about increasing your speed it's not replacing you as a developer it's just giving you the entire design from figma right in the code and then you can make things work so as I said please include these locations make these work Implement pagination for all of these properties Implement sorting and filtering heck even make this hamburger menu work the goal here is to take what has been given to you by lookify for this specific design and then improve it and it doesn't have to work for this design only the point is you can create a design or get a design from a designer and significantly speed up your workflow with that said the next logical step is to push all of the code that we have updated you can see about 12 files changed and then see how we can deploy it so one thing I want to do is first of all add the dot EnV to git ignore we definitely don't want to push the EnV file so we can say EnV and add it to here and now we can simply push it where's the changes by running the get add dot get commit Dash M we can say make changes and then get push this is going to push it to our repo now before we officially deploy this project I want to show you something pretty cool and that is how lockify can keep your design and code in sync so here we can go back to our figma design now within the design we can reopen our plugin by going to local five free beta plugin and then we'll want to play with some Styles so let's say that we want to change the color of a button but this can be any kind of change in your design so we want to go to step three edit styling and layout and we want to select a specific element such as this search button right here so we need to go to it and let's say we want to change the color because that's really easily noticeable so we can change it to this green color right here and then click done and you can see the design immediately changed but that makes sense right now we want to sync it to Builder again to show you how it's going to get both the changes from a GitHub but also the changes from the figment design and it's going to keep the two in sync so let's click sync to Builder and let's do all frames and click view code in Builder as before this is going to take some time maybe a bit less than before but you can pause this video and I'll be right back once everything is synced and there we go we can now View and Export our code so let's click view code in Builder and now we can go back to the landing page and you can see that our search button is indeed green which means there has been a change in the design that was recognized but that makes sense right but now what about the code that we have created within our GitHub repository to check that out we can click the step 8 sync export and deploy and then click sync project with GitHub the same as what we have done before now it's going to ask me to reconnect the GitHub one more time there we go we have connected successfully and we can choose between a new repository or an existing one in this case I'm going to go with existing and that's going to be if I'm not mistaken hookify yep real estate underscore logify it might be something different for you and in this case we want to select existing branch and we want to choose the main branch and click confirm repo and branch now as you can see on the left side we'll be able to load all of the code that we have on our GitHub meaning everything we worked so hard on to fix such as this new property card or the updated and simplified index.js and the properties page but on the right side you can see all of the components that have been modified or rather that we modified as well as everything else in this case we care only about two things we care about the hero section because that's what we modified within the design we changed the color of this button right here to Green so now we can select this hero and we can also select tailwind.config.js and we can click resolve conflict even though in this case we just selected the hero and the Tailwind usually the best way to resolve all conflicts is just to click that resolve conflicts for all files button this is the best way to resolve conflicts because it's going to take all the files as developers are sometimes unaware of the change that the designer makes so this is going to make sure that everybody is on the same page I just wanted to let you know this so you know for future projects and there we go now it figured out that before we were pushing to properties grid view but now we're pushing to properties which is the correct change so I'm gonna simply accept the GitHub change and that is it for this file but the most important question is is the button blue or is it green well let's check it out in this case we have the search button that has a BG medium C green and this medium C green I hope is for aa15d so if we go to the Tailwind config we can see medium C green of four aa15d which is correct that means that our hero has the latest changes from GitHub as well as the latest colors from figma this means that we can keep our design and code in sync I don't think I've ever seen that before you always have to have a developer go through the design implement the changes in the code and then have it deployed but now you can do both at the same time we can now complete the merge and push there we go it's pushing the project to GitHub let's give it a couple of minutes and hopefully it goes through and there we go our project has been pushed to GitHub we can go ahead and check out the repository it is all on the main branch we can immediately see that we have our first commit from local file Builder it was for me 20 hours ago because it took a bit of a break of recording but for you it should be a couple of hours ago and then we have the changes that we have pushed from GitHub which was the modifications to the original code and finally we can see that the components were modified just now from The Design This is the button caller that we were talking about which means that everything is working everything is synchronized but now we're gonna start with our last step which is deployment to actually see whether this button is going to be green or blue on our deployed site and whether we'll be able to navigate through to the properties page so to do that let's deploy to one of the three options such as netlify versal and GitHub since we're working with nextgs let's go with our cell lockify allows you to select a starting point when you run your project and for us that's going to be the landing page the deployment option is of course for cell and then we have to add our new token for the Versa account and paste it here the way to get to that account token is by going to your versal dashboard and unfortunately you're gonna see that my personal account was blocked because it just pushed so many projects but thankfully I have the team account where we keep all of the projects from the master class from our courses and everything else so this one is working so to get to your token you just click the top right where your profile is and then you go to settings then you go to tokens and here you can generate a new token so let's create a new token name it's going to be local fi let's select a scope it's going to be my organization and then the expiration date can be whatever you prefer in this case let's do one year and click create you're gonna get a token you can copy it click done go back to lockify Builder paste it here and click save and it seems like this token is invalid it might be saying that because of the organization versus personal account problem that I explained before so I'm gonna paste another one right here and I'm gonna click save and now the token was successfully added for you it should have worked for the first time and now you can select deploy to a new project and click confirm deployment and there we go we're deploying I really like these little animations everything is working so seamlessly I gotta say it's really intuitive I like how they created eight different steps so steps one to five are right within your figma editor and then steps five to eight are within local file builder then you move to code you implement the changes in code and you come back and you deploy it right here immediately so let's give this a couple more minutes to run and then I'll be right back and there we go we are live unfortunately we didn't get any confetti like we do on the Versa website but that could come in the future as well so let's go ahead and click view project and we get this new quite unique URL and you can also see your website it has the changes that they depicted right from the design we can notice that by this green search button but I hope it also has the changes that we've made from within our code base so if we go to forward slash properties well that didn't work but no worries this simply means that the name of the page exported by lookify was adjusted from properties to properties grid view when we were doing the code merge we're gonna fix this later on our newest code right here that we deployed using lookify is still using the version from figma with the addition of the modified search and you can see that by a couple of things this was blue before these buttons like rent and so on pointed to different cards and these cards right here didn't Point anywhere and now they point to properties grid view instead of just forward slash properties so I'm actually really glad this happened because locofi pulled the most recent changes from figma but I want to show you that you still have access to your full code and you can deploy it however you want to so let's go back to our code base Yep this is the one where we have the four slash properties page and let's deploy it to versel manually so from within the code base you can go to your Source control and then sync the changes or on the bottom left you can just pull the latest changes that came in such as this green surge button then you can go to your result dashboard add a new project it's going to be the one from your GitHub repository you can import it here you can also add environment variables which we must not miss because now we're working with real data from Super Bass so let's go to our DOT EnV copy them and then simply paste them right here that's going to add them right off the bat and then we can simply click deploy the reason why I wanted to show you this is because people are scared locking themselves into specific Technologies and I gotta be honest that's for a reason sometimes these Technologies take ownership of your code but in localfice case they just help you develop it they help you simplify and speed up the process of developing boring parts of the website which now ai does for you but the code is under your full ownership as you saw you can deploy directly with them to versel netlify or even better you can export it as a zip or just sync it with your GitHub and then use it within your GitHub code and then do whatever you want with it such as deploying it to your own oversell project right away so let's give it a couple more minutes or it looks like it happened while I was speaking so now we have some nice confetti the project has been deployed to our new domain we have our green search button which which means that the design and the code are fully connected but now if we click it it's going to point us to the properties page it's not properties grid view it's just properties and it has seven of them the exact number that we have within our Super Bass so as I said feel free to add a design for a project Details page implemented go through all the same eight steps for that new page and try to work it out you're gonna see how simple it is if you have a great eye for design this is going to be a tool that's going to significantly speed up your workflow and if you don't just try to find the designer that's going to be helpful in any case to make your projects look better or browse the internet for hundreds of thousands of great figment designs that have already been created and are looking for you to turn them to life and this means that we've reached the end of the video you've successfully transformed the figma design into first of all the non-functional code but then you added the functionality and hooked it up to a Super Bass database that's great of course there are still some parts that can be optimized such as this sorting filtering pagination even the links and stuff like that feel free to play with it and dive deeper into all these functionalities so everything from the design that you can see right here was implemented we had two great Pages there's one recent thing that I want to mention that occurred in the world of design slash development and that is figma's Introduction of the dev mode right here if you press shift d or toggle this on it's going to turn on this development mode and believe it or not locify is supported by figma right here as a part of their Dev mode so you can run it right here within their Dev mode and explore a lot of different things let's see what we can do with it so immediately you have the react settings or nextgs and then you can choose whether you want typescript JavaScript CSS whatever you want it is possible apply it and now preview a specific element let's preview this thing first of all right off the bat it's pretty cool that you can explore the padding in the layout and everything figma gives you that but what locofi gives you or rather lookify in the new Dev mode believe it or not it's all the code from these components immediately so even if you don't want to do everything we've done in this video kind of use local fight to build the entire site you can just hop onto any design whatsoever select a specific element such as this card right here and immediately get its code the TSX the CSS the Tailwind config any other configuration can be JavaScript typescript style components you immediately get the code and you can even optimize it so if you click here you can optimize the design which is the process we've gone through or you can just download the code with one single click in a zip file this I gotta say is pretty cool and I'm really happy that figma first of all is moving towards being more flexible for Developers but at the same time I'm really happy to see you lookify as being one of the first ever officially supported plugins for figma within the dev mode with that said I want to thank lockify not only for sponsoring this video but for creating such a phenomenal tool for designers and developers and I want to thank you for coming to the end of this video and building such a fantastic project and learning more about how developers can produce software faster and better with the help of AI and hopefully you're not asked here as before that AI is going to replace us and if you like this video and hopefully you did because you're watching this right now at the end of this video You're Gonna like even more what we do within the JSM masterclass experience there you can graduate in six months land your dream job with the support of our expert mentors or get a full refund there we're gonna build even more phenomenal projects and the only thing it takes is you can start the admission process take a 10 minute quiz and figure out whether this is for you it's a big difference having these projects in your portfolio than having some generic bootcamp ones so with that said once again thank you so much for watching and have a wonderful day [Music] thank you

Channel: JavaScript Mastery

Views: 92,081

Keywords: javascript, javascript mastery, js mastery, master javascript, locofy, figma, figma for developers, figma to code, figma design to code, transform a figma design to website, build websites using ai, build web app using ai, ai figma tool, ai figma tool for developers

Id: AHtSIP-pRL4

Length: 90min 41sec (5441 seconds)

Published: Fri Jul 21 2023