Full Project-based Tutorial - React + Next.js

if you want to learn coding by building real-life projects you are at the right place in this tutorial we're going to build complete application using react and next.js we're going to have features like searching and filtering we're going to try out server side rendering and we are not going to use any css framework but style everything from scratch with css including responsive layout we also going to have dock mode and light mode lastly we're going to deploy the application with first cell so before getting started let's take a look at the final product so we're going to build a word ranked application the user could be able to search by name so for example finland or the continent let's say africa or this sub-region so let's say uh southern asia and also you can sort the data by population area name or the guinea number and we're also going to build a country page where user can see their basic information as well as neighbor countries and we're also going to build a theme switcher functionality as well and everything should be responsive if you want to follow along be sure to check out the description to download the resources as well as as a design but other than that if you're ready let's get started first let's open the terminal you can do that with visual studio code in the photo of your choice let's say npx create next app and we're going to name it word ranks and let's wait for it to install when it's done let's open the project in here i'm going to go into the project by saying cd word rank and then i'm going to open it by saying code it's going to open a new window so let's close the old one and make this speaker in here in the terminal you can start the project by saying yarn dev when it started you can find it under localhost 3000 and let's create a new folder and name it src let's move pages and styles under src and let's start off by going to global.css and create some variables let's say root and we're going to have text color text color secondary primary color background color background color light and background color dark we also going to have font family and box shadow you can find all the property for these variables in figma so if you go to figma and select the element you should be able to find the color and the typography as well as the content under inspect so let's go back to our visual studio code and i'm going to copy and paste the property you can pause the videos or go to figma to check it out yourself in order to use the popping phone we need to go to google font and search for popping in here i'm going to select light medium and bold and let's import it let's copy this and paste it in here and i save that and i start off by using the family in here so let's say font family it also use the background color as well so let's say background color background color as well as the color the text color right and for every element i'm going to give it color inherit as well as the font to be inherited so the next thing we want to do is to go to the index.js let's remove everything under main and let's just have main for now and let's also remove everything under footer and just have folder and let's go to home.modo.css and let's remove all the styling and we're going to use the class name container and folder so let's leave it there right so now if we save that and refresh the browser it will not work because we changed the photo structure so we need to go to the terminal and end the server by saying control c or command c and start the server again by saying yonder and now it will refresh the browser we should be able to see the main and the folder let's remove the api folder as we don't need it and under source let's create a new folder and name it component the first component that we are going to create is the layout so net create a new folder name it layout in the layout folder let's create two new files the first one would be layout.js and the other one would be layout dot module dot css notice here that next js support module css out of the box so we don't need to worry about that in layout.js let's create a new constant layout and it's going to be a function and let's use what we have under index so let's remove this and paste it in here and let's export it by default we also need to import the head so let's import that we need to style so let's import the style as well yeah.module.css in here let's copy and remove everything from the home and paste it here now if we save that and we need to use that in the index.js so let's import and use that in the layout let's pass in the jira and let's use that inside the main and now we'll go back to the index.js and if we save me and save it now it should look the same the next thing i want to do is copy the logo so you can find the logo under the resource and let's just copy and paste it under layout now the logo is the svg so let's copy this and paste it under header so let's create a header and paste the logo inside and now we now if we save that we should be able to see the logo and let's also uh add the class name for the header so let's say constant equal to size dot let's say header now we have every element let's go to layout.module.css in here i'm going to give the container padding of 24 pixel and i'm going to give it a height of 100 view height and let's say this play grid and that's you grid template row and i say alt2 one function r2 and now if we save that you can see that the folder now is on the bottom and the main will take every spay available between the header and the footer in the footer let's say text align center font size to be 0.75 ram and in the header let's move them in we don't need that let's say display flex justify content center align item center and let's also give you the margin volume of 32 pixel and the footer let's give it a margin top of 32 pixel this one should be margin bottom right so now we have it let's go back to the layout and i want to change the footer to be my name add dev challenges dot io in here let's also add a new pop and call it title by default it's going to be word ranks and let's use that instead of create next app so we also want to use our icon so let's just drag and drop and replace it right so now so now if we refresh it we should be able to see the world rank and the icon before we move on let's delete this and this that we're not going to use in index.js we need some data to work on so let's export a new constant it's going to be guest static pops it's going to be a nursing function and it's going to return an object with the pops inside and before returning anything we need to create a new constant card rest uh this is going to get the data from the endpoint and because this is a promise so we need to wait for it we also need to create a new constant named kanji this also need to wait for the rest to resolve so let's say rest jason and now let's return the country inside the block and we need to pass it in the home so now if we say console.log country we should be able to see the list of countries so now if you want to get to know more about get started pops you can go to nextjet.org and search for it but basically what we have done here is that we want to get all the data at the build time so later on when we visit the page all the data would be available for us we don't need to wait for any call to resolve but remember this is static it means that it will only be updated when we reveal the project but yeah now we have the data let's move on so in main uh let's add a tip and let's say found country length country and i'm going to give it a class name style dot count we also want to add a search input but we don't have this component yet so let's uh create them so under the component let's create a new folder call it search input in here let's quit to new files the first one would be search input.t dot js and the other one would be search input.module dot css in the search input.js let's create new constant search input is going to be a function this is going to return a div under the div would be an icon which we don't have yet and then input in order to get the icon we need to install the material ui icon because we want to use google icon so let's stop the server and say yarn app will tell you ui card and module ui icon and let's wait for it to now when it's done let's start the project again in the input let's import the search routed uh from achieving your icon search router and let's do this before the input and also import this time from the search input module.css as well and i'm going to give the hour div a class name of style.wrapper and for the input i'm going to give it a class name of styles dot input and whatever is passed in the search input so let's say dot rest we want to use that in the input right so now if we save that and let's export that by default and let's use that in the index.js and let's save that and import that so now we see the input so let's say placeholder filter by name reason or sub reason and let's save that right now we have it let's go back to our input and let's start styling insert input.model.css let's select the wrapper in here let's say display flex and we want to center the item vertically so let's say a line item center let's give a background color of let's say background color dark and let's give it a border radius of 8 pixel and let's give it a padding left 16 pixel right do i forget anything let's move on to the input let's remove the border background color to be transparent and let's give a padding of let's say 16 pixel and let's give it a width hundred percent high hundred percent right looks good and let's remove the outline as well right so now let's select the placeholder by saying import placeholder and let's say color to be tech color secondary right looks about right and we want the icon to be secondary color as well so maybe we want to paste it here and then in the search input let's say color to be inherit oh we need to put it in the wrapper right now we have it let's go back to home module.css in here let's say account i want to give it a margin let's say 12 plus 12 pixel 0 and let's also give it a color text color secondary right it looks good next let's create a new component name it country table in here we're going to have two file countrytable.js and countrytable.module not css in the country table let's create a new constant country table is going to equal to function this is going to take in the country and let's return active with country text for now and let's export it by default right let's try to use that in the index.js so let's use that below the search input so country table and let's save that and it also path the country equal to country right now we have the text uh let's go back to our country table let's close this and this all right so in here we want to create a header so like we are new to i'm going to keep a class name of let's say style dot heading and let's import these dies as well right so in the heading we want to have two button the first one would be let's say name so let's create div in here say name and i'm going to give it class name of heading name and the other button would be population and it's a population here below the heading let's map to the country so let's find the function for each country we want to create a new div and we want to give it a class name of let's say row so in the row we want to have 2d the first one would be i say name so let's say class name row name and let's pass in the country dot name and we also want to happen the tip let's call it country another population population and country dot population right now if we save that we have the name population in the heading and we have the name and the population right below it alright so let's go to the css first let's select the heading in here i want to say display flex and for the heading name and the heading population view relation i want each of them to have flex to be one right and and also say heading button and we set all the styling from the button so let's say border none background change pattern and let's save that let's also add the padding to be 20 pixel to the heading name and population and text now the color would be equal to text color secondary all right it looks good and i try to give you the phone weight equal to 500 yeah and let's move on to the row in the row i want to say display flex right and padding to be 20 pixel and for the name i want to also say flex equal to one as well as the population right and let's also give it a let's say text align center right but the name but for the name we want to say text align left and also let's do that in the heading name as well all right it looks good and for the row let's also add a background color bright brown color light all right looks good and let's say border radius 8 pixel let's say margin bottom 16 pixel right it looks good and then let's say box shutter box setter yeah it looks pretty good and you can see here we have the outline in the uh the heading so let's move that so in the heading button let's say outline none and let's also add a cursor pointer as well right it looks good and also let's change the point weight to be 500 now i noticed that we import the wrong font so let's go back to google font and select light medium and bold and let's import it right so now if we save that and go back to your page the phone is now correct so yeah we now have the data display so we want to have some animation when we hover the row so let's say row hover let's say transform translates y minus four percent minus four pixel and in the row let's say transition uh transform uh 200 millisecond easy now now if we said that uh when we hover it's going to move up a bit but we want to give it more drastic feeling so let's go back to gopala.css let's copy this box shadow and i want to say that when it hover the box shadow would be let's say 0.1 opacity let's say 4 and then 16 and then also in the transition say box shadow 20 millisecond is in out let's save that yeah it looks pretty good so the next thing we want to do is that when we click the heading we want to be able to sort by the value so first let's go to the country table component and let's create a new constant and say order by this could equal to a new function in here it's going to take in the country and let's try to return the country dot sword and let's say a b and we're going to try to sort by the population first so let's say a dot population if it's larger than b dot population then we're going to return 1 otherwise we're going to return -1 and i save that and let's try to use that inside the component so inside the component i'm going to create a constant name ordered country equal to order by country and if now if we say that it's going to sort it by ascending so we can say if direction e equal to ascending we want to return this function otherwise if direction equal to descending we want to return the opposite which is minus one here and one here and by default is going to return the country and let's uh also pass in direction in the function so now if we say that [Music] if we pass in the descending here it should be sorted by descending order but you also notice here that we haven't used the older country constant yet but it's already working the reason is that every references to the country would take the changes and we don't want it we only want to use the other countries and we want the country to stay the same so in order to fix that we want to create a new array by saying something like this and same thing here and now if we save that again and refresh it and now if we save that again refresh it it will not work because we haven't used the order country yet so let's try to use that all right now it's working the next thing we want to do is to add the arrow next to the heading so in here i'm going to say keyboard arrow down router we also want to add this under the name as well so if we save that it doesn't look quite good so let's go to the css in the heading name and population let's say display flex uh justify content to be centered and the line item to be centered now everything's in now everything is entered but we don't want it to but we don't want it to but we want to align to the left but we want to align the name to the left so we can say justify content flex start and let's delete this all right it looks good and we want to have the arrow to have different color the primary color so we need to add a new div and let's name it uh let's say style and heading arrow and let's paste it inside and as you use that here as well all right so we need us we also need to pass in the color to be inherit and same in here in the style let's say heading icon on heading arrow color to be primary column all right so now if we save that we see the color but it's not quite a light yet so in order to fix that we need to say display flex again and justify content center align item center now we center the icon inside wrapper and i'm also going to add a margin left let's say 2 pixel right it looks good and let's go back to our countries table now it is order uh descending and it has the arrow dial but when we order ascending we want to have the arrow up let's create a new component and name it sort error is going to equal to function the function going to take direction as a part in here let's say if there isn't a direction we going to return nothing we can say that by just returning a function all right so if the direction is equal to asset descending we want to return this so return otherwise we're going to return but instead of arrow down we're going to return our arrow up so let's say keyboard arrow up crowded so next we need to use the sort arrow in here so let's just say sword era next we need to use the sort error so let's say sort error and in here as well in the population let's try to say direction equal to descending for example and now it works so let's say i send it to see if it works yeah it works perfectly but we want to be able to control the value that we want to sort and as well as the direction and with that let's create a two new state so let's say new constant direction and set direction this could be equal to usd and it's going to be undefined by default and let's copy that and say value all right so for the direction we want to uh you know so for the direction let's create a new constant and call switch direction this could be a function so we can say if the if there is no direction we're going to set direction to be rsa descending else if the direction equal to descending we want to set the direction to be ascending and otherwise we're going to set the direction to be no all right so when we select the button of when we click the button we want to switch the direction so let's try it out by saying okay and switch direction all right so let's try it out it does not work yet because we haven't used the direction in here so let's try to use that all right so let's try again yeah it's working quite nicely the next thing we want to do is that we want to set the value when we click the heading as well so i'm going to create a new constant and i'm saying set value and direction this going to take in the value and it's going to switch the direction and set the value to be value all right so let's try to use that in here this could be population in the population button performation and this one would be name so let's say name in here all right so now uh if we select this it's still not it's not working yet because we haven't used a state so in the order by let's pass in another value and we're going to use the value instead of the population here so let's say b a dot a value and b value so it's same in here all right so in the order by we need to pass in the value and the direction as we move this all right let's try if it works so now is ascending descending ascending no it's working quite slightly and let's try the name you see it works default descent is that descending or ascending descending ascending yeah it's working quite nicely the next thing we want to do is to filter the country by name reason or sub reason so let's move on in order to get the filtering working we need to go back to our index.js in here let's create a new constant and name it filtered country in here is going to filter the country and for each country we're going to return let's say country dot name dot two low okay if this include the keyword then we're going to return to right but we don't have the keyword yet so if now we save that is going to break so let's create a new state let's say keyword set keyword and use that and it's going to be an empty string by default right now it's not working anymore but it's not working yet and we need to use this one in the table so let's pass it in so we want to get the value when the input change right so we can say in the search input we can say unchain equal to on input change and let's create a new function on input chain this one would take in an event and that prevent all the default event by saying event dot prevent default all right and we want to set the keyword equal to event.target dot value to lowercase alright so if everything goes right it should work so let's try that finland it is working perfectly but we want to filter by reason and some reason as well so in the future country let's say uh country name no case include keyword or country dot reason to local to lower case in cool keyword or the sub region all right let's see if it works so let's say asian it working and let's say south then easier well it's working perfectly so we got the filtering and sorting the next thing we want to do is to work with the country page so let's move on so on the page let's create a new folder and name it country and here let's go to new file the first one would be id dot js and the other one would be country dot module dot css the reason why we name it id in the square bracket is because we want to create a dynamic round it's going to be country slash the id but you will see in action in few minutes so in the id dot js let's say a constant country equal equal to a function let's try to return a div with country inside and try to export it by default so in order to see the country page we need to go to the country table and we want to use a link tag from next year so let's say link our adrep would be equal to let's say slash country slash country dot we're going to use the essay alpha 3 code so country dot alpha z code and save that we need to import the link so let's say import link from next slash link is that link like link yeah it's working fine and let's try to select afghanistan now we see the country but we want to have some data to work with so let's go back to the id5 i'm going to export a function name get server side pops this one would be and a sync function and we're going to take the program from the function as well so let's say parameter and we need to return simulate to get static pops we need to return a pops up object with a pop inside and it will save that and if you want to get to know more about server side props you can go to next yet again and search for it but what we want to do is that whenever you go to the page we we want to fetch the data in the server before we render it right but yeah so before returning we want to say a new constant response equal to away fetch in here let's pass in the endpoint and say param in here dot id all the endpoints would be provided in the country api and you can find the api under the description so in here let's also create a new constant and say our country with lowercase this one will wait for the rest.json to resolve all right so let's pass it the country in here and if we say country and that's console.log the country so now if we refresh it we will see the country in the console now we have the country let's move on to start the country page the first thing i want to do is change the div to be at the layout and the title would be the country dot name if we save that if we save that we can see the name changed here in the layout let's create a div and another div inside and i'm going to give a class name let's say star dot overview panel and we need to have the style as well all right so we going to have the overview panel in here we're going to have an image the image is going to take the sort of country flag and then the alternate text of the country name all right if we save that we can see the flag below the image we want to create another it one this one would be country.name and under the name we're going to have div this is going to be country dot reason all right we know that we want to create a div which will act as a container in here we want to have two new div the first one would be for the population so let's so let's add a class name in there let's say [Music] and the second one would be the area all right so in here we want to have another day this one would be country dot population and this one would be a div let's say population and similarly with the area let's copy that and paste it here area area and we're going to give this a class name and let's say overview label now overview value and this one would be label and the same thing to the area and let's also pass in and also give the h1 a class name as well say name and here would be reason let's give this div a class of let's say um number container let's say numbers for now now we have all the data let's go to our css and try to style it in the dot model css let's say overview panel and i'm going to select the image and give it a width of 100 it's not working so let's go back here it should be overview panel can i say that right so now the image take 100 percent the width and let's go to the overview panel and try to style it i'm going to give a padding of let's say 20 pixel border radius 8 pixel box shadow box adder all right and this will give the background color of bike while color light all right yeah it looks good and in here i'm also going to give a border radius up let's say 4 pixel yeah it looks good let's move on to the name so let's select that let's go back in here to see what is the class all right it should be overview name and now i think about that i think overview underscore panel make more sense so let's change it back and in here save that save it here all right so in the name we want to say text a line to be centered and font size let me check the font size quickly 32 pixel all right and let's remove the margin for now let's move the molten bottom all right so let's select the overview region in here it also say text align to be centered and let's check out the property of the asian of the region so 14 pixel on side 14 pixel front way we don't have 400 so let's say 300 for now all right it looks good and it has some margin top because it doesn't look that good that close so let's say 4 pixel right yeah looks good and then also at margin bottom of let's say 24 pixel yeah it looks good and let's move on to the number container and let's say overview number we're going to say display grid and with column template with width template column one function one function which is two column and i'm going to give a gap of let's say 15 pixels all right and in the overview actually let's just say here that text align changer looks good so what if we say overview uh label and then check out the label value secondary text color 540. all right font size 14 pixel color secondary color text secondary color text color secondary all right looks good and let's go back to fake mod to see the value of this 16 pixel and find it on weight which he already it is so it look good um yeah so let's move on to the detail panel and let's go back to the id at the country page the country component and below the overview panel let's create a new div and let's call this let's say styles dot um what should it be it's detail pattern all right so first we're going to have an s4 it's going to have detail and let's give it a heading so let's say detail panel heading all right uh so let's check out the figma to see what we have i am going to move it to my second screen so that i can see that better in here we're going to have let's say in the div and then in here we're going to have another div and another dive all right the first one would be capital and this one would be country dot capital and i'm going to name this panel row right and this one would be panel label and this one would be lay out label value all right uh we don't see the capital yet so let's try to find out what's wrong so let's console log the country again and now if we open it and i try to find the capital yep as a typo so now if we say that we have the capital let's copy this another time and this time it's going to be sub reason and this one will be sub 3 and there's also a typo here all right let's save that and we have the sub-region and as fast and let's quickly paste it few other time the third value is language language if you notice here that the language is an array and is an array of object with a name so let's say country dot language dot map and we want to only get the name right so i'm going to return a name and then we're going to join it by uh comma and space so let's save that yeah so now we have it uh so the next thing we have is the currency and let's check out the currency here the currency here is also an array so we need to do the same thing with the with the language so let's copy this and it's also going to be the name and it seems to be fine let's save that and change this to currency right now we have the currency the next one we have is native language native name and it's just native name here i guess yeah it works fine and the last thing we have is the genie if you don't know what genie is you can google it because i did as well but if i were correctly it's like how happy is our country but check it out yourself so let's say you need here all right so let's also put the percentage after it all right looks good let's move on to the styling so let's go to country.model.css we first we want to select the detail panel set detail or details details so in here we want to say padding to be 20 20 pixel background color let's say bar background color light and yep it looks good and has also had box shadow to be let's say box shadow all right so for the detail rows i want to say display flex and justify content a space between save that and see what's wrong we need to change it to be patterned row yep so now it's working fine actually i want to give you the padding of 20 pixel and because of that it's not a line anymore so let's remove the padding in here all right it looks good and in the row let also add a border bottom of one pixel solid and i check out the color in figma so figma the color would be e0 or e0 e0 so let's use that all right if we save that we have uh everything looking good and the heading is a bit off so let's try to style this so let's say detail heading in here let's use padding um 20 pixel is that detail heading detail panel heading yeah and notice here that we forgot the border so let's say border radius 8 pixel right looks good and we don't want the padding bottom here so let's say padding bottom to be zero yeah looks good now let's move on to style the label so let's say details panel label let's say color to be text color all right looks good let's go back to big mac to see if we're doing everything correctly um front weight 500 500 looks good so the next thing we want to do is to get the neighbor country so let's move on in the country you can find an order array which is a list of alpha 3 code so for each of this code we want to get the country information so let's start off by create a new function let's say get country it's going to be in the same function it's going to take in the id and return the country and let's copy this inside the country function let's say that and let's you the get country in here so let's say country equal to get country param dot id all right so now it should work the same way in the country component let's create a new constant and name it borders and in here let's say for it country dot borders we want to return the country information so let's say a border and then we get the country passing the border which is the id so let's save that and let's try to console this now you can see that it's complaining because get countries is a promise so let's create a new constant and say get borders it's going to be in the same function and let's copy this and return the border instead so we want to get the borders when we open the web page so we can say use effect and this is going to take in a function and a array of dependency which is nothing at the moment so in here we can say get borders in order to use a border we need to create a new state let's say border and set borders this one would equal to u-state by default is going to be empty alright and in here we want to set borders to be borders all right so now we have the border let's try see if it works and let's say here param is not defined so in here we don't have the params so let's remove this and yeah so it should work i believe yeah it should work and now we have the arroyo promises so in order to make this work we need to say thomas dot r and we're going to pat say this array right so let's see if it works and we need to wait for that as well all right so now we have an array of the borders and let's try to use that so let's remove this because we don't need that anymore and for the border let's say under the genie row let's say 80 and for each border we're going to map through and we're going to take the flag and name i'm going to return a div and inside this div we're going to have an image which is we check the source of the flap black and the alternative text name all right and below the image we're going to have the div with a name inside and let's give this some classes as well so in here let's say detail panel borders and then in his i'm going to say border country and order yeah all right so let's go to our css so in here let's say detail panel border but first let's try to resize the image by saying detail panel border image with 100 yep so now let's take 100 of the panel uh so what we want to do is let's say here first display grid and we're going to say grid template column we're going to say repeat and let's say how to fill and say mean max let's say 100 120 pixel and one function let's see what it does so what it doing here is that it's going to give a responsive layout to the border countries alright so now we have it let's select the country by saying detail border and then i believe this country developed correctly and i also give this supporter radius of 4 pixel in the country let's try to say text align center and give the grid a gap of 24 pixel yeah it looks better but we are missing the label so let's go back to our index let's go back to our id dot js let's say label let's copy this but we want to have the border label all right so you notice here that the label is now inside the grid so we kind of want to create another div and i named it a container container and paste the country inside let's go back to our country model.css and in here instead of folder we're going to say let's say what is that again a container right so one we want so we want to give the uh panel border a padding let's say 20 pixel to see how it look like yeah it looks good and let's change the genie here to be labor actually i don't remember how to write it so let's go back to figma and copy this and paste in here all right and let's go back to our css and in here let's say detail panel border label and let's copy this and paste it in here and give it margin bottom of 20 pixel yeah it looks good now let's try to open a bigger screen to see what it look like so on the bigger screen you can see that everything works fine but then it's now too big so let's try to fix that by making this responsive so the first thing we want to do is to go back to our layout.module.css i'm going to give the container a max width of 100 pixel and then let's say margin zero out to what it does that's going to give the container a max width of 1100 and then center the content in the middle of the screen all right so the next step is to give this panel a four column and then the detail panel add column so let's go back to our visual studio code in the country id but first let me name this to be country with capital c is the wrong pattern right now so yep it should work the same so in here we want to give this div a name so let's say class name container all right so we want to create a two new div let's say the first div would be container left and the other one would be container right we want to put the pan the overview panel in the container left and the detail panel in the container right so let's do that let's try to do it again all right so let's go back to our css in here let's say uh let's do media query and we're going to use min width because we work from mobile to desktop so let's use and this one there will only be one breakpoint which is 720 pixel in this project so let's just say it went 720 and here we want to select the container and give it a display grid and let's say grid template column repeat 12 times one fraction so it's going to create 12 column and for the container left is that left underscore yep we want to say grid column we want to start from one and span our four column and for the right we want to start from number five and spend eight column all right so let's see what it look like in the bigger screen yeah it's working nicely but then we have no spacing here so let's go back and say gap of 24 pixel and let's go back to the bigger screen now it has a gap but we notice here there's some weird space in here so let's inspect to see what it is we can see here that the heading has some weird margin so let's go back in here and select the details panel borders heading so let's select the detail panel heading let's say margin 0 yep and now it now there's no spacing here so let's check again yeah it looks good now and because of that in the mobile screen there is no space between the detail panel and of the overview panel so by that let's copy this container and instead of 12 let's change it to be one so let's go to the bigger screen again in here everything works fine in the country page and we want to be able to go back to the home page by selecting the logo so let's go back to view visual code and go to layout in here in the header let's add a link in here let's paste in the svg the link would be an hrap and just slash right and we need to import the link so let's say link from next.js and if we save that if we select the logo so now if we select the logo it should go back to the home page alright so it's working quite nicely the next thing is the next step is to make the home page responsive if you look at the design in desktop we also have a flag an area and a genie so let's go to historical and try to achieve that so let's go to our country table so in the country table we want to have two new columns after the population so let's copy it and paste it one time in here let's change the class to be heading underscore area and in here change it to error as well for the heading and let's change it to be let's say area and kilometer and let's use a superscript type let's say soup and then let's say two here and if we save that we can see the text appear but i want the two to be like smaller so let's say star equal to one sign and let's say 0.5 rip right working quite nicely let's also add at the time and let's change it to be beginning and this one would be unique and notice here that if i change the uh direction uh the error also appear in the error ingenie so let's fix that by saying uh in here let's say only the value equal to population purple relation and then we're going to show the arrow same thing with the area and the beginning we also want to do that for the name so let's say here okay and we are missing the direction here so let's copy and paste it here as well all right so let's try again to see if it works yeah it's cooking quite well and let's move on to style this area and the guinea so we can go back to our country table dot model.css uh in the heading name and population let's sell so say heading the area and heading beginning right let's also add it to the row as well so in here let's copy this and paste it two time first one would be area and the second one would be meaning if we save that we have something up here but it's not working yet so what we need to do is to go back to our css and we also say area to be flex 1 and the guinea should be flex 1 so now it's working quite well but for the blank space we want to go back to the country table and let's say if there's no area so going to return zero and if there is no guinea we're going to return zero as well and also add the percentage here right so now we have it so next step is to add the flag so before the name let's create a new div let's give it a class name of flag so let's copy this and say black in here let's add an image the image could have a source of let's say country dot flat and the item alternative text to be country.net all right if we save that it's going to go crazy because the image doesn't have the max width yet so let's go to our css let's select the flag and i say flex 1 as well and up to that let's select the image by saying black image with 100 right so now it is uh better looking but i'm gonna say that if the uh image the flag take one the name and everything should take four so i'm going to say four here 4 here 4 here 4 here and then 4 here as well and in the heading we also need to chain it to before right so it's not quite working yet so we need to go back to our html and before the name in the heading we need to create a new div and it's going to be just empty div and put it a class name of heading flag and we want to give this heading flag a flex one as well so let's say flex one right there's something wrong the flux would have the flex one sorry right yes so it's working and let's add a border radius for the flag as well so let's say border radius 2 pixel right and yeah looks good but i want to have some spacing between the flag and the name uh so we can do that by saying margin right 8 pixel and also let add the motion right to the heading as well actually let's say 16 pixels yeah it looks better so we can see now that there is something up with the alignment the reason is that the heading has some padding but now we don't want that anymore so let's go to heading and in this let's remove that and let's put it in here right so now it works yep so now we have the desktop view uh but it's now not working in the mobile yet so now we need to hide the flag the area and the dna when we in the mobile screen so because we are in the desktop right now so we can say media screen and use the max width we're going to use 720 like in the country page so let's say this and all we have to do is copy this and we only want the name and the population so delete that and say display none here and we want to do the same thing with the heading so let's say dot heading area and dot heading beginning and dot heading flat right so if we save it and go to smaller screen it's working like we expected the next thing we want to do is to have the count and the search input in one row so let's go to our index.js in here let's create a new div and paste in the uh count and the search input i'm going to name this class name style dot input container right in here let's go to our home.module.css let's say uh media screen again we going from mobile screen to desktop screen so let's say min width 720 pixel and this going to be container it's going to be display flex and justify can't uh turn a light display between so if we go to bigger screen we're going to face one problem that the search input is quite small now in order to fix that we need to go back to our code and in the index.js we want to create another tip and name it just input right so let's go to the home.css in here we want to say the count going to take flex 1 and the input going to take flex 4 and let's see what it does actually let's just say flex 2 and 5 let's see if it's better yeah it looks better and let's go to the bigger screen it's not too big so let's say maybe two and one yeah i think it looks okay and let's also add some margin to the container as well so let's say margin bottom 40 pixel yeah looks better let's go to bigger screen now we have it the sorting is working the filtering should work as well cool uh and let's go to the country yeah it's working quite nice equipping quite nicely uh so the next step is to add a dark theme to have the dark theme first thing we need to go to global.css and here i'm going to say data theme equal to dog then i'm going to pass in the new variable you can pause and copy the variables or you can go to figma to check it out yourself the next thing we need to add is a button to control the theme so in the layout under the link let's create a new button and let's you the brightness by this sixth rounded icon and let's also add a class name to the button so let's say style theme switcher all right so let's save that and we can see the button now and let's make it future by going to the layout.module.css in here let's select the button and remove the border as well as the background color all right let's move the padding as well all right looks good and let's say color to be text color secondary and let's add a margin left of 4 pixels so yeah it looks good let's also give it a display flex and justify content to be center and a line item to be centered yeah it looks good now so let's go back to our layout.js in here we want to create a new state called theme so let's say cons theme and settings you could use that and by default it's going to have a bit light all right next let's create a new function let's call it switch theme and it's going to equal to a function so let's say if theme is equal to light we're going to set theme to be doc else we're going to set theme to be light all right we also want to say document dot document element dot set attribute the data theme to be dark in here and in here we want to say light all right let's use the function in the bottom so let's say unclick switch theme all right so let's try to see if it works it does work but there's one problem that if we refresh the page it would go back to the default value again so in order to fix that let's say use effect it is going to take in a function and a list of dependency what we have to do here is set the attribute data theme to be the local storage dot get item thing right so now if we turn it to dark mode and then refresh it it's going to be a dark mode again so let's try to be light mode now but you also notice here that i have to click two times in order to change the theme the reason is that at the beginning we need to tell the state of the theme so let's say set theme to be this all right so let's try again and refresh it so now it's working but the code is quite messy so let's try to fix that so i'm going to create a new constant and say save theme and it's going to be a function this function we're going to type in the value and it's going to set the theme set the state theme with the theme and then the local storage as well as the attribute so let's say save them here light and it's dark here all right it looks good and yeah so you can see that there is some error in the country table in order to fix that we need to go to the map function and say key equal to country dot name all right if we save that and refresh the page we should not see the error anymore now i think that we have everything let's try to deploy this application to deploy the project the first thing we need to do is to create a new repo in github so under github.com new let's create a new ripple i'm going to call it word rank and let's clear ripple and let's go back to our pc studio code and here let's say hit add and hit comment first comment and let's go to the main branch by saying need branch and let's copy the remote so let's go to github page and copy this and paste it in here and that's a git push and let's copy this and push it it will take few seconds to push to github so when it's done let's go to first cell i don't know how to call it versailles and import project let's select github and let's copy the overall in here and here we just need to click deploy and it's going to divide first let's wait for it unfortunately our build is not successful and the reason is that we should import link with double case so let's go back to our view still code and we're going to search for next slash link and replace with next slash link with lowercase and then replace that and let's add and say fix link issue and then let's push that again after it pushed we'll say i would run the build again so let's check in in a few minutes so now it's done and is successful and now we have our own url and let's check it out now we can find our application under worldwide.cell.app and the themes which are working quite nicely as well as filtering and the sorting as well but there is one problem if we try to select a country it will take few seconds to load the reason is that we are using guest server-side props which means that the server needs to get the data every request so if we go to the office of documentation it says here that we should only use guest server cyborgs only if we need to pre-render a page whose data must be fetched at the request time so for example if the population is updated every second every minute or maybe every day that we should use guest server cyborgs but because for this api the data is not going to be updated that often so we can use guest started pops instead but in order to use getstatic pops with a dynamic parameter we need to use a function called get static path so let's search for it get started path again you can read more about get static paths in the official documentation but let's go back to visual studio code and see how we can use this under country folder in id.js let's change guest server side props to be guest static pops and before that we need to export another function so let's say export the constant get static path this one is going to be a sync function as well in here we need to return an object with a path inside and also fallback equal to false it means that for every other round it will return 4 for not found in here let's also create a new constant called rest and it will chew away and fetch in here we need to get all the countries so let's go to index.js and copy this endpoint and let's use it in here and after this let's create a new constant name country this would wait for the rest.json to resolve all right after this we need to create a new constant in path this one would equal to country.map for each country we're going to return an object in the object we need to have a param this param would be used in here so inside the program we need to have an id the id would equal to country dot out by 3 code because we use the alpha 3 code for the id so let's save that and let's go to the country page to see if it works you also notice here that it takes a while to load it's because this is in localhost so we still need to take time to fetch data so i think we have everything now let's commit and push it so let's say chain uh get server sign to get started and commit it and then say git push so now let's wait for burst cell to build and deploy it and check it in few seconds now that you receive an email that the deployment is successful let's go to the page and refresh again and now if we select a country it will take an instant to go to the page so i hope you enjoyed the video if you haven't yet check out devchallenges.io for more projects and challenges and don't forget to hit subscribe button as well as follow me on twitter but otherwise happy coding and see you in the next video bye

Channel: Thu Nghiem

Views: 48,863

Keywords: React.js, Next.js, Responsive, HTML, CSS, Web Development, Tutorial

Id: v8o9iJU5hEA

Length: 103min 17sec (6197 seconds)

Published: Wed Nov 04 2020