Building a Subscription Based SaaS with my Favorite Tech Stack (Next.js, Stripe, Convex, Clerk)

[@FlorinPop]

Cody is my favorite youtuber! I hope to be like Cody when I grow up!

[@acasareto]

is it efficient to upload the images right away and not waiting for the user to hit the submit form? shouldn't you show previews first?

[@WebDevCody]

yes that is an approach as well, that would prevent storing the image on my backend unless they actually submit

[@codinginflow]

A 4-hour tutorial by Cody 🤯

[@WebDevCody]

trying to get on your level

[@bigbrain720]

you both are Legends 🙌🏿

[@EdwardOrnelas]

Cody you're going all the way this year man! I can tell by your Thumbnails and Tutorials. This will be your year 🔥

[@krishnaprasath1589]

Super impressed with how you built this with [Next.js, Stripe, Convex, Clerk]. Would be cool to see another project in this style!

[@vukrosic]

Thank you for your sacrifice of figuring out how to implement stripe + convex so don't have to.

[@Vicseverin]

Great Video! Can you please do one for simple stripe one time payments with the new nextjs app router ?

[@robwatson826]

This has been a great watch! I feel like I've been pair programming with a mate all day, just on different projects 🤣

[@WebDevCody]

glad to hear that, that's the vibe I'm going for when I do tutorials

[@joker-wr8pt]

Man May Allah bless you please accpet my thank you for teaching us what really matter, what actual industry uses thanks

[@oliversmit1255]

I feel like Ive been going through the same (e)motions with react fatigue but watching how effective you are with this stack is refreshing - thanks Cody!

[@insensibility]

This long form of content is superb. Keep going!

[@personal1872]

i am confused between supabase and convex, what would you prefer ?

[@ademolaadewole1288]

hi codey, great job need a little help i use yarn instaed of npm after addin the stripe:listen and trigger to my package.json when i run yarn run stripe:listen, it throws an error. 'stripe not recongnized as blah blah blah...' what could be the problem. i cant get the stripe webhook secret

[@PhillipLippi]

that's SICK MAN! I really love your job and I'll definitely watch this entire video. God bless you!

[@WebDevCody]

Thanks man

[@flexdash]

Banger thumbnail as always. Ill be waiting for convex to go open source before I get addicted to their typesafe api (gotta give credit - it's pretty nice).

[@siddharthram6604]

Replied to every single comment. Damn. You rock.

[@LjupcheVasilev]

Such a simple idea but very useful! Just starting on this but already getting tons of ideas how to use Convex for my projects

[@gautampatoliya6872]

You need to learn UI/UX a lot, good idea to be honest but not you application 👍🏻

[@asliddinbozorov2847]

How you'll come to such ideas ?

[@mystupidbrain5299]

Almost 4 hour of video of amazing content. You are killing it.

[@armaandhanji7151]

Cody you're the best. Thanks for the great content. So since convex can handle the real time features for us, does this mean we can host this on a serverless platform like Vercel without problens? (Since handling web sockets purely in Next leads to problems when hosting on Vercel but this time we're outsourcing that job to convex)

[@WebDevCody]

yes, you can host your UI on vercel and connect it to the convex backend.

[@armaandhanji7151]

@@WebDevCody Sweet. You've convinced me to give Convex a try! Thanks.

[@summerofoz1]

Also, again you go so fast on refactoring and code clean up with out much explanation that it will be hard for a lot of people to follow

[@WebDevCody]

Sorry, I’ll try to slow down

[@suarezlifestyle]

Is convex able to do geo queries? Like nearest point, bounding box, etc? Cause that's a must for many projects

[@Charizm0]

not to mention the same concept can be carried over to a social media tool that one might wanna build. Suppose you wanna check which first page of an Instagram carousel would perform better and you let your community decide

[@erikslorenz]

I've been using Clerk lately due to Auth0 making the sign in with Microsoft require a way higher plan which is annoying but Clerk treats it like any other oauth.

[@mdsalahuddin2841]

how can we sync clerk data to convex? and keep them persistence on a custom user form ?

[@WebDevCody]

Webhooks

[@siosaiafonua9286]

Can you use Convex without Typescript?

[@WebDevCody]

I think so, they have a JavaScript library I believe

[@d123-o8j]

What is the syntax theme you use for highlighting your typescript?

[@pajeetsingh]

Convex? No one use Apache or ngnix? Of custom server?😊

[@kisaki345]

4 hour video , Might create a next JS app just to learn how to use convex

[@RemotHuman]

I think you should include the title along with the thumbnail, since that goes along with it

[@bro-watch]

your content, my sir, is absolutly amazing

[@AnthonyChablov]

Damnn Cody thank you for this some solid content!!!!

[@Omar-vi1vu]

More fully built projects tutorial like this pls. thanks for the educational content!

[@abdikadirQulle]

The first time i see 3hr vedio on your youtube, lest'go cody

[@varunreddy4779]

make a video on what are effective some ways to discover new saas ideas

[@zainwasem]

First Time on this channel. love it thanks.

[@thomascarter4248]

Can you do a stripe connect integration tutorial?

[@gdissleeping5719]

i love all ur vids it make it make me understand concept better

[@patolorde]

Great content, i look forward trying this on the weekend. 🙏

[@awaisqureshi9171]

You are amazing teacher,

[@WebDevCody]

Thank you!

[@fl3x11]

KZbin is introducing automatic ab testing with your thumbnails. You can simply upload multiple thumbnails and youtube will chose the best one automatically after a couple thousands impressions (based on CTR and other stats). The app you're building will be pretty much useless when this feature becomes available to everybody (right now only some big youtuber has access to it). Great video still.

[@WebDevCody]

I wouldn't say it's pointless. I've worked with many other creators as we try to build thumbnails, and we often go through 5-6 iterations of thumbnails before we get something decent and we have open discussion about what might work well and what won't work well. KZbin isn't going to give you any feedback on anything; it'll just show you the thumbnail which works best, but it leaves all of the thumbnail designs up to the creator to figure out by themself. Also, youtube seems to take ages to release features.... so I'm won't be hyped on their feature until I get access.

[@fl3x11]

@@WebDevCody thats true, youtube is usually pretty slow at rolling out new features. I also understand the differerences with your product, but I don't see why I would play for it as a content creator. You could make a community post poll asking your audience which thumbnail they would rather click on, which would probably achieve a similar result for free. This is my personnal opinion, i just give it to you as honest feedback. Not trying to discourage you or anything.

[@WebDevCody]

@@fl3x11 I appreciate the feedback! I don’t think I’d actually turn this into a real product, I just wanted something interesting for a KZbin tutorial. If I did turn this into anything I’d maybe just keep it free until I see people found real use for it.

[@fl3x11]

@WebDevCody I think there's also ways to make it more appealing and differentiate from the alternatives I mentioned by adding features, etc. Anyway, I love your content. Keep it up!

[@WebDevCody]

@@fl3x11 thanks man, I got a list of features I want to try adding, but we’ll see how it goes

[@PhillipLippi]

Cody, I've one question despite I haven't watched the entire video yet: is it possible to disable that realtime communication ?

[@WebDevCody]

I believe they have approaches to turn off the reactivity or a custom hook which can be used to not have everything update all the time if needed.

[@ninjagaskin]

Out of curiosity - what is the difference between using supabase vs convex? Any trade offs?

[@WebDevCody]

supabase feels like a wrap on top of postgres, convex abstract it's own internal database (they do have plans to go open source soon so people can run convex without needing their service). I find convex a much better developer experience from the very little of supabase I tried out. Supabase has built in auth, but convex is focusing mainly on the database, compute, file storage side of the backend (for auth you'd want a separate service). Convex was built with 100% typescript in mind; I've seen some strange stuff in supabase personally when it comes to typescript.

[@aminefarhat8382]

Hell yeah, i have been waiting for this

[@o_glethorpe]

You are building like a mad man

[@eleah2665]

Very good. Thanks.

[@jasonj8477]

Hi Cody. Following on this tutorial and would like to ask if you are also having issues with deploying to convex when implementing the clerk webhook? I'm getting a 408 timeout from npx convex dev whenever I include the clerk webhook validation part. By chance, did you also encounter this? Thanks!

[@WebDevCody]

Did you put use node at the top of the file? I’d check my repo link against your code

[@jasonj8477]

@@WebDevCody I did but it gave the same result. also tried to copy the code on the repo. have sent a question on discord as well. thanks!

[@yarrichar]

why do you need next if you have convex?

[@WebDevCody]

convex isn't a front end library; you still need either a react spa or next.js for rendering the components. Convex is just a backend as a service (database, file storage, etc)

[@yarrichar]

​@@WebDevCody Yeah true. While server components might not be useful here (due to convex's reactivity) I guess things like next's nested layouts are nice.

[@swissaklo3410]

Hey cody , while uploading the image in create , it is throwing an error upstream image response failed and it is redirecting to the urlwith the imageId and not the actual link in the data storage url address. Any suggestions of what might be wrong ?

[@WebDevCody]

are you able to go to the URL directly in chrome to view the file?

[@swissaklo3410]

yeah on opening the link it is directing me towards the storage id (i.e the k2f...part) but on downloading it in the convex database it is taking me towards the actual image. Also ,is their someplace where i can share my code with you to reach out for more interaction .@@WebDevCody

[@swissaklo3410]

yes i am and i am being directed to the url with the storage id and not the actual address which is available in the download in convex database@@WebDevCody

[@ademolaadewole1288]

yes but with the unique uuid when i hit 'download' in the convex dashboard@@WebDevCody. but i only have access to the storageId in the next app as response. passing storageId to the src dont work. UUID required to render image doesnt come with the response object.

[@WebDevCody]

@@ademolaadewole1288 double check their docs I think they changed how you must download images and must use a storage.getUrl call now

[@leonardogrig]

I don't know if one kind of blurs the other one out, but could you explain when it would be more beneficial to use tRPC (t3 stack) or Convex?

[@WebDevCody]

t3 doesn't have any real time database support. so if you want your UI to update the moment your data on the backend changes, you'll need to implement your own websocket service or mechanism to get those events sent to your user's browser to update their data.

[@leonardogrig]

​@@WebDevCody Nice. Initially, I was skeptical about the dependency created by this BaaS. However, the multitude of features it offers makes it almost impossible to not consider. Compared to tRPC, setting up mutations is simpler, and I feel like the file structure is more intuitive.

[@jazzdestructor]

Hi Cody thanks a lot on stripe based videos especially the subscription model per api use, but i have a use case, which is mostly in learning platforms etc eg udemy, where course owner is someone else and not the website host, i wanted to know how they would distribute the revenue to their teachers (after taking their cut) on purchase of the course by the user. does it happen immediately or does udemy keep a track of sold per day and update teacher's account balance etc. is there something on stripe for this? Wanted your opinion on how you would handle it?

[@WebDevCody]

Stripe has something called stripe connect you should look into. Basically the course owner connects their own stripe account, and you can pay out their share of profits directly to their account

[@jazzdestructor]

@@WebDevCody Thanks mate will check it out 👍

[@joshbleijenberg4000]

This is great

[@borakaraca5480]

Great content as usual!

[@SeibertSwirl]

Good job babe!!

[@WebDevCody]

thank you my beautiful 😘 I hope you feel better soon!

[@krishnaprasath1589]

I'm encountering an error in my Convex application related to image retrieval. The code snippet using the storage ID (kg21098vege77sdjgrbf3gtn4x6ny0hv) is resulting in the following error message: { "code": "InvalidStoragePath", "message": "Invalid storage path: \"kg21098vege77sdjgrbf3gtn4x6ny0hv\" is not a valid UUID string." } I'm unsure why the storage ID is being treated as invalid. I've double-checked that the ID is copied correctly, but I'm still facing this issue.

[@WebDevCody]

See pinned comment and latest commit to my repo

[@krishcsai]

Thanks so much for this tutorial Cody.

[@wesleycoder]

I've been appreciating your content and the way you teach concepts more and more @webdevcody keep it going