Practical Svelte 5 - Shopping Cart

[@readywhen]

I started web dev with svelte (after no code and vanilla). I loved it. Now I've been working with react for a while. Now I love svelte even more!

[@andrewthomas3947]

Same journey. But doesn't tried react.

[@codingwithjamal]

i love svelte. it feels like normal html but with super powers

[@Pigeon-envelope]

Svelte is heavenly. React is a nightmare

[@MadeInJack]

Can't wait for more Svelte 5 videos 😄 Maybe a full series with best practices to build, organize and manage large codebases?

[@Huntabyte]

Noted!

[@smallSkrrtBigDreams]

This was so easy to understand, what a nice introduction to the new Svelte features! And having the examples be part of a larger context and not isolation makes it much easier to follow along. I've watched a lot of your videos, you are literally the reason I decided to learn Svelte, so thanks a bunch for all your work.

[@Huntabyte]

Thanks for the kind words! Happy to hear that this was easy to understand!

[@JoyofCodeDev]

let's go 👏

[@MikeHTMLAllTheThings]

I actually love the idea of having the basic layout structure in place and then allowing others to try it however they like or follow along. Cool way to handle a tutorial.

[@Huntabyte]

I'm glad to hear that! Was very curious how it would be received, so far, so good!

[@MadeInJack]

+1

[@ridass.7137]

17:43 I think if there is a separate remove button, the decrease button should always be disabled and not remove the item when the current item quantity is 1. This would also prevent accidental removal of the item if, for example, you have added too many and then spam the decrease button to reduce the quantity, failing to stop at 1.

[@Huntabyte]

Yeah I think I agree with you there from a UX perspective in retrospect!

[@devbyveritech]

⁠​⁠@@Huntabyteremoving the item from cart when it’s less than 1 is very okay. Where I think the decrement button should be disabled is in the checkout page. But in the case of cart, it’s okay to remove the product

[@TheHermitHacker]

This is crazy good. This opened my eyes to Svelte 5's runes. Thank you. (Yes, make more videos, please)

[@jacobgoldenart]

Thanks! Great to see your thought process as you approach these various UI tasks. Great pace too, not too fast like other tutorials where I constantly have to pause the video. : )

[@pasokoner]

13:45 This technique alone makes the video worth watching

[@roycrippen9617]

Definitely. This week I started transitioning the codebase at work to svelte5 and I ran into this exact issue. It took me like 30 minutes to figure out how to fix it. I wish I had seen this video before I stumbled on that problem.

[@bloozy85]

I like svelte, but js frameworks time running out soon, it's obvious. Too much stuff going on and actually all of them seem to go into same direction and do the same stuff under the hood with different syntax and compilers. It's so nice to work with web components and JSDoc, and everything runs out of the box and natively. Just push your build on your webspace ... boom! No need for fancy serverless build & deploy services. What i actually really like tho, is a wordpress backend with a vanilla stack frontend. It so dead simple and works for most small and mid sized businesses.

[@silvankuebler]

not really a technique but just a widely used convention also e.g. very loved in the python communtiy

[@benjaminjameswaller]

Love this tutorial on Svelte 5. Please do more to expand on these new concepts and in this shopping cart ui. Also I noticed you might want to cover the situation where when you added the same item more than once, the cart got a duplicate entry = it didn't just add one item with a count of two it added the same item on as separate entry.

[@codewithguillaume]

Ahhhhh feels good to see you again Hunter !

[@RicardoCamisa]

Svelte 5 is crazy good!

[@Huntabyte]

Right?! I feel this weird excitement when writing it and it just feels so natural already!

[@VeriousSmithIII]

I'm just getting into building Javascript Apps because of Svelte. Been a WordPress dev most of my professional life. This video was helpful. Thanks for sharing. Looking forward to more!

[@Huntabyte]

Glad it was helpful! More on the way!

[@LarcenIII]

Love your videos Huntadev!

[@BhideSvelte]

Two Ways To Mutate 1. only owner can mutate the array, obj in Main component 2. if childs want to mutate they should use bindable ..new concept.. or else just pass the function to child component ...every main logic stays in Main Component and you can mutate good one Thankss

[@gageracer]

Not only I liked the video, this could be a great practive/quiz website "make this page reactive with svelte/solid/react". I love programming as if it's a puzzle.

[@alittlegreyhair1104]

A really useful video, thank you. In the first part I found all that tailwind markup confusing the picture where the SV-5 action was happening. 'Looking forward to learning more from you.

[@Huntabyte]

You're welcome, and thanks for the feedback! I forgot to zoom in a bit on the code which caused more of the clutter to be in the way. In the next installment I've cleaned it up a bit and made the code a big bigger.

[@alittlegreyhair1104]

@@Huntabyte Look forward to it :)

[@supercurioTube]

That was awesome. I selected Svelte 5 for my next project, for which I haven't started to write the UI yet and seeing your concrete implementation was super informative.

[@Huntabyte]

That's awesome to hear! I have some more videos queued up on additional UI and state patterns as well!

[@francoisbouchet9907]

Iam always struggling to understand documentations, so practical is the only way I manage to learn code..., this video is very helpful to onboard Svelte5 and runes subtleties... don't hesitate to publish some more! thanks! -- NB: I particularly like that you let the usual "errors / mistakes" happening on the go.... many youtubers edit them out, but they then lack an opportunity to explain what can go wrong and make us rethink our bad habits.

[@Huntabyte]

I'm glad to hear that you found this useful! Will continue to publish more!

[@emyralunthomas]

Learned a ton about Svelte 5 from this video - thank you! Would love to see a follow up showing how to filter products by category

[@Huntabyte]

Glad to hear that!

[@adriablancafort]

Amazing video as always! I really love your content. I've noticed there isn't a good video explaining all the i18n options for sveltekit available and comparing them. It could be a good idea for a future video and I'm sure that your audience would be very interested to see it.

[@Huntabyte]

Noted!

[@aawnu]

Great video that perfectly introduces the new runes and workarounds. Learned a lot, thanks!

[@Huntabyte]

I'm glad to hear that, thanks for the feedback!

[@MM-uf6kt]

This would be a great series!

[@henoknigatu7121]

Hi , I really enjoy your SvelteKit tutorials! I was wondering if you could create a more comprehensive tutorial that covers most of SvelteKit's features in an integrated manner. Many tutorials out there are quite discrete and don't show how to use various features together. It would be incredibly helpful to see a full-fledged example with best practices and advice on how to structure a project. Thanks for considering this, and keep up the great work!

[@chrismingay6005]

I can't say the Svelte 5 features have really impressed me and I didn't get why I would need $effect. However your demo of it is fantastic, I'll have plenty of uses for it.

[@pjc825]

Would love you to show the best approach to handle state in a Svelte5/SvelteKit multi user application so that state is completely isolated for each user since Stores alone are not the proper approach when using SvelteKit, using Context API or whatever is the best way to do this. No videos seem to show the best way to do this (you did touch on it in an earlier video) but I would like to see it in more detail with very clear explanations of why to do it that way. Your videos a really great and you have the ability to clearly and succinctly explain things 💯😃👍

[@Huntabyte]

Thanks for the kind words! That’s absolutely something I can do!

[@pfcycletechnology7064]

What a great idea. I struggle with that in sveltekit too. If there's someone who could/should get the credit for creating such an informative sveltekit tutorial, it should be here on this channel.

[@pfcycletechnology7064]

@@Huntabyte Just a suggestion. Moving this shopping cart into a sveltekit project and add user authentication so each cart belongs to a user. That would be informative. So leave this project as is, with svelte5 and start another project in sveltekit with shopping cart and user authentication. Doable? ;)

[@d4yno]

Absolutetly awesome in depth tutorial.

[@Huntabyte]

Thanks for the kind words!

[@johnwu8916]

This was super helpful. I would love to see a tutorial on how to apply some OOP concepts leveraging runes, like how best to encapsulate all the methods and properties inside the model and be able to import it to support universal reactivity. That might be helpful for supporting larger code bases or complex web apps. Thanks! (PS: I am new to front-end dev, and mostly my experience is writing server and other backend codes, so if there is another path to manage complex relationships between objects in svelte/javascript/typescript, I am all ears 😃)

[@Huntabyte]

A video on just that will be uploaded either this weekend or early next week!

[@MrWesopl]

Exactly. As an old backend dev, I love to keep business logic at one place. Will look up the hopefully uploaded video.

[@joshua.hintze]

Nice video. I would love to know of other good cases to use an effect. Thanks!

[@Huntabyte]

You got it!

[@Nukhtarov]

I liked it. Would love to see more like this. Thank you Hunter

[@Huntabyte]

More to come!

[@jmoo4457]

I think this is a great overview of Svelte 5 runes, but in a real practical application, i would try to divide up the shopping cart logic (add, remove, etc.) into its own so that the logic does not live at UI component levels. Would be cool if you can cover a video on abstracting state and its logic in Svelte something like React's custom hooks so that the logic could be used like `const { add, remove, modify } = $cart` abstracted into its own module.

[@Huntabyte]

Yeah I already have one queued that covers just that 😁

[@Terr590]

Love the practical approach in this video, thanks!

[@Huntabyte]

Glad to hear it! These videos are much more enjoyable to make!

[@hmiiro]

Great Stuff @Hunterbyte as always. any update on new episodes you had in the queue?

[@zsmain]

This was very informative, looking forward for similar videos.

[@Huntabyte]

Awesome to hear! Looking forward to making them!

[@tiljaray]

I can't wait to see more svelte 5 videos

[@Loui3Hunna]

Great as always! Would very much like to see more Svelte 5 API examples :)

[@Huntabyte]

More to come!

[@AB-gx5zj]

Nice video (more on S5 please)!

[@Huntabyte]

More to come!

[@memestagestartup]

been waiting for your new vids to drop...🥳🥳

[@Huntabyte]

Me too! Took me a while to realize these videos won’t great themselves! 😂

[@St0rMsk]

Don't know man, the more I work with svelte, the I like Vue

[@AndreaBarghigiani]

Great video man! Please keep up with real use cases video as this one. Also, I love your livestreams as well but since them are just a your stream of thoughts could I ask if you'll be able to extract the juicy parts from them and make shorter video? Tbh it could just be a cut-and-republish kinda of approach, you don't need to re-record the concept, just share it 😅

[@lemnisk8]

Thank you.... Please make more of such videos...

[@HzClan]

Nice video as usual, can't wait to see the filters in action in the next video!

[@anuragsingh-ts3nb]

@huntabye its great how u explained the concept, was struck in a issue what iff, on scroll i have to load more products how that can be handled if you can provide a snippet of a way to go, as currently the data is loaded from a API endpoint in page.ts load function

[@twentxx]

Thank you so much! 🙏 Your videos has very useful practical knowledges. Love it

[@Huntabyte]

You’re welcome! Glad you like this format!

[@robimalco]

mind blowing expertise

[@Huntabyte]

Thanks Robi!

[@vexkiddy]

Great video Hunter!

[@Add0w]

This is really excellent explanation, thank you.

[@Huntabyte]

This is great feedback! Thank you!

[@KevinMacKenzie61]

Fantastic video. Thanks!

[@Huntabyte]

Thank you, Kevin! Appreciate you being a member for almost 1.5 years now, means a ton!

[@KevinMacKenzie61]

@@Huntabyte While I appreciate you thanking me for being a member, I wish I could actually pay you what you have taught me is worth. While there are other great teachers on KZbin, no one helps me grasp things like you do.

[@АлександрПирогов-б7ф]

great stuff looking forward to seeing more videos on svelte 5

[@Huntabyte]

Glad to hear it! Looking forward to delivering more!

[@devbyveritech]

I love this More of it please

[@ok-alarm]

more videos like this!

[@vinseixas5662]

I'm new to Svelte and looking curiously towards Svelte5. I've been following your guides and videos, plus using the shadcn-svelte you worked on. All of the stuff that comes out of this channel is such high quality.

[@Huntabyte]

Hey I appreciate the kind words, I appreciate it! Svelte and its community has been nothing short of incredible! The only bad thing is once you give it a chance, you'll never want to use something else 😂

[@JacobDuenke]

Hey, just wondering why do you seem to always use “const” for derived variables, but “let” for state variables?

[@imho7992]

They’re not editable and they are read only.

[@JacobDuenke]

@imho I’m familiar with const, just wondering what’s the implications with $derived. The values do change of course, so I would assume you’d need to use let, at least for primitive values. You could get away with const for reference types.

[@Huntabyte]

I use const because _i_ can’t update that value, not that it doesn’t ever update. Whereas with $state I can - just a preference!

[@WLockIV]

Is it just me or is the derived update more intelligent now? I feel like old derived would have triggered an update each time anyway. Thanks for the video!

[@8-P]

I enjoy watching your videos, thanks alot for this :)

[@Huntabyte]

I appreciate the kind words! Happy to do it!

[@saiphaneeshk.h.5482]

Very very new to svelte (just planning to start with it actually). Is there a way to have them globally or something like that instead of going through bind n all? Like how redux is used in react?

[@mikeeomega]

What a great demo of Svelte 5 powers

[@Huntabyte]

Thank you! I’m glad you think so!

[@omargarcia7900]

Can you do a few videos on Keras and TensorFlow, please? :) Great content on your channel from what I've seen so far!

[@BhideSvelte]

It took sooo long...i was waiting...love from India ☺️☺️

[@Huntabyte]

Me too… I just realized these videos won’t create themselves!

[@deepjyotideb1173]

How slow exactly is a reducer? Does using it make it visibly slower?

[@Huntabyte]

It’s many times slower than a loop. Using it in one single place may not create a noticeable difference, but when it’s used many places it can really add up. So for that reason I try to avoid it!

[@herkulano]

Thanks!

[@Huntabyte]

Hey thanks a ton for that! I appreciate it!

[@n3x404]

love it 🥰

[@SaidElnaffar]

Liked and Subscribed for sure.

[@Huntabyte]

Thank you!

[@kson2659]

Thanks mate!

[@bnjmn7779]

Would be interested to see how to connect this to a backend to save the cart of a user.

[@ElGnomistico]

Pleaaaase make more of these

[@nevillebrem]

what extensions makes your +page.svelte files to folders?

[@Huntabyte]

It's not an extension but a VSCode setting! "explorer.fileNesting.patterns". I haven't added these settings to my settings repo just yet, but in the meantime you can search "antfu vscode settings" to find comparable ones.

[@nevillebrem]

@@Huntabyte thanks!

[@xthesly]

Shouldn’t a cart be managed with sveltekit using session and/or db ?

[@Huntabyte]

Of course, but as mentioned in the video, we're focused on the frontend / interactivity rather than the full stack in this video. To integrate it full stack you would just add a few API calls into the mix but the general idea remains the same.

[@oeaoo]

Experts, what Svelte is not the best for? I am not in FE at all.

[@mikejohneviota9293]

Decaprio is programming again

[@nigelnyakudya2262]

We need a rewrite for morden Saas in svelte 5 brother.

[@Huntabyte]

It's coming man! Svelte 5 is still in RC and Bits UI still has some work to do so it's ready to be added into the course as well 😃

[@RicoGarza00]

Svelte 5 is so much more confusing as a beginner.

[@Huntabyte]

If you only have Svelte 4 to compare it against, sure it may seem a bit more daunting, but I promise the complexity curve flattens after you learn the basics, where in Svelte 4 it was basically linear where the more complex the UI the more hacks and complexities required in the code.

[@RicoGarza00]

​@@Huntabyte Good to know, Svelte 4 is where I started so thats probably why it seems overwhelming. I'll be a little more comfortable once its released and I can start working with it. Thanks for all of the amazing videos btw! They've made me feel much more comfortable using Svelte 4

[@greendsnow]

Can't look at it, my eyes hurt. Css please.

[@Huntabyte]

Never

[@joseflinha]

Great video, but why name files for components differently than the name of the component itself? CartItem vs cart-item.svelte please CartItem.svelte

[@Huntabyte]

You should look into the annoying things that can arise with git and OS discrepancies depending on how they handle file name case sensitivity. I use kebab case for that reason, but also because it's what I like to use and what I'm most comfortable with. Feel free to use what suites you best!

[@joseflinha]

@@Huntabyte Yes, there is a Git setting core.ignorecase for that. If you like such a name... 🙂