SvelteKit Crash Course - SSR, API Routes, Stores, Tailwind CSS, and More!

so uh this felt kit thing that sounds pretty cool right dudes felt kit is legit have you gotten a chance to play with it yourself yeah i actually have a crash course where i build a really sweet pokedex using the poke api and spell kit job do you think you can show me all about sveltkit let's do it all right let's get into it what's up everyone my name is james quick and i do weekly videos on web development related topics one of those topics that i've been really excited about recently is svelt and i did a video a few weeks ago about why i like svelt and now i'm doing this felt kit crash course that i'm super excited about been working on this for a few weeks so i'm excited to share it with you in the meantime if you're looking to follow me in other places i'd like to share that i have a podcast called compressed fm with amy dutton where you can learn more about web development and design and then i'm on twitter so if you want to hear about the new stuff i'm working on i post frequently on twitter so check that out but let's get down to it spell kick crash course let's go all right so as we dive in let's talk a little bit about what we're going to build we're going to build a pokedex using the pokemon api and sveltkit now i've done a video on building a pokedex in javascript before so i'll leave a link to that so you can check it out if you want to but in this one we're going to use felt kit now we're going to cover a lot of different really cool topics like page routes api routes felt stores reactivity searching filtering pokemon server side rendering tailwind css and so much more so you can see that this has a list of pokemon we can click on one to go and get a little bit more details about the individual pokemon so we have these dynamic routes for each one of these pokemon i can also search through pokemon to find exactly the one i'm looking for and then lastly we have another page on here which is the about page just to kind of show off how this page routing works got a little bit of animations here on these individual cards anyway i think this is going to be a lot of fun i think it's going to teach us a lot about sveltkit which is in beta so keep that in mind as we go through this crash course this stuff might update or change soonish so i will come back into an updated version of this course when it does but let's take just a second to talk about what svelt is so svelte is a front-end framework for building front-end applications that is really really fast so it will compile down to vanilla javascript making those felt applications typically faster than what you see in react angular and view it also has a very simple syntax which is much more similar to vanilla javascript than lots of other things out there so people love it one because it's fast and two because it is just simple the syntax is really nice so then the question is well what is felt kit well spelt kit is a framework built on top of svelt that is most comparable to something like next.js for react or nux js in the vue ecosystem and basically what it does is it gives you complete flexibility as a developer you have access to creating static pages you can do server side rendering and then additionally you can do anything that regular svelte can do for you as well so that's what we're going to use in this again keep in mind that's felt kit is in beta so some of the stuff might change in the future and again i'll update the course when we get there so let's scroll down to the getting started here and there's an npm init command that we can run in our terminal to go ahead and create a starter app so i'm gonna cd into my code demos and then let me run this app and let me call this felt kit pokedex and so what this will do is go ahead and create us a starter project and it will ask us some things along the way so do we want to generate a demo app or do we want to start with a skeleton in this case we'll start with a skeleton because we're starting from scratch we want to build this out ourselves uh asked us if we want to use typescript i'm going to say no in this one but you can obviously use typescript with svelton's fault kit if you want to which would be pretty neat this one we're going to stick to vanilla javascript let's use eslint for code linting prettier for formatting yes and then looks like that stuff is good to go so let's cd into the my felt kit pokedex and let's open that up in vs code or whatever your favorite editor is get that thing open then we'll install the packages and we will run it to see what it looks like all right so let me run the npm install command here that will take a second while that's loading up let's kind of look at what we have and i had a pause a second ago because i had a version of node that wasn't a good first felt kit so i had 12.17 it wanted 12.20 or greater or 14.13.1 or greater so i have just gone and switched over to using 14.13 a good thing for you to notice to make sure you have an updated version of node on your machine that matches what's felt kit is looking for you can double check the documentation for what version you need but in this case i'm using 14.13.1 so now let me go ahead and run the npm install command again this will go ahead and install all those packages and while it is we can take a look at some of the some of the config files that are in here we've got the eslint rc this is configurations for eslint to give us some of those hints and linting errors inside of our editor we have a prettier file this will give us a little bit of details on how to format our code using single quotes trailing commas you can mess with these if you want to we've got our js config file here and i think this is a good time to bring up the fact that felt kit uses something called vite or vit underneath the hood for the front end build tool and this is one of the fastest build tools that's out there right now so it's hot module replacement is super super fast i've heard more and more people rave about how fast this is so we'll get to see this in a second uh but it uses vite as the build tool underneath the hood and then we've got our felt config here we don't really have anything we need to do in this one just a configuration file for swelt and then inside of our source we have kind of probably the stuff we're interested in so we start inside of this routes folder which has an index that's felt so endsfelt your components are dots felt files and then in spelt kit you can put different files underneath a route's directory and that will automatically serve them as routes so let's go ahead and start to run this let's just double check in the package json npm run dev so let's run an npm run dev command and i think by default this will start out at port 3000 and i've already got my existing application the previous the finished one running at port 3000 so let me close that and let's start again so this thing should open up at port 3000 let's copy this url and go ahead and paste it in and here is our our felt kit app so just a little bit of basic information here that comes from this index.felt you can see if i were to say welcome to spell kit updated save it refreshes super quick like there was no editing there this just takes place really really fast something like create react app sometimes or maybe some of the other frameworks take a second or two to reload which is uh not too bad but it's not as it's not as fast as this so this is a super fast hot reload we can see all of our changes take place here really quickly so let's go ahead and add a little bit of information in here this is actually going to be this is going to be our svelt kit pokedex and then we can add and then we can just get rid of this paragraph tag we'll add some more information here in a second so again the waste felt components work is you can write just regular html in here in a second we'll see how we can do some script information so we use the script tag just like you want in regular html and then we can do anything we need to in here so we can say hello world as a script and then we can also add a style tag in here so if we wanted to select our h1 and then say the color is going to be red this is what everyone does by default when seeing if their css works so inside this one file we should see that we're able to add css so you can see that that works with this h1 here and then also if we look in our console tab you should see the console log of hello world so our javascript our html and css living all in one file here which some people like some people don't but i think it works really well inside of svelt with it just looking very similar to vanilla javascript now one thing to mention with the css here is this is this is using scoped css so what this means is that class or that selector is specifically applied to an h1 with this random class and that class kind of represents this component which means if we have another h1 in another file somewhere this class will only apply to the h1 and the file that it's in so it's scoped to this file to this component so let's take a look at what that means let's create a new file inside of our routes called about dot svelt and then let's add an h1 in here that says about we'll add a p tag that says this is a really cool felt kit demo that uses the pokemon api to build a pokedex so just basically some dummy information to kind of show how this works now let's go and look to see if we go to slash about this has automatically created the other page for so two things to note it's created this other page for us at the specific route and then the h1 here is not styled red because again the styles in here are only applied to the component that they're in so it's really important to know now in a second we're going to switch over and install tailwind to do our css and styling that way but for now it is important to know that by default your styles if you write them inside of your components are scoped specifically to that component all right now you probably noticed that by default the title up here is listed as localhost 3000 slash about and then just localhost 3000. what if we wanted to customize what is shown up there so let's get rid of these styles and we can use something from svelte called felt head and you can see i'm getting some intellisense in here as well so let's check out this felt head and then inside of there let's add a title tag and then let's call this the pokedex so this is the index page and we can call it felt kit pokedex as well so if we save this and refresh we should see that title update appropriately dispel kit pokedex and then we can copy and paste this over to the about page to change this one to about this felt kit pokedex so now those will have separate titles based on that svelte head so that's felt head component or this tag here allows us to add any head information that we would in our regular html so we get full control over what we want to add there all right let's do one thing let's start to create some components so let's say we want to have a little bit of a navigation system to navigate between home and about well we don't want the nav component to be a route itself so we can create another folder called components and this is where you'll create your kind of regular svelt component so let's call this nav dot svelt and then inside of here we'll style this up in a second once we get tail one in place but we want to have a nav and then inside of there we'll have two links so we can use an anchor tag and then the first one we'll just go to home and this will say home then we can duplicate this and say about and then do slash about now we want this nav to be on every page so one thing we could do is we could come into our index page or index component and we could import nav from and then go back a directory to components and then nav dots felt so we could import it that way and then we could put it at the top here so this is similar to something like you would use in angular react view hopefully this idea of pulling in components or importing components into now here this page felt component makes sense let's go and see if this works so there is our home about navbar not looking great yet we can navigate to about but now on this page it's not actually showing us that nav bar so we want that nav bar to be on every page so the way we can do this is inside of routes we can create a new file and it's underscore underscore layout dot spell now what this layout dot svelt page will do is it will adds whatever information you put in here it will add it to every page but the most important thing to do is to make sure that you include the slot and let's see what that looks like in a second if i save this and i now go and look at our application it's completely blank that's because this layout needs to display the children which are the page components so we need to make sure we include the slot in here so now if we save and refresh we should see our regular information but now we can go in and import that nav into our layout so let's do a script tag and let's import nav from components and then nav and let's go ahead and display that thing so we want the nav to be displayed above the slot or the children components the page components so let's go ahead and add that nav first and what we'll see now is we get two navs and that's because we included it specifically in the index which we don't want anymore so let's get rid of this nav let's get rid of that import save that and now we should see we get our nav bar on both pages home and about and we can toggle between these pages now another really cool thing about sveltkit is if you notice this is not doing a full page refresh as it switches between these pages svelte is actually intercepting these anchor tags when it sees anchor tags that are rel or relative to our project it doesn't do a full refresh it just kind of does the the front end the client-side refresh or the client-side swap of the page so there's no request back to the server we can switch between these pages and no full refresh is happening it's really nice that this does this by default using the regular anchor tag because if you did this in something like next js let's look up links in next.js you have to use a specific component called next link so you have to have this link component which has the href and then embedded inside of it is the actual anchor tag that's kind of kind of gross and a little bit confusing it's not the end of the world but it's not as optimal as now just using our regular anchor tags that we're used to all right now let's start to query some of our actual pokemon data and the way we're going to do this is with uh stores inside of svelt it's part of svelt and then you can access it inside of sveltkit as well so let's take a look at how to implement this now in at a high level a store is a way to have kind of a centralized place to store data in this case pokemon information that we want to use potentially in different components we could call that we could give a new folder here called stores and then we could call this file a poca store now the store files are going to be javascript or typescript files so this is just kind of regular javascript uh also neat that i named this pogo store because that's i guess it's pokemart in the actual game anyway if you're poke if you're a pogo fan you'll understand um all right so inside of this pogo store what we want to do is query the data from this pokemon api so let's i'm going to copy in this link here for the poke api it's poca api dot co and then if you go to slash api pokemon you can pass at a limit for how many pokemon you want to get the results for so this is getting the results for the first 150 pokemon i'm kind of an original pokemon purist where that's kind of where i focus you could do more than that if you wanted to but that's what we're going to do in this one so that's where we're getting the data from and again if you want a reference to this you can go to pocapi dot co and we're just going to pull in this information eventually we will get more specific details for a given pokemon but for now we just want the highest level details for the individual pokemon so let's create a fetch pokemon function and this is going to be an async function and we'll just use the regular rest or excuse me we'll use the regular fetch command or fetch function inside of javascript so first i'm going to add in this url so i'm going to put that just copy and paste that in and then we're going to get the response back from making a fetch request to that url so that returns a promise which is why we await it and then from that response we want to get the data so we will await and then we'll take our res and convert that to json or read it as json because what comes back from this api if we go back here is json data if you're wondering how i got this to be formatted you can look for a json formatter inside of google chrome extension and you can have your stuff looking really nice there so we're going to do one thing with this data if we look at the data that comes back we just get the name and url and what i want to do is iterate through each one of these results and augment that information a little bit to add in an id and then an image and i'll show you how we get that in a second so let's take our data let's say we're going to call this loaded pokemon and then we're going to take our data.results and if you look inside of this return see that all these pokemon are listed inside of a results array so we can do data.results and then we'll do a map and map in this case means we want to iterate through each one each item each pokemon and transform it in some way so we're going to get the data for each one and then the index as we iterate through and then we want to return the new object what we want the new object to look like so our name property will be data.name then we'll have an index or an id property which will take the current index and then add one that's because indices and arrays are zero based indexes so we want to make sure that we increment that by one and then i'm going to copy in this for the image now what this is doing is it's taking it knows i know from looking at the source code for the api i know where the url is or the path is for the individual images for the pokemon and what it does is it does this whole route and then it adds in the id of the pokemon so in this case one is bulbasaur if we change this to two there's ivysaur and venusaur and so on and so on so we're just kind of manipulating that string to add in the id of the pokemon that we're looking for and so now we've basically got our fetch function which formats the data in the way that we want but how do we now expose this data to the different components well in this case we're using a writable in asphalt store so we need to import writable from svelt so we'll import writable from svelt store and then we want to create a piece of data that is writable that can be leveraged or accessed or used by other components throughout our application now you can translate this to something in the react world like the context api or redux or something like that and then more specifically something like using hooks with some sort of store in react so we'll see what this looks like in a second but first we want to designate or create this variable that is a writable and it's going to start out i think there's no e here start out as an empty array and so with a writable what we can do is we can update its information and then elsewhere in the code we can read that information from it so in other components we can then read that information from that store from that writable so as we load this data we want to take our pokemon that we just created and we want to call set we want to call a set to pass in this loaded pokemon now not only have we loaded data but it's also tracked in this pokemon variable which is a writable which means someone else can go and listen to that data as it changes last thing we'll do is just make sure that we call this fetch pokemon now that stuff should be ready so we have this store we have this writable we're querying the information we're loading the information for the pokemon now how do we get that information inside of our index page so that we can start to display them well this is where we use some of the reactivity and spell some of the stuff that i think is really really nice and really really well done and i like the organization that felt has with these stores so let's take a look at how we actually get this data so we can get rid of our console log here and then we can do an import of pokemon from we'll go back go to stores and then import this from the pokestore js so with this pokemon you would think we could just log this out do we get this data is it what we think it should be let's take a look let's open the browser back up let's come back to our page and let's log this thing out and i think we may have messed up oh i think we need this should be a [Music] named export not a global not a default export so we need to put the brackets around it and now you see we get back this thing it logs out something that has a set subscribe and update function well what is that well remember this thing is a writable it's not just a piece of data it's a writable that has data inside of it so what we actually want to view the data is to prefix this with a dollar sign now if we log this out we should see all of our poked data now is displaying so what this dollar sign will do is it will not only kind of get the data out of that store but it will also react if for some reason that data changed then this thing will react to that data so let's look in let's just scroll down and do a little bit of felt stuff here to show the names of those pokemons so the way we can do this since felt is using in each block and what we're going to say is from the pokemon we want to get each one get a reference to each one and reference it as pokeman so my cousin who was a little bit older would make fun of pokemon and call him pokeman and then i realized like although he was making fun of stuff it also in this case makes a little bit of sense because pokemon is plural and singular so to avoid confusion pokeman now is the individual pokemon and we want to make sure that we end this each block so inside of here we can use our bracket syntax to reference pokeman.name let's just see if we get this to display here oh and we made one a very common mistake as we mentioned the dollar sign here gets access to the data so we still need to reference this dollar sign as we do it in the each and now we should see here are all of our pokemon listed out which is really neat now i want to show i wonder if we can do i wonder if we can do this a little bit differently to show this reactivity so as this thing changes how do we or as the data changes how do we how do we prove that felt is actually updating our ui so i'm gonna i'm going out on a limb here for a second i'm gonna create another one actually let's do let's have this pass in a num and let's put num inside of this so this should still work if we pass in 150. all right so we should still see the same list that seems to work and then what i want to do just to prove to you how this stuff works is i'm going to do a set timeout this will take a callback function and i want it to run after three seconds and then after this set timeout finishes after three seconds i want to call fetch pokemon again but i only want to call it for two pokemon so we hopefully we'll see is we'll see all this data listed and then did you see that update so let's uh maybe refresh this again so it will query all the information then three seconds later it will query again for just two now the reason i show you that is that nothing changed inside of the thing that's reading that data because of this dollar sign if any of the data changes from the polka store this is automatically going to be re-rendered which is really really nice this is a great way to share data across components and it works out really sweet so i actually don't need to pass in the id we're just going to leave this as 150. so let's go and put that back in by default and make sure this works but i did want to show you just how that reactivity works in case that data were to change now you can think of this if you were building a to do app if you added a to-do if you deleted a to-do you could do that in one centralized place in a store and then see those updates take place in every other part of your app that you need to to view it all right let's start to think a little bit about how we style this thing and we're going to do that with using tailwind css now i found this article that i will leave a link to below and it's a pretty easy setup and it's very similar honestly to the setup you would use on a different platform so we're going to install tailwind css and auto prefixer so let's close out our running app and then let's paste in this command which will install tailwind and auto prefixer now tailwind css if you're not familiar with this is a utility-based framework which has kind of just taken the world by storm there's some people who don't like it as much but lots of people most people that i hear and see from or i see talk about it absolutely love tailwind i've become a big fan myself it gives you a lot of structure into how you style your applications in terms of design patterns or design best practices so you get this like scaled up effect of here's the different colors that you can use here's the different margins and font sizes and that sort of stuff and it works out really neat so just if you've never seen this before kind of stick around with me as we do this if you haven't seen it before it should be pretty familiar and what we'll get to do is we'll get to take advantage of a new feature of tailwind called the just in time compiler which makes things a lot faster and uh does some pretty neat improvements inside of or excuse me inside of tailwind and i would encourage you if you're interested in those updates on the tailwind css there's a tailwind labs i think youtube account so 101 css jit there's a video that i watch to cover those specific announcements of what comes with it so on the yeah tailwind labs there's the next generation of tailwind css and this talks about the just in time compiler so i've watched a ton of the videos from taiwan lab so if you're interested in learning more about tailwind labs i would absolutely do that so let's go ahead and finish the setup for tail one we installed those packages and then we need to create a postcss.config.cjs and by the way some of these files you'll see are in the cjs format to specify that they are common js as opposed to esm modules so this is more what we're used to looking at in node and we specify that we're using that format by prefixing this or naming it as a cjs file so i'm going to name that file postcss.config.cjs and then let's paste in this so what this is saying is postcss we'll want to use auto prefixer which prefixes our different styles based on different browsers and then also we want to use tail 1 css which we installed as a dependency as well and then we want to create the tailwind config file and we can do this by running mpx tailwind init so npx allows us to run a package that we haven't installed ourselves so it allows us to run tailwind it initializes it and it creates the tailwind.config again looking at this being named cgs to define that it is a common javascript module and then inside of here what we want to do is we can get rid of the default stuff and we do two things we'll tell it we want to use the just in time compiler and then purge says hey if we don't find a given tailwind class in one of these files we won't include it in our final product so this is a way to really purge out the css that we're not using so we're only using tailwind css from tailwind for classes that we have included in our project so this is saying we want to look for those classes to be used in any svelte file so we'll give this a say we can close out those two configuration files and the last thing is inside of our layout we need to install the base components and utilities from tailwind and we can actually do that inside of our layout here so we can add at the bottom of this we can add a style tag and this is basically just saying we want to include the the core things from tailwind as part of our css and this is more or less global since the layout is wrapping every single page so this stuff will be available to us and now we can start to use our tail one classes so let's start this back up and let's see if it ran correctly so if we start it up and then refresh we should see that some of this will change a little bit and actually a lot so tailwind css does a lot of resets it will get rid of some of the default font sizes for h1s and bold and stuff like that which may seem like a downside but it's really neat when you actually get to have full customization over your application so let's look at a few different things let's open up our index felt let's look at our header tag here and let's start to add some classes so in tailwind we want this text to be bigger so we'll say text for xl we want it to be center so text center we'll do a margin y of 8 and then we'll make sure all of this is uppercase now the cool thing about tail one that i mentioned before you have all these different sizes text 2xl 4xl xl medium small that sort of stuff and then you have for margin y you have also margin x or you just have margin and then you have these different increments of how big or small that margin should be and you've got a really simple class here and uppercase to transform that text uppercase so notice now that looks pretty good more or less what we were expecting so let's also open up our nav and start to style that in the same way so let's open up our nav let's look at our nav bar and we can use classes not only for just font size and colors and that sort of stuff but we can also do things for how we display our information including flexbox so we can use flex here which sets a display of flex we can call justify center that will center these items horizontally in the screen and then we will do a w dash full which says that this nav bar should take up the entire width so now let's go and see this and those two things are centered and the nav bar if we look is taking up the entire width of its parent now we want to add a little bit of styles for these anchor tags so let's do two cursors here do these at the same time we'll do a class of mx-4 this is margin x of 4 so horizontal margin and then we'll just do text of large and that ought to get us a decent looking nav bar here the one thing we are missing though is you see there's no like buffer around the top and there's no padding on the outside of the content down here and what we want to do is have basically a container that we wrap everything in so since we're wanting to wrap everything we can come into our layout and wrap the slot in a div with a class of p8 which has padding all the way around we'll do a max w 6 x l which says hey the max width i only want to be whatever this arbitrary number is for 6xl but only so wide and then because it's only so wide we want to do mx auto so if you remember the margin 0 auto trick where you center things inside of itself this will add some padding set a max width and then center all of its children inside of it and then we'll close out this div and then make sure to wrap that div around the slot so now this should be looking uh better and better so we have our header up here we have our nav bar and i think we missed including the navbar inside of our container so let's go ahead and make sure the navbar is in there now we have breathing room up there we have some room on this side and the last thing we need to do is update the same thing for our about page let's go to the index let's copy the styles here let's open the about page add those same styles in here and now this should be looking pretty consistent so home about and then those titles are in the same place and they look the same all right so now let's look at how to actually display this information for the individual pokemon in a little better way and what we're going to end up doing is creating a pokemon card hint back to uh or reference back to pokemon cards uh pokemon card component endsville to display the information for each pokemon so let's go up to our components let's add a pokemon or pokeman card if we're using that to differentiate between plural versus singular and inside of here what we want to do is receive a property of pokemon so from the index page it's going to render out a list of pokemon cards and to do that it's going to pass the information for each pokemon into this card component so to receive props inside of felt we do an export let and then whatever the variable name is in this case pokeman so if we do an export let that means it's expecting to receive a property called pokeman now in this case we can we can add information in here to grab the pokeman dot name so this should end up looking exactly like what we just had let's also close a few of these files and then open back up that index so inside of here now we want to import the pokey man card from components and then pokeman card so we'll get that and then instead of displaying this information directly we will display the pokey man card component and will pass in pokeman to that component now what this does is it gives us a little bit of a way to organize the way our where we display where and how we display information so we're now able to put all the information about a pokemon into this pokeman card so let's save this let's do a refresh this looks almost the exact same except i didn't use a block element for the pokemon name in here so we could add this into a paragraph tag and then see that it should look the exact same so a few things that we want to add in here let's get rid of this and kind of start from scratch we want to have ultimately this be an anchor tag and we want the href in here to go to a page that is slash pokemon slash and then on that pokeman we have an id property so we want that anchor tag to link to that specific route where we can find out more information about the pokemon and then inside of this anchor tag let's add two things let's add an image tag and this will have a source of pokeman.image that's that url that we put into the pokeman information and then we'll have our alt here is going to be the pokeman.name so that'll be our image and just to double check to show you where that information came from inside of the pokestore we added this image url that includes the id of that pokemon so that's how we're getting this image and then we can add an h2 in this case h2 in this case and we want it to have the pokeman.id do a period after that and then we'll have the pokeman name all right so let's save this and see what we got so on the cards now we at least see we have this stuff kind of laid out and displayed correctly along with the images which is really neat now i'm going to copy in some styles i'll tell you what these are doing in a second but let's start with the anchor tag and inside of the anchor tag i want to add a bunch of styles we'll add some padding here with p6 we'll add a background of a really light gray we'll set the color of the text to be a pretty dark gray we'll center that text we will round the corners with border radius we'll add a box shadow small then we'll say when we hover make that box shadow bigger make it a shadow of medium then we'll set it to display a flex we will set it to a flex direction of flex column and then we'll center those items to make sure that vertically they're centered in the card all right let's say that and now see what we got get um these are all just kind of they're all just kind of stacked on top of each other but they do have a little bit of what we would expect so if i separate this one out a little bit let's add a margin bottom to this one of 20 pixels so now you can start to see what this will look like but we want this to be a couple of items per page so what we need to do is actually style the container for those different polka cards so in this case let's go back to our index page and inside of poke card or before we start displaying these poker cards let's add a div and this will be the parent container for those cards and then inside of here we can start to use css grid so we can call this uh grid here we can set a gap of four we'll set gap top and or excuse me top bottom left and right and then we can say that we want on medium and up screens we want the grid calls to be two so we'll have two side by side on medium size and up screens and then we'll have a grid that calls one otherwise so if we have a bigger screen we'll put two side by side if we're on smaller screens we'll have just one side by side the last thing i want to do in here is give a little bit of y padding in here for py4 now this should start to look a lot more like what we expect so here are different cards you can see them side by side you see the little hover effect you see the image and the name here so we've got all the information that we wanted i think i've got a few other classes i wanted to add to the actual pokemon card or pokeman card so let's add on here let's do an h40 and then a width of 40. so i think we'll make that image a little bit bigger here all right so that looks good and then on the h2 i want to set this to uppercase and then text to xl make that text a little bit bigger and uppercase and now we're getting the full display of what we were looking for inside of our pokedex all right now that we have that in place i want to start to work on the filtering of these pokemon and this is a little bit tricky but basically what we want to do is inside of our index page we have a list of all of the pokemon that come from the store but we also need a list of which pokemon are actually meant to be displayed as the user searches so to do the search we first need to define a variable inside of our script so we'll have a search term in here and we'll set it to an empty string to start and then we'll also have an array of pokemon that represents our filtered pokemon and i'm going to start that out as an empty array and let's go ahead and work on the actual input here so we're going to create an input underneath the h1 so input with a type of text we'll add a placeholder of search pokemon and then we'll start to add a few classes to style this up so we will make this take up the entire width we'll do rounded border radius or we'll add border radius again do a text of large we'll do a padding of four a border width of um to not two pixels in this case but relative units inside of tailwind and then we'll set the border to a light gray of 200. by the way i've got a tailwind uh intellisense class that i have installed or packaged that's installed in vs code so if you want some of that intellisense you can install that as well so let's go and look at this now we have our search we can type in here and everything doing forms and binding to values in this case is much much easier than something in react because all we have to do to do two-way binding with that search term is called bind and then we want to bind to the value property and we want to bind with that search term so what this means is nothing has changed yet but if we give search term a default value of something random that will automatically populate in here which is really neat now the other thing we need to do is somehow react to when the user types in something into the search term so let's actually get rid of this and now we need to think about reactivity so as this piece of information changes how do we then handle that change and do something with it well svelte has this really interesting syntax for dollar sign colon and then brackets and we can basically kind of use this as a function that will react to any data that changes that's reference inside of it so if we reference search term inside of here any time search term changes this function will get rerun so let's go and look at what this looks like looks like we've got a error in here if we knew how to spell we would have less of a problem so let's log out the search term and as we type we should see now it's giving us that information so this reactive function basically this reactive scope now is going to update any time search changes so let's take a look if there is a search term we want to search the pokemon else we can reset the filtered pokemon to be the entire list of pokemon that comes from the store so we can grab our filtered pokemon and set this to not pokemon directly but we need to make a copy of that data and we can do that with the um with the spread operator for array so this will take a copy of each pokemon from that pokemon data and now put it into our filtered pokemon which now means instead of displaying or iterating through the list of pokemon that comes from the store we can iterate through our filtered pokemon alright so if we look now hopefully this will be the same pokemon is not iterable that's because this needs a dollar sign again a little tricky to get used to but once you do it works pretty well so now we see the same list of pokemon we can type in here but nothing changes well now we need to say if there actually is a search term then we need to say our filtered pokemon is going to be the results that come back from searching through the full list of pokemon so we can use our pokemon and we can use a function called filter and for each pokey man we only want to keep the pokemon if the or the pokeman if the name includes the search term all right so we're resetting the filtered pokemon to be the pokemon that we've searched for and found inside of the full list of pokemon so now if we do this and we start to search we should uh pokemon.filter is not a function again because of the dollar sign need to make sure that i do a better job of that and now let's start to search for bulbasaur and i think for some reason i just needed a page refresh there so after i refresh the page and then start to type it looks like it's good now now the one thing to notice here is that only lowercase searches work because the name that comes from the actual data is lowercase so if i search capital b it's not going to find it so the way we can do case insensitive searches in here is we can just convert each side the name of the pokemon in the data and the search term to lower case so we can call to lower case on the name and then two lower case on the search term as well so now i can search however i want if i do uh capital b and nothing else if i do all caps that works if i do lower case that works as well now my favorite pokemon is dragon knight so there's a search for my favorite pokemon in dragonite which i think is one of the coolest pokemons that's out there charizard is another really cool one maybe it's just the dragon concept for me of pokemon that i think is really neat but that is the way that we can do our searching in here uh we have all of our pokemon that come back from the store we then create a new array of filtered pokemon and a search term we bind to that search term so that anytime someone updates the information that's in the search box it updates that variable and then we do the reactivity here so since we're referencing search term this reactivity will trigger every time that search term gets updated which then means we can update the filtered pokemon accordingly pretty cool stuff it's a little interesting maybe a little weird syntax here but the power of it is actually pretty neat you can think of this as kind of a use effect in react use effect you define your dependencies explicitly and it runs that callback function every time those things change this is very similar in the sense that it's now updating or re-running every time that search term is changed here all right now let's start to look at how to create the individual pages for the pokemon so let's go into our routes let's create a new folder for pokemon and then inside of this folder i want to create a dynamic route so to do that you do dollar or not dollar sign but brackets and then the name of the parameter that you're going to be looking for so this is id svelt and what this means is this is we're going to use this page for any route that is slash pokemon and then slash something so inside of here we want to display the details about the information and we want to get those details from i'll copy in this url we want to get those extra details that come from a separate api call to the api that has all this information now we're only going to display a tiny bit of this information but it's a ton more than what comes from our original call for pokedata which just has name and a url and then we added the image so in this case we want to make a fetch request when someone gets to that page we want to make that fetch request get that information and display it now if we click on this it should take us to pokemon oh we named the route uh we named the route pokeman but in here we call it pokemon so let's go back to our index or actually the poke card and let's send this to pokemon and then id so now we should be able to get to this page although it's blank so we can open up the id route and just say hey there all right so that will display something more than likely we want this to display an h1 with the poke name so we can add a placeholder here for poken name and now how do we actually get this information well one of the things that we can do in sveltkit which is really neat is use something that's called server side rendering which in this case means that we're going to go and load this information before we actually display this component to the user in the browser so that gives us the ability to go and query this information pass that information to the component so by the component is ready to display itself or be displayed it already has all the details about that pokemon so the way we do this is we can do a script with a context of module and then inside of this specific script tag we can export an async function that's called load all right and this will take in a parameter of page so this load function what spell kit will do is it will look at this route it will see that it has this export async function inside of a script that is a context of module and it will call this load function before it actually lets that thing be rendered to the page so what we want is we want to make an api call to the polka api based on the id of the pokemon that we're searching for and we can get that id from page.params.id so from there we can grab the url i'm going to paste this in so i don't have to type it all the way so the url that we just showed the poke api slash and then the id of that pokemon we want to uh make the fetch request so we'll do a white fetch and then pass in the url then we'll get the pokeman data from the res.json so we'll convert that response to json and then what we do is return a object with props inside of it and then a property of pokeyman so what this will allow us to do is run this query before we actually render this page and then inside of the regular script tag for this we can expect a prop or accept a prop of pokeman so again what this will do inside of this context module it will run this load function it loads the pokeman data it returns that into this object into the props which means that the regular script in here is expecting a property of pokeman and now from here we can actually use this to display the poken name so let's do brackets and then pokeman.name and if this works we'll be making some really good progress alright so there is our bulbasaur if we went to slash2 we could see that as well so that is working really well which is good i'm going to copy in a few of those styles that we did for our h1 so this will look a little bit bigger and more noticeable so there is that so there's ivysaur and again if we went to 56 i don't know who that is right offhand mankey is 56. so we've got our dynamic routes our server side rendered routes with this load function that loads the information about that pokemon and then it starts to display this information now this stuff is not going to be super detailed so i'm going to copy in a little bit of this information all right so we'll just have the image tag again we've seen the image before and then we are also displaying the type the height and the weight now again you can have all the source code here so you can go and grab all this so you can type it yourself or grab it from the source code and it looks like we're getting a little bit of an issue here with the type and i think that's because there's a little bit of formatting we need to do to grab just the type because it comes from pokeyman.types you get the first type because they can have multiple then you get dot type dot name which to me is a little confusing and how you actually get that information but hopefully that will display now so there's manky with the different properties and the image and then lastly we can wrap all this in a div that will center all of this information so we'll do a display of flex flex columns and item center and then close out that div and now we've got our full details page for this pokemon so we can go back home we can navigate to ivysaur still shows our navbar we can go to b drill go back home so we've got server side rendering for dynamic routes we've got our regular home page with all the pokemon information we can navigate between our two pages and we can do a bunch of cool stuff all right one other thing we can do is we can start to convert the index page to use a similar format to what we just did so i wanted to show off the pocus or the pokestore using sveltestores to show you how stores work but in this case we don't quite need it we can actually just query this information in the exact same way that we did inside of here so let's copy this script tag with the context of module and let me paste this at the top here and we'll have this load function where we'll go and query all of that data and then instead of importing pokemon from the store we can export let pokemon so what we're doing here is we're going to query this data inside of this load function instead of in the pokestore so that by the time this index page is rendered it already has all the information that it needs so we'll just kind of grab all of this so we'll grab that same logic throw it inside of this load function all right let's save that and then again we need to return an object that has a props and then it has inside of that props object has a pokemon property that's set to loaded pokemon so that this gives us the ability to query all this information before the page is actually displayed to the user otherwise what we were doing was loading the page querying the data then displaying it now we're making sure that all this data is loaded before it actually gets to the user and it comes through this props pokemon after we've loaded it in here now the last couple of things we need to do is get rid of all the dollar signs because now this is not a writable thing it's just a piece of data so we can get rid of i think it's just those two so let's save this refresh and refresh this home page now we're seeing all the information again we can click on bulbasaur see those details ivysource see those details and then also hopefully continue to search for charizard cool so all of that stuff still works but now we're getting this information from the server first to make sure that as we go to load this component it already has all that pokemon information passed to it so it's ready to go now the last couple of things i wanted to show you was how api endpoints work we're not actually going to use these in this case but i wanted to show you how they work and what i want to do is inside of routes i want to create a new folder called api and then inside of api we'll create another folder called pokemon and then inside of there we can have an index js and then we can also have another dynamic file which is brackets id js all right so inside of the index again we're just kind of demoing this for how apis work i'm going to copy in actually let's do we don't have to copy then i can go through this so inside of this api routes what we want to do is export an async function called get that means this is a get request it's going to take in some params and then at the end of this what we want to do is return an object that has a status of 200 and then a body that passes along the pokemon now obviously we don't have pokemon here so let's go and grab the logic from inside of here that calls the api and converts it to the format we want let's go and copy this and just dump it in here so just copy and paste it because we've written it before so save this and now what we have is an api endpoint that slash api slash pokemon that should return all of that pokemon and json data or all that poked data in json so let's navigate to pokemon or excuse me api pokemon and it says pokemon is not defined that's because i think we called it loaded pokemons let's just call this pokemon here and now if we refresh we should see we get back all that data now we kind of just created a proxy that then calls another api but i did want to show you how api routes work inside of felt kit so we're able to do that and then we can do more or less the same thing let's just copy all this let's then do this id here and let's name this one pokeman and we want to basically copy the logic that's inside of here so we can copy all of this stuff where we go in query from that external the third party api we want to do that based on the id that is in here and i think this is just params.id in this case so we'll grab that id we'll throw it in there and then we'll query that information and return it at the end so another api endpoint again the way where this comes from is creating a file inside of the routes directory that is a js or typescript file and then it exports an async function in this case it does a get to make this a get request so let's uh let's try this out let's go to our browser and instead of pokemon we'll do pokemon slash 2 and hopefully this gets the information for ivysaur cool and then maybe 78 anyone know who 78 is i have no idea uh let's see who this is it's a fire pokemon rapidash yeah there we go rapidash very nice so this gives us the ability to create our own api endpoints so if we wanted to uh call from our front end or let someone else call our api endpoints they could we have them listed in here again not necessary for what we have set up here just wanted to show you that this is how it works all right so just want to show you one more thing in svelt and that is the built-in svelte animations which are pretty sweet i haven't played around with these a ton but i have done a little bit so you can actually import uh these animations from it comes from svelt transition and you can see that auto populates there what i'm going to do is just add a fade effect to these polka cards so that means that when the screen loads it's going to fade these on and then when the screen is either or i guess just transitioning to another page it's going to fade them off which gives it kind of a cool transition effect and we can add this fade by adding the tag or the property inside of the anchor tag the transition colon fade and again we import that fade from up here it looks like we got another um identity thing coming from spell which we don't need so we'll get rid of that but all right so let's go back to the application and from the home page if we go from bulbasaur to its details page or from the main pokedex to the bubble store detail page you see those kind of fade out a little bit and if we go back home you can see those kind of fade in again so a little subtle thing here but i think having those transitions built into this felt is really neat and i'm looking forward personally to looking into those more so so i would definitely take a look at these transitions and felt all right hopefully you enjoyed that felt kit crash course as much as i enjoyed putting it together which is a lot anyways if you feel like you have any unanswered questions or topics that weren't covered in this video let me know in the comments below and i'll follow up with extra videos in the meantime thanks as always for checking out the video and i'll catch you in the next one

Channel: James Q Quick

Views: 29,558

Rating: 4.966073 out of 5

Keywords: sveltekit crash course, svelte, sveltekit, getting started with svelte, sveltekit srr, jamstack, sveltekit and tailwindcss, sveltekit tailwind setup, svelte stores, sveltekit page routes, web development tutorial, svelte tutorial 2021, svelte basics, how to make a sveltekit app, sveltekit api routes, svelte transitions, how to build jamstack applications, javascript tutorial

Id: UU7MgYIbtAk

Length: 59min 15sec (3555 seconds)

Published: Fri Jun 04 2021