Build an App with SvelteKit and Tailwind CSS

it's felt kit saturday actually it's friday when i'm recording this but we're going to build a to-do app and spell kit with tailwind and some other cool stuff so let's just get into it what do you want jess we need jess oh sorry i hung up on my wife accidentally don't tell anyone what's up everyone my name is james q quick and i do weekly videos on web development related topics and one of the things that i have been a semi-early adopter on is felt and specifically svelte kit and i just wanted to follow up here to do a tutorial on building a to-do app with spelt kit so you can see on the screen here it's your basic to-do app you can enter in i need to record a video uh submit this you can then uh check it toggle it on and off as done and you can delete these as well this is all in local storage so it's all just kind of dummy data or dummy application but i think it shows some of the core principles of sveltkit which are fun and we're going to set up tailwind so you can use maybe your favorite or second favorite or third favorite css framework to do this as well so i think it's going to be fun i would be interested or actually i'm interested if you're interested you let me know if you're interested in doing a part two of this where we actually save stuff to a database and actually add authentication so let me know in the comments below if you'd be interested in a part two but all that said let's go ahead and kick this off and get started all right uh so i'll have a link uh to any of the resources that we need in the description below the one thing i do want to make sure to let you know is this was inspired by an article by abnesh um who is in my learn build teach discord he does awesome content on the hash note so i'll have links to his stuff that you you can and should go check out i'm gonna do more collaborations with him in the future and then also uh we've got uh an article in here for setting up tail one with css from johnny magrippus hopefully that's close to the right pronunciation so i have a link to him his article and his youtube channel if you're interested as well make sure to check those out but on this felt kit homepage i'm going to copy in this command to initialize ace felt kit application so let's go ahead and copy that i'm going to put this in in my terminal here this will be my to-do app and we're not really taking much advantage of felt kit as a whole versus just a svelte project uh except for sveltkit comes with veet for its bundling and stuff so it's a lot faster and then there's some other niceties built in like built-in routing based on uh or file-based routing and stuff like that so we're not gonna take advantage of a lot of that stuff but i think this is just the way of the future and it's faster and so i think it's cool to just do this so once we paste in that command of init our news felt kit app it's asking us do we want a demo app or skeleton project we'll just stick with skeleton are we using typescript no not in this one let me know if you want to see some typescript stuff in the future i will do eslent for coding we can do pretty year for formatting oh that looks good cool so i'm going to now run the command code dash r and then scroll down using fig.io i'm gonna have a video on this of where i get this magic intellisense stuff uh but i'm gonna scroll down to my to-do app the dash r by the way in this code command will open this in the same window that i'm already in instead of opening up an additional window so uh once we have this open we can run npm run dev and this will actually do we need to install our packages maybe we do i thought that would have installed but i don't think it did so we'll install these packages and then we will run npm run dev all right that should be done here in a second cool so that looks like it's done uh we can now run our npm run dev notice my magical intellisense in here again kind of cool uh cool so this thing should be up and running let's actually check this out localhost 3000 and we see the basics felt thing so let's go ahead and set up tailwind with this so scrolling down here there's a couple packages that we'll need again i'll have a link to this so you can follow through the article if you prefer to but we'll need to add a few different dependencies so we'll do go ahead and kill the server and we'll do npm install dash dash save dev see my cool intellisense i think it's really cool fig.io if you're interested and we're going to need tailwind css and also i guess i'll just go ahead and look at these tailwind css post css and auto prefixer so post css and auto prefix err cool so those should download and then we'll have a couple of configuration files that we will need to set up for this to work so we're going to do first our post css config file and you'll see that this is going to be um here in a second let's see post postcss.config.cjs now cjs is an extension that is somewhat temporary so this might change i think in the future but this is uh the ability to uh for sveltkit or for veet actually to recognize this as a file that he can work with so instead of js it's cjs because it's using this import syntax so we're kind of designating this as using the common js module.exports so what this is saying is we're going to add in two plugins to our post css which is tailwind and then auto prefixer so we'll do the tailwind stuff and then we will do all the auto prefixing for the different browsers all right so that uh that part should be good and then if we scroll down they explain the cgs part here we need another file which is our tailwind css file we can actually just use inside of source we can go you can kind of create whatever you want here i'm going to call this app.css and just paste in where it imports the base uh components and utilities from tailwind and css you can ignore the a little squiggly there all right uh that looks good so uh the next thing we want to do is i think this will probably work at this point actually not quite uh let's go into our routes and we'll create an underscore underscore layout dot svelt file now this layout.felt file that's kind of hard to say is it's basically gonna be kind of a wrapper for all of our different routes so we can define things that are going to be used on every page so one of the things we want to do is import the app app css is it in there where is it so from layout we go outside of that fcss i think that's right that looks right all right cool so we import that and then i'm just going to wrap everything in a div with a class of we'll come back to that in a second so we'll wrap everything in a div and then we use the slot component in svelte to say this is where the actual content of that page will go so since this is page based routing once we add if we were to add another file spelt file in the routes folder that would automatically become a route and then that component in this case if you're on the index page the index component would fill this slot here so if we just save this we shouldn't really see anything different except the text now maybe we'll look different although i'm not sure that that does oh that's because we didn't we killed our server when we installed those packages and i just ran the wrong command npm run dev to run this again now let's refresh and hopefully we'll see the text will just look a little bit different and then we'll add there we go so all the styling and stuff is gone so it looks kind of boring now we can add some tailwind classes to this uh so we'll mark this as a container mx auto is margin x auto so it'll center that thing uh horizontally my6 will add some padding on the vertical side on the y axis and then max width will be large so we'll see this content now will just move over a little bit and give some padding up top so this way again because we did this in the layout file that's going to propagate down to every page that's inside of routes it's kind of cool so this is just kind of a container page here so that works the other thing we want to do though is set up tell when to do its purging so purging is going to make sure that the final stuff that we produce is as minimal as possible and i'm going to copy what he has here uh we're going to create a tailwind dot config i wonder if i can run tailwind can i run tailwind in net i think that's the thing can i run tailwind init npx tailwind init does that do what i think it will mp oh that's because i didn't type a valid command tailwind init hey created that file for me apologize for the stumbling npx uh which mpx allows you to run uh one of your packages from your node modules from that binary and run that thing in your terminal uh so tailwind config here cool so the only thing i actually want to copy then is the purge now what this says this purge line here says only look for tail one class names that are used inside of dots felt files and css files if a certain class is not used in one of those then we don't include that in the css that we ship this will minim minimalize minimize the actual css that we ship to the browser so let's get this up and running again and we should be all set up i've got a meeting here in a few minutes so i'm gonna have to pause this recording at some point uh oh one thing we need to do is rename this thing to the cjs so same problem we had earlier since this is using the common module.exports common js syntax we need to mark that as cjs run it again hopefully it works cool so it looks good um so if we just go back to the application and refresh we will see maybe this thing loads up just like we expect cool so let's go ahead and get started on the actual um [Music] on the actual index page this is only going to be one page so there's not going to be a ton here but there will be a little bit so let's go down um i created a main tag to wrap all this uh main content in and then i've got an h1 and then watch this i'm gonna add in a bunch of classes uh using emmet here so text.2xl center dot text gray 800 dot md text 3 xl i do this all right i'll type all that right this will be my to-do's cool um sweet let's see if that actually uh yeah that looks right that's cool so emit will allow you to do that little syntax that i did and create an h1 with classes of the different classes that we added um so the next thing i'm going to do is i'm going to go ahead and break out i'm going to create something called a to do form so we're going to go ahead and create that component so inside of source let's create a new directory called not come openness that would be interesting if that was the thing but components all right so we'll have our components directory inside of our components directory we will add our let's make sure we get this right come on to do form dot spelt all right so uh then we will want to add a script tag inside of the parent and then import to do form from and this will go back into components if i none of this is spelled it's spelled right what is wrong with my hands uh then to do form to do form dot spell all right so if we put in like hey here we should see hey show up nice so we've created another smelt component very cool and then we can go ahead and uh just start filling in the basics of this i don't know how many of these tailwind classes y'all want me to just like walk through uh so we'll start with html we'll have a form we will have um a label that is for the to-do and then we'll have an input element why did that not input nope that didn't work at all all right input we'll type it myself type is text this is going to be where we actually take the input uh the name of this is uh to do uh placeholder will be what you gotta do i don't know that seems kind of weird but it'll work and then we'll add some classes to that in a second i think we're going to end up wrapping these two things in a div as well so we'll go ahead and do that all right so without classes um and javascripty stuff that's oh the last thing we need sorry about this is the actual uh button itself so we'll need a button down here and this will be button with a type of submit as you do with your forms i think it's actually submit by default anyway we can specify and then we'll have some classes in here and we'll have our button and this will say submit cool so this should be our basic form it's going to look ugly right now but we can go and style this thing so let's start with our form and we'll actually add our class of my6 and then for this container of the input and or the val not value the label and the input we'll mark mark this as flex and flex column we'll say text small and mb two some margin bottom two so that will give that uh not a whole lot of difference there but a little bit also i think we forgot to actually put our label so our label should be this all right so there uh there that is cool so we've got our flex and flex call text small cool and then all right let's go into our label so our label will have font bold mb2 margin bottom to text gray 800. cool and then we can go and style i guess i can do it down here for our input uh we're going to have a few different things so we'll have appearance none shadow small so this will add a little bit of a shadow to it uh we'll add a border border border gray to hundreds that'll be the border uh color we'll have padding of two and then we'll have a couple of focus things so focus outline none focus border gray 500 and then rounded large which will just kind of round those corners so let's see what we got that's looking pretty good i think that's uh basically what we want for that and then we have our button so on our button we're going to have uh width full so w full shadow again small rounded so we're rounding and adding shadows we'll have a bg blue notice i'm getting some intellisense in here for tail 1 and vs go which is cool we'll have a hover and then uh we're just going to darken that color when we hover so this will be 600 instead of 500 text will be white padding y will be 2 px will be 4. let's see how that looks sweet i think it looks good i i'm sold all right so now we have the actual uh form and the styles but we need to add in the actual functionality so the way this works in felt is we want to just declare a variable for to do this is much easier than react it's so much nicer and then we'll just take that to do value and then we will just bind it to the value property inside of the input and the way we do that is we call bind value and then we say we want to bind it to that to do this sets up two-way binding if we change the input it will change this to do property if we change this to do property it will change the input so much easier than react i can't stress this enough we'll also have a handle submit function in here there's my arrow and i'm just going to say submitting all right so there's my handle submit and the cool thing is we can define this for on submit so we do on colon submit uh equals handle submit but wait there's more svelte magic that we can add we can do a pipe and then we can use the prevent default which if we were to run this ourselves or type this out ourselves we'd have to do e and then e dot prevent default and it's just boilerplate code but you can add this little uh transformer pipe thing i don't even know what you call it enspelt but you can add that and it will handle the prevent default for us it's super sweet trust me it's really great so let's check this out let's go into our console and just see if our submit is working hey it's submitting that's cool now the thing we need to do is actually import data from a store so we want to have a centralized store to store all of our to-do's we can add to that to-do list from the to-do form here and then in our index we'll have a to-do list and we will grab all the to-do's from that list and render them and they will all kind of stay in sync with each other by the use of svelte forms i've got to step away from my computer for a second so i'm going to pause i'll come back and we'll wrap this thing up and i'm back does the light look a little different anyway it's part of doing content creation so i don't know when i added this make-believe space here so let's get rid of that i'm going to move the terminal down a little bit so we can see more of the screen so we're going to create a store inside of svelt so we're going to create a folder we're only going to have one of these but we can still create a folder for this all right we'll create our stores folder and then we'll create our to do store js now stores in svelte are actually one of my very favorite things about svelt because it's so easy to create them so what we do is we import the writable uh thingy from us felt slash store so this is kind of built into spell we have a writable and now we can export a variable called to do's i'd have that be a writable uh that starts out as an empty array so this is defining uh this writable thing called to do's it starts out as an array then we can access this thing in um in different places which is pretty cool so the other thing i want to do is add a couple of functions in here a couple of helper functions so we'll add export add to do and this will be a function that takes then a piece of text and then we have to do a little bit of weird stuff in here because we can't we need to go in and actually update the array and reassign it to to do's so we can do with this writable is called the update function and the update function takes a current value and then what you do at the end is you return the new value so we can say the new to do's equals i will do an array we'll take the existing array which is curve and then we'll add in a new object for this so it'll take in the text property a default completed property of false and then an id of date dot now this is just kind of an easy way for us to create a relatively unique id and then we will return new to-do's so again what we're doing is in this ad to do we're calling the update on this writable thing we pass or we define how we're going to update it by giving this callback function which takes in the current value we spread out the current value add in the new to do and then return that new thing uh the other thing we need to do is handle deletion so we'll do export const delete to do and this will take in an id and then what we'll do is return so to dos.update we'll do the same thing where we have our to-do's and then we can actually do an implicit return in here if you're familiar with uh how these arrow functions work so we're going to do a to-dos.filter and we are going to filter based on if the to-do id does not equal the id that we got there all right so what we're doing here is we do an update just like we did before we get inside of that update we have this callback function that uses implicit return which means since we don't define the brackets this thing is going to be returned implicitly and what we do is we do a filter where we're filtering out basically the to-do that does match that id so we're keeping all the to-do's where the id does not match the one that we're trying to delete if that makes sense and the last thing uh this is a little bit longer but not too bad is we will uh export const toggle to do completed we'll take in that id as well uh and we'll do same kind of thing we'll do an update we'll grab the uh existing to-do's you could call it current or to-do's or whatever you want and i'm going to start with an index of negative one and then i want to go and find uh the id of this um of the i want to go and find the to-do in the array with that id so we can do a regular for loop here i uh starts at 0 less than to do [Music] length i plus plus and then inside of here we say if to do's of i dot id if it's the one that we're looking for so if it matches that incoming id we can set the index to i and then we can kind of short circuit here by running a break this will break out of that loop so it should sign but never well it should be up here why maybe it's never used after that i don't know but uh we'll come back to that in a second so then we'll say uh if the index equals uh or doesn't equal negative one so if we actually found it then we can say to do's at index dot completed is going to be the opposite so we'll do it's gonna toggle so to do is of index dot completed so we're saying take the existing value flip it with the not character and that's going to be the new value and otherwise we return to do so if we did find it meaning that index is not negative 1 we'll go ahead and toggle that thing and then return the to do's hopefully that stuff worked we'll see about that in a second so we have the store now what we want to do is actually import the add to do from that store so we can import this with import add to do and we're going to import this from our stores and our to-do store i don't know why to do store js nope why that's acting weird all right i'm gonna add this import up here so we have our ad to do so we're just gonna call this ad to do inside of the suit cool the inside of the handle submit uh the last thing we'll do is reset that to do text to empty string and then we'll see that update on the screen so let's go and check this out we won't see much but if i add a test and press enter it says submitting so hopefully it did and then it wiped out the text which is what we want now the next step of this is to actually render these inside of the home page so to do that we're going to have to use our store to actually go and get those to do so let's look inside of our index page now we can import uh the to-do's themselves that writeable thing from our stores and then to do store dot js all right so we import those to-do's and then how do we actually use them well it's a writable which means it's gonna uh we can't access them directly per se but mostly we can if this makes sense anyway um inside of spell kit we can iterate through within each loop and we're gonna say uh each to do's uh that are in that to-do so each um each to do that comes from this list of to-do's but to actually access the data of that writable directly we put a dollar sign in front of it so this is going to get us the actual data associated with the to-do's and we will end this with our each i think it looks like that yes and then inside of here what we're going to do is actually have a to do component we'll pass in that individual to do and then we'll say the index equals to do dot id individual one and then we'll wrap that out all right so this is going to say hey you don't actually have a to-do component well let's go ahead and do that and this is just kind of breaking this out for organization we can start with hey and then we can save this let's see oh we need to actually import this thing now so we want to import basically going to be the same thing but instead of to do form we want to import the to do not todd let's just see if that renders so if we i don't know it's refreshed i still have errors now so let's type in something submit and we should see hey and hey and hey cool so that works we at least know that it's rendering these to do's now we need to go and update this to do component so that's what we'll do and i think this will be the last thing that we have to do so to take in inputs inside of this component let's add our script tag you export export export our to-do variable this says that we're basically accepting props in here and then we want to import a couple of functions well i get autocomplete in here if i type in delete to do auto import did it do it yes it did cool so we want to get the delete to do and toggle to do complete cool that came up there too sweet all right so let's get rid of these so we're importing those two functions then we have our export let to do which means we're going to accept a parameter in here and then i think we're good to go with actually displaying this thing so down here see do we have a unused property to do we'll use that in a second so we're going to start with an li and our li is going to have a couple of classes so we'll have bg white we'll have not whiter but white we'll have flex items center so flexbox items center will center the items we'll have a shadow again of small we'll have border we'll have border gray 200 no this notice a lot of this looks familiar rounded large margin y2 my wife is looking at me what's up what are you doing recording a video 10 minutes all right love you all right margin y2 will have uh padding y two and we'll have padding x of four tab that out uh we'll see so background white flex item center shadow i think that looks good uh then we'll have an input and this input is actually going to be our checkbox so we'll have a name of completed we'll have type is check box our checked property will be to do dot completed completed and then on change so when this thing is toggled we can actually call a function so we'll have a function that's going to call our toggle to do completed and pass in to do id now this is kind of cool because we can call that function from our store directly from here all right so that's going to be the on change and then we'll have a couple of classes on here of margin right two form check box and then that may be old i'm not sure if we need that class h5 and then width five as well we'll close out that input cool and then just uh really quickly we will or hopefully quickly we'll have our span and inside of that span we're going to show the to do dot text property all right so that's what that text is going to be and then this will have a few classes as well so this is going to be flex 1 and actually this is going to be a template literal string because we need to do some variable interpolation inside of it so we can use our brackets inside of felt to basically run javascript here now we're running an es6 template literal string so we'll have flex 1 we'll have text gray 800 and now we can have if i do this correctly we can have a conditional class be added so to do dot completed if this thing is completed then we want to add the text line through does that work all right line through through or uh nothing hopefully that hopefully that worked i think this uh this formatting is a little tough to read but what we're saying is we're going to go ahead and add these two classes flex 1 and text gray 800 then we will conditionally add the line through text if the to-do is actually completed so a little bit of fancy syntax in here to be able to do this but it uh it's actually uh pretty cool all right and then the last thing we're going to do is have our button and our button is a type of button not going to be submit we'll have a couple of classes on here we'll have text small we'll have a bg red of 500. we'll have hover we'll just darken it to red 600 have text white py1 px 2 rounded notice this looks a lot like the previous button that we had or a lot of the same classes focus outline none and then we'll have focus shadow shadow outline and then we want our on click in here so when we click this we want to do the same thing we did above where we're going to call the delete to do and pass in the to-do dot id now notice instead of having the function be defined directly and what was that don't want that get our button let's call delete all right uh so we're not calling this function directly we're defining a function that we'll then call delete to do and we do this so that we can pass in that to-do id hopefully that makes sense all right let's see what we got did that actually load do we have an error in here ah it's do dots felt let's see so inside of our let's see is that loading it is not loading all right so inside of our to do this is referencing i'm not sure why it did source with the auto complete uh does that work looks like it does all right so let's create uh test submit it strikethrough yes it works strike back through opposite of strikethrough and then delete cool so test one test two toggle delete cool so it all works so uh anyway i love svelte kit tailwind is also really uh pretty sweet with its classes uh class utility-based classes i enjoy this i want to do more with fell kid every time i use it i'm like oh it's just really really nice with the easy data binding and the forms or excuse me the stores and stuff like that it's really really really really great so let me know what you thought about the video if you'd like to see a follow up where we go more in depth and integrate this with the database and maybe authentication and stuff let me know in the comments below i hope you enjoyed it and thanks for sticking around and i'll catch you next time

Channel: James Q Quick

Views: 5,902

Keywords: sveltekit, svelte, svelte tutorial, sveltekit tutorial, how to get started with sveltekit, web development, javascript, svelte stores, how to set up tailwind with svelte, sveltekit vite, tailwind css, svelte js tutorial, sveltekit crash course, front end, web development tutorial, tailwind css responsive design

Id: YipaPr4Aex8

Length: 31min 55sec (1915 seconds)

Published: Thu Dec 09 2021