a simple (but powerful) todo list app with sveltekit

hey there welcome to this uh new little I don't know it's kind of a tutorial but also kind of not but today I want to show you um some kind of little spell kit template off been building so in the past couple of days weeks no let's say weeks in the past couple of weeks I have been playing around with Drizzle and turo and with o using Lucia o but yeah mainly with turo and rle because I wanted to learn databases for future projects and first and foremost of course for my current project wolf breaks which is still not very work in progress but kind of work in progress today I want to show you the repository so this is my GitHub go follow my gith up and start some of our repositories will be very cool um because I'm building cool stuff and so we got to do the SPID and yeah so let's actually clone this repository I also got some some kind of usess template uh kind of thing right right down here um because this is kind of a template so we can copy this URL and then go to your terminal and I'm already on this route or not not on the route in the correct directory developer SL project so let me just get clone that one and code to do/ kit that will open up our Visual Studio code and we got that one perfect so in order to use the template we got this env. example right here and from this I'm going to create an EnV file and quickly copy these ones over so I'm going to delete that database after but we can quickly PB group create um too D video which will create a cool um too and we got to do torso TV show to do video to show some informations about the database which we need we first of all need this URL let's paste that in here and we want we want that command here basically because we need a turo off token right here it's a very long token actually so if we mpm runev right now oh we first need to npm install of course press open we are here very creative to-do app and we first of all got some issues okay um because we need to migrate so we do mpm run generate no we can just empty around M right there so and let's re fresh perfect so we can give this a title for example upload this video now we can press add or just hit enter and it should create one or study so I still need to study biology CS uh chemistry right here and now we can basically do some cool things but let me actually just show you before the drizzle Studio which is very cool thing so they just added this drizzle studio um which we got right here we got basically four fields we got ID oops we got ID title content and completed we could also call this body or something like that I don't know I don't care um yeah so what these are these are the things we we have defined in component no not in components in lip sltb and lip SL schem sorry um it was very easy to kind of yeah generate that actually don't need that import okay anyways um yeah we created this to-do table um if I show you the schema for cod dooodle with which is my blog that I'm building out currently uh there the schema is a bit more complicated um I'm going to do a deep dive or kind of a video about that later on but yeah so this is the schema for our database uh what's cool about that is it's first of all it's kind of a one source of Truth so we got first of all we got how the database is structured and it's type safe uh because it the OM drizzle orm is written in typescript and so all my queries all my CR um crowd operations they are type safe let's see this code this project is really plain simple so I think the most complicated thing in this whole project that I needed to kind of figure out was the form actions because um especially server files were completely new for me as a kind of front content developer and having them was first of all kind of uh was a first time kind of kind of confusing but then I I got the hang out of it and now uh I think I'm pretty comfortable in writing backend typescript we get all these actions right here we got create to do we got delete to do we got toggle completely so we got this uh simple form right here and in this form uh we got method post because I think almost always you need to set or if you want to post something to the server you of course need to specify that as post and then we got action and this action needs to correspond with toggle complete and then we got class margin bottom blah blah blah some utility classes from Tailwind which I love because basically this um whole project like I think almost all my vit projects are based on skeleton UI and that means I have tnd and they're awesome components definitely go check them at and yeah so basically we got some utility classes and then our inputs which hold some values nothing crazy going on in this uh project with schema validation and all that stuff um in coodle there's actually a lot more going on but I'm going to do that a deep dive on that later because I'm using Zod and fet super forms there and it's just crazy it's very cool and yeah so we're basically posting a form and then we are listing a form or no what no we are listing all the todos um so yeah in page at server. we got some DB functions so we have DB which is that one that's a file where we Define the DB the database we got a load function which for swal newbies is basically load function is that this function is going to get loaded uh when the page gets loaded we can do cool stuff with it like checking the off State or yeah loading these things so uh uh yeah we're loading cons result is await db. select which is the read statement kind of in drizzle from to do table and we can order by because I want to order it by something in this case the ID because the ID is 1 2 3 4 um and it's primary key so it will always get incremented and yeah we need to set this to satisfies page server load which is an autogenerated type by swell kit so then we got form action right here which I already covered uh we first of all retrieve the form data and then we get the title and the body and again in spit super forms I know I could do this way simpler I'm Al also using super forms in another project I just didn't discovered till Cod so that's why I'm using traditional JavaScript for that and I'm just getting title and content and then we run a db. insert which basically is to create um the create method or create function to do table we specify where I think we all do it it's like in my opinion it's a bit confusing some sometimes you need to specify this from and then sometimes you don't need to or well maybe here it would be insert at not from I'm not sure about that yeah so then we got values and then we can insert basically these values and completed is always in here we're just going to take out the form data and here completed it's just so we got delete too which deletes it too takes the IDE of the form data and then yeah delets to do with this filter this is the equals filter from dzal uh with which we can delete or kind of filter out um some kind of specified a spe specific um Row in the database which is very useful to have that and we have toggle complete which in my opinion was it was the last um functionality the last logic last thing I implemented um and it was not the hardest one but one of the hardest definitely and I'm not even sure why so we got totle complete um we also retrieve the form data we retriev the ID I'm going to show the front end from for this uh in a second so first of all we need to retrieve completed Val uh which is sort for completed value await db. select completed we basically select the to-do which has the ID of the form data and then we check we return we get returned a Boolean right here true or false and in this case we want to await the DB update that's select completed to completed Val zero um this needs to be a Boolean because or no this this this is a uh not a Boolean this is an array because there could theoretically be multiple of them I'm not sure why it is because it is a primary key maybe I need to specify do unique which is also something you can do in rle I'm not sure about that and of course then we need to specify where we want to update that so in here we basically got some turn and remic going on here um with we press fall retrieving if the to-do is completed and if it is we got to make a line through oops right like here and if it is completed we also got this um fa solid or fa regular this is fa regular and this is fa solid if we go to font awesome we got I think it's check it's Circle check so we got here we got regular and here we got solid first I wanted to kind of basically Turner and then like do a Turner statement here and then render out different form but then I was like hm I can also fetch like the um the current like kind of state of the of the to do then just invert whatever there is already set in the database so I can yeah just invert whatever is set on the database and so I don't need to do uh to write two different um functions right here so yeah that is basically all that is to say right here I hope you like this uh little kind of breakdown video of my to-do we I think I will also o link this video as an embed in the repository and of course I'm going to link the repository down in the description so definitely go check that out it's one of my favorite projects bu because it was one of the first times I really um got to know the Technologies to new technologies and I really liked it so that's why I think it's very cool so yeah see you next time bye

Channel: Nev the Dev

Views: 135

Keywords: sveltekit, web development, svelte, typescript, turso, drizzle

Id: IY7Okb7dUN8

Length: 13min 54sec (834 seconds)

Published: Wed Jan 17 2024