Build an Ecommerce Store With SvelteKit 1.0, Stripe API, and Skeleton UI (TypeScript Tutorial)
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video I show how to create an Ecommerce store using Sveltekit 1.0, with full Stripe integration to allow for secure checkouts. This is a great project for beginner and intermediate level programmers, and uses a bunch of practical functionality which you can easily apply to any application you want to build with SvelteKit 1.0. The tutorial covers SvelteKit 1.0 API, routing, svelte stores, svelte writable (state management), svelte components, and Skeleton UI with Tailwind CSS. The shopping cart of the tutorial is also a great way to get a first look into how you manage data using svelte/store. This video is also great to understand how you can use TypeScript with SvelteKit 1.0, and add your own custom types.
Project Code: github.com/coopercodes/Svelte...
Business inquiry? Email thecoopercodes@gmail.com
0:00 Project showcase
1:15 Create SvelteKit 1.0 app with Skeleton UI
2:52 Create UI
4:30 Create ProductCard Svelte component
7:00 Dynamically load products to store
11:55 Create cart logic with svelte/store (writable)
22:05 Add cart logic to ProductCard component
26:00 Create Stripe checkout API route
32:28 Setup Stripe API / Create Stripe products
34:35 Create checkout logic with Stripe API call
37:50 Checkout test, thanks for watching! - วิทยาศาสตร์และเทคโนโลยี
Hey Cooper, thanks for the shoutout. The tutorial seems super informative, great stuff!
Thanks for making Skeleton UI! The create-skeleton-app makes all the scaffolding easy, allowing me to get to the main parts of this tutorial showing off sveltekit and the API functionality :). Thanks for commenting and best of luck with the future of Skeleton, looking forward to the 1.0 release!
You explain things as you go way better than I think any other tutorial
Loving this channel already!
If you’re taking suggestions for a follow-up video; It would be really cool to see how you could integrate a CMS with this app!
Thanks again 🔥🔥
Wow. This is amazing. I would like to see/buy a more complete course on Svelte + Tailwind + Skeleton + TS and more! Thanks!
I did it! With your help, of course 😉. My plan is to couple this with a WordPress/WooCommerce backend and sell some of my pens and eventually rule the world, but one thing at a time. Thank you for the straight forward how-to without complicating things just to sound smart. You don't sound smart at all and I for one, appreciate it. I shall reserve a seat for you on the high council after, well... you know... rule the world and stuff. Thank you!
This was so well made, thank you so much, and I checked your channel you have other svelte tuts that i'm def gonna watch, thank you for detailing your explanations you have no idea how useful that is
I love the way you teach - one of the best, straight forward and focused explainations.
Great job. Keep on going!
Thank you so much Michael! Comments like this genuinely inspire me so thank you for the support.
Thanks for another great tutorial - Skeleton looks great - I'll have a good look at it. Have a great week !
sveltekit has a bunch of great options with UI frameworks, its honestly surprising! thanks for watching :)
very informative, thank you
this tutorial was so easy to follow that i practices following every step while commuting on the train truly a blessing
Sounds like a fun trip! Thanks so much for watching and commenting here :)
WOW your way of explaining is FANTASTIC, and I love the comments you add to help 'cement the understanding' !! You have a new subscriber!!! Also, BEST VISUAL demonstration/example of passing the props in and typing them ~ just awesome!! Are you ideas for new content? Keep the SvelteKit content coming!!
SvelteKit content definitely on the way! Thank you so much for the comment :) Working on more full SvelteKit projects like this one so be on the lookout!
@@CooperCodes I will be waiting thank you !!
You're literally saving my ass with this video. Thanks man, love you❤️
Thanks so much for watching Dimitar :) appreciate the comment
I don't appreciate lots of sveltekit tutor, but you are really good. You earned the a like and a sub. The stripe productID you created in stripe and copied to the card item id. Are those required?
Great video. Thanks!!
You are very welcome! Thanks for watching
great video thanks a lot it was very helpful
glad it was helpful, thank you for watching :)
Hey Cooper. Love the videos
- Cooper
Yo Cooper what is up! Glad you find the videos enjoyable :) you can be Cooper Codes 2 ahahaha
if anyone is wondering if it's a must to create product in stripe before and set as id as seen on this tutorial, no. but you need to set price_data and product_data inside the line items. like this items.forEach((item: any) => {
lineItems.push({
price_data: {
currency: 'usd',
unit_amount: item.price,
product_data: {
name: item.title,
description: item.description
}
},
quantity: 1
});
});
the data will look like this
{
price_data: { currency: 'usd', unit_amount: 20, product_data: {name: "T shirt, description: "White T shirt"} },
quantity: 1
}
This is great. Can you also make a tutorial like an extension to this one where you can list what the customer has paid for using what I see being recommended the Payment Intents from Stripe? I want to create a simple subscription service for my community, and I just need to query what a user has paid for.
Edit: I also see there are Stripe Apps where I can login a user to my website. Then get their payment history. With some time, I can figure it out on my own, but the process is smoother with a tutorial like yours.
can you deploy this to vercel or netlify?
🔥
Awesome tutorial! Any idea how to keep the store if you reload the page as well? Thank you for help
For sure! Skeleton UI (The UI library used in this video) has an easy to use local storage shown here www.skeleton.dev/utilities/local-storage-stores . This allows you to create writables that are also maintained in local storage (Which means they will stay after the reload), I am going to be releasing a video on these soon so if you get lost just know its on the way :) Thanks for watching!
@@CooperCodes Perfect! Thank you
This is great, can you make a Svelte Native ... where we can make native IOS and android apps with svelte .. plzzzzzzzz
Good tutorial and explanation ❤️
But one doubt!!!,
When we are updating item in writable , can't we just do this
items[itemPosition].quantity +=1
instead of mapping over complete array
You 100% can hah, a dumb oversight from myself there to be honest 😂 thank you for mentioning this. Glad you enjoyed the tutorial
How i pass this payment to specific owner of the store. Like for food website when user pay then it need to pay to the restaurant bank. How i can do this?
I think that setting is in stripe end ,
What's the benefit in using the get and subscribe methods in the card component instead of the $?
wondering the same thing myself, i think he might’ve goofed it, it still works the way he did it but the $ is arguably more optimal.
@@MerkieAE same thing here, also, way cleaner.
hey explain what you mean, because i thought the same but i think it has to do with the context i.e. with his method can use the cart anywhere else in the site
@@douglasmyerslimited301 but you don't need it. There's no reason to use get and subscribe afaik
it is just more code for no reason, unless I'm missing something.
Great tutorial! I only wish you could go a bit slower and 'explain like I'm 5' a bit more.
Another thing, can't I just pull the items directly from Stripe instead of hard coding it? That way I could build more robust stores faster
You 100% can, I actually made the array format of the products in this video for that exact case. Instead of hard coding the values, you can do a stripe API call to fill up the array with all of the items in your Stripe store. I opted not to do this for the tutorial because of simplicity, but it is 100% doable if you would like to do that instead.
@@CooperCodes good to know
@@CooperCodes I'll thinker with it later on, but still, why use get and subscribe? Is there any advantage to them instead of the $?
My current understanding is that the $ is used when a variable changes. The writable itself will never change, only the value that the get(writable) returns is going to change. If I'm not mistaken, I believe this is why they have the subscribe pattern built in, so you can listen to whenever it does change.
The simple way I've understood it, is that the writable is just an interface to get the value you want. The writable is not the value itself. In order to do things related to the value you have to use the get and subscribe methods. Hopefully that is helpful.
svelte.dev/tutorial/writable-stores , vercel.com/docs/beginner-sveltekit/svelte-stores . I'm looking at these docs here. It is a strange pattern but after some research it seems to be how Svelte stores are managed.
@@CooperCodes Yeah, but the $ is also used to read the value directly from a store, in our case, in the ProductCard.svelte, instead of using "get", which we would have to import first, and the subscribe method, I just used "$:" to read for changes and "$cartItems" to read from the store directly
Curious why you didn't make a 'stores' directory?
You definitely can, I honestly didn't opt for it here as I only had one store and just wanted to simplify that part of the tutorial. If you have multiple store files I would 100% recommend a separate folder, hopefully this helps.
@@CooperCodes For sure; just wanted to make sure nothing else changed.... again LOL ! Great thanks!
27:37 it is a *VERY* bad idea to hard-code api keys and secrets into your code, especially if storing it elsewhere like with version control systems. Always use environment variables to store sensitive keys instead
To keep tutorials simple I generally do the hard coding (Esp with this tut being a long one), my bad if I didn't mention this anywhere throughout the tutorial. I will generally hard code it, and have a spiel about how it isn't a good idea and how you should set up environment variables.
Superr
thanks for your support! :)