Next. js and Tailwind CSS project: Build the IMDB Clone using NextJS and TailwindCSS | Dr. Sahand Ghavidel | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Next. js and Tailwind CSS project: Build the IMDB Clone using NextJS and TailwindCSS

teacher avatar Dr. Sahand Ghavidel, PhD

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (2h 37m)
    • 1. Introduction to the project

    • 2. Overview of the movie app project

    • 3. Install Nextjs and Tailwind CSS

    • 4. Create components and finish the template

    • 5. Create the header component

    • 6. Style the header section

    • 7. Create the Navbar component and requestsjs

    • 8. Create server side function and pass it to client side

    • 9. Create card component

    • 10. Complete the card component and make the result section responsive

    • 11. Deploy to vercel and add a custom domain name

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Next.js and Tailwind CSS project: IMDB Website Clone

Next.js is a full-stack framework for ReactJS, the most popular JavaScript library today!

Too many buzzwords?

Fair enough, but NextJS is a great tool for growing as a React developer and improving your React apps!

Because NextJS and tailwindcss is in high demand. And there's good reason: NextJS supports server-side rendering and page pre-rendering in React apps. Building great UX and SEO-friendly React apps has never been easier!

Creating full-stack React apps (frontend + backend code in one project) is also a breeze with NextJS!
Build a NodeJS-based API alongside your frontend React apps.
Next.JS makes it easy!

Want to add auth? NextJS simplifies user registration, login, and session management.

You'll go from beginner to advanced in no time!

We'll start with the basics, no prior NextJS and Tailwind CSS knowledge required, and work our way through all of NextJS and Tailwind CSS core features.
All concepts will be applied step-by-step in both theory and practice.

This course requires basic React knowledge, though it includes a "React refresher" module for those who haven't worked with React in a while.

This course also includes a "NextJS and Tailwind CSS Summary" module that allows you to review key concepts without having to retake the entire course.
Or you can just take the summary module (and ignore the rest) to learn all the core features quickly.

After completing this course, you'll be ready to start your own NextJS and Tailwind CSS projects and apply for NextJS and Tailwind CSS jobs!

This course will cover:

- NextJS and Tailwind CSS: And why use it?

- Why aren't React and CSS enough in many cases?

- Building NextJS and Tailwind CSS project from scratch and understanding them

- Routing via files

- Add dynamic and catch-all routes

- Using page pre-rendering and server-side rendering

- Using data and pre-fetching data in your apps

- Adding metadata to pages

- Image optimization with NextJS Image

- Making full-stack apps with APIs

- React context app state management (in NextJS and Tailwind CSS apps)

-We'll build apps that use all of these core ideas!

- A NextJS sand Tailwind CSS summary to refresh your memory or quickly explore the core features.

I'm excited to start this journey with you!

GitHub for source code:

Final version of the project:

Meet Your Teacher

Sahand Ghavidel holds degrees in Mathematics, Electrical, and Computer Science, and earned a doctoral degree from Faculty of Engineering and IT, University of Technology Sydney.

Sahand has researched for more than 10 years about artificial algorithms and  optimization. He has won several awards for his outstanding research and has published more than 40 ISI journals and attended to many international conferences.

The number of people using and citing Sahand's publications is significantly high which is more than 1600 citations, according to google scholar (April, 2021). He was also awarded the outstanding reviewer in the international journal called "International Journal of Electrical Power & Energy Systems" with CiteScore of 5.79 in recognition of his contributions ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction to the project: Welcome to the project. In this project we're going to create an IMDB database clone. As you can see from the final version of the project, we have a header, nav bar and the results section. And also we can catch the trending and top rated from the database. We're going to use next years to create this project. Next year is a React framework for production. And it's going to help us to create SEO friendly website. In order to solve the project, we're going to use the tailbone CSS. Tennessee ourselves helps us to rapidly build our website even without leaving our JSX files. For getting the icons of our websites, we're going to use a website called hero icons, which is created by the owners of the Tailwind CSS. And also we're going to use Movie Database TMT be to get the information about the movies. And also we're going to learn how to get their API keys. Finally, we are going to deploy the website into the reversal, which is completely free. And also we're going to learn how to create our custom URL. The complete source code of the project is available inside this repository and the link will be available for you in the resource section. Also, you can access for the final version of the project in this URL. In the next section, we are going to see the feature and the responsibility of our website. And we're going to briefly overview the website. So see you in the next section. 2. Overview of the movie app project: All right, In this section we're going to overview the IMDB movie app. As you can see from the final version of the project, we have three sections. The header, which includes the menu with Hero icons and IMDB logo. Then we have the nav bar with two taps, trending and top rated. When we click on trending, we can see the genre is changed to fetch trending, and the result is shown accordingly. And if we click on top-rated, we can see that the genre is fetched top rated now, and the results are different. In the results section we have a thumbnail that includes an image, an overview, the title, the release date, and the vote count. If we decrease the size of the browser, we can see in the mobile screen, we have the menu and the logo on the top of each other. And also we have only one column in the result. We're going to achieve this using CSS grid, which is coming from tailwind CSS classes. If increase the size of the browser a little bit to tablet size, forget the menu and the IMDB logo next to each other. And we have two columns in the results section. If we increase more, we can see three columns and finally four columns. And if we decrease the zoom level of the browser, we can see we get five columns. This is going to be achieved easily using grid system that is provided by telling CSS classes. In the next section, we're going to start installing the next years and Tailwind CSS, and we're going to learn how to achieve the first template. So see you in the next section. 3. Install Nextjs and Tailwind CSS: All right, In this section we're going to start creating our project and start with our terminal and installed the next js app. So we open the terminal. We just we are going to use a common prompt or any trauma terminal app you would like to use. So we click on the comment prompt. Let me increase the size a little bit so you can see it better. And Let's check the next year's websites are what we need to do first for installation. So we open the Google Chrome and here we search for next years. In the results section, we have a website. It's next, next years by versatile. So we click on this website. As you can see, the React framework for production. And we can just start learning. Or you go straight to the documentation. In the documentation we have all the parts like a Getting Started, basic features like paging, GIS, data fetching, building CSS support and layouts. For getting started. Make sure that you have all the requirements. You just need a NodeJS 12.222 or later, and MacOS or Windows, a Linux. Then for creating a next year's ad, we just need to run next n px, create next app. And for the latest version we just need to add, add latest. So we copy this code and we go to our terminal. And we go to the folder that we would like to create the project. I would like to create a project in my desktop. So I go to my desktop by CD, desk top. And once I'm in the desktop, I paste the code. And also after a space, I've specified the name of the project. So I already made like a seven version of this project for my practice. But just I write down here movie where we have version. But you can call it anything you like. So we press Enter and we wait for the installation to be finished. As you can see, let me increase the size. Decreases. Yeah, we're going to install three things. We're going to start next, react and react down because next is based on reacts. So we need to have these two packages, but NP x is going to install all of them. And also in the script we have div, which runs the next years under development mode. So in order to run it, we just need to write down npm run dev. Okay, until this one is installing, Let's go to the tailbone CSS website as well because we need television CSS, because we are using Telnet CSS for styling up project. So we search television CSS. So in the search result we see terrible television And we click on this website. Rapidly build modern websites without ever leaving your HTML. And in our case, we're not leaving our JavaScript file because we are using next years. So that's a great feature of this framework. It's going to help us without needing to leave our code to style our project. As you can see now here, the demo that is writing just in the class names. And everything is changing based on the class name. So we need to go to the documentation here as well. And This is like a tutorial for installing television CSS for normal HTML. But we, as we are using a framework, like next years, we just need to go to the framework guides in the installation. And we just choose Next JS here. If we look through this tutorial, you see that first we need to create a project that we have already done. We just need to create next, next app installation and go inside the project folder. And later, we need to install television CSS by this code and also initialize it with this code. So let's check that it's finished. It's finished already. So we just open this in the VS code, the text editor that I'm using. And you can open this folder in any text editor you like to use. So we just see into the folder that you created movie app version eight. And inside these, I just use quote space dot to open the Visual Studio Code with this directory. As soon as I enter, we see that the visual Studio Code is open and all the folders and packages are here as well. So we maximize the window. We close the Get Started tab. Now, in order to install the tailbone CSS, we can use the internal terminal of the Visual Studio code. Here you can see where for opening and closing the terminal, we can use control back tick. So here we can press control back tick, or also we can open the terminal here from the view menu terminal. All right, let's clear this and increase the size that you can see it better. And we bring it in this corner and we opened the Tillman CSS on the right side. All right, so we already installed this section NP x. Now we need to copy this line of code and paste it here in the terminal. We press Enter. This one is very quick, maybe takes few seconds to be finished. Alright, that's already finished. So we clear the page and by this line of code, we're going to initialize the tailbone CSS. So this initialization actually creates two files, post sss dot config, dot ts and Tillman. That conflict dot js. And here for configuring our template for next year's, we need to copy this code and the paste it inside the tv dot config dot js. So we go here. Let's me to decrease the size, right? So we just delete everything here and paste it here. This is just the my saying that we can accept all the JavaScript files inside the pages and components. Luxurious Ts for TypeScript, JSX and TSX, and also in the components as well. And we don't have any plugins yet and the team is empty as well. So next, we need to copy these three lines of codes and paste it inside the globals that CSS, which is in the South folder. So we open the styles folder here. You can see we have two CSS files. One is the Global such CSS that all the templates scores here like styling the body and everything that we want to apply to all the website. But as we are using pilgrim CSS, we are not dealing with any CSS files. We just delete all of them and paste these three line of code sphere. Now everything has been finished for Tailwind CSS part and we just need to use NPN relative to run our application. So we just write down here npn. Let's clear this npm run dev and we press Enter. As you can see, the service is started on port 3000. And we can have access to the website in this URL, http, localhost 3000. So in order to open this one, we just, you can just keep the Control and click on the link. And now, if you wait a little bit, we see our website with the tailbone CSS template on the right side. This is just a template. And in the next section we're going to completely remove and put our own components and everything. So before doing anything else, I'm going to show you how to use Git Hub to push our website through our application to the GetHub. And later we're going to need this to deploy our website to verso. So let's start the server using contrast C and press Y. Let's clear this so you can see it better. And here I could to my GetHub. So the search get hub here in the website called GAP Let's maximize this and the coincide. I already have the account. If you don't have yet how account? Make sure to sign up. Otherwise, signing in the GitHub with your username and password. My username is sand heavy there, and I'll just quickly write down my password. And I sign-in. So and the right and the top right knee increase the size a little bit on the top right. Here on the plus icon we click and we click on New Repository. And we're going to create a new repository. U and v is just going to name it here. I named the file, we just call it movie app version 8. But you can call it anything you like. It should be unique in your projects. And the description will be, this is a movie app created by next dot js and tell. We end CSS using IM DB database. Just quickly fix this. All right, that's it. We just keep it public. Or in your case, you can keep it private if you don't want other people see your code. But I leave it public and we don't need to check any of these things. You just click on Create Repository. Now here, GitHub suggests are some codes to push our code to the GitHub directly. So we go back to Visual Studio Code and we just use git init to initialize git, add and commit our website. So here we just use good in it to initialize our kids and we use git add 2 to add everything. Let's clear this again. And finally we say git commit because we want to have the message that which we, what change we have done to the project in this stage. So this is just the first video and the first part that I'm going to call it just the Install. Next yeah, next years. And tell them CSS. Okay, so now we just need to go back to the get hub. And this line of code we need to copy. So we need to specify which Git Hub URL we want to connect with our application so we can copy this heavy callback to the Visual Studio Code and we paste it here. Then we just need to write good Push. And it suggests us the first time that we use git push origin mains. So, but the next time we don't need to copy this and paste it. So we use this line of code. But the next time we just write down Good Push. So I'm going to show you in the next video how we do it. So if, if we now call back to our repository and we refresh the page here. By clicking on this, we see that our application is completely uploaded to the GetHub. And we have two commits. If you click on the comments. This is the initial commit that comes from the next year's application. We didn't do this one, but it automatically done. And we write down installed next years until my CSS. So here, if you click the See all the changes we have done to our projects. So in the package.json, we installed the, the, this is related to Tillman CSS. We install these things in the post CSS conflict that AS he added this line of code. And in the global CSS, we delete everything. And we added the Tillman CSS-based component, utilities intelligence, sss dot conflict. That is, we added this codes and finished. So in the next section, we're going to start having our own template and remove this kind of the next year's template and have our own template based on the final version of our project. You can see that in the final version of our project, we have like a header and nav bar and also the results section. So we're going to divide our code to three parts and start with the header and continue with the nav bar and the results section. So see you in the next section for the templating our website. 4. Create components and finish the template: All right, In the last section we have installed the next years and a tailwind CSS. And we got this template here. In this section, we're going to start adding our own components and make our website the template you would like to have. So we go back to Visual Studio Code and we close this globals that CSS. And therefore now we don't need them. And we just go to the pages and index such AS this is the file that we, we're seeing here inside the browser. Let's decrease the size of the browser to see the changes simultaneously. And we do the NPN run div to have our server running and see the changes in real time. For example, in this index.js, if I change this, welcome. To learn, they see the we see the changes in real-time on the right side. So we don't need anything except the head section. Head sections, just the title and the Meta tag and the link to the fabric con that is here. We don't change there, but you delete all the main section and also the footer. So we deal with all of them. And we're not going to use a salt that contains this styling in our project, you're using Tailwind CSS. So we delete the home that module, that CSS file completely. And we delete this section as well. And we delete these two important section that we haven't used yet. Alright, that's completely clean. Let's get some helloworld to be sure that everything's working. Perfect. Yeah, can see the Hello World here. The reason we get this small size in H1 is because we are choosing tolerance CSS and the styling is completely different. All right, so let's create our components. And first we check the website we have. I already have the final version. Now, I'll show you that we have three sections in our projects. First section is this one at the top, which we call it header. Then we have the nav bar, which is this section. And finally we have like a results section which is here. Alright? So we go back to index.js and here instead of this Hello World, we add three sections. So let's define it first. So here we add a comment using contour forward slash, and we just say header. And then we have another one called nav bar. And finally we have the results section. So for each of them, we're going to create a component, a React components. And we're going to just export an H1 with saying like header, nav or end result. We usually make the components inside the components folder. So we go to this package that Jason level, and we create a folder called components. And inside these components folder we're going to create 33 JSX files for header, nav bar and results. So we just click the components and we click here to create a new file. And first file will be header dot js. And we just can have a template using underline RFC. And as you can see, we are getting a suggestion of React functional components. So when we click on this, we get the export default function header and we return an empty div. And here we can add a one to seeing header. If you cannot see this RFC, make sure to install. The extension that we have here is seven redox graph cooler. Make sure to install this extension to get this kind of like a quick installation and templates. Without this extension, we don't get this suggestions. All right, we already created the component, just exploiting H1 saying header. So we go back to our terminal and we go to index.js and we import that header here. So we just write header. We close the tag. And in order to import the header automatically at the top, Let's increase the size so you can see a routine. So in order to import it, we just need to click on the, at the end of this header and we click on LNB, just press control space. When we click counter space, we have the auto suggestion seeing import header from components slasher. If you cannot see this one, make sure to, to keep this header.html open on the right side here. So if, if you don't have this one here, we don't get that suggestion, as you can see. So we keep this one open. And here we click at the end and the press on contour space. And if we click on the first artist suggests. Now in the browser, let me increase the size. We can see the header. Now let's create the same team for the nav for and the results section. So we click here, it creates a new file called nav bar dot js. And inside this file we just write underlined RFC, the Press Enter to accept the auto suggestion and we get a functional component. And the ADA hedge one here, seeing navbar. So we go back to index 30 years and we import the navbar. Here, we just write navbar. We close the tag and using contrast space to Auto Import. This is you can see here we imported header and nav bar from components. We have four and we can see it in real time on the right side. Next we have the result. So here we click the components and created, we call it the results. Was we create a component and using underlie RFC. And here in the pair, if we write an H1, we saying just results. And in the index.js, we just write results. And we use contour space to get the auto suggestion and be important. All right, now we have all the sections we need according to the final version of our project, which is here. In the next section we're going to start with the header section. And before doing that, we just need to one more time, push our website to the GitHub. So we stopped the server. We clear this. Let me increase the size a little bit so you can see it better. So now we just need to have good at all. Then be committed with the message. The message will be create components. We just say create components and create, finish the template. So we press Enter. And we just finally, we have to just say git push. Now everything is uploaded. If we go to our repository, GitHub repository, I think it's yeah, it's here. If you refresh the page, now, we see that we have three comments. If you click on this, we see that we have the create components and finish out. We made them stickier and fulfill finish, but it's fine. Finish the template. Click here. And you see that we created the header.html. Now for the Ts and a result of JS. And inside the index.js, we imported all the three sections. And also we we just add the tags here. All right. Yeah, that was it for the templating our website and start. In the next section, we're going to complete the header section. Here at the top. We're going to get this IMDB logo. And also we're going to create this, get these icons from hero And we're going to like Stalin bits using Tailwind CSS and add this kind of active and hover effect. So see you in the next section. 5. Create the header component: All right, In the last section, we have finished templating our project. And we created all the components necessary for a work like the header nav bar and the results section. In this section, we're going to start creating this header section. If you check here, we have two actually separate div with this size and this size. One has the IMDB logo and the other side is the nav bar. And each of them has separate components. Back this one and this one, and this one. Finally, the About section. And we're going to bring these kind of logos from the hero icons. Right? So let's go back to our Code section. And let's decrease the size a little bit. And we clear the terminal. And we go inside. We just run the server saying npm, run dev. Now we just press Enter and the open our browser here. Alright, so, so the things we're going to do now is just change this header section here, this header at the top. So we go to the heritage AS which is here. And as I mentioned inside the final version, we have two separate parts. And so we just need to add a div here for the top level. And also we add the image here. We're going to use the image tag, which is specified for the next few years. And we just write here image, this is different from the IMG tag. And it's optimize and it's completely created for the next year's applications. As why we are getting the error to firstly, we didn't import the image, so we just need to click on the end of the image and we just press control space and the imported from this auto suggestion, which is saying next slash image, we see it from the top. Now we get a different error. Actually the error is because we need this image tag has three mandatory attributes. First is SRC, and then we have to add a width and a height. All right, so here we just write SRC. And SRC will be the image. We just go to Google and search for IMDB. And we go to Images section. I just want to get the first image which is from the Wikipedia that orgy websites. So we click here. And on the selected image we right-click and we click on copy image address. And here in the SRC we add to the double-quotes. And inside the double quotes, the paste, the link. All right, we close this, Google, we don't need it and we get another error saying that this URL upload that So it was Vicky. Yeah. So this one is not configured under images into your next dot config dot js. So in the conflict ArcJS, which is here on the left side. Next, that conflict that JS, we need to add this upload that Wikimedia dot orgy URL. So we copy this and here we add something like images. And the openness of the curly braces. And here the AD domains. And inside, like an array, as array, we just add a double code. And inside the double quotes, we paste the link. As we change a config file, we need to restart the server, as we can see here, say restart the server to see the changes in effect. So we stopped server using contrast C. And once again, we do the npm run dev. As soon as we press Enter, we can see the changes inside the browser. Now we should get a different error, saying that we don't specify the width and height in the mH. So we close this next that conflict that js and we go to the index.js and an inside this image tag, we add a width. We just set it to be 100 and height to be 100 as well. We should get the image now, we can see here IMDB. The next thing is just add the menu section, which is on the left side, so it should be upper and inside this div. But as I mentioned, we need to create components for each of them. So we just create a component inside the components folder and we call it header icon dot js. We add a template using underlying RFC. And we just inside the header dot js, we add that header icon. So we just say header icon. And the auto important. We can see at the top. And we're going to pass some props here. The first prop is just say icon. And you're going to use hero icons to fill this part. And also we're going to pass title. The title for the first one was home, which we can see inside the final version here. So we're going to get this icon from the hero icons website. So here inside the browser we open a new tab and we search for icons. And in the search results we have hero As you can see, we have two types of icons, the art line and the solid. All right, so the solid one is filled with the color and the outline is just an empty icon. So we go to documentation for the two to see how we can install the heroic count. So in the as we are using React is the next years is a framework. Have react. So we just need to do npm install hero icons, forward slash reacts. So we copy this and inside the terminal we, we can just open a new terminal. We don't close this one. So by clicking on this icon, movie make a new terminal and just paste it here. And for importing this icon, we just need to add, import the icon name from At hero icons. Slash react is sliced solid. If you wanted to be solid, we choose solid and if you want to outline, we just write our tracks. So we copy this. And we go to hero icon start JS. And the now we're just in the header dot js we pasted at the top. We don't want a baker, Baker icon, we just want to Home icon. So we just sat at home and we can just here. Get home here. Alright, so we are passing this to the header icon. So we go to Header icon dot js and we get it as a prop. So we just get the prompts like this, but we're going to distract it first. And we get the icon and also the title. All right, so here inside the return. So probably everything will be fine because we have already installed. So we close this terminal, refreshes. It says that the molecule not fine, but we have already installed it, but probably we need to restart the server to see the effect. So we just say npm run dev again. Let's see that we get the error or not. All right, We're not getting the arrow, that's fine. So inside the header icon, so we get the icon. And also, as you can see, it's a high con is huge now, but that's fine. We're going to style it using Kelvin CSS. And for the title we just write down title. We are getting it from here, right? We get the tongue icon and we're going to start styling it using television CSS. Let's add two more. Let's first decrease the size of this. So for television CSS, we just need to add some classes that it already has some meaning and tell the CSS and we can get it from the tutorial. So for example, for the height, we just need to write H. And for the value we just write, for example, height 5. Let's reset the looks. It looks a little bit small. We just changed it to eight. And for the meaning, and we see, what does it mean to be H dash eight? So we just need to use Control Space to get the meaning. So you can see here, it says that the class H dash means height 2 REM, or 32 pixels. So it means that we are setting the height to be 32 pixels. In order to get these explanations, make sure to have the extension called. Think. It's tail when yeah, this one, the talent CSS IntelliSense, make sure to install this extension to get all this information and a suggestion inside the Visual Studio code. All right, getting the home, we need three more icons. As we can see in the final version of the project, we're getting a count content and about. So we go back to the Visual Studio Code. Let's keep the browser open on the right side. And we go to header.html. And we just copy this three more times using Alt Shift arrow down. And we just changed this home to contact. It was fitness first is account. So this third one is contact. The second one is account. And the last one is about. So let's get the icons as well. So we have home icons. The second one is the user icon for the account. Then we have contact, which is a phone icon. And last one is the information. Information, sir Carl Icahn. Alright, so now we just need to change this tree to this phone user icon, phone icon here and inflammation circle, arc. You can see the change inside the browser right away. And the next thing we need to do, just style this section. I think it's enough for this video. In the next section we're going to style this header section. Let's to the GitHub. So we just the US countries since the start, the server, we clear it. And we use git add to add everything. We use gets commands to add the message, which is create, the header component. Component. All right? And finally we do git push to push everything into our guitar. And let's check it inside the guitar here. The open-end. See it better. We go to a movie, dash app, dash V8. And we see now we have four comments. So we click on this and we can see we have create the header components. So we open this one and see the changes. So we created the header that js, and we added the hero icons at the top and also the, sorry, the header icons and the important few icons including home, user phone and information circle. And also we created the header icon separately. And we pass the props, which is title and icon itself. And finally, we have the image at the end, which is the, it has a source to Wikimedia that orgy. And we added the width and height. And also inside the header icon, we've got the props and we just made the icon, The title. In next step, conflict, that is, we add the domain G2. Don't get the error. That's the mandatory for the next year's website. And that's it. And we also in package.json, we installed the hill icons, but yeah, that was it for the creating the header section. In the next section we're going to style this component. So see you in the next section. 6. Style the header section: All right, In the last section we have finished with the header section. The practice icons from hero icon start com. And we got this logo from the Google. In the next, in this section, we're going to start styling this header section using Tailwind CSS. So we go to our Code, visual Studio Code. And inside the, let's bring this to the right side so we can see the changes. And we start with styling and bring this everything to the center and also change the background color as well. If you check the final version, we see that the background color is dark gray and the colors are white or gray. But when we hover over them, we see, we see a white color. And also if you click on the buttons, we see a red color. And also if we click on the a logo, we see that the logo gets brighter. So we go back to header. And inside, this is the div that contains everything, all the headers. So we changed the background color in this section. So we just add a class name. And the class name, the classes we want to add first is the background color. So we just write bg gray for the gray color. And we set it to be. If we press control space, we can see the suggestions, different number of colors and different colors. If you install the tail and CSS intelligence. So we start from the 50, which is the brightest color, and to 700, or 900, which is completely black. I choose 700. And let's start the server to see the change. So we just say npm run dev. Okay, now, see that the background color has been changed to dark gray. Let's change the texts using just, we just say text and we just say the color would be gray but 200 instead of 700. All right, and let's change the display to flex, to bring to bring them to the center using justify-content and items center. As you may know, intelligence, CSS, we start with the mobile size. So now actually these are for mobile size. And for the bigger sizes, we have to specify the classes by SM for a small, medium, large, x large. And also we have two x large. Now we want the flex, but we want to items at this icon to be at the bottom, like the final version. If we check the final version, when we decrease the size, we see that the logo goes under these buttons. You see here the trigger points. So the, in the mobile size, we have this form. So in our code, we change the flex two column and we see it here. And let's bring everything to the centre using items. Center. You see. And, and let's bring these icons next to each other. But they container that covers these things is this class. Here. It's covering all the icons. So here we change the display to flex. And That's the third, fourth. I don't want them to be very close to each other. So in the header icons here, we're going to change the width or add some margin. So we just add the margins X4. And in order to bring them exactly in the center, we change the display to flex. And we change the flex direction to column. Now you can see everything is centered. Let's add some padding to the parent in the header that JS. So at the top, which is add some padding. Padding six, which is 24 pixels. So if we pushed everything in the middle. And now, and also, let's go to this header icon. And for the title, I want the title to be a little bit. Have a space between the title and the icon. So we change the class name here. And we set the margin why? Or marching in the horizontal. 2, which is margin to, it means eight pixels. All right. The things I wanna do is just, I don't want this. We can select the characters because this is going to be very annoying when you're watching a website inside the mobile. Because when you clicking on a button, it's going to select the characters and it's very annoying. So usually web developers remove this, select, selecting ability for the mobile size or four menus, something like that. That's this, that's not necessary to copy. So in the header ts, in the top level, I mean the div that covers everything. We just add something called select none. So it removes the ability to select the items. Now, I can now select them. So it's going to be very convenient when you're watching a website in the mobile version. Next, I want to add some clicking and things like changing hovering effects and active effects. So in each icon, header icon, we're going to add something called hover effects. So we just say hover pseudo-class. So when we hover over this icon, I want to change the text instead of gray to be white. So you can see now by hovering, Let me increase the size. Now, if we hover over the icons, you see the change. Right? So, and then let's change the cursor to be pointers. So when we hover over the elements, we can see a pointing hand. And now the the margin is four, but when the website is bigger in a bigger size, I wanted a little bit, they have more space between them. So I say just when the size is bigger and overlarge, I want the width to be six instead of four, or margin x B6. So when now we increase the size of the you see the trigger point here. Bigger than large, we have more space between the icons. All right, so the next thing is I want to do when we increasing the size after the small size. I want these icons to be at the left and the logo to be on the right. So we need to change the flex direction of the header dot JS from column to row when we increasing the size. So here we say if we have the size bigger than a small, we want the flex to be row instead of column. Then be tested for you. See a change after this. This is the trigger point. So for the tablet and the bigger screens, we have them next, next to each other but less change the justify to be between. This is similar to justify content between. So you can see that this is like justify carbon parent a space between. So when we are increasing the size more than the small, we see that the icon schools to the left and the logo goes to the right. The next thing we want to add is the active effect. When we click on the icon, I want the color to be red. So in the header icon dot js. If you remember, we add the hover effect, takes bytes. After that. We add the active. We say Wendy active, or when someone click on the icon, change the text color to be red. Just 400 like this color. So now when we click, we should see the color changing. The next thing is I want to change when we click on this icon, IMDB icon, and I want to change the brightness of the logo. So in the heterodoxy S, We go to the images, you go to the image tag. And here we add class, class name. And we just first we change the cursor to be pointer. And so now we see appointing have when we hover over it. And then if we someone click on the icon, it means the active pseudo-class. I want to change the brightness to a 110. Here you can see the seed now the Tillman says it's very easy to use. Everything is similar to CSS, but we don't need to go to CSS all the time to change everything and make different classes. And it's very simple to use, but you just need to practice more to remember all the syntax. So now if we click on the icon, we see that changing in the color. All right, but that was it for the nav bar sick, for the header section, we have finished it. It's responsive and also we have this hover and active effect. In the next section, we're going to start with the Navbar section. And we're going to create it like this section, the trending and top rated that we have in the final version. So before finishing the video, Let's do the GitHub section. So we just add everything to the repository and commit with the message of Finnish. Or we just say style the header section and push it to the guitar. Now, let's go and check. We refresh, and we click on this movie app version eight. Now we have five comments. If you click on them, we see that the last comment is style the header section and the things we did in the header dot js, we add some class names for styling. And also in the headers icon dot js, we just change the class name and fatter. I really didn't do too much. It was just a styling. And just want to mentioned that using GitHub is necessary for all web developers. In my opinion. It has two good things. First is just the you can see what change you have done to your code. And also if someone comes to your GitHub page, and if you want to hire somewhere, that's the best place to show Your lucky. Like your supervisor or person who interview Use that you are really working on your projects every day. Yeah, that's my recommendation. And also when we want to deploy the website to the verso, we need to get hard to connect our application to versa. All right, That was it for the styling part. In the next section, we'll start with the Navbar section. So see you in the next section. 7. Create the Navbar component and requestsjs: All right, In the last section we have finished styling with the header section. In this section we're going to start in on the Navbar section. So we go to in components section and open the nav, nav border JS. And if you look at the final version of the project here, we see that we did never section has a different color and has two tabs, trending and top rated. When we hover over the tabs, we can see that the color changes to white. And when we click on the tab, we can see the red color and also changing in the URL. So in the trending, we see the genre is fetched trending. And top rated. The genre is fetched top rated. You're going to use something called the US effect as our use router from next year's router to create and push the, the, the route to this specific Chandra. All right, so we go back to our Visual Studio Code and we create a new folder called Utils. And inside this folder we're going to create a file called requests dot js. This is the file that we're going to use to have this information like FH top rated or Fitch trending and also these trending and top rated as well. So these are not hard coded. You're going to get this information from this file. So here, first we need to have an API key constants for getting the EPEAT of the IMDB database. So we create a constant and recolored API underlying key. And we're going to get the API key. This is not a public constant, it's going to be from our environmental local environments. So we just write process that ENV, that API key. So again, we're pushing our application to get hub. We're not going to push this variable and its amount because it's going to be from an environmental variable. So with that, let's create the environmental valuable. Here out in the main directory. We just create a file called dot ENV, dots locale. And so we made a mistake here. Just rename it, It's locale. Locale. Right? Now, if you pay attention, we can see this color is a little bit gray. So it means that this file is not going to be pushed to the GitHub. And also these files to the node modules and that next. So here we're going to define the API key. And let's go to IMDB website and the database. The database for IMDB is from the website called TMD be. So Tm, Tp. So t and dv is, the website, is the movie db dot ORG. This website we are going to use to get the API key. So we click on the website and let's zoom it a little bit. Yeah, Here in the website you can see here there is a login or join t and b db. Make sure to join it. It's very easy, just, you need to just have some basic information from you. So I already sign up for the website. I just say login and I'll just quickly write down my user name and password. And login. Once I login, I can see my stats and rating and other things. In. If we click on this icon, if you click on it, you see the menu and there is a setting. So we click on Settings. And here on the left, here we click on API. So here we copy our API key. And we go back to Visual Studio Code. And we paste it here. Right? And as it's, it's like a config file. We need to restart the server to see the effects. So just stop the servers using control C and we just write down npm, run dev to run the server again. All right, so these are finished. So we have this and requests that js. Now we have the API key. So now we just need to create our export and create the files. You just need to export. Default. We opened a set of curly braces and here, the first one as a, if you remember, it was fetched trending here. So we just write fetch trending. And the fish training has two things. The title, which is trending. Also we have the URL for the getting this. The, the URL that's going to fetch the trending data from the IMDB or TV website, which is forward slash trending. And we have weak. So before week we have all. And so we are getting the trending of the week for all the movies. And after this we have the API key. So there is a, so there is a question mark. And we have API key, which is equal to this API key here. But, but it's variable. So we need to write it down inside a variable, but we need to change this double CO2 back, back tick to be able to write down variables. So the variable is API key. And after that, we have the language of the fetching. And the language is English. Language equals English. So for this kind of object oriented oriented kind of template, this is, this is going to be key. And these are the values which are title and URL. There's going to be another one which is top rated that. I just want to grab that and paste it here. It's very simple and similar to the top. This one. Instead of trending, we have top rated for the title. And the URL we're using to fetch the data is movie top rated. Instead of trending all big, the API key is similar and also the language is English as well. Okay, now it's time to get this information inside the nav bar dot js. And look through this to fetch to a trending and top rated. So we go to nav bar dot js. And we're going to import this first. So at the top. We just import requests from utils slash request. And we're going to look through it. So because it's object-oriented, so we just write that. We just need to write objects dot entries. And Which one? What do we want to map is requests. So here would be requests inside the parenthesis. And we're going to map through this. So the map is going to give us this kind of information. They're going to give us the key, which was this one and this one. And also it's going to give us the value, the values, I mean the title and the URL, but we need to disrupt the structure it, so we insert values, we just write a title and URL. Right? So this is going to return, let's just say looted as an H1. To see the results. First we just return key. We save a file. Let's refresh this. We are getting an arrow does seeing objects are not, is not defined. This is not objects is should be objects. It bout S. So we save it again. Okay, now we're getting the fetch trending and top rated. So let's instead of key, we get the title that we need it, which is trending and top rated. And as we are mapping through something, we need to provide a key here. So the key would be same key we have. This is necessary for react because we are again getting error after that if you don't do it. Especially when we're deploying the web site in versatile. It is common to get the era of not providing key. Alright, so let's style this trending and top rated. All right, we just change this className to flex to bring them next to each other. And then the width using justifies center. We bring them to the center horizontally, excuse me. And then we change the background color to gray. Grays instead of 700 that we used here, we're going to use 600 to be a little bit different. And let's change the color of the text to gray 200. And the other things we need to do it just the we want to remove the ability to select data. That is annoying in the mobile version. So we just say select none. And let's increase the size of the text. We just say txt x large. And when this size is bigger, I want to, when the size is bigger than large, I want to change the text size to two x large. So when we are here, the text is bigger than when. When the size is smaller. Let's add some margin around each of them. So here we need to add Kelvin CSS styles to this head, H1. All let's make it H2 to makes more sense. So here we add M6, managing six around it. So it looks better. Let's change the cursor to be a pointer. So when we hover over each element, we see a pointing hand. Then when we hover over it, we want to change the text to white. And rendering. You can see the change. And when they are active, that means then when we are clicking on them, Let's change the color to red. Okay? So we did everything now here except the, except is changing to the URL, the genre, and the top rated. That is simple as well. We just need to, as I mentioned, we need to import something called US router from next, slash router. And let's create a constant here. And we call this constant router. To use router. And here, inside this H2 we add a onclick. So this onclick is going to be a function that returns router dot push. And the URL we want to push is, let's add some backticks. So we have a beacon variable. So the URL will be gendre equal to the key. The key is fetched, trending or fetch top rated. Okay? Getting some error. Yeah, the error is because of this use router. It should be camel case. Yep. Now it should work. So in my laptop is a bit slow now because I'm recording at the same time, but you should be fine now. Yeah, it's working now. So when we maximize the window and tested, we click on trending and we get Chandra fetch trending. And we click on top-rated and we get John Fitch top rated. So in this, in the next section, we're going to start getting the data from the API and using these contexts, fetching from the URL. And based on these keys, you're going to get the results from the IMDB database, as we can see in the final version. All right, so before ending the radio leads to the GitHub. So we just add everything that we did in this video. And we do the comments that was created to nav bar components and requests dot js. Let's get pushed to it. Alright, so let's go inside the get and refresh the page by clicking on this movie app version 8. And we click on Commit. As you can see, now we've created a nap or components and requests GS. So in the nanopore that G S, we created this file. We imported the requests from utils slash request, and we imported the US router from next router and be looped through the the object inside the request. And we created the requestor Ts and get export some keys and title and URL. Yeah, that was it for this section. In the next section, we're going to start working on the server-side rendering. And we're going to get the information from the IMDB first and populate the data and send it to send it to the client side. So see you in the next section. 8. Create server side function and pass it to client side: All right, In the last section we have finished the Navbar section. We added the visit. We got the information from the request dot js from here in the hotel's folder and look through it here. And we use use router to push the link when we click on the trending or top-rated and we get the Chandra fetch top-rated and fish trendy. In this section, we're going to start getting the information from the API, the TM DBAPI and showed in inside the results section. In order to catch the data from the API, we're going to use something called server-side rendering, which is exclusive to next year's. And it means that when the user comes to our website first, the next year server-side rendering. Let's start working and get all the information and send it to the client side before the persons can see the website. And it does that one in a very fast matter. So I showed you in the practice now, in order to create that server-side rendering function, we should go to the index that TES inside the pages. So at the bottom, now, this is the client side. You should remember that this is a client side. And we're going to now go to the server side and create a function. And this function is not going to be visible for the user just inside the server. And after doing something, or for example, getting the API information, it sends the information to the client side, which is here two prompts. I show you in a moment how it work. We just need to create a function. We just say Export. It's a sinc functions. And its name is gets server side prompts. And this function is going to get something called contexts, which is the inflammation, some information and one of the information is getting this genre fetch trending or top rated. So we're going to get, we are going to know which URL is in the pages in. And we get this key. And by this key we're going to get the information from the TM DB database correctly. All right, so, so we open a set of curly braces and first things we need to get is just this Janda. Don't pay attention to the error because we are not we haven't finished the function, yeah, because we are not returning anything, we're getting this error. So first we get the genre. We just say counts. Genre. The genre will be contacts dot query, dot Java. So if the Curley was any query we can get from the URL using this method. The Caribbean are interested in is this genre. Okay, we, we save this query inside a constant. Now. We create a function. We just say we just create a constant called request. We are going to get the information from the API. So this is going to await and fetch some data. Right? To detail we're going to get is from this URL we just use back to because we need to add the variable Genre inside the URL. I just grab this quickly. So this is just the base URL, https double on the two forward slash api dot the movie slash three. And the rest is the URL we have inside the, inside this request that GSV, the URL is this one. And so we're going to get this 11, how we know that, which you are L we need. We're getting the information from the this, this query, fish trading. First. First we detect which genre we are having and depending on this Janda, we are getting the information from the, this URL. So we know that which we are L we are getting. So you go to, you go back. Let's close some of these things that we don't need that are actually inside index.js. Here, we create a variable. And the variable is going to be request. And which requests we want first need to import requests. So we use contour space to get the auto suggestion and the required every important request from utils the request. And as I mentioned, we need to determine which key you want. Standard key is comes from this genre. So request and genre. And the things we want to get is URL Soviet just add. All right? And after that, we just need to convert this information to a JSON file. So here we add dot then. And as be getting the auto suggestion, we're getting a response from this request and we're going to convert response to a JSON file. So we get the response and be converted to JSON file. So now this request is a JSON data. So now we can, we can export this information from the server side to the client side. Just one thing we need to remember is we are getting this genre, right? But if someone comes from a different URL, for example, the root URL here. So there is no dendrites and you're going reading, we're going to get some error because there is no Janda. And by default, I want to show the trending data. So we just say, if this one exists, It's fine if not, or we get this fetch trending one. Alright, so now we need to return the props at the bottom. So we just say return. We open a set of curly braces and the things we want to return its props. And this prompts include the results. And the results is equal to this request. Data results. All right, So now still the information is in the server side. In order to get this props, we can get it inside the client side here as a props. Right? So we are getting the prompts, but let's destructor it before and just get the results. And we just console log it in the client side. All right, and let's open the console using F 12. And here, Let's go to some of these things like trending. Let's, when we click on trending, now we're getting an array of 20 results, 20 IMDB movies like first one is yeah, different movies. So when we open it, the first one is the yeah, the year the title is Spider-Man. The second one is matrix. So, but if we click on the top rated, we should get the different information. So now we're getting a new array. And this array is the first movie is an Indian movie. And the second one is just Shawshank Redemption. Alright, so now we're getting the result correctly. Let's show them on the browser. So we are getting, we are getting the results. Now let's pass this as a props inside the results component. And let's get this one inside the results that JS, which is here. Alright, we get the props here, structure it. And we just say results. And here we can look through the old result because we have 20. So we can look through it using map function. So we get each results. And we return, for example, it will return just the 1 first same result. For example, dot title. And make sure to this one inside the curly braces because this is a JavaScripts. All right, We're getting some error saying they cannot read properties of undefined. So we are not getting the, this is some stakes here, results. And this phone to results and should work now. Yeah, now we're getting all the titles. And also if you click on the trending, we get a spider. And if you go to the URL, just localhost 3000, we get the trending again because we determined here inside the index.js, if there is no a specific genre, just go fetch the trendy. Alright. So in the next section we're going to create another component called card, card ab.js. And you're going to get information like images, title, some overview. And finally, we are going to show them as a card inside this results section. So before doing that, let's do the Git Hub section. Good hub one. So let's clear this. And first we add everything. Create a commit with a message saying, create server side function, and pass it to client client-side. And we push it to the GetHub. Get be using git push. Okay, let's go to GitHub and refresh the page by clicking on this. So now we have 77 commits. And the last comments, which is 20 seconds ago, we created the server side function and pass it to the client side. As you can see, we created, we change the results that js from this to this. We mapped to the all the results and show them as H1. And we added the service side function to the index.js. And we imported the requests from utils slash requests, and finally console log it in the client side. All right, In the next section, we're going to start creating a card. So see you in the next section. 9. Create card component: All right, In the last section we have created our server side function and we got the information from the IMDB database by providing this URL and our specific genre. Then we got this props and send it to the client side here. And we pass this data as a props to the results that JS. Right here, we mapped through all the results and it just shows the title as you can see here. So Let's run the server, npm, run dev. Now we refresh the page. We should get the yeah, Just getting the trending now. Then we get to top rated. When we click on top rate FE, if you look at the final version of the projects, we see that in the results section we have something like cars like here, which are actually responsive. So when they are small the in one column, and then when they get bigger, they get two. And finally 3 and 4. And when we are in a very big screen, we have five columns. Alright? And each of these things are something called each of them like this one is a card. So we're going to create a component called car, which includes the image. Here, the image, and this is the overview. And we have a title. And here we have three sections that date and make changes. Here we have the Tate like button, like icon, and also we have that the number of likes. So let's firstly create the card component. We get all these datas and finally we may make them responsive. All right, Let's go back to Visual Studio Code. And we create another component called car. So here we click on this to create card Tyrtaeus. And we create a component, a functional component using underlying RFC. And we click on the first auto suggestion. And in the resulting G S, instead of showing the title, we're going, we're going to import this car first using contrast space, the important. And we pass this result as the props inside this car. And here in the card, we can get that one as a props. So first we disrupted and you just get the results. Now, we can, just like before showing them inside the header H1. To test this is working. So results dot title. All right, we're getting the same, same result as before, but with the another component. Let's before forgetting, we just go back to result touches and B add a key. Because this is a map, we should provide a key. And the p will be results that ID, because each of these, each of them, they have an idea. Let's check them inside the console. In the console, if we open the array we getting. And if you open one of the movies, we see each of them, they have a unique ID. Alright? So we just use this unique ID as a key so we don't get error later when we're deploying the website to versa. All right, let's go back to Carter J S. And here, first we get the image. So we use the image tag. Of the next years, the imported at the top. And as you remember, we have three mandatory attributes for image, which is SRC, width and height. So for SRC, this is going to be the results. Let's check it inside the console. I'll show you in a second. So just write down first is altered ID to the don't get error, so we can get the array. So here, if you open one of them, we see that we have a link to the J P G file. This file is the path to the, to the image of the movie, right? So we just copy this bracket back through our path and paste it here. But this is just the slash that GPT. But we need a base URL for this one. The base URL, we just put it here. Let me just quickly grab it. So we have a constant called base URL. And the base URL is just HTTPS Image.all forward slash t, first slice P and 40 slash original. And after that this bacteria is going to, this backdrop paths is going to give us the image. All right, So instead of just writing down this one, add the base URL at the beginning. And we just add this visceral at the beginning of the backdrop path. Now, we are not getting error, but we are getting the same error we'll be getting when we were making the logo. So we have to add this URL to the count to the next 30 years that next, that conflict that AS. So we copy this URL and we go to here to next that conflict ITS and we add it here as a new domain. All right, we save the file and we need to restart the server because we are changing the config file. So we just use Control C. And let's clear this. And we just npm run dev again to restart the server. Now we shouldn't get this error, but you're getting the, another error for the heightened width of the image because we haven't provided there. So we just add the width B. That is not important because we are making them responsible later. So we just say with 200 and height 100. So we don't get error now. And we should get the images one by one. So in order to, instead of giving the width and height to be precise and calculate it, we're going to use something called layout in the image and we set it to be responsive. So now we should get the image in the full size. So we again, the images of the hour. There are movies. So this is for trending. If you click on top-rated, you should get the images for the top-rated. And as you may, as you are rare, the image tag inside the next years gives us the sum, lazy loading for the images. So when we go down, you see that the images under is not loaded yet. And this is going to help us to have a very fast website. As you can see when we scroll down the new images loaded. Otherwise, we just have the images we have. And also, if you go back, you see that the spiders here, this, this is, this is something called catching in the next years. So it's rented one time you go. In. And we get an image is going to be stored in somewhere like cash. So it's not going to get one-by-one always. But this cache has some limits. So some of the images stays and some of them loaded again. All right, so now we have the image. The next things as check the final version. We have the image, we have the overview, title and date, and also we have some icon and then vote count. So if we go back here. So now let's get other tanks. We put them in a deaf. And the first things we're going to get is the result dot overview, which is this one. Each movie has an overview, but we don't want all the overview, we just want the first line of the overview. So you just put this one inside a paragraph. And we can add a style to it by using Tillman CSS truncate function of transit class to make this one in just one line. All right? And later we're going to style all of them. But first we just finish getting all the datas. So next one is have an H2, which is the title. And you just say results dot title. So we're getting the title. But I want to show you that we're not, we're not getting all the titles in some movies. They don't have title, but they have title in different ways. So if you go trending, and some movies like this movie doesn't have results or title or this one. So let's open the console and check the array. So I think it was 7717 has a title. Six, F6 doesn't have title, but it has something else called name. All right? So we can say if the result that title exist, show them. Otherwise, show something else, which is the result. Let's check that we get all the titles or name. Now we're getting the name here. Yeah. Now all the movies has name or title. All right, next thing we want to get is the data release. Let's check it again inside the console using f2. So this array, they have something called release date. All some of them. They don't have released date but they have works. Yeah, they have this one has something built on half release date. This one doesn't have religious real-estate, but instead it has first date. So we're going to get either the release date or the first air date. So we just say results. Don't release days or result that first yeah. First air date. And you should be fine. So we're getting the release date for yeah. I think we are getting it for everyone. Yeah. Now that's correct. Let's get this icon, the thumbs up icon. We're going to get this one from hero icons. So. Let's import some icon from here, icons. You're not getting it from solid. We get that one for our outline. We don't want solid icon, okay, so we copy this and after this date, I'm going to get this. Inside this paragraph. We get the tum, tum icon. Okay, we're giving it, this is huge food, so we quickly add a class name of height of five. Okay? After this, we need the vote counts, so we just say results. Dance. Vote counts, right? So we're getting everything now that we need, but it's still not styled. In the next section we're going to start styling card section and make it responsive. So first we just add this one to get hard. So we just say git add. And we have good commits. So we create create card components. Alright, and we push it to the get her a shaker and overview what we have done. So we'll refresh it. You go to commands and you go to create card components. As you can see, we created card DHS and we got the image. We import the image from next image, Tom, tom of icon from hero icons. And also we create the image. And we got the information for the Overview, title, release date, and also the vote count. And also in Resulted chairs, we remove the H one and we added the card components. And also in next step, conflict or DSP add this URL as the domain so we don't get any errors in the browser. So in the next section, we're going to style this component and mix our website responsive. So see you in the next section. 10. Complete the card component and make the result section responsive: All right, In the last section we have finished the card tertius component. We've got the image, the overview. You truncate it, the overview. We've got the title, the unreleased state, because an icon from hero icons. And also we got the board cuts. In this section, we're going to style this car and also make it responsive when we have a bigger screen. And we changed the background color and et cetera. All right. Let's first we go to the top level, which is here in the card dot js. Let's add some padding. First. We add panning tree. You can see now, actually now we are designing the mobile version first and later we're going to go to the larger screens. So we have padding here, and also I want some padding for this section as well. So here we add some padding to which is, I believe it's eight pixels. Padding eight pixels, right? And let's change the background color. So we go back to results dot js. And here we add a class. And we change the background color as the same as the header. So the background color will be gray and 700. Alright, then we have the text color to be great. 200. Let's go to Carter chairs and make this overview a little bit bigger. So after the truncated at large, right? And then the changed it home texts to large as well. And also make it bold by using font. Bold. All right, and let's bring everything next to each other this section. So we need to make it, make them red flags. So first we make them flex to become next to each other. And as you can see here, the icon is a little bit upper than the other section. So we can fix this by using items center, which is equal to align items center in CSS. And also let's add some margin left for the towns are the margin left would be three. And margin right to be two. Or just one is enough. All right? This one looks okay. And also we want to remove the ability to select, which is annoying in the mobile. So in the result of chess, here, we add, select none. So we cannot select it. And in the cartridge is, let's add the ability to harbor. So we just say here at the top, we just say if someone, however, let's change the text color to be white. And also let's add the cursor to be pointer. So when we hover over the elements, we see a pointing hand. This in a different. And also let's add the active pseudo-class for changing the color to red. We just say active text, read 400. So when we click on there, we see the color change to red. All right. That's looks okay now we just need to make it responsive because now when we increase the size. See that image increase the answer we are. But we wanted to be in two columns when like area in the tablet size, three columns and, and finally four columns and five columns when we have a huge screen. So that is very easy as well. We just need to go to a result, the chairs. And here we just say if the screen is bigger than a small, we want the, we want it to be grid. And also we want the grid columns to be two. Let's check. So we increase the size as slowly when as soon as we get to the size bigger than small, we get two columns. Let's continue this one. So we're going to want to have the three columns. So we just say grid columns tree when we have a size more than large. Alright? And also we want four columns when we have size more than x large. So we have created four. So now we have a full screen which is X large. We have four columns. And finally, we want to have five columns when we have x, which is in bigger screens, monitors or in a fork TV or whatever. We'll just say grid calls five. So now if we decrease this zoom level, we can get the five columns and let's add some Zoom, some zooming effect when we hover over the card, when we, we are in the large size or so we just say when we have a screen more than x, which is here, Let's do, let's change the scale. Let's change this scale to be a 105%. So now, I actually, we shouldn't do here. We should do it inside the cardinality here. Now. That is actually wrong. Let's remove this. And inside the car, we should do it. So in the top level in the car, we see when we have this screen more than x large and we hover over the element, let's increase the scale to 100 and a 5%. Now we see the change here, here. And actually in the 26 large we get the same thing as well. But let's make it more smooth by adding some transition. That is simple to. We just need to write transition and transition and transform property because scale is a part of transform. And we want the duration to be 200 milliseconds. Now, when we hover, we see that beautiful animation and smalls zooming effect. But we don't have this effect when we have a smaller screen because it doesn't make sense in the mobile screen because we don't have a mouse when you're using a website inside a mobile. We're just using the touch screen. All right, That was it for our project. In the next section we're going to add the projects, the verso, and deploy it and also get a custom URL. So we can have a real URL for our website. Let's say before finishing, let's add this to the get hard. So we'll just say ket and all. Then we have Git commits. And the message is we just say complete the card components and make it responsive and make the website response, or make the results section responsive. And finally, we use git push to push it to the Git Hub and we refresh it here. We have now nine commands. We click on commands, and here we see our last comment, which is in 18 seconds ago. As you can see, we just style it a style different section like current js. And as a result of JS, that in the next section we're going to deploy the website to versa. So see you in the next section. 11. Deploy to vercel and add a custom domain name: All right, In the last section we have finished our card dot js and made our website responsive by adding the greats like. And we just changed the grid columns number after the small, large X large and to x large. In this section, we're going to deploy our website to herself and finally, applied to a custom URL. So here we open a new tab and go to search in a Google person. In the search results we click on verse Once you are inside the reversal that count, you need to sign up or login. If you are a designer, it's three, completely free and it's just need your name or your email. And then you just need to login. I'm going to use my GetHub to login. So it's just because my kids have is already open in another tab. So once I click on the Get how I'm going to directly coincide. All right, Once I came inside, I can see my previous deployment. And here I can click on New Project. And in the left side you can see all my Git repositories. So now we have created our this is the last one, movie app version eight for me and it was 17 minutes ago. Here. You can see that 17 or 16 minutes ago I committed the last one. So it's automatically came here. But you have to sign in which you're good. Github through there we'll solve to see this section. Otherwise we just click on login with your GitHub. Once you see this section, you just import the application you would like to deploy to versa. I click here on Import. And it suggests me project name. That's fine. Movie app version age, it's already detected that is Next JS. And also we need to add our environmental variables. So we go back to Visual Studio Code and inside it, that envy that locale. We just get our API key and paste it here. And also we get the key itself and paste it here and click on Add. And now we can deploy the website. We just click on Deploy. It usually takes about, I feel it's 45 seconds to one minute. So in the meantime, let's go to, I want to go to my Google domain. So inside Google, I search Google domains because I have my domain on Google domain, but you can go to your own domain, a website and get all the information and change it. So I use, I personally use Google domains because it's very secure. It's similar to your Gmail, this same security. And once you select for your website, I want to use this 100 JS projects that come my website. Once. If you don't have you just you can buy a new website. So you just go to all domains and purchase a new domain. And once you are inside the a 100 years projects such com or your, your website, you go to DNS. And here you see my previous deployment. Here you click on manage customer record. And here I want to add a new record. So here click, I click on create new records and I just call this sub-domain movie app version eight. So the type is a, and in order to get this IPv4 address, you just need to go to verse. So here you can see that RAD, our website, is deployed to versatile. And if you click on the website, you see that the domain, domain name is movie app aid and some thing else, dot app versus that, right? But I want to change this one to my custom domain, which is 100 JS. Projects that car. So I go to the View domains and here you see that this is our domain now, movie app version 8 dot versa that you can open it. I can see our website. Alright. But I don't want this domain, which is the dot personal. Let's go to at my own domain, which is movie version 800, JS Hey, I added. Once you add it, it's automatically at the SSL configuration and everything. You just need to click on Edit and go to DNS records. And here you can get this value 76. This is my IPV. Alright, so you just copy this and you go back to Google domains and paste that. Here, you see this is all always the same. Alright, once I save it. Now if I copy this URL and paste it here, you can see that our website is completely live in our custom domain. You can actually directly put it in a 100 years that karmas fall. But because I already have something else in my domain, I added a sub-domain. If you want to add it directly, you just need to. Let me show you. Instead of writing off movie app version six or something like that, you just add star or make it empty. So it means that this is just a 100 Now, right? But otherwise, if you want a sub-domain, you just write down whatever you like to have before your actual domain. All right. This is our website is, it's completely responsive and it's very fast. It's faster than local host actually when you deploy it. So when we click on top-rated, you see that quickly, loads all the images. And trending as well. Led to a liter. I'm going to add more functionality to this website. So please wait for the updates of these projects. I'm going to add more functionality in, but you can use the other projects and wait for other projects as far so see you in the next project.