Build and Deploy a Modern Next.js Application | React, Next JS, TypeScript, Tailwind CSS

Key Takeaways

next 13. a react framework so powerful it became the new standard for creating react applications and recently its interest peaked which means that now is the perfect time to build a state-of-the-art next 13 application to Showcase your abilities in this course you will develop a modern car showcase platform that leverages all of the latest and greatest of what next 13 has to offer a minimalist hero section will be a Gateway into our complex search and filtering capabilities that will leverage nextgs's server-side rendering features establishing application routes implementing advanced search and filtering capabilities handling and displaying data in chunks optimizing applications metadata and SEO creating custom filter combobox and model elements maintaining a well-organized file and folder structure embracing the principles of writing clean code and much more the entire application is fully mobile responsive this app is perfect for all car enthusiasts and due to its complex functionalities and the ability to leverage next js's newest feature it makes for an exceptional educational course you must watch if you want to become an expert next GS developer specifically we'll be transitioning from client-side rendering to server-side rendering unlocking the next jss full potential after we develop the application I'll even teach you how to deploy to the Internet so you can share it with your friends potential employers and put it on your portfolio now you might be wondering what are the prerequisites for building such a great application you need to know the basics of modern web development using reacts.js other than that this course is entirely beginner friendly if you're completely new to react I would recommend checking out our react crash course then if you haven't already watch our latest nextgs crash course first by clicking the card that'll appear on the screen or click the link in the description and then come back to build your first real next gs13 application by watching this video in the last video we've revealed that we are working on the ultimate next 13 eBook that covers everything you need to know to become a professional next.js developer this ebook covers the complete nextgs roadmap essential next year's Concepts new next 13 features extensive guidance on building scalable next JS projects and project ideas you can build and deploy to put on your portfolio and get a job this ebook is the most resource we have ever created so we put it up for sale as a paid premium ebook thankfully as the last time the first 1000 people that clicked the link in the description will get it for free so sign up right now to find out if you're in the first 1000 definitely don't miss out on this opportunity alongside building this application you'll learn the most important Technologies needed to make any website next yes Tailwind headless UI typescript and Concepts like mobile responsiveness and API management we're going to start simple and move to more complex Concepts I'll explain every step of the way if this video reaches 20 000 likes I'm recording more next year has 13 videos now before we dive into the project there's something exciting I need to share with you the app you'll build today is a light version of a more complete application our master class students have built in the program so after building this next gs13 app you can develop its more detailed web version by join the master class the JSM masterclass experience helps Junior and intermediate developers Fast Track their careers you will develop real world applications in a team which is more challenging than simply following a YouTube tutorial but this also means that you will learn so much more from the experience you will use modern tech Stacks get personalized mentorship from senior developers and get exceptional hiring support you can graduate in six months land your dream job in the six months after graduating or get your full money back if you want to apply click the link in the description or go to jsmastery.pro forward slash masterclass and apply Now by filling out a 15 minute quiz I'll personally reach out to you before we officially begin with the next cohort so you can be sure not to miss it with that said let's dive right into the course [Music] before creating a folder for our project code we must first visit rapid API the link is going to be down in the description the making of this entire app is Possible only because of Rapid API we're using their cars by API ninjas to allow us to get detailed information about every specific unique car model to use this API click the rapid API Link in the description and then you can click sign up or log in I will log in in this case since I already have the account and once you're in you'll be redirected to Rapid apis Hub where you can find hundreds of thousands of apis this was our first step in our video now let's create our great car showcase app and then later on we'll call this API Straight From Within it with that said let's get started as we always do on the JavaScript Mastery YouTube channel we're going to start from bare Beginnings by creating a new empty folder on our desktop let's call it car underscore showcase you can open up an empty Visual Studio code window and then drag and drop the empty folder into it once you're in you can go to your top left View and then terminal this is going to open up the integrated built-in terminal which we're going to use to initialize our project as you already know by now in this project we are using the latest version of next JS so let's set up a nextgs project by running MPX create Dash next Dash app at latest and then we can use the dot slash to create it in the current directory and press enter it might ask you if you want to install create next app in that case simply press Y and then enter then we're going to get a quick questionnaire of how we would like our app to be set up so first of all we have to say would we like to use typescript and in this case we're going to press yes then it's going to ask us if we want to use eslint I'm going to say no then Tailwind of course we're going to use Tailwind when it comes to using the source directory we're going to say no and finally we are going to use the app router would you like to customize the default import Alias we're gonna say no and that is it all the necessary dependencies to run our sample next GS application are getting installed there we go the process has been successful and we can run our application by running the npm Run Dev command this is going to spin it up on localhost 3000 so simply Ctrl click it to open it and as you can see we have this beautiful new starter by resell for the new nextgs application now let's put our browser and our editor side by side so we can see the changes that we make live there we go let's explore the file and folder structure of a new modern x13 application we're going to have the app folder which is going to be our Central hub for working with our routes and pages and the only other thing we have is the public for our icons and assets everything else we're going to add ourselves we can start working on our application by going into the app and then page.tsx inside of here we can remove everything that is within the main directory so just keep scrolling down and let's create a clean slate for ourselves to start working on this great application if you save it you should see just an empty screen let's start by creating a bit of a layout so we know where what is in our application first we're going to give this main a class name of overflow Dash hidden and if you're unsure what some of these class names that we add mean that means that you must be new to Tailwind CSS but not to worry Tailwind CSS is a really simple utility first see SS framework packed with utility classes but behind the scenes it is nothing more than CSS so if you're wondering what a specific class means simply go to quick search and search for it right here you're gonna immediately get the answer of how to use that specific class so at any point in this video if you're unsure what some of these classes that I add mean simply go to Tailwind docs go to search and type it out you're gonna immediately get an answer also I want to point your attention to a great Visual Studio code extension called Tailwind specifically it is going to be Tailwind CSS intellisense it's going to allow you to hover over specific properties and get these specific styles that it's applying so you can see the Overflow hidden of course is applying the Overflow hidden Style and with that said we can start creating the layout of our application and just to be able to see the code better I'm going to zoom it out one time so everything fits in one line wonderful immediately within our main we can start creating our hero section which is going to act as an entrance point to everybody wondering what this app is all about so if we open up the finished site just so you know we're building something that looks like this on desktop devices we have a nice left side text and then right side image and if we collapse it to a tablet view or a smaller laptop it's going to look something like this so let's go ahead and build this simple hero section so that we can get started with the more advanced functionalities such as search filtering and server-side rendering so let's get started by calling our hero component right now if we call it we're of course going to get an error saying that the hero is not defined so what we can do is go to the Explorer and then we can create a new components folder in the root of a directory right here the reason why we didn't create it in the app directory is because with the new next 13.4 syntax in here you only want to put Pages layouts and specific next 13 files that are going to be presented as a route in the application and everything else we want to have outside So within our components we can create a new hero.tsx file and yep you heard that right it's going to be TSX for typescript this is one of the First videos on the JSM YouTube channel in which we're using typescript but I know that you've been asking for it for a long time so here it is if you're happy about this and if you'd like me to do more typescript videos please comment down below so that I know that you guys are happy we're transitioning JavaScript Mastery to typescript projects with that said inside of here we can run rafce this is going to create a basic hero component and if this didn't work for you that must mean that you don't have the es7 plus react react native Redux Snippets extension installed so simply install it and that's going to allow you to Simply spin up a functional component so with that said in here we're gonna import image coming from next forward slash image and we can start creating the structure for our hero section but first of course we have to import it within our page.tsx so what we can do is we can create a new file called index.ts right within our components and we're going to use this file as a single file that's going to export all of our components so we can import them in a simpler manner within the pages where we're gonna use them so let's simply say import hero from dot slash hero and then we can say export hero right here that's going to allow us now to go back into page and then you can select the hero and press Ctrl space on Windows or something similar on Mac and it's going to allow you to immediately import it if that didn't work for you no worries you can still manually import it by simply saying import inside of curly braces hero from add forward slash components that is great and as you can see we are now rendering the hero component which looks something like this now to make the styling of our application just a bit simpler I prepared some utility classes that we can use throughout the rest of the project you can think of this just as a nudge in the right direction because it's going to allow us to focus on what matters which is learning typescript learning nextgs server-side rendering and more and not necessarily just focusing on styling so in the description down below you can find a GitHub gist that's going to contain a globals.css file simply copy the code go to the app and then override the current globals.css by deleting it and pasting the one you copied as soon as you do that you're gonna get an error saying that apply text black Dash 100 does not exist and next.js is right here it doesn't and that's because we have added that as a custom style inside of our Tailwind config.j yes so once again in the same GitHub just down below you're gonna find the updated tailwind.config.js simply copy it and then we can override the current one right here that's going to fix the error if it doesn't you might do a hard reload which is Ctrl shift and then r on Windows and that's going to fix the error if the error is still there simply open up the terminal press Ctrl C and then y to stop it and then finally just re-run it and then you should be able to see just a single string that says hero on our home page we can close the global so we can close everything and just jump into the development of our layout and the hero section to start creating our layout we can first give our div a class name equal to Hero this is one of those utility classes that we have created and if you're wondering what it does you can simply go to ourglobals.css and search for hero and then you can see that this is going to apply some Flex properties extra large Flex row usually Flex column Gap relative and so on this is going to just make the styling a bit simpler and cleaner finally we're gonna remove this text of hero and move down below within dot hero div we're going to create a new one with a class name equal to flex-1 padding top of 36 6 and padding of X which is going to apply some horizontal padding within there we can create our primary heading which is going to have a class name equal to Hero underscore underscore title here we're using the bem methodology where we specified that the hero is the block and then the title is the element within that block once again if you're wondering what any of these classes mean simply go to search and then find the CSS directives for them to see which styles are being applied it's primarily going to be changing the font size and font boldness inside of here we can say something like find book or rent a car quickly and easily there we go and we can use a long Dash right here simply Google for the long Dash and you should be able to find it and we have a huge heading right away below the heading we're going to have a P tag that's going to have a class name equal to Hero underscore underscore subtitle there we can say something like streamline your car rental experience with our effortless booking process there we go this is looking good and then we want to render this button that you can see right here that's going to point to explore cars but immediately I want to teach you about reusability and creating components that we can reuse all across the page you're going to notice that most of the buttons are gonna end up being similar so we want to have one component that can then be abstracted and changed depending on where it is being called and that's exactly what we're gonna do for this button so let's create a new custom button self-closing component and of course if we call it right now we're going to get an error that's going to say custom button is not defined so not to worry let's go into our components and let's create a new custom button dot TSX component there we can also run rafce and we can also export it right from our index.ts where we can say custom button and we can also export it right here now if we go back to our hero section we can double click it and then import the custom button right here by saying import custom button from dot slash custom button and the error should go away that now allows us to control click into the custom button and start creating this great reusable component inside of our button we can import image from next forward slash image as some of our buttons are going to have some kind of icons as you can see right here and we can start creating the structure of our button by wrapping everything within a button component this button is going to have a couple of States first of all sometimes the button is going to be disabled right now we're going to Simply hard code that to false but later on we can modify that then the button can have a couple of different types it can be a submit button or just a regular button so later on we're going to pass this dynamically but for now we can simply hard code a string that says button then we want to give it a class name now this class name is going to have a custom BTN class but then later on we might want to add some additional class names so we're going to leave this as a template string so we can add the classes later on and of course it's going to have an on click which for now we can leave as an empty callback function we're going to update it with the corresponding logic later on now immediately as soon as we provided an on click function it's going to say that we need to convert this into a client component and that's great we can thank nextgs for doing that because by default all components in next.js are server side rendered they're called server components but this button is just going to be a client-side component which is usually the case when you have some browser actions such as clicks or using hooks so if you watch the next JS crash course that we recently posted then you know what we need to do if you haven't watched it already even though you've Dove deep into this video right now I would recommend to posit bookmark it somewhere else and go watch the next Jazz crash course because it's going to make the watching of this video so much more educational if you have the foundations laid out with that said what we need to do is use the use client directive to turn this component into a client-side component and that's going to fix the error for us then we can create a span element within this button and it's going to have a class name equal to it's going to be template string of flex dash 1 and we're going to make it a template because later on we can pass some additional styles and we can render some kind of a title of this button so for now we can simply say title and there we go we can see it right here now how do we turn this into an actual reusable component well the way you do that in react and xjs is through props so depending on where you're calling this button you have to pass some additional props to it so in this case we can go back to where we're calling this button and we can pass some props in this case that's going to be title which is going to be equal to explore cars then we can pass some additional container styles which are going to be BG Dash primary Dash blue text Dash white rounded Dash full and margin top of 10 or Mt 10 for short finally we need to provide the handle click which is going to be equal to a function that's going to allow us to scroll so on top for now we can create a new empty function called const handle scroll which is going to be an empty hero function for now and once we click the button we can pass the handle scroll function with that said you're going to notice that if we save it our typescript is going to complain it's gonna say first of all you're using some kind of a handle click right here that must mean that your hero is a client-side component and indeed it is so right on top we can use the use client directive to turn it into a client component then you're going to notice that we have one more error or a warning right here saying that our title property is not assignable to our button and that's because if we go into a button we're using typescript but we're not specifying what props can it get so what we can do is we can create a new file or rather a new folder in the root of our directory called types and then within those types we can create a new index.ts file inside of here we can export and create an interface an interface specifies how a specific structure should look like what variables and values should it have and in this case we can create a custom button props interface and it's going to have a couple of things as we said it's going to have a title which is a string it's going to have a container Styles which is going to be optional and it's going to be a string and finally it's going to have the handle click which is going to be a mouse event handler specifically an event handler on the HTML button element and that's going to look like this and this mouse event handler has to be imported at the top from react so that's going to look something like this and the handle click is going to be optional as well which means that we can add this question mark because sometimes it's going to be a submit button so we don't necessarily need a handle click now if we do that you're going to notice that the error right here should disappear or rather it's going to disappear once we actually accept these props into the button so right here we can destructure the props that's going to be a title a container styles as well as a handle click and now we have to specify which props does this component receive and that's going to be custom button props and of course we can import that from add forward slash types just like so now if we save that you're going to see we have no errors typescript is no longer complaining and we are ready to actually utilize these props and turn this into a reusable button first of all to our button we can pass additional Dynamic container styles this is going to make our button look like an actual button and on the handle click we can pass the handle click function which in this case is a handle scroll and most importantly we can pass a dynamic title and there we go we have our explore cars we have the title and it is looking great now we can go back to our hero section and continue by creating this wonderful image that we can see below so to do that we can go below the custom button and Below one more div and then we can create a new div that's going to have a class name equal to hero underscore underscore image Dash container within there we can create one more container div that's going to have a class name equal to Hero underscore underscore image and finally within we can have the next JS image tag that's going to allow us to pass a source and now in here we have to pass the path to our actual image so far we don't have any assets in our project besides some icons for next anniversal which we don't really need so please allow me to give you all of the assets we'll be using throughout our project in the description down below you can find a new zipped public folder so simply download it unzip it then delete the current public folder and simply paste or drag and drop the new public folder right here within the root of our folder there you're going to have access to a lot of different icons we'll be using as well as the hero Dash BG and the actual hero car image which we'll be using for our hero section now once you have your public folder it's going to be really easy to specify the source it's going to be simply dot slash hero dot PNG our image tag also needs an ALT tag which is going to be a hero it's going to be fill and it's going to have a class name equal to object Dash contain for it to remain in its aspect ratio and you can see that the next image must start with a leading slash which means that we don't want to do the dot slash it's just gonna be slash and our car appears now below our image we also want to create a new self-closing div that's going to have a class name equal to Hero underscore underscore image Dash overlay and this is going to give it that nice effect that you can see this rectangular shape appear that is great now our hero is looking wonderful it is exactly the same as here but we're missing this simple navigation bar as well as a simple footer so before we move into the main part of this application let's quickly add the navigation bar and the footer not in here in the main page but rather by utilizing the next js's layout so if we go into the app folder and then to the layout.tsx you can notice that in here we can specify what our page is going to look like of course it's a body that's going to show the children but above or below the children we can render some different things out and in most cases you want to do something like this first of all we don't need this font right here then you have our metadata which is incredibly cool because right here you can simply say car Hub or whatever you want to call it and that's immediately going to change on top right here of course once the error is fixed and the description can be something like discover the best cars in the world there we go and of course the class of our body is simply going to be relative we don't need that font right there and if you do that you can see the car Hub changed on top and now what you usually want to do in your applications is show the nav bar above the body and the footer below the body so immediately right here we can create a nav bar self-closing component as well as a footer self-closing component and then you want to of course create them within our components by creating a new navbar.tsx file where we run rafce and you want to create a footer dot TSX file where you run rafce and we go into the index.ts and finally we create or rather we import both the navbar as well as the footer and then we can export them right here navbar and footer not filter it's gonna be a footer and finally we can now go back into the layout we can double click the nav bar and then get it imported same thing for the footer so that's going to be import footer and nav bar from add forward slash components if we save this you can see that we have a simple text that says nav bar on top and footer on the bottom which means that we are ready to control click the nav bar to go into it and start creating a really simple navbar layout to do that we can import a link coming from next forward slash link because after all we're going to use the navigation bar to link to different pages and then we're going to import the good old image coming from next forward slash image finally we're gonna also import our trusted custom button component because we'll be reusing that reusable component we created before making our workflow even simpler now for our navbar we don't want to wrap it in a div rather we want to wrap it in the HTML5 semantic header tag and give it a class name equal to W Dash full to take the full width absolute and then Z index of 10 which is going to allow it to show on top of the other content then we want to use the nav tag and give it some class names first we want to give it a Max W Dash and then inside of square brackets 1440 pixels that's going to be the max width then we want to set the margin X to Auto make it a flex container and specify justify Dash between this is going to ensure that the items show on the left and on the right side finally we want to Center them vertically by giving it items Dash Center on small devices the padding is going to be 16. usually padding is going to be 6 and we're talking about the horizontal padding PX and PX here and then the pying vertical is going to be 4. this now allows us to add the link tag and every link needs to have an ahref in this case it's going to point to forward slash which is just home and it's going to have a class name equal to flex justify Dash Center and items Dash Center inside of it we want to have an image which is a self-closing tag and it's going to have a source equal to forward slash logo.svg of course it needs to have an altag as well which is going to be car Hub logo a width of 118 pixels a height of 18 pixels and then it's going to have a class name of object Dash contain to remain in its aspect ratio and that's going to show this wonderful car Hub logo finally on the other side of our navigation bar meaning outside of the link but still inside of the nav we want to create our custom button and check it out how easy it is going to be right now we can create a custom button give it a text sign in give it a button type so BTN type in this case it's going to be button and give it a container Styles equal to Tech stash primary Dash blue rounded Dash full BG Dash white and then min-w Dash instead of square brackets 130 pixels now it's going to complain because if we go into our button you can see that we don't have a property called text and I accidentally type text and not title which is great because it immediately lets me know hey you cannot put text there but now it's also complaining about a button type that's because in the custom button props we don't yet have a button type so if we go into the custom button props let's add an additional BTN type property which can be either a button or it can be a type of submit so that's going to look like this button or submit and it can also be optional so now if we go back we can now accept that BTN type and we can simply put it right here under type by saying BTN type or button now if we close this and go back to the nav bar you can see it's no longer complaining and we have a wonderful sign in button on top right with that said our hero section is looking a bit more complete because the nav bar is there as well and if we open it up and expand it it is indeed looking great now the next thing we can do is focus on the footer as well since we're already here so let's close the nav bar and simply go into the footer component inside of our footer we're gonna also import the image tag coming from next forward slash image as well as the link tag import link coming from next forward slash link finally we can start creating the footer structure by giving it a HTML5 semantic footer tag and wrapping everything within it now bear with me we will have to add a couple of class names to achieve this specific structure where we have a line and then we have a couple of different rows and columns that expand depending on the screen width so let's create that structure right away we're going to start with the outer container by giving it a class name of flex which is going to make it a flex container and then Flex column which means that the flex children will appear one below another we want to give it a text Dash black Dash 100 as well as the margin or mt5 on top we want to give it a top border so border Dash t and a border Dash gray Dash 100 is going to be the Border collar so now if we go back we should be able to see a line but it's barely visible next within the footer we want to have a div that's also going to have a class name equal to flex Max Dash MD is going to be Flex Dash coal meaning on medium devices it's going to be Flex Dash call then we want to give it a flex wrap that is going to allow it to wrap the elements no matter the width justify Dash between gap-5 to provide some spacing between the elements on small devices padding X is going to be 16. usually padding X is going to be 6 and padding y meaning on top and bottom is going to be 10. within this div we're going to have another div that's going to have a class name equal to flex Flex Dash call justify Dash start items Dash start and gap-6 finally we can render this car Hub image right here by rendering the self-closing xgs image tag and giving it a source equal to forward slash logo.svg same as in the nav bar the alt tag can be logo width is going to be 118 pixels height is going to be 18 pixels and class name is going to be object Dash contain if we now save this and go back you can see the logo and the line right here below the image we want to have a P tag that's going to have a class name equal to text Dash base and text Dash gray-700 to make the caller a bit grayish finally we can say something like car hub 2023 put a Break Tag right there and then say All Rights Reserved and then put the and sign copy semicolon this is going to allow us to have that copyright sign right here we want to go outside of this B tag and outside of the div and create a space for our footer links so this is going to be a div tag with a class name equal to footer underscore underscore links inside of here we want to map over all of these different sections the about company and socials as well as all the links within it you never want to have this data within your jsx you want to put it somewhere separate because this is considered business logic and not necessarily what's included in the application so to simplify our life so we don't have to type it all out I've created a constants.ts file in the GitHub gist that is in the description down below so go there and copy it and then together we can create a new folder called constants and then within the constants you can create an index.ts file and paste what you just copied I want to teach you how to do a proper application not just put all of this content within the footer itself so as you can see this is nothing more than some manufacturers which we're going to use the years of production the fuels that exist and finally the footer links which are consisted of the title and then the actual links with the URLs this way you can simply add a new one delete one and it's going to be reflected straight in the code so with that said we can go back to the footer and we can import those links by saying import footer links coming from add forward slash constants then we can scroll down and we can map over them by saying footer links dot map we're going to have each individual link and then we can have an instant return by simply putting the parentheses for each link we're going to return a div and that div is going to have a key equal to link.title then it's going to have a class name equal to footer underscore underscore link within that div we want to render an H3 and that H3 is going to render the link dot title that's going to be the category we're rendering so if you save it you can see about company and socials and let's make that bolded by giving it a class name equal to font Dash bold great now below it we can do another map by saying link dot links dot map and then in there we're going to get each individual item and then we can simply return a link element for it that link has to have a key equal to item.title it's also going to have an href property equal to item.url and it's going to have a class name equal to text Dash gray Dash 500. finally inside of there we're going to say item dot title now if we save it you'll be able to see that all the links show and we have almost a finished footer we just need the bottom part right here of course it might look a bit weird like this but if you expand it you're going to notice that it nicely wraps to the width of our device finally let's do that last part which is that line and then privacy policy and terms and conditions so to do that we can go below this div with the footer links and then create one last div that's going to have a class name equal to flex justify Dash between items Dash Center Flex Dash rap mt10 border Dash t border Dash gray Dash 100 on small devices padding horizontal 16 usually padding horizontal 6 and padding vertical of 10. finally within it we can render a div and that div is going to have a class name equal to footer underscore underscore copyrights Dash link and within it we can simply render the link that's going to have an href equal to forward slash and a class name equal to text Dash gray Dash 500 and within it we can simply say something like privacy policy we can duplicate that link and then inside of it we can say terms of use if we save it you can see that we have a structure that looks like this and we're just missing the copyright on the bottom so right here above our div containing those two links we can create a P tag that's simply going to say at 2023 car hub All Rights reserved and we can save it there we go now this fits nicely we have the All Rights Reserved and privacy policy in terms of use and as you can see right here the privacy policy in terms of use is getting connected to this it seems like the Justified between is not applied and on the finished side they're nicely put one to the left and one to the right it looks like we have to close this div that we had before on the top right here so we only have two divs before the footer we need to remove one and close it sooner we have to close it after the footer links so if we now save this you can see everything is structured nicely because we have a div right here for the footer links and that is together within this Flex justify between and then the last part is on its own on the bottom with that said if we now turn this out to be a full width application we have a wonderful looking footer as well as a navigation bar and finally we have the hero section if we compare the two they're going to be I was about to say the same but we definitely have some differences so it looks like this shape is not appearing right on our side it's getting a bit cut out so let's go ahead and make sure that that shape is right because that makes this button look so much better than here so going back to our code to finalize the hero section we can go to our components and then hero and here we are using the self-closing div with the hero underscore image Dash overlay but I've made a mistake this image should have been closed right here so one div that's going to get closed is for this image and then the div is right next to this div not next to the image if we fix that and expand it you can see that now it is looking perfect and with that said we are ready to transition to the most important part of our application which is the car catalog it'll allow us to search through the different models as well as modify the fuel or the year of the car and all of this is going to be server side rendered so let's get started by collapsing our browser closing the hero section and going all the way to our app page.tsx we are done with a hero and we're also done with everything in the layout such as the nav bar and the footer and we are ready to continue with our home page of course the next part of the home page as we discussed is going to be the car catalog so great job for coming this far into the video and let's get started to get started with the car catalog below the hero we can create a new div which is going to act as a wrapper div for the catalog so let's give it a class name equal to mt12 to divide it a bit from the top and padding Dash X also padding Dash y this is going to give it enough space for it to act as its own section and we can give it a Max width so it takes the full width of the screen finally we can also give it an ID equal to this cover so once we click the above button we can dive into this section great within this div we can then create a new div that's going to have a class name equal to home underscore underscore text Dash container and this is going to be of course the container for the car catalog text so right inside of here we can simply create an H1 element give it a class name of something like text-4xl and font extra bold and within it we can say car catalog if we save that and scroll down you can see it right here and below it we can create a P tag inside of which we can say explore the cards you might like okay this is better already and right below this div we can focus on creating the filters so we can create a new div that's going to have a class name equal to home underscore underscore filters inside of there we're going to render a couple of things first of all we want to render a self-closing search bar component and below that we're going to create a div it's going to have a class name equal to home underscore underscore filter Dash container and within it we want to have two custom filter components the first custom filter is going to have a title equal to fuel and the second one is going to have a title of year so now if we save this of course we're going to have a couple of Errors because these components don't exist yet so let's go ahead and get them created by creating a new component in the components folder called search bar dot TSX run rafce inside of there and we can repeat the procedure by creating the custom filter dot TSX and again run refce inside of there now as we discussed we can Import and Export them from our index.ts so right here we can do the search bar as well as the custom filter and we can export both of them search bar and custom filter if we now save this and go back we can now double click and then command or control click to automatically import it from components if that didn't work for you you can scroll all the way up and import it like this import custom filter and search bar from add forward slash components and you should be able to see a search bar and two custom filters which fit nicely in the layout same as we have it here search bar on the left or in this case on the top and then on the right side we have two custom filters this is looking great now even though typescript is complaining a bit because we haven't yet specified the props to this custom filter component no worries we're going to do that later let's focus on the search bar first so let's control click to go into the search bar and let's start implementing first of all its looks and then soon enough its functionalities right within the search bar we can transform our search bar from a div at the start into a form element and give it a class name equal to search bar we can also give it an add submit property which is going to be equal to handle search for now we have to Define that handle search above so we can say const handle search is equal to and just leave it as an empty callback function we're going to get back to it soon now as soon as you have an on submit that is a browser event so we need to transform this into a use client directive there we go this is working and now within the form we're going to have a div and this div is going to have a class name equal to search bar underscore underscore item like this we're going to have two items in the search bar the first one is going to be the manufacturer and the second one is going to be the model even though they might appear to be the same we have gone ahead and added extra functionalities to the manufacturer where it's not just a search bar it is something known as a combo box or an autocomplete search where if we expanded you can start typing the manufacturer and then you can select them based on the predefined array of manufacturers so let's go ahead and Implement that so-called combo box right away to implement it we're going to create a new reusable component and we're going to call it search manufacturer of course if we now save it it's gonna break because this component doesn't yet exist and we can create it by creating a new component search manufacturer dot TSX and we can run refce inside of there and finally export it within our index.ts that's going to look something like this search manufacturer there we go and the error should go away if we export it and then import it properly in our search bar it's going to be coming from import search manufacturer from dot slash it looks like it didn't pick up the import properly an alternative is to just put it within the curly braces and then just get it from dot slash like this because we have exported it from that component right here and it's within the same folder now we'll be handling the state of which manufacturer is currently chosen so in this case we can import use state from react another reason that we need to use the use client component because we're using hooks and then immediately right here we can say use state we can call it manufacturer set manufacturer and at the start it's going to be set to an empty string and I'm going to expand this just a bit so we can see it more clearly now that we have the manufacturer and set manufacturer we can pass those State as props to our search manufacturer like so of course typescript is going to complain at first but once we go to the search manufacturer and accept those props as we should it's going to be fine so right here we want to accept the manufacturer as well as the set manufacturer and we have to say that this is equal to search manufacturer prompts and of course we have to Define the types for that so alongside the export interface custom button we can do export interface search manufacturer props and of course that's going to be just the manufacturer which is going to be a string and the set manufacturer which is going to be a function that takes in manufacturers a string and doesn't return anything it's just a Setter state now with that said we can here say search manufacturer props and import it from add dot slash types like so and with that we can start creating this wonderful combo box to create it we'll be using headless UI headless UI contains completely unstyled fully accessible UI components designed to integrate beautifully with Tailwind CSS and it gives you a couple of things that you can use such as menu list box combo box or the autocomplete which we're going to use modals and more so let's look at the combo box or the autocomplete it looks something like this you have Wade Cooper and then it allows you to start typing and then immediately see other people as well so headless UI is really great if you want to use some of the components that they offer out of the box if I'm not mistaken we'll be using the dialogue or the modal as well as transitions for some animations and we'll be using the autocomplete so with that said let's get started with implementing headless UI autocomplete first of all we have to install headless UI and we can do that by stopping our application from running and then running npm install add headless UI forward slash react once it is installed we can simply rerun npm run Dev and be good to go then at the top we can import the combo box as well as transition coming from add headless UI forward slash react finally we can start with the layout and I'm going to collapse this just a bit so everything fits in the screen we're going to give this div a class name equal to search Dash manufacturer and inside of there we're gonna immediately render a combo box component within the combo box we'll have a div and that div is going to have a class name equal to relative and W Dash fool now if we save this and reload the page because otherwise we won't be able to see the changes we make because we reloaded the application now we get an error saying that you're importing a component that Imports client only it only works in client component but none of its parents are marked with used clients so they're components by default maybe you should try marking one of these as a used client so right in the search manufacturer you can say use client and if we reload it it works which means that we can proceed with creating our combo box the combo box is going to be consisted of a couple of things it's going to have a combo box button like this one then it's going to have some kind of an input and then finally another button to submit the search so what we can do is first we can render the combo box dot button we can also give it a class name equal to Absolute top Dash 14 pixels not 140 just 14. inside of there we can render a self-closing xgs image tag it can have a source equal to forward slash car dash logo.svg it can also have a width of 20. height of 20. a class name of margin left-4 and finally an altag equal to car logo but as you can see we haven't yet imported the image so at the top we can import image from next forward slash image and if we save that we should now be able to see this Volkswagen button right here appear which is great that's going to be our placeholder meaning that we can type in different car manufacturers or car makes whatever you prefer next we're going to have an input so below the button we can render the combo box dot input it's going to be a self-closing component that's going to have a class name search Dash manufacturer underscore underscore input and a really cool thing about headless UI is that it's built on top of Tailwind which means that you can simply provide a class name in tailwind and it's going to work we can also give it a placeholder we can type something like Volkswagen and this is looking good and we can also give it a display value this is something you have to provide to an input and this is consisted of a callback function that gets the value and then displays the value and since we're using typescript we have to say that the value is of a type string right here finally we're going to have an on change and in the on change we have to update the value so let's go ahead and create a new state by first of all importing use state from react and then we can create a new use State snippet by saying query and set query and that's going to be an empty string at the start that's going to be the search query and on the on change we can simply say we get an event and then we can set the query to be equal to e.target.value so once we change the value in here it's going to be changed now right now this is just a regular input but we want to turn it into a combo box so that once you start typing it actually gives you some predefined options so to do that below the combo box we can create a new transition that's going to just provide us some animations as well and a transition has to portray itself as a specific element and in this case we don't want to add additional elements to the Dom s