Frontendmentor.io Countries Challenge

foreign hey everyone i think we're live cool all right just doing a few checks sorry for the delay if you technical issues as you can imagine it's going to make sure the audio is okay i think it is let's get the this sort out cool all right okay i think we're good there we go okay um cool let's get started so i'm gonna be starting doing i think i put up a post um a community post i'm gonna be doing some weekly streams um just because i'm not getting around to making as many videos as i'd like so what i'm gonna do is i'm just gonna pick something each week or maybe you guys or somebody will pick something each week um maybe i'll put posts about it or polls and we will just code or learn something together and so i'll hopefully benefit everyone so worst comes to worst if i can i'm gonna still try two videos if i can't do videos i'm just going to um yeah learn something on stream or build something and we can just chat and do things like that so that would be good um cool so this week i'm going to try out so a front front-end mentors challenge front-end mentor i o i'm just making sure i get the audio it's either too loud or too low uh let me bring this up 20 there we go it will keep going up and down until one day it's right cool so this is front end mentor i o they have some challenges um and you so they've got different levels of challenges um and when you go into the challenge they basically they've got some designs this is for front end so they've got some designs um some style guides etc and your your goal is to just basically recreate the design and then you can kind of submit it and do the whole community thing um so yeah i'm not too worried about that but yeah i thought it'd be fun to to rebuild one of these um i've been wanted to play around with material ui v5 a few things i need to kind of play around a bit more with so v5 beta i want to try this one out um i remember looking into this whenever i played around with too much so i just want to see kind of the changes there um react rooter as well react router v6 let's go to react router and i think it's on the dev branch yeah so they've got some beta releases as well for react router v6 let's just look at some releases yeah so i'm going to be trying that one out i'm just seeing if it works in general and is there anything else i think that's it react user v6 um react query i think i'm up to date with that find v2 yeah i might try this one anyway it's react query as well because i think i may have used v1 now they're on b2 uh let's see what it looks like let's start slightly different yeah okay so i guess i'm just gonna rebuild something i'm not too worried about actually the design um or trying to match the design perfectly as long as i'm trying out material ui um react cruiser yes won't be too much on that i guess depends actually i might not even have pages oh i did pick one so um i think i'll pick one with at least two pages see how that one goes um just make sure i'm using react rear v6 and yeah latest version of react query to to try things out there and i think that's that's everything i want to try out so i'm just going to try to build it with these tools which is most likely overkill for what we're building but um if you were you know building kind of a either an enterprise level or something that you want to scale someday these are probably good places to start so i'm not going to do kind of plain html css however i'm going to i'm going to try treat it a bit like a real project and go for a react go for these these files try try keep it relatively tidy not hack about too much yeah let's see how it goes very much has gone we're doing we're doing front end mentor so i picked one earlier on um if this loads that not loading all right yeah uh how do i look at my challenges so this is the one we're doing here um rest countries api with color theme switcher yeah good um good um so i want to rebuild this i think it's relatively simple but there's api calls and i think there's two pages at least in it um let's download this while we're waiting which means i can try out material ui v5 which is beta reactor v6 which is also on beta and react query v2 which is not in beta but i'd like to play around with it or react queer v3 oh yes yes react curry v3 is that like the docks yeah okay okay it's on v3 okay cool yeah let's try that cool so let's just um move this from our downloads over to our playground um cool so i've just downloaded the starter files let's look at the brief the brief your chances to integrate with rest if you have countries we'll get that up um so we can basically use whatever you want and you should be able to see all countries from an api on the home page search from so we've got some inputs filtering filter by country region click to see more details the usuals cool all right so let's uh let's jump into my downloads and unzip this guy and let's jump into playground or here actually and mentor cool all right oh let's rename that that's too long for my liking uh rest so let's just call this countries i think i'm trying to see if you can just see the designs here i guess you need to download it let's look at some other challenges well that's opening up yeah there's a few nice challenges that you can work through lots of nice little challenges all right where's intellij there we go take this time cool so they give you readme i guess they've got templates for for submitting we won't worry about that um there's a style guide which i guess will show yeah it gives you all the colors um i don't even know if i'm gonna yeah i guess i'll get to this but i'm not even really too worried about getting the exact colors um design i guess that's just a bunch of images cool so let's look at that i think if you've got the if you've got the pro version so if i keep this up it might it might be worth getting the pro version you can um you can download the figma figma files etc so this is the detail page um this is the big page the home page i guess list of all the countries search filter will do dark mode i guess towards the end cool and then we have so that's desktop and then we have mobile version as well so the mobile i guess it's just a yeah big list single item list cool okay it seems okay yeah all right let's give this a go so i'm gonna i'm gonna use v for this react um focus i think material guide gives you a dark mode out of the box so i'll leave that to layer see how that that goes um yeah let's just see how all this goes okay cool so can i do a npm minute oops let's just call this solution or actually how do i want to do this because npmv yeah i've done this before it just deletes everything let me rename so we and we'll call this one countries let's close this down so let's do react javascript typescript let's do typescript i'm trying to force myself to do typescript with everything so we can get used to it even for small projects let's do that and i'll copy over the designs etc let's have a look at this hey muhammad how you doing this is intelligent weirdness oh all right let's try to remove the intellij file from this of course this happens um let's try this again type script yep i'm going for it i'm going for it my hope is that we improve with typescript i think it's it's a pain if you're not used to it but my assumption is that once you're used to it it's fine um and i don't use it enough to be used to it yet but i've used it on on projects but it always takes me too long to figure out the right types um but in this case i will try it and if i if it's taken too long i will just chuck in any anywhere that i don't like or you guys can help me out you guys can keep me right um let's just start this straight away and what i need so oh there it is actually well let's just make sure this is all working first actually cool that should be fine i think all right um let's add i'll put this over here to the side of all the documentation so i don't keep switching so we have oops so let's add material ui first um and then i'm going to chuck in react router v6 it's a reactor yarn ads history how's the font size cool so that's react we're done until you are done what else do i need uh react query cool i think that's everything i need for now we'll figure out the rest later all right let's um that's running let's delete everything in here and get start started on the coding so let's just clear everything up and then we'll have a we'll make sure we've got material ui setup find react we're set fine and then we'll have a quick look at the api and we're going to use the countries api and we'll plan things from there um so let's start with hello world uh let's remove this css file just remove everything remove that guy so this is all fine jump into the app um so what do we start with material ui okay so i'll bring material right here just so you guys can see the docs as well as me and one of the first things actually i want to do is oh i want to install the fonts as well um so i think the fonts need to come from font source i'm not mistaken so yeah font source i'm going to do open i can't remember what actually we'll figure out the form there on because maybe we'll use font that maybe a font is provided actually again here we go font source needle sense cool font source you need to sends let's do that and i think you need to also add it in typography let's see i've got this from other project which i know so let's add in the font here no need to sign and i think it was three six and eight three hundred six hundred and eight hundred i don't know if that will work with material i might have to map things around but yeah let's figure that one out there all right so we jump into our app and um we need to wrap our app in some sort of provider um a theme as well okay so let's go back to getting started i think that's fine the theming solution i think is where we're after latto lotto oops not all fun assuming you mean font and it's yeah nunito my go to i think is open sans that is also nice yeah cool cool cool um so the theming we're going to create a theme uh just keep it empty for now where's that input coming from interior ui styles and then we want to yeah that's exactly what we want wrap this round theme provider to our ui core also let's make sure we've got prettier pretty oral working and set up so i'm going to add prettier to the project but i've just got a plug-in that will help me format things fine so there we go so now it's all prettier so i think that's all we need to get started with the material ui to be honest uh there is a css baseline which you want to add in as well so css baseline i want to change this for typography and i want to pop that as a variant h1 let me import that the variance the defaults for material ui is always so crazy like that's huge i don't know why and that's more i like it ah so that's not so you get this um responsive fonts thing responsive font sizes actually which you can pass the theme to and what that does is that will yeah i mean it does exactly what it says it just makes it responsive so now it's as it hits the default breakpoints it's going to grow and shrink okay that's a bit better uh i think the rest is fine for now so that's material i set up i might change the thought the fonts as we go along um what was next let's do router react router and this is just so again let's just open up the documentation for react router and they've got in their docs they've got the installation getting started i think they should be pretty trivial so this is all the same yeah so where previously they used to have this switch component in order to i think that's what kind of improves as well as the roots um definitely as well as the router they no longer have that the switch component would just be able to to tell which which doesn't match multiple paths basically and um i think they also got rid of the yeah they've added navigate component instead of the redirect component which is probably the main things so we're gonna have a countries page and we're gonna have a country page which we will fill in later uh let's just put this in for now so this is the countries page and this is the country page which should be fine um so let's go countries and this will be countries um slash some country i can't quite remember how to pass in i'm assuming it'll be something along the lines of this but we'll we'll focus on this detail here later on because we'll figure out how to do that later on um and then what we need here is what you like to do typically is let's just see if this is working actually it's not yeah of course i need to do so at slash it's not going to do anything at countries it's going to show countries so i wanted to just redirect and so that's navigate now so i'm going to navigate if it doesn't match we're going to navigate to slash countries and we'll just leave by that i think that's it yeah just no so this matches biggest paths so if it's here if it's empty it navigates to countries which is what we want but if it's unknown if it's not found it just seems to stay there we want to match everything relative links index routes no yeah we want something like this but we want it to navigate instead i guess we could we could just put that in [Music] put that in and this star see if that works yeah there we go cool i guess this star path is um midnight yeah no worries muhammad um feel free to stay as long as you want and thanks for thanks for helping in anyways um it might be a bit slow some of these ones but yeah um yeah thanks for coming in anyways so all right we've got our countries i figure out navigation later on i'm assuming if i go to country oh sorry country slash somewhere no does that not gonna work countries slash somewhere that's gonna go to country cool all right so that's that let's add the final thing which is react router no react query sorry and then i think we'll be ready to start actually yeah let's let's wait actually react quickly let's add it when we need it let's have a look at the designs and see where we're at so this is probably enough for a mobile screen so i'm going to make this small just so i'm going to start off with the mobile first and then i will expand out so the mobile design is yeah i zoom in here so we've got this header where in the world we've got this dark one on the right we have an input filter and then a list so let's start with the header i guess i'll just list everything out and also let's have a quick look at the api which we've not done yet so this is the api here i did have a look at this earlier on so all yeah basically it's just an open api and if you hit the all we're going to get back 250 items um and that's just going to be some of the details for the country so you can see the name i don't know what we need um we need to figure that out from the designs so we need probably the name population region and capital top level and then we need a bit more detail when we go in cool all right that should be relatively straightforward let's jump in um let's add in a header move on cool so let the root here the roots we only want them to really change i'm going to add in my header here and then we'll have the roots below that cool let's add a new header component um actually we'll do so i'll pop the header and it's separate file i'm gonna keep some of these i'm gonna try to keep this a bit organized probably a bit more probably a bit overkill but i will do that anyways and we'll import that here hello import so that should be the header and then we can now just work inside here and what i'm going to do is i'm going to take and let's jump over to material ui documentation and i'm just going to take one of their headers straight from there because why not um so we'll go to components and they've got a bunch of these nice oh wait it's called that bar is it app bar exactly let's take something like this bar with menu basically let's see how this goes we need to take all the imports too cool so apply itself static which is what we want um don't have the icons yet don't need the box so app bar toolbar i don't need i'm going to do an icon button variant component div flex scroll remove that for now what was this called again just design where in the world so this is where in the world so yeah cool and then we have this button is a button we have yeah dark mode which we'll do later on i guess and we will need so material ui code if you're going for the icons i think you need a separate um npm package you need to install that separately so we'll do that later on dark mode toolbar here i believe is flex so i think we can just um let's just double check that yeah so i think we can just do um justify content space in between in the toolbar and so for one-off css things so i think this is one of the big things they've done with material ui5 they've added this sx prop i believe to pretty much every component if you want to do i think it's just for one-off styles and this basically gives you access to the theme etc so um yeah i'm not sure if they actually pass in the yeah the toolbar doesn't take in the standard flex grid um style so in the sx i can do i think i can do justify or that's an object justify content and space usually this has got auto complete here we go space so that's fine and i don't want the color there so i will just keep the color as inherit for now and i don't want any elevation as well elevation zero so that gives us our header um cool can i drag this onto here maybe that'll be easier so there is a big bit of a shadow there actually so what we can do is see the different levels of shadows yeah well i don't know the exact level but we'll keep it at three four two let's keep at that for now um well yeah cool so where in the world is that that font doesn't quite look right does it it's that fun one robot so it's still a robotic of course because i'm not actually set font anywhere um so let's go inside create react create theme so this is where material has got a default theme and then mandeep just one watcher indeed one watch is all i need um create theme you can do typography font family i think what was this one called uh nunito sans i have no idea that's gonna work yeah there we go cool so that's looking okay i think that's actually bold as well and we can yeah that should be bold and different weightings etc so i think it would have been the 800 so if i go back to the header this is a variant six so i guess the issue here is the mapping which i don't i don't want to spend too much time on in a very specific material ui mapping things but let's just see if we can quickly change this one so this is the font weight here will be 500 which we don't have for h6 um so i think we can quickly change what i can do actually for now is i'll just add um i think you can override font weight it's a medium or bold bold let's see well let's see if this is one way bold pop back to 800 medium and would we import 600 actually yeah so we'll figure out the exact font sizes itself maybe towards the end um but for now i'm just going to keep it well dudes i'll just actually um i'll import the the defaults so make sure we have 500 well i guess there isn't a 500 ah yeah they don't have a 500 okay i will in that case update the font as i did here um so medium is just gonna go to 500. no 600 there we go so i'll just leave it like that and now that's the header i'll keep the header as is for now obviously it's got a lot more padding etc but we'll fix that later on let's just get kind of the standard layout um we want this file here let's see cool so let's let's start working on this card component actually once we can render the cards then we can start filtering and stuff so we've got a header and we can figure the rest out there on so let's jump into some countries country's gonna grow here so what i like to do in terms of folder structure typically is to have a pages directory each page will basically contain everything it needs so each page directory another directory within here will have everything it needs to render itself and instead of so a lot of people i think just have lots of kind of components which they they rush to share um i try to avoid having that as much as possible if i do need something shared i might create components directly actually for now i'll just keep it in the root cause i can't imagine there being that much will fit about later i guess um and then in here i have countries.tsx and then index t6 so let's just add a component here actually just take this component and here i can just export the default component from countries so that should be fine um cool this should be complaining for some reason it's not yet it's been quite slow and i can just import this there we go uh and just while we're at it i'm going to do the exact same i'll call this country um nope country and country so if i do something there country countries cool all right so that's this structure laid out i think this is quite a decent structure now any additional components if i want to separate out will go inside here whether it's inside a components directory or just in the top level anything that needs to be shared between those two probably won't be shared at first but eventually we'll just i guess jump chuck in there um so here is i guess now is a good time to introduce react query uh so where's react create documentation so we've installed it um we can have a look at the quick start if i check this over here so we need a query client which i will create client up here at the top the only thing i like to update by default the query client is because i don't like the default behaviors for the fetching on i think on focus on window focus is that right it's been a bit slower than entirely sense all right we'll come back to that in a moment uh so not used query client new create client that's why so we want this and then for the default options we want the queries um window yeah this guy here refetch on window focus to be false and this is when you click off and back on every time it's going to re-fetch which i don't want um so i'm going to disable that and i think that's it for now and then we just want the query client provider here and we'll wrap that we'll wrap i guess everything in that for now there almost everything um and that should be it so now we have access to the query client we have the rear we have the paths we can come to this guy as well actually we can jump into countries and try make our fetch okay so um let's do fetch countries and it's going to be an async function it's an async function i'm just gonna use standard fetch here um so we're gonna wait fetch oops fetch and i'm just gonna take the this end point i think this is the right endpoint to use for now oh we'll we'll go for that for now and we'll see about yeah cause that's gonna return everything i don't think it yeah i think that should be fine we'll see how it goes um just a quick sanity check if it's not okay i'm just gonna like it's throwing our uh we won't do too much in terms of error handling for now but we'll just check something here yeah error fetching countries and then we'll just return response.json i think that's fine and now we can now we can destructure so i think it's use query so we got a nice hook so i guess for anyone that isn't isn't aware so the use create the reason i use use query at all is just mainly so it's got you know it's got a lot of kind of additional functionality in terms of caching and things like that but honestly for me it's even for small projects it's mainly just having to deal with the kind of loading error state things and the status basically of a call it just makes life easier so even on a very very very small project i'm going to use this yeah it's just much much simpler um so with the react query you want to give it a key and that's basically the index like how does it know what to store what's the cache it's all going to be based of a key if the key is unique um then you know anytime you fetch with that key and that same function then it knows to return the cache and that's basically how that handles it so in this case it's just the countries call and in fact in this case we can almost assume that this country's calling isn't going to change often right so we can essentially just cache it forever or for however often countries change their names or whatever um i mean yeah you could use hard code in but we're just going to put in a really ridiculously big cache slash stale time um we also need to remember the difference between those two which i will get to so that's the key so anytime somebody does you use created with the countries key and this function if there's cash then you know it's going to use that and this should just do fetch countries and that should be it so this should this returns a few things mainly data status error and i think if we just pop this status here let's just see if any of this is working or if i've broken everything um all right let's see how this is going loading success cool and if we jump into the network tab we should be able to see all uh yeah perfect so yeah you guys can see that let's return 250 you can see everything here um cool cool all right and for now actually so if you want to add options typically to use query you can add you know cache time stale time stuff here so i'm going to remind myself i think so it's still time cash time let's see yeah so when you first when you first basically load this page uh the first round it will it will make the fetch and by default the still time is on zero and the cash time is five minutes or something so as soon as it makes the fetch it marks it as stale because that's the default zero but it says i'm gonna keep this in cash for five minutes so the next so if there's another the second call basically if you you know move away or if there's another call subsequent uh or you know different part of the page or something that's making the same call what it does is it says well this is stale so i need to trigger a refetch but it has a cache available and that cache is still there because it's in five minutes so i'm going to use the value for the cache so it brings in the cache value um and then the the refresh is triggered and if well once the refresh comes back basically it then updates the values so what you'll see in theory is you'll see the existing or the old data until the refresh comes back and then everything any any call that makes it will switch which is good and the other thing which i actually really like which we can avoid even better than this so i was going to use kind of the status and the error and then what you can do is you can check if you know if it's a status then you know do the loading thing what we can do instead is we can use their suspense feature um which you won't really see i guess you could see it here um let's see if we can see this so if we do have here i think here i can just put in suspense true and i love this one because this just makes life so much easier suspense true and then what we do is we wrap let's just say we wrap our entire all our roots with suspense react dot suspense and we give a fallback of loading for example uh ideally this would be an actual spinner or whatever loading thing you've got going on um main and so that's just in this section so if i refresh this you can kind of see the loading state and then it comes in here so you don't need to worry about in any of these components and you can have multiple react suspense components you can do however deep down but it just means here i don't need to worry about handling um the status at all i've got the the data that is undefined at first i don't need to worry about how is it going to load is it is it going to be there do i need to handle the scenario in which it's not um the suspense will just handle that for me which is which is brilliant um i think i will just leave it there for now cool so we got a suspense we've got the countries here i'm just gonna wrap this all in a main block this is basically where i want my main content to be i think that's fine in fact i'm going to add i'm going to do actually i'll use material ui's container here um add import statement there we go i assume that's got some defaults so that will just bring everything in a bit um so it's not and it will just stop it cool there we go so that's done it for the body i probably want something similar for the head as well although it's not quite clear in the designs but i imagine that's a sensible thing to do so let's add well dudes i'll put react suspense over everything for now i'll put the header within the container no don't like that i will not put the header within the container i will put the content of the header within the container which is also fine i guess the container can go around the toolbar there you go nope doesn't like that either just need to import it cool and one final thing i think one of these i've got gutters i'm just going to disable the gutters here so it's got the additional there we go there we go so that's all fine now and that just gives a bit bit of padding on the outside perfect um all right so let's move on to getting the so we've got the list of what's this um that's fine so we've got the list of uh countries let's render them i guess um let's quickly kind of type them uh give them a bit of a type so why are they returning so let's just say we need the name for now so this is going to return a list of well it's going to return a promise seeing as we are in typescript country response all country's response let's call it that [Music] and this is gonna be actually let's just go back to basics countries in each country it's a list of countries each country has let's just start off with a name what did we say we needed for the mobile design we need the name population region capital so let's look for population region capital population uh is a number uh region is a string and capital is also string i assume capitals at the top level there we go okay cool so that should give us enough to then go data dot so we're gonna map this and in fact here one of the best way to handle this but for now like in a typescript way but because we've got the suspense this is never going to rip this is basically while this promise is unresolved um while this promise is unresolved we can it's going to go up so we don't need to worry about this ever being empty um just making sure that the audio is all great cool so now we can map this um and that's actually what we'll do is we rename this to countries just to make it a bit more explicit country and a country.name i guess i want to try render there we go um not very pretty let's just put it's all in that ptag [Music] typography tag there we go let's see okay cool so now we have our entire list so i guess now would probably be a good time to start working on a card um and again i'm going to have a quick look at material ui's card i'm going to be too worried about how it looks for now and we do want to start with mobile first so we want the one column but they do provide a grid type thing so we can use that and that should handle responsiveness for us so let's jump over to grid first actually so i'll do a grid of cards um and i think the designs if we look at the designs here the desktop one has got one two three so we've got four and by the time it gets to the mobile one we have one so four on one um so let's do let's take this here and cool let's do this so we want to turn a grid let's add an import statement here so we have a grid container i'll just keep the spacing as two grid item so we'll have the grid items this is where we're going to map the items um and each item so the yeah this is a 12 column grid i'm just trying to remember it's the 12 column grid so if we want each item to take up basically we have four of them so 4 12 so each item take up a third and we want to so the xs okay cool so the different sizing so you have the different mappings depending on the screen size xs means it's small so it starts from it's kind of like media queries right so when it's small what you want to do so when it's small we want it to be 12. and we can just pick a breakpoint so anything over i don't know let's just say xs is extra small then you have small then you have medium let's just for now say medium we'll do it three we might just yeah change things as they go along yeah let's basically do that so what we can do let's take this and check in here i guess and inside here we're gonna just add the country name and this so these are all now hopefully let's make sure there's no errors here there is an error ah of course i always forget about the keys let's do country do they have eddies if not i'll just use it okay i guess i could use the country name yeah let's just use a country name as well so that should chuck away that error they all are so we can see that they're taking up the full width now and as they get wider so a certain break point which is medium i can't remember exactly when that is 960. you can see it goes to this four which is probably a bit tight so i'm going to do large so when it gets to this width it goes to three so we can figure that one out there and what you can do is you can just add multiple ones so i can say you know stay small and then you know excess and then once it's small then go up to three once it's medium or actually here i can do six medium i can do three here so this is basically saying how many columns of the 12 columns should i take so if it takes 12 columns taking the full row if it takes six columns to take in half a third then a quarter so this one works quite nicely it's kind of safe only problem with it the only kind of downside is it jumps so it's kind of like should be facing here it's quite jaggedy in a sense so as you i mean it's uh you know there's a difference between it's responsive not adaptive so if you wanted adaptive um i think there is you can kind of set these to auto and give the actual grid items themselves and max width um and all that but i think for now it's fine if you're not expecting people to most of the time it doesn't matter because people aren't going to be kind of um changing the size of the browser so it doesn't need to be adaptive all the time as long as it's at minimum responsive cool so let's do the let's do the card itself let's go to card over here now what i'm going to do is i'm going to open up the this one over here and just outside for you guys but that should be should be fine so what do we want to do we want to do a card with an image something like this bear in mind that this is this is what we're what we're building on the left so we want to do yeah pretty much the same we want the image at the top and then we want the just the title and instead of this text there's no actions but this whole thing will be clickable i guess so let's take this code copy and paste as always cool so let's pop this like this let's jump back in here so let's paste this card in here we don't need the actions um we do need the card we do need the card media and we do need the card content uh text secondary we will figure this one out in a moment i will put the alt here as the country name and the image i assume we get the image back with the api so let's just look for that flag yeah so there is i guess an svg called flag which is just a url so we can just use the country flag for that country.flag um hey not looking too bad already um cool what else do we need so let's look at the light version i'm gonna open up elsewhere so it's rounded already um it doesn't have any the shadow thing so i might move that back in not too bothered about that not a big fan of the shadows kind of the elevation type so we can actually change that straight away the card um although i only remove this max width here that will take up the full width there which looks a bit silly actually let's give it max width i'll take that back three four five is that sound about right anyways you can give it max width and what we can also do is in this grid uh i can't remember which one it is justify online i always get mixed up with all of these ones i want to center everything basically i want to center it justify content maybe i always need to look up where's the cheat sheet or actually we can just play around with it here so let's look for our flex which is up here you guys haven't seen that well let's move this here so we have our flex and we can just do justify content so this is not what i'm looking for ah well okay actually i take this back the items if i was if i want to center it i would need to add a margin here um zero also i think there we go we'll keep it like that for now but i think there's a better way to do it yes there's a better way to do it maybe maybe i can i feel like i can do a max width here anyways let's leave cool that doesn't look too bad does that look anything like the desktop design no it's a lot more spaced out here also looks a lot more wider like a lot wider cool all right we'll come back to that no problem let's get all the functionality and roughly the designs and then maybe we'll align items on the grid yeah online items let's try that items yeah no the reason i send the reason this isn't working is because the grid itself is the full width it's the card within the grid so the grids i wonder if i could just take this off one basically remove that i'll go full width and then so now the items the grid itself the grid item itself is not the forwards and then you can do the this is a line items center no um yeah justify content then you can do justify content center i think that might be a bit better better than the other solution it feels a bit better yeah well let's do that justify content center um oh now we've got this big list that way the card itself doesn't need me to kind of we don't need to worry about sizes of the card it's there yeah just here can you put the max weights directly yeah you can um so let's just get the content in here and then we'll get the functionality of the next page and then i guess that's everything um and then we'll maybe have a look at fixing up the design to match it a bit better again not too worried about that oh we do need to actually add all the filters in here which should be pretty quick as well cool so let's quickly add the the text so where's my design here we go so population region and capital so that should just be population um region and capital capital and region that should be fine party too that's all fine let's just add hold on to this one thing i really always annoy me is not there's no i don't think there's that bolt um there's not bold like prop on the typography which means i have to wrap things in bold like this which is just fine but and actually yeah the typography is always a bit long anyways um yeah it's fine so line items are the great the inner grid not the outer one ah yeah of course let's go back to that because i think you're right mush if i did that that would work um let's go try that one out so let's move this this was in here sx and this had a max width of three four five and then muscle same and j man align items center what's that line items the inner grid now the outer one i think that's that's what we're trying out again i think this would work if if i set the max on the grid itself great item so either i'm doing something wrong no so these grid items like this the grid itself is full width the card the content so unless there's like a online let me content justify the content that's created one i'm sure yeah i always forget this once but um yeah i think that one kind of makes sense anyways to have maximum on the basically the wrapper this grid is pretty much just a top level it's just the top level um flex item and we're setting the maximum width on that yeah it's really different ways to do it you could also add the padding on the inside and keep that forward but this is fine just fine in the center and then just making the grid itself a max width that's absolutely fine cool um let's move this back here and yeah we've got the population looking half decent i don't think the color is meant to be i think it's fine as black so let's remove that and let's do let's change this card actually i'm not a big fan of these ones um get a variance and i think i like the outline ones i'm not a big fan of the uh the shadows and in the header i'm actually going to remove the elevation completely it won't look exactly like the designs but that's fine so that's that so i think that's close enough to this and then we have when it's bigger that's okay as well the only probably thing i would care about with this is this probably just needs to be a bit wider um so you can because i've got my container here i can just add a max width onto this um oh that's not max width here is it sorry i know it's messed with and then i can do excel which just makes a bit bigger and then i can increase the spacing so i'm not sure that probably is a bit maybe we could give these a max width but i'm not going to worry too much about that actually right now so let me just try one quick thing which is this spacing inside here let's give it like let's give it big spacing that looks alright cool let's keep it like that that looks okay but i should probably change the yeah the header as well to be container max width so you can you can override all these props in the theme as well the top level theme instead of changing in each component component so you can override the default somewhere in here which i can't quite remember something i mean i think unless i can find its overrides i can't write the name yeah and then you can go container default props and then change i guess max width to be you know excel and that way it should be able to remove this small thing but if you're gonna use container as a default then yeah it makes sense to have that yeah that still works cool all right let's um let's make these clickable um what are we doing for time okay let's make this clickable and we'll navigate to the uh so these will navigate you to the country page and there's two there's a few different ways you can do this because i've got all the data i could just pass it in you know pass over the state with react rule or something along those lines um but what i'm going to do is i'm just going to make another fetch on that page so i'm going to redirect i guess to the country with the country i feel like country name might not be the best because there might be some weird names like with these things i don't know how that will work let's try it maybe country code i don't know let's let's give it a go so i guess i can make this card where's my countries file i guess i can make this card clickable yeah and actually that gets me thinking should this card then just be because realistically this is just a from a semantic html point of view what's the thoughts semantic html point of view what what should what should be this is just a list just an unordered list of links maybe so should this be a ul with just unordered list of items um or one or the list of um a tags basically links that would probably be the better semantic way to go um but yeah let's um yeah let's see if we can do that let's try that quickly because this could turn into i don't know if this one takes in the component prop i don't know if i'd want the full thing to be in a tag actually maybe just the title or just the image or something that could be wrapped in now let's see how that looks so the image is now image is now a link and then because i think the usual pattern i see is that you know maybe the image is a link and then maybe the title is also a link or something on those lines but not not necessarily the entire card um so let's do the image as a link and for links so they do have their own material you i have their own link component the way they recommend usually um is to have the link and then actually make the component itself because react will also have their own link do i have react right here let's try guess this one um import i think it's link as from react root or dom or something along those lines let's see if that works and then what you can do is you can just pass in the i think they're taking the two prop and that would be um slash i guess country let's try country dot name for now we might have to change that i don't know if i need to also add in countries yeah i do oh unless i just pop this in which is fine but i don't know if that's the best of ideas it's better to have that i can't remember if there's an issue with having that path relative i'm just gonna assume it's fine for now um cool is that all fine let's make sure that's fine let's go back make sure the countries is fine interesting thing so actually yeah let's try what i'm gonna do here is i'm gonna quickly add a back button um in the countries country so let's just add does it have a bathroom yes there is a little back button here so let's just add a quick back button um that's fine back and we'll do a variant of outline it's outlined i can't remember um actually there should also be a link let's put this as a link and in fact can we just i can't remember if in react you can just yeah maybe i should go back that way yeah this is fine so this is just a link now i think that looks like a button that's fine and if i click back it's going to take me back to the country's list now interesting thing here is so you can see when i click on afghanistan jumping into afghanistan click on the network tab while i go back it's making another fetch um this is coming from disk but it's it's still making another fetch oh it's i wonder if i so it's making another fetch every time um although is you know is being cached i believe because you can see that it's serving it from disk but if you jump into here we can add options here because we know this is almost never going to change right we can that we can add a cache time of i don't know like infinity and infinity don't do this in real application everyone and well the stale time of infinity we're basically saying this is never gonna never change um i wonder if that just no longer makes a call at all anymore so now if i jump into afghanistan and i go back so still yeah so that just doesn't make any call at all where i think when you do have a still time of zero what's gonna do let's try this out is it will invalidate fetch but fetching from disc so it's still going to make if i go in and back every time i go back it's still going to make that request but it gets it from cash um but yeah we can just say don't don't do that at all i don't know where it comes from otherwise pretty sure it comes from the same place but now when we do this it's not gonna it's not gonna make that network network request anyways um just a nice little thing to to know about if you're working with actual bigger performance issues um which i guess we're not too worried about let's see if this weird character this way here makes a difference i guess not uh and actually what we need to do is we need to figure out the api um [Music] yeah so this one by name one by full name let's distinguish by country like generally when you're looking at like this kind of things it's it's nice to think about the user and the api i've seen this a lot of people make this mistake if we're you know i've explicitly called these countries might not be the exact name but you know you want to be a bit explicit with this name and then if you think about another in a way another accessibility thing is is the link copy and pastable as well um i've seen a lot of people kind of do a lot of things in state you know react with react which means you can copy a link and paste it to someone and they won't see what you're seeing because it you know depends on state kind of pushing buttons and you know if you especially if you're not using react ruler to it to it's to its potential so in this case for example you could have i guess you could have multiple links that point the same thing um but in this case you know afghanistan here which just means i can give this link to someone and they'll they will see this page and it also just means you know i can change that um obviously you're not seeing anything now but yeah you can kind of search for something here you can paste that link or you can even search directly um and that should work in theory but obviously in this case the only reason i question this is that the name kind of has room for error here you know what if you type in or if you misspell or you know united kingdom is it united kingdom or is it united or is it scotland england or is the united kingdom of you know northern ireland great brain or whatever it is um just something to think about united kingdom of great britain on northern ireland so if i click on that that's a whole load to remember anyways okay let's let's let's do this one and we'll just use we'll use it we'll keep the name in just because it's nice and we'll do the name api search by country name it can be the native partial name what does that even mean so if i do alterior here that returns a list if i do united i see okay and if i do that's that one if i add full text as you go to true full text equals to true it's not gonna be found and if i do one that is found a story so always returns a list but it's gonna be one item full text equal to true should we do that no i think we do united and we just take the first we just take the first one me call it that yeah um that way you could make a what if i unite to uh what if i misspell this united is that fine i didn't know but if i partially do it it will just okay that's fine this is me overthinking things like i mean realistically you're gonna click onto this and it's gonna always be the exact name so i could just start off with that i'm thinking of a scenario of people typing in things in the search bar which is not really required so actually you know let's just keep it simple and do the exact full text equals true so let's just copy this jump into country actually we'll copy this guy [Music] and so fetch country it's going to take in a um name which is going to be string it's going to return i think does it return the exact same object i think so so i don't want this to be here anymore i'm going to pop this just in a file called types or something i guess for now we want to export this um i'm going to import that here so i'm going to import type countries there we go doesn't like that stuff ah there we go i don't know why i didn't like that and i'm gonna do the same thing here i don't know if having that the same name is a good idea but i like the being explicit with the type here as well it's easy to see that this is the type um so we're fetching the country we've got the name we want to replace this with uh which one was it this guy and we want to add the name there so we can do this i think that should be fine and response jason here i'm thinking of just where because we cannot because it returns a list you could just abstract out the fact that it's a list here um i'll just sleep in just assume it's the same and then if we turn this into that guy or we can just copy and paste this here countries what we can do here in fact is i'm just gonna do country and i'm just gonna assume data it's going to assume this first one i guess it should be the first one fetch country and now this this here should take in or kind of take in i forget how to do this take some country and it takes in something else um which i cannot remember um use params maybe i can't remember how to get the parameters out of because what we want is the the parameters out of the url i can't quite remember how to do that um where's my react router documentation uh so i'm just having a look to find i can't quite remember how to do is i think it might be use params let's see what this gives you uh what's this return turns per rounds does that look like it's a string let's do name is that what i called it so in the app.tsx you have i've called it just country what's wrong with this country and i think you can type this i cannot for the life and remember pros maybe it's like this maybe not let's look at what excuse me let's look at what params are here uh and while i'm doing that i'm gonna also look at the documentation for react reactor dev to figure out how to get the params out of if anyone can remember that feel free to give me a hand with this one or actually let me yeah let me change this i feel like this is causing an issue countries yeah let's call this country's response for now just so that doesn't cause any issues with this and then country can use this guy because i'm going to figure out what that is um yes let's look into the docs and let's go into tutorial or let's go to the api reference that's probably a good point use params yeah i mean it should just be able to do use params and do country like that use programs get a user id from the url let's see if that's gonna work um and let's do country name which means i need to go back to my app and do country name here let me refresh this guy here we go united united arab emirates which is exactly what we want that's fine this is fine so quantum policy has any technicians there's not any addition um let's get back to this enemies so i think country name can get chopped in there so the key we want countries and we want country name and then the query function i think takes in here the context query key i can't quite remember also how to do that okay so that's something else i need to figure out how do we would we get a name from here because i could easily just pass in country name like that i can't remember if we're better off taking it from the um from the context here page param query key let me just quickly check if there's a better way to do that so when we to do's is there a kind of get to do let me check i'm just quickly checking one of my previous projects if i can remember how i did this if not because i'm not big i always find it strong i'll struggle a bit to navigate react queries docs let's do okay i think it's fine as is i think it's fine as is all right let's keep it as is um so let's make this small again okay let's see how's the page looking okay so let's pop this here so let's expand this a bit and see what's going on so can i access country before initialization i think this is all fine refresh it's not there so we're getting the country there's a few renders here i'm not sure why but don't forget that um we've got the country now and let's just see if we can name that country country.name there we go okay cool so that works and that works i wonder if it's case sensitive um i guess so cool albania let's try i'll be yeah this case insensitive which is good cool so we click in we are in albania so now let's have a quick look at the designs for this let's go back to mobile we want the detailed one so it's just going to show the flag and yeah and then details and then border country is cool so let's do that um let's get actually let me keep this somewhere on the right so i can have a reference point to that cool so we just want things it's kind of full um so we have the button on the top and then we have so we just put in an image here i guess [Music] a source of country dot flag alt of country name and let's just pop in a max width of what's this can i do a width of 100 that's fine these are going to be the same i wonder slightly different sizes i guess that's fine this kid in theory also be a card do you get cards in um can you let me just double check something i wonder if you can do a card without like a card without the outline etc um so at least that will give us the structure of this kind of page um just like this and it's got the nice all the images will be roughly the same size can i take the card and can i do variant what's the variance here i guess it's just outlined i guess we could in theory yeah take a card and update it and to remove everything but yeah we don't need to do that just now i guess um let's see if i can in that case jump over here and just focus on the height just give it a fixed height it's probably not a good idea all right let's just keep it with the max width um and then i mean we could in theory then just box this in a bit but i don't mind actually so much we'll keep it like this for now we'll change we'll fix kind of the padding stuff later on but i don't mind the flags being a bit bigger um and then here we just basically have a bunch of typography things so variant what did we do for the countries one we could just kind of replicate that variant body too um or actually just do body one and let's do a bold something so the first one's gonna be native name like that cool so here we're gonna have to search for a few things so we need native name native name maybe something a bit cool i'm gonna have to update the types so where's the types here native name uh region i'm just going to assume the names and if they don't work we can fix them later tld is that right or is it top level domain top level domain and that's array actually that's a list of top level domain which is uh looks to be a string ray of strings currencies that's definitely an array so let's do currencies which is going to be a list of currency um let's do languages which is which is going to be an array of languages and border countries border countries which is just borders borders which is nice and easy string so let's create this type so currency and language so currency is just going to have less currency the only one really need about only care about here is neural so that's so we could get the chord symbols and everything i'm just going to get the name here which is a string and for language all we care about is name as well i can actually just combine these into the same thing but yeah so i think that's everything so now let's go back here and what we'll do is open up country native name that's fine uh population population region region sub region subregion [Music] capital capital top level domain yes top level domain currencies which is going to be country. so it's gonna be currencies and i'm just gonna get the first one dot name and hope it's there um i guess i could protect against that but that's fine and same with languages no yeah languages dot join so i'm just going to join these languages on comma or actually it's better probably better off here to no no this one so that's probably fine languages don't map so i'm just going to map it language to the language name language dot name so mapping it to the name and then join it that should be fine and actually to make sure there's a i guess it's space after all these cool i think that's that uh we could add a space here um so the material ui they use a lot of this this box component um so if you if you see capital capital here so after this one here they have this box component which is kind of like a it's a layout it's a layout component in material ui and it's basically for wrapping things and adding styles that's that's the main purpose of it it doesn't itself render anything um i think for arbitrary things like this like just here we need a spacer i wonder if they've got space here does anyone have a spacer no um you can just do a box of and they've got a bunch of props that you can add um so i can just give this one a height of two i think that uses the spacing internally um so let's see if that works so this height of two pixels okay so let's just give this a height of um to rem i guess that's how you could split this up um really we want these all split up and we could add kind of a flow type component here should we add that in now yeah let's add that in now so basically here so this image i mean we can add a one-off style for this image here i think using the sx component i wonder if this takes in margin like why and why let's see what that does if anything maybe not of course an image let's wrap this in a box this is what the box is useful for because this is a one-off style essex is there a margin why yeah there is so again let's pop that as to so we can add that there and then what we can do is we can add a kind of a flow component to everything else um so if you imagine so when i say flow component um if you've heard of what's it called the owl selector selector css this is what i mean by flow component lobotomized owls yes so you can kind of add this this selector that will give a margin on top of every child now the weird thing is trying to get the syntax in here let's see if we can do this so this one will have to be 100 i don't know if you need to something like that and then you want to add a another object margin top of let's just say one ram here let's see if this does anything yeah it does actually it's not bad so does it do without this no it doesn't [Music] oh wait no i've done something around there i thought i saw it working for a moment there but i guess it doesn't um so what you can do let me just have a quick look because i need to figure out i can't remember how to select i think it is star plus star will select all but the first child so every basically sibling element but the thing that i don't know if i need to do here because i don't know if i need to add the greater than sign to indicate that i think you do okay because this greater sign basically indicates what we're attaching this onto the parent and then we're basically saying look at the direct children look at all the children but um not the first elements all the children that have siblings i can't remember exactly the explanation for it so if you did just the star would be all the children but if you do star plus star it's all the children that have a sibling which means it skips out the first one that's probably explained but badly anyways it explains it here look for that lobotomized owls and this could you could just turn this i usually take something like this and i convert it to into a kind of a component just called flow and that way i can just add it anywhere and it will just give me um kind of a flow of of content with some kind of consistent spacing so it just means other than that first element which i think is the title so this starting here everything's got a margin top um let's add border countries and i think that's pretty much kind of the bulk of the app um i'll probably call it soon maybe quickly try add dark mode and that will be the 80. it's all about 80 20 this is 80 i think and the right design so let's quickly add uh take these um border countries is a bit bigger so i'm going to do like a oh it's definitely not h2 um i mean it could be component wise it could be actually could be whatever um i think i'm just going to keep that as a p but it's let's just see if it's very in h3 h4 h5 let's see the different sizes yeah that's a bit better and also we forgot to update this to languages border countries how have i broken the just me i thought somehow broken my um does this actually work no idea what's going on here so this works until i refresh the page that's odd what's going on there let's see the style in action so i jump in here i can see that spaces don't really matter but if i refresh it now that has got me confused hmm why could that be that is super confusing um so that works if i change it here let's just change this all here but when i refresh the page what's going on when i refresh the page that's crazy or it's me being silly probably me being silly but i can't for the life and figure out why that's so if i edit here like doesn't matter what i do and the space doesn't really matter that works if i refresh oh maybe there's if i refresh the page that goes away yeah definitely don't want that well actually what does it look like on oh of course we've still got the big design to do but anyways what is what's the console saying is that an older yes okay i'm not sure why this isn't working um i thought i've done this one before so let me just have a quick look at um yeah i mean that's exactly what i'd expect it to be i'm not sure why that's not working i'll have to come back to that i don't want to stick around too much on that same issue but if anyone can figure out why this doesn't work if i do when it hot reloads that works but when i refresh it that does not work that's crazy okay so let's in the meantime let's change this to a stack to try it out this is a new material ui element stack um let's move this because i've not actually i've seen it but i can't remember what um material ui stack i think it's like a there you go next i think so instead of the grid it's like just a flex um yeah so i guess this is an alternative to flow actually so let's do spacing two there we go and this time when i refresh it i wonder if they're also using the bottomized no no they're just using flex this is all just a flex yeah okay um cool so now we've got the flex we want to where's my designs we want to show these kind of i don't think they're buttons or maybe they are binds let's look at the designs thick well actually let's not let's just assume they are buttons it's not a big deal um what if i could do another stack here because i think you get the direction direction roll and let's just add a few buttons or actually let's what we'll do here is um do we have so it'll be country dot borders dot map and border um just like that i think i need to give it a key i always forget this one let's just try that there we go we just call this we'll give this a variant um outline outlined and we'll give this a spacing i like the stack component also of two there we go so um and these buttons are going to be also links so component uh have i done this before i think i have component reactive link and two i think i could do two oh i need that slash countries slash border i think i can do that oh wait no i can't do that because ah so the border countries i think i was looking i don't know if i was looking at the wrong part of the api orders hmm top level domains so the border is using the country code alpha 3 code whereas i am using the name in the link so i can't link those two together i guess i could in theory hmm yeah i could in theory but that's yeah i'm not gonna go ahead i'm gonna go ahead and not do that i need to head off stack looks interesting nice one watch thanks for joining nice one cool let's um how long has that been two hours okay so let's let's leave the link because we can't link it right now and we'll come maybe we'll come back to that we'll we'll just leave it as is i guess we could so my thinking is we could because right now we use the name so we can't use that but we could do basically duplicate this right and this could be country code we could either just change it to country code or just do country code and the only problem with that is everything else in here will work other than this api call so then we just need to think about how can we have we can either just duplicate the you know we could just duplicate the exact you know this exact component abstract this out and that's it that would work absolutely fine um so a few different ways to do that and that way you can just use the country name or the country code but i'm gonna i'm gonna keep it like this i'm gonna keep it like this um so let's just see how this looks right now i think that looks fine i'm gonna remove any so i'm going to do some just remove the link here so there's going to be buttons but they won't do anything so just like that so they're just nice minds and annoyingly this does this have a margin top because that's way too close for my liking um yeah so let's compare that one with this excuse me that looks alright if i go back here let's have a look at the design for the so that looks fine i guess so i don't want to stay for too too much longer um so what i'm going to quickly implement is i'll try quickly implement the inputs the filters because i mean this is the main this is the main i guess 80 we've got that we've got these guys um the response in terms of responsiveness this looks fine when we take it out so that probably looks uh like this that's fine so we just need to add that filter and that will be it the filter should be we could probably get the filter in quite quickly i think um and then we'll quickly maybe we'll quickly try out dark mode and i think that would be i would say that that's like 90 of the way and then it's just about fidgeting with specific sizes and stuff which i'm i'm not really gonna get into but yeah let's quickly do that so um how do we want to do this let's go to uh countries and we're just going to do it we're not going to do a proper um we're just going to do it in memory kind of filter it's just all going to be in here so we're just going to do inside our grid we're gonna have a i'm gonna use this stack thing i like it um and that's gonna have a text field um which i can't remember how to do and we're gonna have a select as well uh which i also can't remember how to use and the stack is gonna be um direction column and justify content space between oh no sorry bro oh it's not like that um that's interesting why doesn't it like that of course it's in the grid doesn't want to be okay let's do this take out the grit there we go that's a bit better and let's just give this a bit of a margin bottom cool so that's that we'll do the text field i guess first material ui let's just i forget the syntax of it all so let's jump into here um v5 documentation components text fields there we go yeah let's take this guy here and we want this to be controlled actually controlled entry and we'll just follow it with state so um let's do don't need id here label we add a label um search for country so i mean this design we could yeah i guess we could take it from from material ui let's leave that out for now let's call this search um and let's do so we'll we'll add this we'll come back to the select can i give this a width forwards that's going to take the fourth thing isn't it yeah we don't want that um let's do well actually i think i can do sx here um let's just give it 300 pixel width well what's the width of that what's the max width i can't remember the max width i set on the 345 let's give it the same weight as that but then what does it look like on here ah so okay so we're better off actually maybe just making this a grid because we want it to wrap although will it wrap can it wrap around flex wrap was this a boolean yeah wrap so i'm assuming once we have some select items it might wrap around but we'll get to that so we want to basically we're going to add a use state here um let's just call this search set search and it's just going to be empty and we'll import use states and then in here we will do the value is going to be so we're just going to make this controlled search and we will on change set to search to i guess it's going to be event and we want to set that to event.target.value.target.target.value i think that's it give or take um and then what we can do this is running really slow we can just simply do const filtered countries is equal to excuse me countries dot can i do a filter yeah countries.filter and i want to filter the countries by word country let's see yeah with a country dot there's a name that's just two local lower to lower case um i guess includes the search which should mean just a quick refresh if there's nothing um yeah i need to handle actually searched uh well let me handle that in a second just so we can see that output so here and then i want to do instead of iterating over the countries filtered countries um and i'm going to do dot trim as well actually because you don't want to just put in a bunch of spaces countries dot and search dot trim um search dot actually also to lower i think that should be decent enough that should be fine for what we want um there we go so spaces i'm gonna break everything although so let's say if you wanted to search something with a space this wouldn't work but i guess it's a weird requirement you could keep all the spaces um there we go so united kingdom so as you search it's gonna filter that's fine i think that's fine and if i do weird characters it's not gonna do anything cool and then second last thing so let's do the select and then we'll quickly try to the dark mode select there we go so the select is a it's not select yeah there we go here we go so let's copy this guy um and then how does this on change handle change yeah okay so let's do [Music] yeah so they're adding the box around i could probably do that but let's do this here in fact let's just add the box around for both of these so we can add in report statement here and menu item cool i don't know if that's added all the inputs it's been a bit slow my laptop can't quite handle the um stream okay so this is interesting we want to filter um by region can we get a list of all the regions i guess we could just hard code the region region are these all the regions yeah i think so let's just pop them all in here um european ocean so when they say region they just mean such as all the continents um asia so we've got africa americas asia europe oceana so let's take all these um oops that should be that and then we can just do region and on the own change let's just come back here and we'll just basically take this guy just put it in line i don't usually like to put things in line like this but i think it's fine in this case because there's no kind of complex logic or anything going on so i think these are here for [Music] accessibility as well so let's call this region region select region region there and then we can just add another what's going on here so region here and region here and we'll start off with i guess f [Music] we can start off with yeah actually how do we want to do this in the designs they have filter by region select the we could just uh yeah we could just default to the first one i wonder if we can just start off with nothing and you click once sets it yeah you can't remove the filter oh that's always annoying if you wanted to remove a filter um i wonder if i can yeah okay we'll just keep it like that i think we could i'm just thinking here we could have it so that i mean by default you can't deselect a filter here for example you can just put in an option which is just like an empty value right so let's give that option here i think i'll do that just like this and then i can filter based off of that basically so you can if we refresh this page here you can select none i guess when you're in none it's not going to show anything there i could explicitly add it in as none and make that the default yeah a few different ways i guess you could do that depending on how you want to handle that ux um i'm just going to leave it as is so i want to filter by region here so so we've got filtered countries and then i guess we just need to put it back we need to put it through filter again so i guess it depends on which one you want to filter first or does it matter yeah it doesn't get matters so we can do another filter here i believe we'll see country dot region i guess is equal to region and here we only want to do this one if so these two don't have a region so we only want to do this if country.region is not um well i guess we could just do this so if we're on none we just country.region [Music] i guess not equal to maybe this is the best way to do it oh sorry no i'm thinking region i think that should be fine yeah can we do this what do we want to do here if the region is none we want to show everything this is where my mind blanks on something quite basic um to africa there's none oh so um i think that'll be fine so if if the region is empty then it's just going to return everything it's true if the image is not empty it's going to jump into i was doing that and there instead of africa just going to show the african countries and then within african countries i should be able to further filter if i do united it's going to show if i do united kingdom i'll show nothing if i do none yeah there we go both filters there we go that's fine i think that's pretty much pretty much the app there's two things i've not done and i might quickly try tackle them anyways um so this i've not done the this view um which i think we can maybe quickly do that one we can try do that one so as this goes in we want to basically turn this into a i guess this is a stack in fact it's a yeah stack that wraps round i guess um and then so is this basically this is a bit of a complex layout so let's quickly do that and maybe we'll do dark mode well let's try to do this one anyways so because i'm not too familiar with stack yet i think i think in stack you can control the dividers yeah you can't quite control the um so in a grid you can control how many items are in the column so you could just say it's a two column and then it's a one but it's stack you kind of need to rely on the spacing which might be fine actually that might be exactly what we want let's let's try it out quickly so let's go over to country and we want to do this become stack city stack upon stack uh we want to do a stack of two items so i think that should be that the first stack is let's do direction this is going to change um yeah let's do row [Music] so that's that but the problem with that is obviously this gets that gets tiny so let's do here um i think flex wrap would work like that right so we have this is basically that that view we had earlier on which is fine and then at a certain point it kind of it goes over which is fine so what we're going to do is let's let's make this and we'll keep the default size so we also want to do justify whichever one we need to center this again i can never figure out yeah justify content center so this will be centered because it's a flex but it's it's wrapping around and then once the bond bits gone up space it just moves up and the great thing with this i think we could just add a spacing of like inside quite big spacing here there we go i think that's quite close yeah that's good that's fine the only problem with this now is that this is losing a lot of uh we can maybe look into that later on because i know if we if we take away this 100 um let's see if we can take away this 100 what does that do ah of course we got that okay so we also want to do the same same with these guys so these two becomes these two become a stack within a stack i think they've also got their own stack so there's a lot of stack things going on here um so let's do let's do a stack here actually what we'll do first is let's figure out which where the split is capital yeah this is where we added that box right the box of two ram so here we want to add another we basically want to add a stack here all the way to where is it countries here and then we want to do another stack from where is that here to the box at this point this is where it becomes a lot easier to start splitting things up by the way um definitely not not nice to look at all these nested stacks and stuff so you know split this up into a component straight up into a component it becomes much easier but i think the point here is that this can be a direction of row with a flex wrap of wrap and that will hopefully kind of somewhat give us the the behavior we're wanting and again spacing we're chucking quite a bit spacing there oh that's not what we want oh we've already got spacing so that spacing actually doesn't quite um so this spacing let's see this is not quite what we wanted um so yeah there's a few things actually we can solve here um try to think which way i want to do it best uh let me undo a few of these things because i don't let's jump back to this so i think i think the safer way for this one is to just so we've got the wrap but the problem with the wrap is obviously you don't you don't have control um so i could just i'm gonna go for a grid for now um and at least with the grid we'll have a bit more watch the top that's fine a bit more control over how things um are placed so grid container and what we'll do is we'll give it the same spacing excess we're going to say 12 and then anything over like medium i guess we're gonna say six um i think that should be fine i think that should be fine just making sure everything's okay so that's fine and we just want to uh obviously we want this to be centered uh i just need to remember how to center this so let's look at this guy div yeah this guy here this is a flex yeah so how do i justify content is it just like content no although this is i don't know it should be um justify items i always forget align content it could be one of three uh line items okay so i'm definitely doing something weird ah maybe because i've not got the of course [Music] so this is the flex so in the flex here justify content i'm just wondering why is there what's going on here if i make this bigger container we have one grid item here let's add another grid item here forget about that spacing for a moment of course because i'm putting in this and yeah that sounds about right i'm putting that on the the wrong part all right needs to go on the item there we go so that's fine and then when it gets to this size roughly so let's move that to like large i think that large is fine so it basically move this to large as well so it stays like that and then when it gets to a certain width yeah we'll find there and i'm just going to quickly add on top of that grid let's just add that margin top um one ram spine i think why is that so big margin top what's going on here one pixel oh maybe because of the space in there the spacing unit of course so let's just add a box around this guy so we've got a box here and we can still margin bottom of um cool so that's that this is now the kind of general layout this is fine and we can again play around with the widths etc of that there let's see if this is all finally fine for a few errors okay um border can be used as a key that makes sense wait no it doesn't oh yeah because it's there i've got two the same borders no where is this happening that's probably inside here so that should reduce it um and then the only other thing is of course border uh border there we go clear out all our errors um and then we can do basically the exact same thing in terms of grid for the stack um for the so within a grid item you can add a great container and again you can add that there and take it down to the spacing the box if i can see it there we go something around here and then i can add another one there all the way down to here and i can finish up i think that grid there almost i've read something wrong the wrong way let's so we have the box grid number one let's take this out here um completely actually there you go um that's fine let's have a quick look at those designs they're kind of um this probably we could yeah we could definitely fix up spacings etc uh here um let's see what this is so we have this these two grids um yeah in here i'm sure we could let's see i always forget again it's not justify content let's align items center line item center is what we want on the this guy here line items center i think that's fine um and then we could yeah we could work on spacing here making this all fine i think i removed the well also the border country shouldn't be there yeah that needs to jump out so that's like that i think i also got rid of the stacks so i can re-add we add these stacks here and you know stacks with the spacing of two chuck that back in there um do the same here stack with a spacing of two chuck that back in here so that's that and then yeah you see where this is going i can now add so usually for these kind of things like i like to have certain um kind of layout yes where's the piano no i not here today um i tried for a long time to get to that 11x engineer but i couldn't maintain it so i gave up um so i'm just with the apple magic keyboard i actually moved aside my mechanical keyboard just because it's too loud i think it's too loud on the stream um so i'm just gonna add a quick margin top up here that doesn't look too bad uh i think that's fine and i think hopefully that's still that still looks fine when i do that yeah so i'm not i guess i've not quite figured out the stack yet you need to play around with that a bit um or maybe i guess the stack is a grid with auto so it's just a standard flex so there are some areas and how you want to wrap it but grid is always kind of safe when you're when you know fixed kind of fixed area so that looks fine to me back loading the loading state's not great this all looks fine that all filters dark mode do we want to do that let's try figure out the dark mode the final thing and this is actually going to be hopefully a case of copy and paste um and then i think we can call it there so first of all let's just see how it looks if we've done any of the colors and stuff right so i can jump into my app oops jump into my theme and just add palette modes dark and there you go dark mode is enabled um it doesn't look too bad actually i don't i don't like the black it's too dark for me um but there you go that's dark mode so dark mode works actually off the bat sometimes and it's fine um let's just guess have a way to toggle between dark and light mode and then we can call it that so [Music] the way you do that is we're gonna have to move this and memorize it so move it into our component um i believe they've got ah yeah together here ah there we go perfect so let's convert this to a function so we can use the media query for um getting the um let's see that's fine you can use the media query for getting the uh the color scheme from the system from the from the browser and and based off of that choose now the only caveat with this is it won't store it for next time so if your hard refresh if you go off and back on it's not gonna store your preference but you could you know bring in um you know local state and start storing it and stuff for next time um in this case i'm not too bothered about that so i'm gonna take this line and paste up here and then i'm gonna return hopefully return my responsive font sizes there we go and just remove this so all i'm doing is moving the thumb the theme was outside the component i put it into the component but we we're doing we're memorizing it so that the value doesn't you know you don't need to re-render every time and we're just adding a dependency on the that memo don't use memo function um for preference dark mode so anytime you toggle prefers dark mode um here then uh yeah or i guess this isn't even for the toggle anytime the dark mode changes um with the media i'm going to change it so actually in order to yeah so in order to toggle it we need to add a bit more we need to add a bit we need to store store context um pass that down get a toggle let's um do let's do that i've got i've done this before so i'm gonna i'm gonna look for that and maybe we can kind of quickly kind of quickly do something so let me go over to one of my previous projects um maybe we can quickly do something so let's see uh i think i create a hook before [Music] i create a hook where any this one actually uses i think they could use it so let's let's let's try it out if i can get it to work straight away then i'll do it if not then i might leave it so i had a what do i call this dark mode context now this was a gs javascript file so let's see what fails cool so let's see how is this thing um props let's just chuck in any for now where is this props being used that's just getting passed in dark mode provider i can't quite remember how i used it why is this complaining let's see i mean it is right here what's going on here of course this needs to be tsx no what am i done not sure let me rename this to tsx so that's all fine this is all fine so this is just something i've used from another project and i think import instead let's just make sure that this is the right way because this was an awkward relatively older project i can't quite remember what version of react [Music] why would that not work react context let's jump into here and just have a quick look at if i'm doing something crazy here um my contacts provided this seems all right my yeah i can't quite understand why that's not liking that suppress that for a moment let's suppress that and see if that still works um and i'm obviously chucked in any here but i'm just gonna see if this just works off the back so this is i've just imported copy and pasted this from a project so we're using the react context we're creating the context i'm creating a hook that just exposes the context so just make sure it uses the use context hook and just make sure that you're within the the context and then returns it and then i've got this use preferred dark mode um and all this does is gets the local storage item it gets the media query checks if the local storage item exists if it doesn't it uses the media query otherwise it sets it and then returns it so that just returns basically true or false um and then we have this provider which basically just has a base state which it gets from the um use preferred's dark mode hook and it just has a function which basically sets the local storage and flips true and false and provides that function so let's see if we can find that being used um so i should just be able to and the caveat with this is i do need to now wrap everything um uh let's just call this dark mode well this isn't gonna need to be called the app the reason i need to wrap this up so that i can have access to the uh it's gonna work just so i can have access to the hook um and then i can do first dark mode just like that and i think that should be it so let's see if this this works first dark mode dark light i don't have a that is the value the problem with typescript type no okay well again let's i'm going to suppress a few things for now just to see if this works um cool so that's that let's see if the site still works i may have broken things react is not defined why is that why that wasn't of course that's why this wasn't working and then is that why this was complaining of course that makes sense what else did i do and is that why this is also complaining there's this complaining for something else there we go okay so i missed the react import uh no this is a complaint about something else so that's fine so the final step here is i can just use that toggle let's see if i can use that toggle in my header header and in this case i'm actually need that first dark mode and then i think i exposed it as a toggle dark mode it's just a function again i will to suppress this for a moment and total dark mode um it's just a function i can try to here maybe maybe maybe maybe let's see hey there we go that's not bad and actually if we if we jump into the application local storage the good thing with this is it stores dark mode so this is basically changing the value down here yeah there we go so that's dark mode light mode not the right colors etc but that's that's okay let's compare designs so this is what been i guess it's been a few hours three hours um but we got quite far i think um this isn't great it's you know so let's look at mobile first um so we have the country filter oh this still says age on it should probably at least change that countries where have i got age here country um oh no region cool um so filter by region search for country we have all our um countries and then i guess it grows a bit so that this one looks a bit better um we could fix up the right colors and the right exact fonts and stuff and the header um which is i guess trivial in the backgrounds of these uh some of the spacings etc um and then dark mode light mode works and if we click on one of these we get the where is it there we go we get the flag as well as i guess the text and that's all looking okay we'll go back that's all fine yeah and we make this smaller that's the this one here no this one here yeah perfect cool i think i'm going to call it there guys it's been a it's been a few hours um again this is kind of a bit of fun i'm i'm kind of doing these to learn a bit about some of the new technologies so learning about i guess material ui react router and um react query version three so this one actually took a lot longer than i thought it would um three hours just now um i guess yeah that's what yeah it takes a while especially if you're not forgot that especially if you're not kind of designing funny stuff all the time but maybe maybe i'll get quicker over over time i'll be that would be better um again subregion does exist as well here a few things i'm figuring out here that aren't quite working which i guess is fine um i'm not looking to get kind of sub regions of course that's uh let's rename this because it's lower or i'm not looking to get the perfect design um i think that could be good practice especially if you're kind of practicing for a there you go like a i don't know in a job where everything needs to be pixel perfect but i think we could um with a flex wrap there we could do um i mean this is i would say this is maybe nine eighty ninety percent done um and this is the one that takes i guess this takes three hours it would probably take me a lot more than another three hours just to get all the little uh imperfections perfect um and usually i mean this is where i guess the trade-off comes and whether that's worth it or not uh for now definitely not for me um that's not great but i guess i shall leave it like that yeah i guess i'll call it like that um yeah i mean it takes three hours to do 80 so you can see the entire app works uh dark mode light mode all the different pages all works pretty well and the layout on the shape is generally in the right places and it's not horrible to look at um to get to the exact kind of exact copy these designs would yeah would just take a really long time and it's probably worth you know worth practicing um i should be in the same line yeah probably worth something uh practicing if that's what you want to get into but i think for me i'm just uh i like the 80 and and then yeah if i'm on a real project i might put in the additional 20 or at least 10 but i think for it for these things it's a bit of fun um it's probably unless you know unless somebody wants that or we can kind of figure out specific problems or fun problems i don't think it's worth going into every single detail and playing around with pixel values until it's done so but yeah i'm going to continue doing things like this if anyone's got any suggestions at any point um i'll might put polls out uh in terms of um you know what kind of challenges what what's the next challenges you know there might not be front end some might be back in something to be mixed um but yeah this is this is going to be fun for now i guess and i'll i'll keep this keep this going this was yeah this was really good fun um yeah i think i'll call it there i'm gonna end that stream and thank you very much for coming on and i'll see you see you guys next time

Channel: Redhwan Nacef

Views: 95

Rating: 5 out of 5

Keywords: Software engineer, software developer, how to, how to code, coding, programming, testing, java, javascript, learn to code, learn coding, learn programming, software, technology, computer science, YouTube, Redhwan Nacef

Id: YEftTk7ojLA

Length: 185min 58sec (11158 seconds)

Published: Wed Sep 01 2021