Build an Ecommerce Store With SvelteKit 1.0, Stripe API, and Skeleton UI (TypeScript Tutorial)

  Рет қаралды 23,403

Cooper Codes

Cooper Codes

Күн бұрын

Пікірлер: 64
@skeletonlabs
@skeletonlabs Жыл бұрын
Hey Cooper, thanks for the shoutout. The tutorial seems super informative, great stuff!
@CooperCodes
@CooperCodes Жыл бұрын
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!
@deucebigs9860
@deucebigs9860 Жыл бұрын
You explain things as you go way better than I think any other tutorial
@Allformyequine
@Allformyequine Жыл бұрын
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!!
@CooperCodes
@CooperCodes Жыл бұрын
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!
@Allformyequine
@Allformyequine Жыл бұрын
@@CooperCodes I will be waiting thank you !!
@tedspens
@tedspens Жыл бұрын
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!
@Loui3Hunna
@Loui3Hunna Жыл бұрын
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 🔥🔥
@paulthomas1052
@paulthomas1052 Жыл бұрын
Thanks for another great tutorial - Skeleton looks great - I'll have a good look at it. Have a great week !
@CooperCodes
@CooperCodes Жыл бұрын
sveltekit has a bunch of great options with UI frameworks, its honestly surprising! thanks for watching :)
@meka4996
@meka4996 Жыл бұрын
Wow. This is amazing. I would like to see/buy a more complete course on Svelte + Tailwind + Skeleton + TS and more! Thanks!
@lyaeusv3828
@lyaeusv3828 Жыл бұрын
this tutorial was so easy to follow that i practices following every step while commuting on the train truly a blessing
@CooperCodes
@CooperCodes Жыл бұрын
Sounds like a fun trip! Thanks so much for watching and commenting here :)
@stylrart
@stylrart Жыл бұрын
I love the way you teach - one of the best, straight forward and focused explainations. Great job. Keep on going!
@CooperCodes
@CooperCodes Жыл бұрын
Thank you so much Michael! Comments like this genuinely inspire me so thank you for the support.
@rekaiadraoui4060
@rekaiadraoui4060 11 ай бұрын
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
@VishalSharma-x7m
@VishalSharma-x7m 5 ай бұрын
very informative, thank you
@onyilimba
@onyilimba Жыл бұрын
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 }
@dimitarnikolov2631
@dimitarnikolov2631 Жыл бұрын
You're literally saving my ass with this video. Thanks man, love you❤️
@CooperCodes
@CooperCodes Жыл бұрын
Thanks so much for watching Dimitar :) appreciate the comment
@jaizon
@jaizon Жыл бұрын
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
@CooperCodes
@CooperCodes Жыл бұрын
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.
@jaizon
@jaizon Жыл бұрын
@@CooperCodes good to know
@jaizon
@jaizon Жыл бұрын
@@CooperCodes I'll thinker with it later on, but still, why use get and subscribe? Is there any advantage to them instead of the $?
@CooperCodes
@CooperCodes Жыл бұрын
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.
@jaizon
@jaizon Жыл бұрын
@@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
@onyilimba
@onyilimba Жыл бұрын
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?
@gm9953
@gm9953 Жыл бұрын
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.
@thvk98
@thvk98 11 ай бұрын
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?
@Ansh77K
@Ansh77K 11 ай бұрын
I think that setting is in stripe end ,
@hicoop
@hicoop Жыл бұрын
Hey Cooper. Love the videos - Cooper
@CooperCodes
@CooperCodes Жыл бұрын
Yo Cooper what is up! Glad you find the videos enjoyable :) you can be Cooper Codes 2 ahahaha
@Jake-bh1hm
@Jake-bh1hm 3 ай бұрын
This is great, can you make a Svelte Native ... where we can make native IOS and android apps with svelte .. plzzzzzzzz
@jaizon
@jaizon Жыл бұрын
What's the benefit in using the get and subscribe methods in the card component instead of the $?
@MerkieAE
@MerkieAE Жыл бұрын
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.
@jaizon
@jaizon Жыл бұрын
@@MerkieAE same thing here, also, way cleaner.
@douglasmyerslimited301
@douglasmyerslimited301 Жыл бұрын
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
@jaizon
@jaizon Жыл бұрын
@@douglasmyerslimited301 but you don't need it. There's no reason to use get and subscribe afaik
@jaizon
@jaizon Жыл бұрын
it is just more code for no reason, unless I'm missing something.
@Manish___Choudhary
@Manish___Choudhary Жыл бұрын
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
@CooperCodes
@CooperCodes Жыл бұрын
You 100% can hah, a dumb oversight from myself there to be honest 😂 thank you for mentioning this. Glad you enjoyed the tutorial
@SinisterSpatula
@SinisterSpatula 8 ай бұрын
Great tutorial! I only wish you could go a bit slower and 'explain like I'm 5' a bit more.
@auguststas7770
@auguststas7770 Жыл бұрын
can you deploy this to vercel or netlify?
@PavelStianko
@PavelStianko Жыл бұрын
Awesome tutorial! Any idea how to keep the store if you reload the page as well? Thank you for help
@CooperCodes
@CooperCodes Жыл бұрын
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!
@PavelStianko
@PavelStianko Жыл бұрын
@@CooperCodes Perfect! Thank you
@diegoavendanohernandez9908
@diegoavendanohernandez9908 Жыл бұрын
great video thanks a lot it was very helpful
@CooperCodes
@CooperCodes Жыл бұрын
glad it was helpful, thank you for watching :)
@cybermanaudiobooks3231
@cybermanaudiobooks3231 Жыл бұрын
Great video. Thanks!!
@CooperCodes
@CooperCodes Жыл бұрын
You are very welcome! Thanks for watching
@Allformyequine
@Allformyequine Жыл бұрын
Curious why you didn't make a 'stores' directory?
@CooperCodes
@CooperCodes Жыл бұрын
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.
@Allformyequine
@Allformyequine Жыл бұрын
@@CooperCodes For sure; just wanted to make sure nothing else changed.... again LOL ! Great thanks!
@cv3787
@cv3787 Ай бұрын
🔥
@Victor-wh9bs
@Victor-wh9bs Жыл бұрын
Superr
@CooperCodes
@CooperCodes Жыл бұрын
thanks for your support! :)
@turtleidiot3324
@turtleidiot3324 Жыл бұрын
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
@CooperCodes
@CooperCodes Жыл бұрын
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.
Svelte 5's Secret Weapon: Classes + Context
18:14
Huntabyte
Рет қаралды 20 М.
Electric Flying Bird with Hanging Wire Automatic for Ceiling Parrot
00:15
Как подписать? 😂 #shorts
00:10
Денис Кукояка
Рет қаралды 5 МЛН
I built a $5 chat app with Pocketbase & Svelte. Will it scale?
13:34
Why aren't you using Fastify? Or Koa? Or NestJS?
9:58
Maximilian Schwarzmüller
Рет қаралды 50 М.
No, Einstein Didn’t Solve the Biggest Problem in Physics
8:04
Sabine Hossenfelder
Рет қаралды 262 М.
Learn How SvelteKit Works
1:06:55
Joy of Code
Рет қаралды 17 М.
Stop using Zapier, Make, n8n
25:33
Adam Skjervold
Рет қаралды 22 М.
SvelteKit + PocketBase Integration: User Login and Registration
20:03
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,5 МЛН
SvelteKit and Supabase Deep Dive
51:23
Ben Davis
Рет қаралды 19 М.
Make Your Own Svelte Component Library
35:16
Joy of Code
Рет қаралды 19 М.