Create a Digital Marketplace using Next.js 14, Stripe Connect, Kinde, Prisma and Supabase

[@plsgivemecat]

To whoever facing the problem with the "application/zip" just replace that with "blob" When you upload a zip file, it's possible applciation/zip isn't the exact mime-type of the file uploaded. Meaning, the zip you're trying to upload doesn't have the mime-type you're expecing it to, which is why it kept failing. blob is just a catch-all, will allow any filetype. Thanks for the video, Jan

[@janmarshalcoding]

WOW, thanks! I was already wondering why some people were complaining. Didn't have the time to dive into this issue. So thank you for providing an answer!

[@plsgivemecat]

@@janmarshalcoding Thank you for replying. Everything works smoothly. But I wanted to ask - how can I send the mail to the user's email address instead of harcoding it? I know you have set the BuyProduct route such that anybody can buy a product but I don't like how all files are being sent to the hardcoded email. Can you give a workaround please? In the api/stripe/route.ts file, I added protection saying: if (user && user.email) { const link = session.metadata?.link; console.log('Sending email to:', user.email); // Log the email being sent to // Send the email using the user's email await resend.emails.send({ from: "Tailwind Marketplace ", to: user.email, subject: "Your Product from Tailwind Marketplace is here 🎉", react: ProductEmail({ link: link as string, }), }); but i dont get the email to the user's email address. Please help :(

[@plsgivemecat]

@@janmarshalcodingJan is there a way we can replace the hardcoded email in api/stripe/route.ts? Please make a video on it

[@janmarshalcoding]

@plsgivemecat Hey mate, sorry for not responding, I sadly don't get notifications on comment threads. So I hard-coded the email because if you want to send emails to any email you have to verify your domain with resend. If you have done that, you can send emails to any domain/email you want and don't have to hard-code your email. From what I understand, you used the kinde hook to get the user email. What I would rather do is getting the email from the webhook ( const session = event.data.object;) and then send that to the email of the user who bought the product. tldr: you have to authenticate your domain with resend to send emails to user. You can check Resend logs to see the error...

[@plsgivemecat]

@@janmarshalcoding THANK YOU SO MUCH. It worked! You are amazing

[@KojoJohnson]

Ive never had any one teach the way u teach...u have a pure teaching talent...thats going to take u so far. Thanks

[@janmarshalcoding]

Don't know how I missed this comment. But thank you so much for the kind words!!! 🫶

[@paarsaJam]

Thank you so much, Teacher Jan, for your extremely kind and thoughtful gesture of offering such amazing and valuable content! Your skills and expertise as a developer are truly exceptional and greatly appreciated. 🙏

[@markus_dev_cwb]

You're definitely one of best developers. Amazing teaching Jan, tks to share this Project.

[@risbelsuarezrodriguez9608]

I was looking for this video on KZbin a long time ago but never found it, thanks a lot for your contribution man.

[@mlamintamba]

Jan, you really know what you’re doing… great explanation and easy to understand… can’t wait to get more great tutorials from you… nice one… keep up the good work.

[@swastikpatel234]

Jan is levelling up after each of his project , thank you so much for such hardwork and making this content free for us , too much to learn from this , will be following for sure

[@purnimavats01]

Thanks Jan for the great tutorial, I have a doubt regarding the form. Wouldn't it be better to use react-hook-form instead of all the custom form setup that we have done like the error messages and all ? Or would it create some problem ?

[@chadcn]

Thanks a lot Jan for delivering such an amazing content for free! ❣🙌

[@tushswe]

what, we have a chadcn now smh

[@Omar_Al_Seddik]

chad xD

[@shanejenkinson3723]

I like your content and thanks for giving it us for free. 😄 Now you've learnt Stripe Connect, can you do something similar with Stripe Connect Standard. Express has its downfalls, I don't want to be responsible for chargebacks and refunds due to someone else's incompetence. There is literally 1 other video on KZbin that covers it, but it's 14-hour-long, you explain it better in shorter videos.

[@AlexVezentan]

good job, i believe that u forgot to show the Stripe `npm` comands from the integration part.

[@fvanced]

Great tutorial. I hope we can have someone who can do tutorial like Jan in Vue/Nuxt. His tutorial is multi dimension and with good explanation.

[@sodvm]

Subbed! This is daf. Although I am not sure I plan to use any of the third party integrations, this vid is uber detailed and totally worth the view if you are nextjs curious as I am. Other teachers should take notice.

[@upeshjeengar]

Thanks for the video Jan! You helped me solving a bug in my code

[@chukwuemekamusic663]

guy you saved me a lot of headache... thank you

[@dreamsachiever212]

one word : WOW ! thank you so much

[@digitalsahara6670]

Great video man! do you think you would consider doing smaller videos covering intergration of auth/databases only. ie using supabase and manging kinde auth data in it? basically what you did in this video but in smaller sessions ?

[@justric88]

Awesome tutorial, Jan! Anyone know how I can switch Stripe to live mode? I’ve tried swapping the keys but was getting an error showing that Stripe was setup in test mode. Any help is greatly appreciated!

[@smartdriver2990]

Done. Thanks for the tutorial. I learned a lot from this. Keep it up for the great works

[@janmarshalcoding]

🫶🏻

[@Toomda]

Very nice tutorial and amazing explanations! Thank you, you deserve much more subscribers!

[@GregPeters1]

Takes me a whole month to build a regular 'ol blog 👀. Anyways, great job, Jan. I'm a fun of your work...

[@CodeMuscle00]

Great video! Unfortunately, got to know that Stripe isn't supported in India

[@SylvainGnambode]

Merci beaucoup mon gars Tu es le meilleur

[@marroos5440]

Hello, can you include base64 and server-side image loading with blur placeholder in next project please? I see it on many websites, tried to implement it, but when i create let's say getImages function to get all images from db and perform base64 in there to add blur, app is super slow. Google "tutorials" did not help me much, so i came here, because your implemetations and explanations are excellent and easy to follow. :-) Ty

[@AIMediaMastery]

You are the best !!

[@hbela1000]

Great tutorial.Danke.

[@llewellynhanekom785]

Thanks so much for this amazing video, great work!

[@yantech.4249]

Amazing project Sir. big thanks

[@leodang00]

Thank you! I vote "Patreon Clone" using Nextjs + Lemonsqueezy payment + Authjs + Postgres Neon for the next video.

[@roninspect4357]

Please make a mini project with Supabase/ssr auth!!!

[@swarnabhamajumder9561]

Can a beginner in next js watch this course sir? I was actually just planning to start next js so that why either way loved the demo of the project loved the effort you put on.

[@ilan117]

Hi Jan 👌 I just noticed. There is no way to the update product details nor deleting the product. Am I missing something ?

[@Amankhan-cl1dq]

Hello Jan, your tutorial was amazing but I have one question- How can I send mail to the user who has logged in. I guess in your video you have not covered this part. I tried getting the user from the kindeserversession and passing the email to the 'to' of resend function but that didn't work. Please tell me how to solve it.

[@niteshprajapat7918]

amazing as always 🔥❤💪

[@sovannborithyun5205]

Thanks so much for this amazing video.

[@BioDevOP]

Thank you for the great video I have one error I deploy the website and I keep getting error 500 api/auth/creation Any idea?

[@TheNaive]

At 6.20.00 you mentioned prisma db push will erase all current entries How does this suitable in production. Can you give details in that environment

[@palakornvoramongkol9230]

thanks for creating this project.

[@edemar-q9x]

Hi Jan! Congrats on your work and thank you for sharing it! I have a question technical question: is there any particular reason why Kinde authentication is preferable to Supabase's authentication? (besides being the video sponsor)

[@janmarshalcoding]

Hey, what's up I’ve answered this question a few times, but here’s my take: First off, yes, Kinde is the sponsor of this video. However, even if they weren’t, I would still never use Supabase Auth. Reasons for that: 1. I find the implementation to be more than just buggy. The SSR package needs to be rebuilt, in my opinion, because it works as expected only about half the time. 2. Supabase Auth is very basic and doesn’t offer any user management features. 3. You have to build the entire sign-in and registration forms yourself. You might think it’s easy, and it is at a basic level, but eventually, you’ll need to prevent your forms from being tampered with. At that point, it’s like starting from scratch again.

[@simothedeveloper]

Great video!! Do you know if Stripe Connect has more fees than just Stripe Checkout?

[@nogafouz2174]

I apologize for the inconvenience, but I am encountering an issue with the Stripe webhook. Everything seems to be working fine except for the stripeConnectedLinked which remains false, even though I have completed the Connect setup and have been redirected to return/[id]. However, when I attempt to sell a product, I am unable to proceed and am redirected to create the Connect link again. Upon checking the stripeConnectedLinked status, I found it to be false

[@simothedeveloper]

ehi man I have the same problem here. Are you also getting 302 or 308 status code error in the stripe CLI? I found that the webhook is not reaching the route.ts file at /stripe/connect, have you found a solution?

[@ikbo]

why don't you use shadcn's navbar component instead of coding it from scratch?

[@ilan117]

Hi Jan ❤ Just wanted to prompt that as soon as you integrate the SSR Plugin into the Layout I am getting a warning in the console saying …… “Warning: Only plain objects can be passed to Client Components from Server Components. URL objects are not supported. ” … do you have any idea how to fix it ?

[@shahzazaib]

Seems interesting ❤

[@scorpion32]

I love it👌

[@Isticsek]

Really great job Jan, as always! Thank you for your great effort! #teamactually :D

[@adityaSwamii]

great work

[@mohammadabbas1623]

Ur a masterpiece 😄

[@mohammadabbas1623]

Brother there is a freelancing project that im doing with next.js its king of Trello site task management but in that i need to hand pdf uploads as well with edit options to pdf, which approach i should follow to handle and upload a pdf to S3 and for editing it any library, or any good vid if u can recommend tutorial

[@MiriamL-g3w]

Someone knows how to do in the case you want the charge the user, hold the money and payout the seller after a certain period of time?

[@simothedeveloper]

I wanted to do the same, have you found the way to do this?

[@iuashrafi]

thank you !

[@JakePeraltaaa99]

Can a beginner with intermediate knowledge of html css and js and little knowledge of react and next go for it? Should i start this? I'm hoping for a project based learning

[@nassergmr1374]

so u did it?

[@federicofanini]

What VS Code theme are you using? Great video, best on yt

[@janmarshalcoding]

Thanks, Aura theme

[@thisisCloaked]

Can we sell pdf, videos rather than pictures?

[@404-not-found-service]

wow , thanks

[@nogafouz2174]

Thanks so much for this project, but I have a problem. I uploaded three images, but I only see the last one. However, in the uploadthing I see three images.

[@janmarshalcoding]

Then there some problem with your array. Please check github and see if you have the same code

[@nogafouz2174]

@@janmarshalcoding i found the solution where i should spread the array of image sfirst like that : setImages((prevImages) => [...(prevImages || []) , ...res.map((item) => item.url)]);

[@zawayavision]

hi, I'm looking for a script for Marketplace like Etsy? THANKS

[@hydraagod]

Hi I get this error when i try to run the flow of buying a product Error: Can only apply an application_fee_amount when the PaymentIntent is attempting a direct payment (using an OAuth key or Stripe-Account header) or destination payment (using `transfer_data[destination]`). How to solve this?

[@Ianthecreat0r]

In the next project, please show us how to change the font off aplication, using google fonts or something like that.

[@PlasmaHarsh]

The font is set in the root layout.tsx. Just import whichever font you like, Google fonts are available by default.

[@Ianthecreat0r]

@@PlasmaHarsh is just alter the font on layout? GoogleFonts is istalled by default?

[@mDHARYL]

Dude you can make it in your own. 😊

[@hubesh716]

can you please make one with react native

[@passionstudio3856]

thanks bro

[@Love-id8gu]

WOW!

[@mainamburu8036]

You got me at stripe connect am locked in

[@swag-nocopyrightmusic8981]

Let's create Skool clone using Stripe Connect too

[@SG07]

Why people are not using Next auth?

[@sovannborithyun5205]

After trying to upload the zip file, seem no file selected and not sure what causes the issue. I am sure follow and also compare with your source code.

[@Southernview3k]

Have the same zip problem

[@janmarshalcoding]

So when you select a ZIP file and click on upload, do you see it in the uploadthing dashboard? I need a bit more info to investigate... When I just tried to copy my code on GitHub and upload a zip file everything worked, so not sure why it does not work for you...

[@sovannborithyun5205]

@@janmarshalcoding After selected the file, the DropZone… just still be the same and keep mentioning “Please Select the file…”

[@janmarshalcoding]

Things you should test out: 1: Go to my GitHub and copy pate the following files: uploadthing/core, uploadthing/route, lib/uploadthing and the sellform. 2. Now restart your dev server. 3. Try again. 4. If this does not work, delete the auth function in the middleware (use a dummy auth function like in the docs) and try to upload in incognito. The code itself does not have any errors since I just tried it and uploadthing zip files works. Just make sure it's a zip file and not a folder...

[@plsgivemecat]

@@janmarshalcoding i am facing the same issue. i double checked on my uploadthing dashboard and there was no file under the "productFileUpload" route. i made sure the code is aligned with your repo and also made sure i was selecting a zip file not a normal folder. this is super weird. @sovannborithyun5205 @TheGospelboard did you get a solution to this? please help me out

[@ahmedabdelmeguid1131]

please where the link of the application after the deployment

[@Furrukhish]

I can't upload zip file when uploading product it always throw error that upload zip file

[@janmarshalcoding]

Whats the error message?

[@anasnadkar]

you can just replace this "application/zip" with "blob" in your in "app/api/uploadthing/core.ts"

[@Nzemia]

​@@anasnadkar Thanks man. I was stuck here for a day trying to figure out where i went wrong!

[@mihirpatil_]

Go through the Setup file uploads

[@mihirpatil_]

later Settings: 3:33:58

[@mihirpatil_]

also check for the ZIP upload section in the video

[@asustufa1515]

what vscode theme?

[@gauravjain8807]

The stripe webhooks won't get fired in Production server, please resolve it

[@janmarshalcoding]

They do, watch the vid lol

[@gauravjain8807]

@@janmarshalcoding yeah sorry, they were in end 😅, damn you marshal..., btw it was a great a video, learned alot 🫂, I've also made a project following this tutorial, wanna see it?

[@amt.7rambo670]

1:58:21

[@arupde6320]

github ??? where ???

[@yousefsaeed732]

Is there anything need credit card in this tutorial please ? 🥺

[@janmarshalcoding]

Nope no cc needed

[@evansensteen7000]

Can I use mongodb for database

[@janmarshalcoding]

Sure

[@evansensteen7000]

​@@janmarshalcoding Error validating field `id` in model `Product`: MongoDB model IDs must have an @map("_id") annotation.

[@evansensteen7000]

@@janmarshalcoding how do you manage to use stripe cli in vscode for webhooks

[@arbabkamal3629]

Can't create user

[@lotfibendiaf7004]

Surgical Goblin [Clash Royal]

[@SeanScotts]

My primary usage of this account is going around on KZbin and trying out in-depth tutorials from KZbinrs, be warned Jan Marshal, I've just started out your tutorial, will give my review before end of Sunday

[@omerayhan1704]

Where's your review?

[@Gamingbeluga34]

Where is the review?

[@mountINEER]

Where's review

[@omerayhan1704]

bro thinks he's from government 🤣

[@zainn7336]

bruh create real time chat app

[@blackhatdll]

stop copying other projects and share as it's yours. Okey

[@janmarshalcoding]

what do you mean lol

[@blackhatdll]

@@janmarshalcoding code with antonio, josh tried coding you know what I really mean

[@janmarshalcoding]

@@blackhatdll nope, I don't know what you really mean... the design from this project was taken from tailwind awesome...

[@blackhatdll]

@@janmarshalcoding hahahaha oky oky i'm sure you don't know

[@janmarshalcoding]

@user-gn2ev1nu1p I really don't care, think what you want... Enjoy your day ✌🏻

[@vetirs]

dude no one care to see u face talking please show us the demo

[@ubermensch_1111]

That's rude

[@sysshadowgaming]

@janmarshalcoding How to fix the Invalid `prisma.product.findMany()` invocation error

[@buraxta_]

[@pachitopacho158]

@plsgivemecat

[@egretfx]

thank you sir

[@datastories8939]

what is free alternative of kinde

[@amt.7rambo670]

2:16:05