Fullstack SvelteKit ToDo App with TailWind CSS and MongoDB

so how would you use server sides felt kit to build a to-do list using fetch requests on the client to grab data from the server side that can then be stored in a database we're going to check that out today in this tutorial video stick around hello hello youtube my name is brayden gerard and today we're going to build a to-do list using sveltkit so that i can demonstrate how you would use fetch on the client as well as server-side routes to save information out to a database and then retrieve that information back to your front end we're going to be looking at both the client side of svelt as well as the server side and we're going to be using them in combination with tailwind to build ourselves a felt kit to-do list so let's jump into the content and take a look at how we can do this using sveltkit okay so so far i have a felt kit to-do's folder with nothing inside of it except for a dot environment file which is going to be my mongodb uri and my mongodb and db name okay so you need to set up a database for this project i'm not going to go through how to do that because it's not going to be part of this to keep it short but know that you need a mongodb uri and a mongodb file or a database file name inside of a dot environment file at the root of your project directory so we're going to generate a new felt kit project so spelt that next and it's going to say the directory is not empty that's fine because we know it's just the dot environment file no i don't want typescript and i'll do regular css and then we're going to do npm install to install all the dependencies now there is two other dependencies that we're going to need for this project we're going to need the mongodb node module and we're also going to need the dot environment module which will allow us to pull in the data inside of this.environment file now you're going to notice that these dependencies get added to the dependencies here in our package.json now in order for these to actually work properly with the new esm modules we have to make a slight tweak here in our svelte config we need to go here and we need to say instead of no external change this to external so that it allows external npm dependencies from our package.dependencies here which is our which is in our package.json here okay that will allow you to import both mongodb.environment inside of our sveltkit javascript files so make sure you make that change and we also want to install tailwind for this project so svelte has a community repository that allows you to or allows developers to create easy sort of setups for different common frameworks that need to be added to felt kit projects and that repository is called svelt add and inside of this felt add repository there's already a generator for tailwind.css there's tailwind css story so we can simply say npx felt add tailwind css and that will add tailwind to our project automatically so that we have tailwind for our styling now i'm not going to do a ton of styling in this because like always i like to show you guys the actual javascript functionality i don't want to waste too much time styling but you will see the tailwind is working in this project and we can do some basic tailwind styling now we also need to install the tailwind dependency so you'll see that it's now here in our dev dependencies so we need to say npm install and you'll notice that after we run that tailwind generator we now have a tailwind config file we also have a post css config file to set up tailwind okay so that's all good now if we run our project so that's just the default project we should see in our browser the default is felt kit project and it should be using tailwind so if i refresh this here we'll see this felt.dev is underlined and it's in blue and you can notice the fonts are a little different if i go over to our code and we go look at hold on a second here and we go look at the default route of index we can see that we have text blue 600 and underline on this uh felt.dev link so it is indeed working you can also see that in here we have all applies from tailwind in our css and those are all being applied okay so we are now using tailwind um we will i guess leave the default styling this is fine we will take out the counter we'll leave the title we'll just call it uh my to do's and we'll take out this paragraph tag for now and remove the counter import as well as remove the counter component now you'll notice that components are now inside of a lib folder in some of my previous videos this folder was called the components folder okay so just pay attention to that when you're importing components now you're going to be importing them from dollar sign lib okay forward slash and then whatever the name of your file is you can also put other modules in here or javascript files that you create and we'll we'll do that in this in this video in the lib folder so it's a bit more robust it's not just for components so let's get to it then first let's create some server routes where we can hit those server-side routes to save stuff to our database and retrieve stuff from our database okay so we haven't looked at server-side routes yet in any of my videos cell kit allows you to do server-side api routes and you can simply create those by creating a js file anywhere in the routes folder okay so if it's a dot svelt file it'll be rendered out as a page if it's a dot js or ts if it's a typescript project that will be rendered out as a api endpoint or a server side route so you can do stuff there like database access and and have private data there because that is on the server side so we can make a new folder here and we'll just call this to-do's and inside of there let's make an index.js file okay so this is going to be if you just go to forward slash to do's it'll be hitting that api endpoint and in here we can create multiple functions one for each type of request whether it's a get post put delete and then whenever we go to forward slash to do is depending on the type of request it will call that specific function so if you ever worked with serverless functions before this is similar to how serverless functions work so it's very straightforward all you have to do is say export async function and then if it's a get if the name of the function is get then your get request will go there and that's function can take a couple parameters today we're going to use the request parameter so that's all we need to worry about and then you can simply return whatever you want here but the return body that it's expecting has to have a status okay so 200 if everything went well and also a body which is an object that it will return for with data from the request being returned um so in this case we'll just return some text for now um body to do [Music] okay and that's the get function we are also going to need a post function so if we send a post request to forward slash to do's it will hit this function we can also create a put and if we send a put request it'll hit that function and we can create a delete so that if we send a delete request it will hit that function uh now notice we get an error here delete is a reserved keyword in javascript so you actually have to use the short form which is del and that's the name of the function that svelkit recognizes okay so now we basically when we hit our gets our poster puts our deletes we're gonna be getting data in the request okay so uh in our request we're gonna want to get the um for the get we're going to want to check whether or not we want to get all to-do's back or just the or sorry not all to-do's but whether we want to get the completed to-do's back or the incomplete right so on our main to-do screen we're going to show the ones that are incomplete and then maybe we'll have a screen that shows the completed seduce so that should probably come in as a query parameter uh on the on the forward slash to do so something like forward slash to do is question mark completed and we'll say if that's equal to true or false so we can get that from the request object we can say const completed and then we can make it equal to request dot and then inside of that request object there's something called query which gets us our query a query url query parameter object and we can say query dot get and then we can say we'll get the query parameter completed and we'll actually get this as a boolean so that's just going to get us the string value of what completed is equal to in our query parameters but we want to check if that is equal to the string of true and if it is then we will set completed to true if it's not we'll set completed to false okay just do an inline operator there and now we have our completed from the query parameter so let's just do a little test here to make sure everything's working so i'm going to return whether it was completed or not so we'll just say completed here and we'll return completed okay and if everything's working we should be able to call forward slash to do's and we should be able to put a query parameter of completed equals true or false and we should get that result back here so let's go back over to our browser and let's say forward slash to do's question mark completed equals we'll say true and we get completed true back as our json data great and if we say completed false we get completed false back perfect so so far everything's working our server route is working and we're getting the proper data back so let's just jump right into it here and get all of these routes completed so that's i think all we need for our get request which is just going to get us all our to-do's and it'll either get us the completed to-do's or the incomplete to-do's um the next thing that we need to do in getting all of our to do is actually go into the database and getting them so to go to the database and get them we're going to use database now we could create the database connection here but then we have to create it also here here and here or we should create at the top of the file either way every time one of these routes gets called the database is going gonna be reconnecting now this can become an issue in a serverless environment if you have a lot of people hitting your endpoints it can start creating a whole bunch of connections to the database and once that connection limit gets reached which isn't really that high on a lot of databases i think when i was looking at this stuff was like anywhere between 20 to 100 connections depending on the settings and the database would start rejecting connections so you don't want that to happen you want your database to be able to scale so it's better to set up a connection in an external javascript file import that file as a module and node will cache that data in that file so your variables will be cached and your connection will stay open now this works by default in production environment of node in development with hot reloading and and whatnot there is a bit of an issue with this where it doesn't actually cache it so there's a little work around where you can set it on the global uh variable uh set the cache to the global variable and then the global variable will hold on to it um so i'll show you how we do that now i didn't come up with this code so uh it was actually i found it in the next js project because i took a look there because i knew next yes has been around for quite some time and would probably have a solution to this since this felt kit project is like next.js where it's set up to be run serverlessly so we'll make a db.js in our lib folder here and then if we go over to the next.js project you'll see the nextjs project they have in their examples folder with mongodb in the util folder they have a mongodb.js file this has a very good chunk of code here for setting up a database connection if it doesn't exist if it does exist just using the cache connection and then a little work around here which they have commented here to set the instance on the global variable so that it stays cached even in the development environment so if we go back over to the code we'll just paste that in now process.environment i'm not sure yet if this works in spelt kit i know there's a there's a way to do this in next.js so that it just works it may be working but to be on the safe side for the purpose of this video i'm actually going to use the library of dot environment that we've already installed and then let me know down in the comments if you have a better way of importing environment variables i'll look into it as well i'm hoping there's going to be a built-in way to do this in sveltkit but i haven't seen any documentation on it yet so i'm going to import dot environment and then i'm just going to say dot environment dot config to set it up and then that will allow us access to process dot environment inside of our file here we get our mongodb orie mongodb name and then basically just checks here if it's got the variables from the processor environment good then it caches uh this object on the global variable and it sets it up with a connection and a promise and then it goes through it as if the promise is cached if it's not cash set up a new connection if it is cash just return the cash copy okay and then that returns us the client and the db uh instance so the db instance will be all that we're actually using here so we'll close this out and we're going to import that into our routes file here so we're going to say import connect to database that's the function that is exporting at the bottom of that file which actually does that check for if it's been cached or not and returns us the instance and we're gonna import that from dollar sign lib forward slash db and there's one more thing we're going to want to import here which is the object id from our db node module now we'll use this after but the reason we need this is because when we request data from the database based on an id we have to format it as an object id so that will accept it when it's searching for items in the database by the id so we wrap our string ids in this object id and cast it to an object id okay so that is all we need to do to get our database set up now all we have to do here is say open up a database connection so constdb connection or get back a database connection i guess that's already been opened or cached connect to database and then from that database connection we're going to get the actual db object out so we'll say db equals db connection dot db and now that we have our db we can actually just uh do our uh our db operations we can say await sorry actually now first we need to get the collection from the db so const collection is equal to db.collection and then whatever we want to call our collection so we'll just say to do's we'll call it to-do's um so that's gonna be our collection just felt kit sure um that we're gonna save all our to-do's out to in our database so now we can take that collection so await on the collection and we're going to find from that collection all of the completed so i could say completed colon completed or we just use the single completed here since it's the same word and we find all the completed to to do's from that collection uh and we're just gonna send them to an array now this is all that mongodb uh syntax from the mongodb node module so if you need to look this up you can look up npm mongodb and you'll find all the different methods that you can use here but we're going to fetch all the to-do's that are completed or not completed if we determine that the query parameter is false here or if there's no parameter provided it will default to false so it will just return all the incomplete to-do's and then once we get back all of our to-do's we're going to return the to-do so body to-do's and we can get rid of that just like that now the other thing that we're going to want to do is catch any errors that we may get here so let's wrap this entire thing in a try catch so we'll say try and we'll tab all this forward and then catch air and then if we do get an error we're going to instead return an object with the status of 500 for a server error and then we're going to say body and we'll just give a generic message here uh a server error occurred now in a real life application you'd want to make this a little more robust where it actually returns a proper error message but for testing purposes we're just going to do this for now um and if we need to if we need to we'll console log out anything on the server here um so we save that and that should be that should do it for our get request to get all of our to-do's um so if we go back here to our browser and we can close this out now uh we hit this to-do's and we just don't specify anything it should send us all incomplete to-do's which is none right now because our collection doesn't have any to-do's in it um so let's go back here and let's implement our post method so that we can then create a means for us to start creating to-do's so inside of our post method we are going to first get our db connection just like we did above here and then get the collection of cell kits to do so to take these three lines here and pop them down here um and then we will say that we want to try uh actually we should wrap the whole thing in the try in case the db connect something fails with getting our db connection here again so we'll do that we can copy out some of this code here just to speed things up for our catch and now we have our collection here so we want to do a collection dot insert one so we want to insert one item and it's going to be the to do that we get from our post data which we need to get here we haven't done that yet uh we're gonna await that obviously um and that should be oh and then if that succeeds we want to return obviously a status of 200. and a body of we'll just send back uh status success you can send back the id of this to do or something like that we're just going to send back success for now and to get this actual to do what we want to do is we want to say const to do is equal to request json.parse it's important that you parse it to make sure we actually are getting a json object json.parse and then the request.body because you'll see on the client side what we'll do is we'll stringify our json so that we make sure that it goes out in the request properly and then we'll do a json.parse on the server to make sure we parse it back properly um and that should be it for our post i'll save that so now we should be able to create and fetch to do or yeah create and then fetch them so that should give us enough to get started on our front end and then we'll implement our update and delete methods here in in a minute um so let's go back to our front end okay so we've got this page uh we have nothing on it right now except for our title uh maybe we should make a navigation with uh to come back to this page or to go to our completed to-do's page okay so if i go back over here in our layout file we will insert a nav component which i still have to create but we'll just flush this out first so we'll import from lib forward slash nav dot svelt okay and then we'll go over here to our uh lib and we'll create that file now the docs felt and in there we'll just do a nav with two links and the first one to just go to the home page of the project so my to-do's and the other one to go to the completed page and completed okay and now we need to actually create the completed page so let's go back over here to our routes make a new folder called completed and inside of there we'll make an index.felt file which will be where we show our completed to-do so for now let's just put an h1 in there and say completed and just for the sake of keeping things quick here let's just copy the styles that we have on our uh main page and pop them over onto the completed page obviously we would make like a if we want to do this we just have put this in a global css file um but for this trial i'm just going to copy this over um okay so now we should have a completed news page and we should have a nav that lets us navigate between the two pages uh because we've included that in our layout which has a slot for the index as well as the subdirectory here of index in the completed route um so that's all good let's see if we could nav is not defined did i oh import nav from there we go so now if we go back over to our page here and is self accepting of undefined what is going on let me recompile here something broke i think because i created yeah because i imported that nav component before i created it and something got funky okay so i reboot here um we have the two buttons now my to-do isn't completed um i should probably separate these a little bit but here we go nav and we'll put like a little bar in between them just so we know what's going on here all right we go back okay so we'll go to my to-do's that's this page if i hit completed to-do's it's my completed to-do's page okay um some weird styling but that's fine okay so in my to-do's in the index.felt we are going to create a way to list off our to-do's as well as create our to-do's so first let's make a way to create our to-do's so we're going to create an input where we can actually create the to-do's from that so we'll go over to here and we'll say input and then we will say type equals text and we're going to bind this to the text and find the value of it to our text variable okay and in here we're going to have let text and then we are going to close that and that should be good and then we'll also create a button that says add to do okay and the button we're going to say on click we're going to call add to do oops okay and then over here we're going to make a function for that add to do and that will be an async function and we'll just for now console or we'll do an alert so we can see it to do added okay let's make sure this is working oh actually let's yeah let's add the text here okay we'll try that out so let's go back over and can't even see our text field here we got to give that a border um my to-do my to-do to do edit okay so our click listener is working great our bind is working perfect so let's now give our okay let's give our input a border so input one pixel solid black there we go okay um we'll also give it a placeholder so we know what we want to put in here so let's say placeholder equals enter a2b perfect and now there is one thing after this runs we want the text to be cleared out so we'll set this back to an empty string and let's make it by default equal to an empty string that way when they click add to do we can check if it's an empty string and if it is then we don't want to do anything so let's actually reverse this make it if text is not equal to an empty string then we actually do something so if we go back over here um and we add our to-do hello to added okay perfect clears out our thing uh what's up with our placeholder we're not getting our placeholder did i make a typo placeholder placeholder equals enter a to do weird all right not a big deal okay so um that is good now we can actually hit that put request that we put on the server so to do that we're going to say a wait i guess so we'll put a try around it first catch and there and we're just going to alert the errors because we don't really have uh there was an air i don't have a good way to handle them right now and i don't want to take time doing that so we'll just alert that there isn't air um and in the try we're going to say uh await fetch and in the fetch request we are going to do a post so we're going to fetch to the forward slash to do's route and then we are going to inside of the object here for fetch we will say that we want the method to be post and we want the body of the post to be json.stringify and we want to send the to-do that we are creating now where are we going to get this to do from okay so let's actually create a to-do so let's say to do is going to be do is going to be equal to and then in here we're going to have a text for the to do okay so the text is going to be text i guess we can just write text and then we are going to need uh the completed status i'm going to say completed is false and that should do it for the to do and then we create it okay let's just see what the error might have been here so if we go back and look at what we oh i put two h's in my method here okay so let's fix that and if we go back now and we say feed the dog and we send in that request okay so nothing's happened yet let's just check and see if we have anything at forward slash to do's we have the feed the dog okay perfect so it just looks like my view didn't update which is sort of expected because i haven't really handled for updating our list yet whenever we added to do um it should just clear it out it looks like i certainly removed that hold on so we should say text equals the empty string after we add the to do and the same here if there's an error we still want to make text equal to the empty string okay so that was my mistake somehow i removed that from the code so let's go back here and we'll add one more to do go and get groceries and add the to do okay so disappears perfect and if we go and check our to-do's we have two to-do's now perfect so let's now go back to our code and actually show a way to display our to-do's in a list here okay so we'll go back and we will create a to-do's list so or array so we'll say export let to do's because we need to we're going to fetch these when we first load um the page so we're going to use a script with the context of module okay and that allows us to then return a props with to do's in it that will get uh sent to this felt component as a props right away as once the page loads so in here we can do our export async function which is load which is that function that gets called when the component gets initialized and inside of load there's a lot of different things that we can get out of the the parameter that comes in to load we just need the fetch so that allows us to do fetching on the server side and there you know you can get the page that's actually in the context but we're going to use fetch so we'll just import that and now in here we're going to say result of our fetch equals await fetch and then fetch our to do so we're going to use that get request that we just made so just forward slash to do's and if we just do it like that it'll do a get request and then we'll say const res json result equals await dot or wait res.json so we'll get the json response out of that result and then we will return the props object which will have our to do's in it and we'll say dot jsonresult. do's because remember we put them inside of a to do's object in the body of that return so we get the json result we get the body object of to-do's and we assign that to this to do's props so then when we in when we export let to do's here to-do's will get passed in as a props to our page when it gets loaded so now we have a to-do's list so we can go down here into our code and we can create a list so let's just maybe we'll just throw in a break here to separate it from our input great styling and then we will say list okay and for the list we're going to say each to do's as a to do and then we'll close our each okay and then we will say list item and to do dot text okay and we want to also put a check box which with each of those so that we can check them off if we complete them so that checkbox will be an input of type equal to checkbox and we're going to bind the checked event to to do dot completed so that will actually take our to-do and it will mark it as completed remark completed as true if we check the box and then we also want to then figure out a way to actually uh send in that completed to do to the um we want to send in that completed to do to the server so that we can actually post it there right so then we're going to say on changed okay so when this state of this changes we're going to say call the add to do or sorry update to do because we're completing it so let's just call it complete to do so we're going to call the complete to do and we're going to pass complete to do a uh id or actually we'll just pass it the full to-do that we want to update so we're going to pass it the to do that we've just checked and the com complete to do method will just update the server and set our to do in the database to be completed so we can now go back over to did i close this no so close that input and then we need to yeah it's not defined i know so we go up here and we're going to make another async function [Applause] complete to do and inside of this function we are going to then do a put request to update the to do so that it's now completed so we're going to say await always try catch try and then we'll just catch the air and alert it like we did here uh await fetch we'll make this to do's for stop to do's can't type right now and then the method spell that right this time of put and the body so the body is going to contain this view that we want to update json.stringify e to do okay and if all is good then we shouldn't need to do anything because what's going to happen oh actually no we do need to do something we need to fetch our our latest list of to-do's okay so we're going to create one more method here we're going to call it a weight or async sorry function of fetch to do's okay and this will just be our way of manually fetching a new list of to-do's once we've completed a to-do so that we get only the to-do's that are uh up-to-date and and uh and completed all right i'm incomplete sorry to do's res equals wait this way we can just make sure that the client is always up to date with the state of the server side and what's in the database so to do's is equal to our json response dot to do so i went through this quickly but that's just because i'm doing the exact same thing here that we did up in our on load but we're just going to do it manually on the page whenever we feel like it so we can now call this fetch to do's right here after we do a successful update and that should be uh the only time i think we would need oh after we created to do as well so after we created to do um we we definitely want to fetch our to-do's again just so we get the latest to do with the proper ids and everything from the database to do that was created so after we created to do we'll also fetch the latest list of to do's um so that will update our to do's array every time we uh complete a to-do or add a to-do um we have the list here it looks like we have everything done on the front end to add and check off to do so let's try this out okay so now we have our list with our to-do's uh the styling oh hold on i didn't do this correctly we should actually have our input checkbox inside of our list item so that it can go side by side with our text here and if we save that and go back there we go it looks a little better at least and now if we check off one of these it's not disappearing okay let me just go check to make sure we did everything correctly with our check box uh on chain oh this is the on change event not changed uh and if we save that and we go back now we can let's just get us out of this state we can check that and server error oh we can't do a put to the server because we haven't actually wrote the put method yet okay so if we go back now we need to up implement our put server route and we could also implement a delete server at this point uh we won't implement the delete server route um because we don't actually need it for this uh we're not gonna i'm not gonna we're not gonna do a deleting to do just because i don't want this video to be too long but you could if you wanted to and i'll also show you at the end quickly how we could request a single to do if we if our app needed to but let's implement the put method um so that we can see how we would uh update it to do in our database so we need to again i'm just going to copy this snippet of code and we need because we need to set up a db connection get the collection get the to-do from the request body and then we want to instead of doing a insert one we want to do a update so collection.update and then we're going to update the to do with the id of object id and then we'll go to do dot underscore id so this dot underscore id on the to do is actually an id that um that generates so i need to use that we're getting back from our server we'll have this to do id so we want to look for the underscore id of object id cast from the to-do underscore id create another object with the set dollar sign set with an object inside of that of what we want to set on the to-do object so completed we want to set to true uh well not true i guess i guess we want to set it to to-do.completed so whatever the actual state is of the to-do and then we can close out this request so that would be how you would do an update on one attribute of the to do object with the node library and then we can return our status of 200 and we'll just say success again so that should be fine so we should be able to do a an update now to actually update our to do so let's go back over here let's say that we fed the dog and look at that it gets updated so the completed becomes true we get our new to-do's back we notice that that one's completed so it doesn't actually get returned in our fetch request and we have just the to-do's that are left okay so finally let's go and show all of our completed to-do's on our completed to-do's page so if we go over to our completed to-do's page all we have to do here is really just copy over what we were doing in the context module on our first page so that we can pull in all of our to-do's but in this in this scenario we actually want to pull in only the completed to do so we're going to make a query parameter here completed equal to true and that should pull in our completed to-do's now we need to have another script here that doesn't export flat to-do's and then inside of our page we will create a list again we'll do a each to do's as a to do then we will close our else or our each sorry and then inside of there we will simply do a ul and we'll actually you know what let's let's get the uh check box from uh this page we'll do it the same way with the check box and we will now i could actually break this out into a component would be smart if we were doing this a bit more efficiently and then instead of having it on change because we're not going to change these we'll just make it disabled so that we can't actually change it okay and then we have the bind of check to do.completed here to show that it's been checked so that we know that it's a complete to do so if we go back over here and check our page we see that we just have the one to do back that's disabled and it says feed the dog if i go back to my to-do's i can check off another one and we can go over to complete to-do's and it's now checked off maybe i have another to-do i want to add do my homework add that to do it gets added to the list okay so that is a basic functionality of a to-do list implemented in sveltkit now maybe we want to get one specific to do for some reason okay so let's just i'll show you how you would create the server route for that just as a little bonus because i know that's something that you typically would do quite often with server reps is to get a single item from the database so if we go over to our to-do's here we could create a new file in here and we could give it the name of slug in square brackets dot js and that will allow us to actually import whatever that slug is so whatever forward slash you go to after to do's or whatever value you put in there it'll actually be able to be used inside of this server route okay so that's important because we can actually get specific ids or something like that based off of the slug that someone provides so the way that we can do that is we can just say import actually we'll go over here and we'll copy some of this code over so we're going to import both of these and then we are going to again do a get request so we'll just copy this get request for now to get us started and we're going to get the id from the request first so we don't care whether it's completed or not here instead we want to say const id is equal to and then you can go to that request object and you can say request.params dot slug and that will get you the uh whatever they put after the forward slash on on your server out of to-do's so that we can save into the id attribute and then we set up our db connection get the db uh get the collection and then on the collection we can do a find one instead of a find and you can find one based on the underscore id and we can pass that slug to an object id with this id here that we have okay and then we don't need this to to array because it's already a single item and i'm missing a colon here so we cast this a slug id to an object id and check the database for the object with that id and then we can return we'll just return that single to do okay so that's how you would then get just a single to do back so now if we want to go and test that out i can go over to my browser here and we can go and get all of our to-do's for a second or all of our incomplete to-do's and we can grab one of these ids and then we can just go to forward slash to-do's forward slash the id and we should get back that single to do let's just see here a server error occurred okay so what is the error on the server oh i called this to do's and it should just be to do so we go back over here and we hit that and then we get back that single to do so we just get back to do with that id the text and complete it okay so that's how you could then request a single to-do if you wanted to based off of a dynamic route here which would hit a server endpoint so that's pretty much all uh that i wanted to show you guys today for setting up a to-do list this to-do list uses sveltkit it uses mongodb on server routes with felt kit and it also uses tailwind for styling my styling is terrible but that's not the point of this video i want to show you guys the functionality and there it is hope you enjoyed thanks for sticking with me for another one of my felt kit tutorial videos if you enjoyed this content make sure to give that video a thumbs up so that youtube knows to show it to other people just like yourself and if you really liked my content and you want to catch more of my spelt kit tutorial videos or svelte content in general i'll be releasing tons of videos in upcoming weeks so make sure you subscribe to the channel so you get notified whenever those videos come out and thanks again for hanging out and have a great day [Music] you

Channel: Brayden Girard

Views: 11,268

Rating: 4.9513383 out of 5

Keywords: web development, sveltekit, mongodb

Id: P6gEnVlJPOc

Length: 46min 14sec (2774 seconds)

Published: Sat Mar 20 2021