Build and Deploy A Pokemon App With Next.js 13 (App Directory, Pokemon API)

what's going on guys it's Cooper codes and in this video we are going to be creating this Pokemon finder application you'll see that we have all the original 151 Pokemon and we can even search for a certain Pokemon for example Bulbasaur we can then press on a certain Pokemon and get all of the data relevant to that Pokemon this project is a great introduction to next.js13 because in the original Pokemon finder page here we handle an API call that gets us all the different Pokemon and for each Pokemon on this page when we click on it we are getting data specific to that Pokemon from the Pokemon API and you'll see we're even doing some routing with these slash Blastoise and it's giving us all the different data specifically just to this guy and at the end of the tutorial we are going to fully deploy this Nexus 13 project to Virtual so this is a full project that shows you routing API call how to manage data how to use Shad CN UI for the front end on a bunch of different cool stuff throughout this video we are going to use the Poke API which is going to give us access us to a bunch of API calls that can get us a list of Pokemon and to get us the information specific to a certain Pokemon for example Magnemite is like the magnet Pokemon and if we submit this call we can then see the result of that information here so you'll see he has a bunch of different abilities he has an ID he has different types he has different stats which we're going to show in our tutorial here for example what HP does he have what attacks stuff like that so this video is a really great introduction to working with external apis in next.js13 and using the Pokemon API is kind of a fun way to get started with that alright let's get started with building our next js13 application so to build our next.js searching application we can go to a terminal inside of an empty folder to get started and we can use the command npx create Dash next Dash app at latest and I'm going to add some things onto the end here to enable typescript so I'm going to say dash dash typescript dash dash tailwind and dash dash eslint so I'm going to ask for a name to our project I'm going to say Pokemon Dash binder and we do not want to use the source directory so I'm going to say no we want to use the app router so I'm going to say yes I'm going to say no to the default import to Elias then it's going to start loading some stuff so give it a second and so now inside of this Pokemon finder little folder here we have our entire project so you can go into that folder in the terminal by saying CD Pokemon finder or just pressing tab is how I got that so we have everything we'd expect from next js13 importantly we have the app folder which is going to have our page.tsx inside of here in this tutorial I'm going to take some basic components over from shad cnui and so to use Shad CN within our project we have to put a command into the terminal and that is going to be npx Shad cn-ui at latest and then init I'm going to choose the default styling I'm going to choose the Slate base color and I'm just going to use the defaults here so app slash Global CSS is good just press enter also yes for CSS variables just because it's defaults but we're not going to worry about that in this video and then just press enter the defaults are good here and then this import Alias for components is good so you can just press enter again this lib butyls is also good so you can press that and we are using react server components so press yes and now we can just press yes again it's going to do all the setup for us to make it so we can use Shad cnui which is great news and there we go so now everything regarding setup is good to go we have a next.js13 application with Chad cnui implemented and now we can get started by actually working on our application to see what our application looks like right now we can say npm run Dev inside of our Pokemon finder folder so this is just the basic boilerplate for next js13 one of the first things we can do is we can set up next Dash theme this is a package that's going to allow us to set up light mode and dark mode on our application and so inside of our terminal we can say npm install next Dash themes and that's my bad I think is it a theme before so make sure it's themes with an s and so now that that's installed we're now good to go so now we can get started by looking at our layout.tsx so now we have to add a provider which is going to give functionality to the rest of our next JS application and so a way to understand providers is providers wrap around our application and give them access to data for example we are going to set up a next themes provider which is going to give our application access to light dark mode data so it knows you know which mode to be in an important thing to understand is that providers are generally on the client side so they have to use the use client this isn't always true but next theme allows you to switch from light mode to dark mode and so that's an example of user interaction slash needs the client to exist right if you're switching you might be pressing a button or doing something along those lines and so we need the use client to exist for this provider because we know that the provider needs this used client we can go into our components folder and create a separate component to create this provider so I'm just going to call it theme Dash provider.tsx we know that it's going to need the client side so we're going to say use client above and this provider is already mostly defined within next themes so we're going to say import the theme Provider from next themes and because this component is going to be called theme provider and we don't want to have the same name twice our code is going to get confused I'm going to say as next themes provider and this is what they do in the documentation as well and just to enable some typescript here I'm going to import the theme provider props from next themes and we want to say the import D type theme provider props and so now we can actually make the functional component here and we're going to export it so I'm going to say export function then the name of the component which is just going to be theme provider which is going to have some properties that are typed to theme provider props theme provider props is an object and so we can get certain things out of it for example the children and also the props that we're going to pass in as well if we want to this dot dot dot props pretty much means all the properties we pass to theme provider so imagine if we had a theme provider like this and then we say Cooper is equal to very cool then the property Cooper is going to be in this list of props what this dot dot dot means is the spread operator and so it's taking the list of props and putting it inside this object it's kind of a weird thing to understand but it's a common pattern you'll see when working with props because this function is going to be very simple it's just going to return the next themes provider and then we're going to add the dot dot dot props here and so if we say like default state is equal to you know dark mode for example then this default State and this Cooper are going to be attached to like this look it's like magic it's going to take these and spread them right there that's pretty much what it's doing but obviously we don't want to hard code these and so we can control Z then the dot dot props is going to do that for us this is also common in next.js is this children this pretty much means that if theme provider wraps around something so it has children we want to pass the children into this so imagine if children was our entire application which it is in this case we are going to have this next themed provider being wrapped around our entire application so now we can go back over to the layout and import this theme provider so let's go to layout here go to the top and import theme provider and this at is very common it means the base root of your next js13 application so if you see this at and you're confused as to what that means that's what that means so it's going into the base route going into the components and then going into theme provider and so inside of the body here we can kind of structure this a little bit differently and import the theme provider or use the theme provider I should say and then wrap it around our children then there are some things we need to set initially for example attribute is equal to class that's just something in the documentation where it determines some functionality so it's saying class versus another way of doing it I believe but don't worry too much about this the important thing is the default theme is going to be equal to dark so this is going to turn our application into dark mode and so if we npm run Dev or application here we will then see that we get a dark mode so our eyes aren't destroyed by that light mode this entire tutorial all right I know it's a bunch of setup but learning about providers and things like that's actually really important because it's a common pattern that you'll see in a lot of different applications so now we can get started by building that initial page that shows all the different Pokemon and to make our lives easier I'm going to edit this template pretty much and turn it into different components so let's do that all the content of this page that we're seeing is on page.tsx so we can go over to page.tsx and see these different parts you'll see it's kind of complicated but that'll get started by editing is right here that div to the side holding a picture is right here and then that kind of huge next.js13 in the middle is right here we don't need this huge image showing next to s13 so I'm going to get rid of that and so we can save that and you'll see your application is going to look something like this now I also want to get rid of this bi-versal thing over here so we can delete that you'll see it's going to be within this div here that'll buy and then the image for versal here but we can delete that whole div right here so you should have this get started by editing and then you should have this other div under it which is a bunch of different cards and so I'm going to kind of cheat a little bit and use some of the predefined styling from nexjs13 to make a very simple nav bar so you guys can see I'm just going to make the navbar a title right here and I'm going to change the value of this get started by editing to just some regular text so I'm going to delete the get started by editing and let's make a simple H2 and then make the class name equal to text-2xl so that's a 2XL size for the Tailwind CSS text and then text Dash bold and I'm going to name it Pokemon binder so it'll look something like this and it looks like we have to take some code font styling off of it so we can do that font mono is the thing you want to get rid of there and this little Justified between is giving a bunch of space in the main up here so we can get rid of that and it should make our cards be right under our Pokemon finder yep so you guys will see we now have a bunch of cards here so there's not that crazy space anymore which is greatness and so let's copy these lines right here so from line five or main to line eight or the end of this div we can copy this and bring it into our layout because this is going to kind of be our nav bar so trust me here we can copy this and go over to layout.tsx and inside of our theme provider we can paste this in one thing you might be confused about is yep we have to close this main tag so I'm just going to say slash main but now this means that all of our different pages are going to have this certain NAB bar around it so it's going to have the nav bar here it's going to have a div at the top with the Pokemon finder and then this children here is going to be the rest of the content of our web page so that means that no matter what we do we're always going to have the same navbar in every single web page and then like I said before this children is going to be the rest rest of the content alright so now we have entered navbar reception but it gives you a good idea as to how it's working so this nav bar at the top is the one that's coming from our layout and then this nav bar on the bottom is the one that's still on our page so we can go into our page here and we can actually just get rid of the main and the div as well here so just ding ding ding just like that and then at the bottom you're gonna have to get rid of that closing main tag boom just like that and to be kind of resourceful here we can reuse these little card elements that the next JS documentation gave us so I'm going to simplify this by deleting these little cards so you'll see if we go into here we have a bunch of little a tags like this I'm going to have the first a tag stay and I'm going to get rid of the rest so there'll be a one under it should be around line 24 we can get rid of that one then get rid of the next one and then get rid of the last one there so now we can start to make a component one important thing to understand that I'm going to write out here is that we are going to have a text and input right and when we type into our text input we're going to have a bunch of different Pokemon cards that are going to filter and change right so if I comment up here you're going to have a text input it's going to then filter the Pokemon cards under it and so now because we're in next.js13 we need to make a decision as to how we should do this we know that a text input means that we need to do the use client because we need access to use state to handle the input right and then importantly when text is inputted it needs to filter through our current Pokemon data and so what I'm going to do in this video is we are going to make something just called Pokemon grid is what I'm going to call the component and it's going to have both the text input and then showing all the cards that are the results of the search but there's something important to understand here is the Pokemon grids pretty much going to be our entire thing and it's also going to be a used client component it's going to be on the client side but it's important to understand that in this tutorial we are going to get data for the 151 Pokemon from a server component and so what we can do is inside of the actual page itself at the top we can load in data inside of the page because this page is a server component because it doesn't use client and then we can pass data to a client component and so what we're going to do here is we are going to pass the data to Pokemon grid and I know this seems like a big explanation but it's important to understand the decisions that we're making as we build an application with nexjs13 and I know this is a lot of different steps so let's kind of break down our tasks first thing we need to do is create the Pokemon grid component and more components because we're going to create some more components for the Pokemon grid itself but once we're done with all that functionality we are then going to load in day data from Pokemon API so that's going to be the original 151 Pokemon that I showed in the beginning of this video and then three pass in data to Pokemon grid show all the Pokemon from API call and so this just gives you guys a clear idea as to what we're going to do next alright so now we're going to get started by creating the Pokemon grid component so we can go into our components and I'm going to create a file called Pokemon Dash grid dot TSX we are then going to export function Pokemon grid very simple functional component and importantly like we just discussed it's going to do a use client so inside of our terminal we are going to get access to the input and also label from Shad CNY so I'm going to say npx Shad cn-ui at latest and then add input and we can just say yes then I'm going to npx Shad cn-ui at latest and I'm going to add the you label which is just a simple label for our input I'm going to say yes to that as well so at the top here I'm going to import the use state from react because we're in a client component we're able to use the use date it's important to recognize so it's going to be from react and so I'm just going to say const I'm going to call it let's say search text and then set search text and it's going to be a use state of an empty string just like that and so now we can build out the actual jsx of the Pokemon grid by saying return so I'm going to make a little react fragment just to wrap everything then I'm going to make a div inside of here and we'll have a little H3 at the top that says search for your Pokemon and I'm going to say class name is equal to tax Dash 2XL we're going to do a padding in the y direction of 6 and then a text Dash Center so it's in the middle of our screen now we can make a div to hold our text inputs and I'm going to give it a class name of grid with Dash full then I'm going to limit that width to maxed width of small I'm going to want the items to show in the center and I'm going to want a gap of 1.5 just some styling to make it look nice this is all Tailwind so if you're not familiar with Talent don't worry about it too much we can then make a label which is coming from a Shad cnui so we can import it from the dot slash UI label it's important to understand that Shad cnui gives us access to the components right here is where they're coming from and so we have two new components in this UI folder which are input and label so we're going to import label and we're also going to import the input and so we can make the label tag like this and this label is going to say Pokemon name it's pretty much can tell you what does a search box mean right so I'm going to say html4 Pokemon name and then the text input itself is going to say input like this type is equal to text value is equal to the search text remember like right up here so initially it's going to be nothing thing and we can just close it like this and because the input is going to have a bunch of different properties I'm going to just kind of structure it out like this to make it easier to read I'm going to give it an ID of Pokemon name this is important so the label knows what to look for and then for the placeholder I'm just going to say some Pokemon names like Charizard Pikachu Etc something like that so the person gets some examples as to what they could put in the text importantly because we're on the client side we can listen for the on change event coming from our client so coming from someone typing in right and whenever the text changes that means we got some new text to look at so we can take the event of that change which is going to be saved into the little e variable here and we can set our search text to e dot Target dot value which is pretty cool that means that whenever we type into this it's going to set search text equal to our actual text and eventually we're going to actually be able to filter Pokemon based off of that search so let's go back over to our page and import the Pokemon grit so we're saving this little div here for later and so I wonder what's gonna happen if we put Pokemon grid here and by the way guys that automatically imported so if you go to the top we're importing Pokemon grid from at components slash Pokemon grid like this so if we npm run Dev we can see what this looks like all right amazing it's kind of treating it like it's a little card here but that's okay because we're gonna change his styling up in a second also I type some stuff into here and it's saving this little type result so you know I was looking at Bulbasaur so it saved the bulb up part you can actually disable this if that's kind of annoying because for this use case it is kind of annoying in my opinion so you can actually disable that by going over to this input so we can go over to the Pokemon grid go to the input and we can say auto complete is equal to off and it's actually going to stop doing the Autumn complete which is actually nice so now we can type in stuff and it's not going to show us like a huge bunch of stuff we typed in before alright so now we can go and get this docs element here and we're going to turn it into a little card which is going to represent a Pokemon name coming from an API call and so to make this its own card component I'm going to make a separate component for each Pokemon to kind of live in if that makes sense so inside of our components we can do a Pokemon Dash card dot TSX and so we can just make some initial code by saying export function Pokemon card like this then we can set up with a little return statement here and then we can go over to our page.tsx and we can actually copy this little a right here because this is all the different card code here so copy this a part bring it over to Pokemon card and paste it in there we go and so if we use this Pokemon card we can kind of spam as many of these as we want so let's go over to our page.tsx and import Pokemon card at the top and I can just show you guys that in this example we can have a bunch of different Pokemon cards right here so just as a quick example I'll show you guys this we have the grid and then three other cards and you'll see we have all these cards here which is great news inside of our page itself I'm just gonna have the Pokemon grid but the thing is it's going to give you an error I'm going to take this div right here and I'm going to bring it over to our grid because eventually we are going to use that text filtering on all these different Pokemon cards right so we can take these go to Pokemon grid and then put them under this div just like this and of course we have to import Pokemon card which is important so go to the top and import Pokemon card like this make sure to save your page.tsx and as you guys will see we are getting to what I'm hoping this will eventually look like which is our search box here and then all the different Pokemon underneath so now we can adjust the styling just a little bit and then we can actually load in our Pokemon data which is kind of what we're all waiting for right so inside of our Pokemon on card itself we can get rid of this little like find in-depth information we don't need that and this H2 here is even complicated we don't need this little span and we just need a simple string like this and because we're actually linking to something within our next js13 application we don't need the a tag what we need is next slash link so I'm going to import link from next slash link like this and we are actually going to make it so every single Pokemon card points to a link based off of the name of the Pokemon for example let's say that we are at the Pikachu Pokemon card right we are going to want that car to point to localhost 3000 slash Pikachu I'm kind of going light on the typescript in this tutorial to keep things simple but I am going to make a simple interface called Pokemon card props and these are the properties that we are going to pass into the Pokemon card we are just going to have one and it's going to be the name of the Pokemon is going to be a string and so inside of the actual function here we can type the incoming properties to Pokemon card props and then we can get the name right there so if we call the Pokemon card like this and we say name is equal to Pikachu then this name variable right here is going to be Pikachu and so we can change this a tag into a link from next.js13 instead of linking to an external resource what we can do is instead have an href that points to the name value and I'm going to make a key that's going to have a name Plus card because I believe next.js gets mad at you if your links don't have a key or something like that and right now it's giving us an error because we haven't given the name property anywhere but if we go back over to Pokemon grid and we have these Pokemon cards we can get just one that we pass in a name of let's say Pikachu just manually and we're going to load in data soon but just manually for one example the name is Pikachu and then let's make sure to go inside the card and instead of show docs we're actually going to show that passed in name right here now let's go over to our website and boom we have our little Pikachu which is actually going to link to localhost 3000 Pikachu these also don't have a border on dark mode it looks like so I'm going to go into the Tailwind CSS here but I'm going to add a dark that means only on dark mode apply the next tail in CSS border Dash gray Dash 500. so this is going to give us a nice little dark border so let's go check that out all right pretty cool pretty cool and we can get rid of this like padding on the bottom of it or margin let's go take a look at that so you'll see that the H2 here has a margin bottom of three and we can get rid of that and then save it and there we go we have a nice kind of very simple card for us to use let's go back over to the Pokemon grid so inside of our Pokemon grid I'm just going to do something for like style purposes so I'm going to put a little H3 in between the actual tool of cards being returned and our text input right here and I'm just going to have it say something like your Pokemon collection is I believe what I said before but you could really say anything here like your Pokemon search results whatever you want to say I'm going to give it a text of 3XL a padding on the top of 12 so there's some separation a padding on the bottom of six and then a text Dash Center and so I'm going to put a handful of Pokemon cards here just to test the styling and let's go back over and check it out so I think it looks best if we have three cards on each row so I'm going to change that and I also want some Gap in between every single Pokemon card so let's go in and Implement some of those things so on the large screen it's showing grid gush calls Dash four I'm gonna make this go to three and then inside of each card itself so I'm going to go into Pokemon card I'm going to give it a margin of three so it kind of has some space around every single card alright so now we have all these different cards here and now we're going to finally load code in the data which is a you know I'm sure you guys are waiting for a while for this one so for this specific project we are going to have two different API calls we are going to have a list of getting all the different Pokemons names just their first names and then we're gonna have an API call to get the information of a specific Pokemon so inside of our lib folder I'm going to create a typescript file just to hold that functionality so I'm going to say Pokemon api.ts and so this is important because it puts all of our API calls in a kind of standardized format where we can grab them from any component inside of our next js13 application so we can get started like I said before by just saying we're going to do a get Pokemon list which is going to get the first 151 Pokemon and those are like the original Pokemon if anyone's confused like why is guys saying 151 that's like the original first Pokemons or Pokeman I don't know but then we're also going to have a get Pokemon which is given a string like a name for example like P Pikachu get the information of Pikachu and so let's start with the Pokemon list we can say export async function it's asynchronous because we are going to be using a fetch request and we're going to call it get Pokemon list and we're going to say const response is equal to a weight Fetch and now we can go over to the Pokemon API and take a look at what are we going to ask for so if you go over to pokeapi.com you can do this even yourself you'll see there's this one where it says Pokemon limit is equal to a hundred thousand which is going to give you all the Pokemon I want the limit to actually be 151 and you'll see that when we ask for this specific limit and offset is zero we're starting with those OG Pokemon so the Bulbasaur Ivysaur Venusaur all those guys it's going to stop it mu but this is going to give us an idea of what we're getting from this API call is we're getting a results array which is going to have a bunch of objects with all these different Pokemon names and so we're literally just going to do a simple get request to this link exactly so the base of the link is going to be this part so I'm going to Define this in our code so copy this right here or just copy the text over and at the top of this I'm going to say const Pokemon underscore API is equal to this right here and so I'm going to ask for the base roots to our API request and then I'm going to add the other stuff so in this example I'm going to say Pokemon question mark limit 151 and offset equals zero I'm going to copy this and then bring it over here just like that and for anyone curious the offset to zero means that we're starting at zero in their kind of like data set but don't be too worried about that that is worth a little explanation and so we know that fetch by default is a simple get request just like this thing is and so our data is going to look just like this so to return the actual list of Pokemon we are going to return the data dot results so inside of our code we can then say const data is equal to a weight response dot Json so that's one thing is you have to turn it into a Json format for JavaScript read first and then we can return data dot results again this video isn't exactly the most typescript heavy one I've done and I'm going to kind of be ignoring some typescript rules just so you guys know you can always type this stuff later on Just for explanation's sake if you were super crazy about typing you could type this data right here you see right now how it's typed to any when I'm scrolling over it instead you could create an interface that shows exactly this count is a number next is a string and previous is a Boolean and results is an array of objects that have a name and a URL and I know that's like a mouthful and if you guys lost me in there you're like what did this guy just say don't worry about it but I am showing you guys that it is possible to type these I'm just trying to make things a bit easier just for the tutorials sake but now that we have this API request which is very simple to do so now that we've fully built out our get Pokemon list we can actually call it within our Pokemon grid and so I can scroll up to the top here and so guys remember Pokemon on grid is on the client side and we don't want to do the API call on the client side and so what can we do we can pass in the list of Pokemon to Pokemon grid for example when we do Pokemon grid just like this we can pass in a property that I'm going to call Pokemon list this is going to be equal to the return data that we get so you know the data from our API call and so in order to make this property here what we can do is we can just say Pokemon list in the props here it's going to say oh I don't like that this isn't typed and so for simplicity's sake I'm going to type this to any but we're going to make a simple Pokemon grid props type like this and then a Pokemon list which is going to be the name of Pokemon right and I'm going to type it to any just for the Simplicity of this tutorial that way we can type this object coming in to the Pokemon grid props but for example sake if you did type it to a Pokemon array as you'll see here it is is getting properly typed here so you know feel free to do what you want there but for now I'm just going to type it to any so I know and for example's sake I'm just going to console.log and this should show up in the console because remember this is being loaded in on the client side so it's going to console log here you'll see we have an error over in our page.tsx and you can look and say okay why well it's because Pokemon list is missing so we need to load the data in over on our page component thanks to our handy comment here we can see the load in data we can then import our function to load in the data so we can say import get Pokemon list from Libs Pokemon API and then we can say const Pokemon list is equal to a weight get Pokemon list and because we're using the await statement we need to make this an asynchronous function and you guys will see we already got some cool logic going on so I was running my website in the background and because it loaded our page in the background right it is then doing a get request to the Pokemon API and so one thing we have to do here is we have to actually pass in the Pokemon list that we're loading in above here to our Pokemon grid so we can say Pokemon list is equal to the Pokemon list we loaded right here so if we save that we can then go back over to our application and although we're getting a weird error that I'll kind of clear up in a second we can see that we have this array of 151 that has all of our different Pokemon data so now what we're going to do is we're going to Loop through every single item in this array and create a unique card with the name of each Pokemon so let's go over to our Pokemon Dash grid and then we can do a Pokemon list right here which is that array dot map and we're mapping over all those different objects that have the Pokemon name inside of there so I'm just going to say the Pokemon right here and I'm going to type it to any and I'm going to do an arrow function and now we can do logic with this certain functionality our logic's going to be simple we can just simply return a Pokemon card and it's going to have a name of P Pikachu but if we want the name to be actually specific to the certain Pokemon we're on it's going to be the Pokemon dot name there we go and we can actually get rid of these Pikachu cards under here because if we go back there's going to be some craziness boom every single Pokemon is now inside here you'll see that the Pokemons are actually lowercase by default honestly I could see The Styling here if you like how that looks but we can actually do some JavaScript to uppercase the name so inside of our Pokemon card.tsx we have the name there that's being shown that's currently all lowercase it's kind of annoying but what we can do is do some simple JavaScript by saying get the name dot Char at zero so the first character of the name the one you want to make uppercase go dot two uppercase and then we are going to add the name dot slice of one so this means we are going to show the name starting with the one index so imagine if we had like Pikachu what it's doing or let's say lowercase PD Pikachu right is it's taking the p and then making it uppercase then it's adding the ekachu to the end so hopefully that's a good way of understanding this line of code and so now we got a bunch of uppercase stuff which is great news look at this I type in and nothing's happening it's because we're not doing any filtering of these cards we do know that we have an array of data that we can easily filter though so what we can do is we can take a look at every single element in our list and then just filter it like that and so we can say okay if it contains a p in the front then you want to keep it for example so it's going to show Pikachu or what's another P1 uh Paras oh my I don't know Psyduck I know that guy and we can make some JavaScript to filter the names themselves so inside of the Pokemon grid.tsx you can go over there and so what we can do inside of our grid is we can filter the text save the filtered array of new odd of not new objects but of objects and then show the build altered array to user so this is like a common thing where it's like you know you can find this on the stack Overflow and copy it over but I'll explain some stuff that I found personally we can say const search filter is a function that takes in the Pokemon list that is going to be typed to any and then we are going to return a Pokemon list so the one that we're passing in here dot filter and then it's going to take a filtered condition and so this filter is going to go over every single object in our Pokemon list and see if it includes a condition so we can take the current Pokemon object that we're at that little Pokemon object is going to have the uh let me show you guys it's going to have the name of Pikachu like that and then the URL which is going to like point to some URL on the thing we're not really concerned about that for this tutorial though and so we're going to take the Pokemon name pokemon.name.2 lowercase and we're going to make it lowercase because this is case sensitive and then we're going to say if it includes so we're going to take a look look at the string because right now this chunk of code is going to get us the lowercase string so we can see if it includes the search text so what the person has typed into the search bar dot to lowercase and so this search filter is a little function we can use and it's going to return us this array that has been filtered so down here we can do a little const this is going to be saving the filtered array of objects we can say const filtered Pokemon list is equal to search filter of Pokemon list just like that and so down in our code here you're going to want to make sure to be mapping over the filtered Pokemon list if you don't change this line of code nothing's going to happen when you type in stuff and you're going to be confused but remember you want to show the thing that's getting filtered because we didn't want to change our original data because that could be bad sometimes and so we made a new array that is showing the filtered Pokemon list and so something kind of interesting just for commentary and to explain how it works is in the beginning it's actually going to show all of of our different Pokemon and you might be like why isn't it filtering based off of an empty string well technically any string includes an empty string which you're like what is this guy talking about but that's kind of how the logic works right is all these technically include an empty string so initially it's going to show them all but if you start typing Charmeleon okay Charmeleon I know don't roast me you can then find the specific Charmeleon dude and this is pretty cool being able to filter stuff and find certain results based on some text is pretty interesting alright so now we are at the part of the tutorial where we want to click on a certain Pokemon like Bulbasaur for example and then actually show Bulbasaur right instead of this 404 page so what we can do is we are going to create something called a slug so remember all the routing in next.js happens through the app folder over here if we want to do something where it's like slash Pokemon name or slash Pikachu something like that what's going to happen is we need this slug to be recognized inside of our app folder and this means that we want to show a certain page.tsx when we have a Pokemon name like this or any kind of string like this and so inside of our app folder we can create a folder and to do that functionality where we actually save the name we can do a little little array syntax to make like an array and say Pokemon name as like notoriously small on my screen but there's like a little array and then it says Pokemon name inside of there hopefully it's easier to see now and inside of here we are going to serve a page.tsx based off of the Pokemon name that is given to us so if we get the Pokemon name is equal to Pikachu then we want to show the Pikachu page but this is actually going to be a lowercase which is an important thing to understand and so inside of here I'm going to export an asynchronous function called Pokemon page and it's going to take in some parameters so for example the route parameter or the slug like I was talking about before if anyone doesn't know what the slug is when you see something like localhost 3000 slash Pikachu this thing is called the slug and in next.js we can do some coding here to actually get the value out of it it's going to be saved in something called the params and this params has to be typed to an object and so I'm going to say we are going to expect a params object and then these params are going to be equal to an object like this which is going to have a property called Pokemon name which is going to be typed to a string and so to get to that Pokemon name out of the params object we can do something called object destructuring if you want to look that up and get more research on it and we can say const Pokemon name is equal to params is how we get the value out of it and so imagine if the Pokemon name was Pikachu what we then want to do is get the API data data for Pikachu so we're going to do an API call right here but for now I'm just going to Simply do a little return statement to give us some basic logic for each page so I'm going to wrap everything in a react fragment here and I'm then going to make a little H1 just for the Pokemon's name so it's going to say class name it's equal to text 4xo text Dash bold then padding top of four I'm going to hard code Pikachu for now but we're going to add some more data there in a second my bad guys so this actually has to be export to default async function for it to work as a react component that's my bad and now we are good to go so we can refresh this and then if we go to a certain page it's going to say Ivysaur here but we're looking at Pikachu but eventually this is going to be the name of these certain Pokemon we passed in and one quick thing while we're here is we want this Pokemon finder to be our like go back button and so I'm going to make this a next link so we can go over to the Pokemon finder in our application I think it's in the nav bar right I believe so so inside of our layout.tsx we have the Pokemon finder and we can just do a little link here and that's going to import next link by default so make sure you import it up here and we can just wrap this link around the H2 and put its href equal to just slash that means it's going to take us back to localhost 3000 or a base root so now we can finally leave the ivysar page and go back like this so boom now you can go back and forth between the different Pokemon which is pretty cool so let's go back to our Pokemon page here and we're just going to get the API data for a certain name so this is kind of cheating but I already know that the Pokemon object is going to get returned from our API call and so we can say await gets Pokemon like this and we haven't made this get Pokemon yet and we're going to make it right now so if we go over to pokemonapi.ts you'll see thanks to our comment here we talked about this but before and we can say export async function get Pokemon and it's going to take in a name which is going to be a string and so again we can take a look at the Pokey API and you'll see that if we want a certain Pokemon with the name we can just do this type of tag where we say Pokemon slash name so we can copy this over so we know it looks like this and so we can do a simple response just like before and we can say const response is equal to a weight fetch then the Pokemon API link so it's going to be this guy right here then on top of that we are going to add the Pokemon with a slash at the end and then we are going to look specifically for the name that gets passed in if we look up a real Pokemon we pretty much get an object that is all this different data right here and so unlike before where we had to do like a data dot results we can instead just return the object because all of it is relevant data to our specific Pokemon also I misspelled response so there we go yeah okay that's better now we can just say cons data is equal to a weight response dot Json and then we can just simply return that data that's all we need to do and so now if we go back over to our page.tsx and we say get Pokemon we can then go to the top and then import the get Pokemon that we just made then of course we have to pass in the Pokemon name that we're getting from our parameters and boom now we're good to go and so for the name I'm just going to say the Pokemon name right here so I'm going to console.log this Pokemon object just to see that we have it and this isn't going to be in our clients console just to be clear about that I actually have a page getting read in the background I think it's like Bulbasaur so in my console you're actually going to see the Bulbasaur object get shown here and it's kind of a terrifying thing to look at when you're trying to understand this inside just the console right but we can get some data out of this for example I want to show the front underscore default this is going to be Pokemon object dot Sprites dot front underscore default I believe so I can make an image from next image here which is going to get imported the top so make sure to do that and we can make a little image for the certain Pokemon so the source of the image is going to be the link shown right here what's getting logged here is the Pokemon object so we know that if we go to Pokemon object dots Sprites dot front underscore default we're then going to get access to that Sprite and I think this needs like a width and a height by default but we're going to do some stuff with this thing in a second so this is just for placeholder for now also an alt we can just say picture of and then the Pokemon name so this all tags just for anyone with a screen reader or also just anyone who hovers over it it'll show a picture of Bulbasaur I actually got this error intentionally so you guys fell for it because we're using an external source for these images we have to tell our next js13 application that it's okay for us to use this certain host for images this is for like security reasons imagine you're a social media website and you're just like you guys can use any image source you want and then I link the social media website to like an image that's like 500 megabytes and I make everyone on the site load that it's gonna crash right so hopefully I'm not giving you guys any ideas but it pretty much says only allow it from certain local locations and so it even shows in the area we have to go to next.config.js and add some stuff there so you'll see next.config.js is right here in the left and click on it and you pretty much have to add an images property and then we have to say remote patterns all right I'm just going to say okay which at which things do you want to access from a remote source and we are going to say only using the protocol of https then we're going to add the hostname of what we want to grab and so this is going to be raw.githubusercontent.com is where all these little Sprites are going to be from so all you need to do is have the hostname just like this and now we're good to go with our image which is greatness and if your server stopped I believe it actually stops whenever you change this next config so you can just npm run Dev again and I'm pretty sure that error should be gone okay so this is actually a different Sprite than what I wanted so hopefully it uses the GitHub stuff again but this is like a low resolution one but I'm actually willing to show this area because it's going to help you guys out we can go over to the Poke API and we can ask for Pokemon slash uh let's see which one is this we were looking at the Bulbasaur so we can look at this one specifically and there are some different Sprites here so if you go into Sprites and then we go into other there's this official artwork under the other and this one okay it's pretty sick and so you'll see these ones are like 10 times cooler than this right so so I'm going to transition to using these ones and if we look at our object we can see that it goes under Sprites other official artwork and then front underscore default I'm going to go to our page.tsx just to show you guys again it's going Sprites other official artwork front underscore default so I'm just going to do that Sprites dot other I believe you're not allowed to have dashes in JavaScript this is a weird one you're actually going to want to use the array syntax to get the official dot artwork like that I know that's kind of weird but it's only because it uses a dash because check this out see it's going to be like uh what what even is this right and so you have to use this array syntax to get into the official artwork just so you guys understand that and then it was dot front underscore default and so that should load all right now we can refresh our page yo we got Bulbasaur looking pretty fresh not gonna lie and so one kind of thing that you know kind of sucks is we're relying on an external resource for these images the result of that is that there's going to be a delay when you load your image unfortunately that's kind of just how life is going to be because we're relying on the external image but we can also do a little fade in effect to make it a little bit more palatable instead of just like boom out of nowhere and to do this fade-in effect we actually have to have access to the client and so I kind of do this again to give more practice on doing server versus client component is this image needs to be on the client this current component is on the server and so I'm going to make a Pokemon image component so I'm going to go over here and say Pokemon Dash image.tsx and it's just going to be very simple it's going to say export function Pokemon image its properties are going to have an image and so we can just type this directly to an object that's going to have an object with an image Dash string so we can get that property from it it's also going to use client and of course it's going to import image from next slash image and so inside of here we can do some use client stuff and so let's go back to our Pokemon page and we can copy this image to get started and paste it over so return the Pokemon image here and the source is just going to be equal to the image so it's actually the string to the image so that whole link we can just pass in and you know what I'm also going to add a name here so we can get the Pokemon name so I'm going to say name is also equal to a string over here so that way we can say picture sure of a certain Pokemon name like that right and so in our page.tsx let's go import this Pokemon image before we do any little fade in animations just get everything set up so we can go to the top here and then we are going to import the Pokemon image like this boom and then we can paste it in where our image was previously and don't delete this quite yet because we want to make sure to tell it that the image is going to be equal to this link and then the name of the Pokemon is going to be equal to Pokemon name there we go so now we can actually use this Pokemon image which is a client component and still have server components around it which is pretty cool and so there's some styling here that I'm going to mess with and I'm pretty much just going to make the image fill the container that it's currently in so I'm just going to say a couple things here relevant to next image I'm going to make a tutorial on next image soon so don't be too concerned about this stuff but I'm going to say priority which means load this thing as fast as possible because it's already slow because it's coming from an external Source I'm going to say fill which is a way in which it's going to fill this container with the image the style is going to be object fit of contain so be inside a certain container that we're going to Define and then we're going to give it some classes to do some transition stuff we can say transition Dash opacity opacity Dash 0 and then duration Dash 2s so this means that we want the opacity to transition over two seconds if opacity ever changes so initially it's going to be opacity of zero which means we can't see anything and then we can cleverly use this on loading complete which pretty much means when next is done loading our image we can then display it to our user so we can take the current image we are at and this is the actual HTML reference to the image and so because we have the HTML reference to this specific image we can say image dot classlist dot remove and then because they remove opacity of zero and because we have this transition Dash opacity and tell it to take two seconds when we remove opacity of zero it's going to take two seconds to show full opacity and guys if you look at your website right now it's getting pretty crazy it's it's almost like a jump scare this is probably the scariest thing I've ever shown on this channel but it's kind of scary and jumping at you because we didn't give this image a box to actually live in because right now it's saying fill the box that we're in but it is in no box so it's filling up the entire screen so let's go back over to our page and we can just wrap the Pokemon image in a div that we're going to style with so let's see just wrap it up like this we're then going to say the class name is equal to margin Dash four to give it some margin around the sides and then we're going to do some styling here I'm just going to do regular styling and say the position is relative and the width is 300 pixels and the height is 300 pixels and this doesn't mean it has to be a perfect square The Fill on the contained stuff we made in the image is going to make it so inside that perfect square it's going to make it whatever aspect ratio makes the most sense and so there we go we don't have the jump scare anymore so hopefully that is good news the final part of this tutorial is we are going to get some of the Pokemon stats and display them to the user so one of these simple ones we can do is I'm just going to have an H3 here that's going to show the Pokemon weight so we can see how heavy you know what type of competitor we're looking at here and so you can go to the Pokemon object and get the dot weights property from our API call and to see what we're actually dealing with we can go back over to poke API and this guy is Charmander so let's go take a look at that Charmander and submit and so I'm just going to close all these up so we got a bit of a better thing to look at and so you'll see we have the weight is going to be in here somewhere it's actually at the bottom so he has a weight of 85 and for this video I'm going to show all the different stats of a Pokemon and so for these stats we're actually going to Loop through the stats array so this is going to be in the Pokemon object dot stats right here so I'm going to go down here and I'm going to make a little flux column so I'm going to say div class name is equal to flex Dash call this is just so they stack on top of each other I'm going to say Pokemon objects object dot stats dot map and then we're going to take the stat object which again I'm going to type to any but you can type these to what you want guys I know I'm going to get roasted for these any typings but we can do an arrow function now point it to this then we can return the kind of stat that we want to show and for this part I'm actually going to use a component from Shad cnui so so I'm going to go up here and I'm going to go back to what we had before and so npx shads your UI at latest and then we're going to add a certain component this one is going to be called progress so this is going to show us like 0 to 100 give it a value and we'll show you like a progress bar right so we can just press enter there and you can say yes and then we can npm run Dev again and so I'm just going to get some values out of this stat object and to make it easier to read I'm going to make some little con statements here so I'm going to say const stat name is equal to this is going to be in the stat object dot stat which is annoying I know and then dot name so this is going to be like HP or like defense or something like that and then the const stat value is going to be equal to the stat object dot base underscore stat and again if you're like where's this guy getting this stuff from right we can go over here and look at the stats array and see that we're going to have a base stat at each indices and inside of there it's going to have a stats right here that's where we're going to get the name of the stat so we're going to show HP has a based out of 39 you know attack has a base stat of 52 all this different type of stuff and so now we can make a little component to show these in one line I'm going to make a div class name is equal to flex so a flex row is what this is and I'm going to say items Dash stretch and then the style is going to be of width 500 pixels so we're just gonna have a 500 pixel long thing here and then the key I'm just going to Simply make equal to stat object dot stat dot name just like this and do slash div so now we have a little Row for us to work with I'm going to have an H3 where the class name is going to be equal to p-3 so some general padding and then a width Dash 2 4. so this means that it's going to take up half of the width here my bad guys in this key here you can actually use that stat name that we made before to make it more readable just like that and then I'm just going to say here now inside the text I'm going to say that the stat name is going to be equal to the stat value like this so it's going to say HP is like 50 or something like that and so now the progress which we're getting from Shad cnui we're able to show a value from 0 to 100 by default but for this video I'm just going to directly set the value equal to the stat itself I'm going to set the value of this progress bar equal to the stat value very simple and then I'm going to give it some unique styling so I'm going to say class name is equal to width Dash 2 4 and then M Dash Auto this m Dash Auto is going to align it vertically so everything looks nice and I actually didn't import the progress from shad's genui so we can go to the top here and import progress from at components slash UI progress that's the thing we just installed and so now we go over to localhost here and you guys can see now we are able to show all the different data of a certain Pokemon so we can go over to Blastoise boom he fades in we should see all of his different stats Weedle fades in we see his stats as well and so this is a pretty interesting kind of beginner level next.js 13 application one final thing is these are not getting capitalized and so we can take that code we made before remember inside these Pokemon cards we have some capitalization code so let's go over to there so in the Pokemon Dash card you can see here the name.charact this stuff we can copy it bring it over to our Pokemon page let's see here so instead of saying name we're going to say Pokemon name Dot charat and then Pokemon name dot slice one so now it's going to capitalize our Pokemon name so let's go back okay now it's looking sick now it is looking sick so there we go guys I know this is kind of a longer tutorial but it really shows you a bunch of great functionality with nexjs13 and if you're a beginner this is something that's really fun to have on your resume or your portfolio or anything like that and so I'm actually going to show you guys how to deploy this application so just to comment this out I'm just going to comment some are random hopefully you guys don't mind that but we are going to use the versal CLI this means that we can fully deploy our application using the command line and I know you guys are like scared you're like what what do you mean the command line what even is this thing right but it's actually simpler than using the like web interface it's one of the few ones where I swear in my opinion it's simpler I'll just make this note if things are breaking for you for any reason go check out how to deploy from GitHub that's going to be a easier option if it's breaking but trust me just follow what I'm doing here and I'll kind of lead you on every single step of the way and I think you guys should be fine with the command line there might still be some kind of bugs that only happen at build time and so we can say npm run build here this is going to build our Nexus 13 application for optimized production build as this says right here and sometimes there are some things that you need to kind of refine to make it work for the build process for example this is a great example is it's really strict about having the key for every single element in an iterator and so inside of Pokemon Dash grid let's go back to that let's see here yep so it wants to have a unique key on this Pokemon card so we can just say the key is equal to the pokemon.name because we know that's going to be unique Plus card so you know Pikachu card or something like that all right so let's try an npm run build again and these builds aren't deploying to Virtual just so you guys know this is just building locally because once we can build it locally it will work when we try and build it for reversal just so everyone knows and something that's pretty dang cool guys is because this was following somewhat good practice when working with nexjs is you can go tell your friends that when we load that first part of this application it's showing all the Pokemon names there is zero bytes of first load JavaScript all right guys so now we can deploy to Virtual and to make sure I'm just alongside you guys I actually logged out a versal myself so we're going to go through the entire process so inside of here I'm going to say npx versal that's all you need to deploy you don't need to say like deploy or anything else like that just npx versal and it will lead you through every step of what so press enter on npxversal I'm going to continue with my GitHub account so if you guys are having issues doing other stuff let me know but you should be able to use any account you want so I'm going to continue with GitHub it's going to give me a link you'll see on my actual virtual account I'm already connected and I'm already on their you know website and so it's going to say CLI login success but you should just have to do some login steps here and you'll get to the exact same page eventually it's going to say do you want to set up this specific folder we're going to say yes because that's where our application is right I'm going to say deploy to the Cooper code scope this is some scope I made a while ago I believe connected to my GitHub account of course so I'm going to say enter link to existing project no I don't want to do that I'm going to just say Pokemon Dash finder again you could name this whatever you want Pokemon finder is a good one our code is in this dot slash directory so just press enter I'm going to say no to modifying the default settings so press n and then press enter so the build process might take a second don't worry guys if it's like blinking I'm not even sure if you guys can see this because it blinks pretty fast but if it's blinking and it's loading don't even worry about it it's doing its thing so just take your time there alright guys so it should give you a production link that you can just control and click on to go on over to and you will see that your application is now hosted in the real world which is pretty cool we can type in whatever we want Venusaur for example click on him and then see all of his stats and you'll see I know it's a very simple website but aside from the images because we're relying on that external Source we're getting all this other data super fast Boom the data is right there and so like that's kind of the power of using next.js is although we're using API calls look at that the data is there as fast as possible don't click off the video if you're interested in next.js13 content I genuinely am striving to make some of the best of it and so if you're interested in that type of stuff or if you did this entire project I think you know you probably like me enough feel free to subscribe and again thank you guys so much for watching this whole video I know it's a longer video so if you actually made it to the end and you actually did this project and it's part of your portfolio you know feel free to leave a comment uh not even for the YouTube algorithm but I'm curious to see what you guys end up making and another thing about this project is you can make this Pokemon page as like cool as you want you can show all the different stats and so I'm just kind of giving you guys a starter boiler template to make an efficient Nexus 13 application all right well that's the full video thanks so much for watching and have a good day

Channel: Cooper Codes

Views: 5,639

Keywords: nextjs, nextjs 13, nextjs beginner tutorial, nextjs 13 beginner tutorial, nextjs tutorial, nextjs api, nextjs search, nextjs api data, nextjs server vs client component, nextjs pokemon api, pokemon api, pokemon api search, nextjs data, nextjs 13 in 3 minutes, nextjs 13 typescript, nextjs 13 application, full stack nextjs 13, nextjs 13 project, nextjs 13 resume project, coding project for beginners, pokemon api project, nextjs 13 fetch, nextjs 13 routing, shadcnui, next, ts, js

Id: vt4IrEfjzWQ

Length: 61min 31sec (3691 seconds)

Published: Fri Jun 30 2023