Building a Subscription Based SaaS with my Favorite Tech Stack (Next.js, Stripe, Convex, Clerk)
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2024
- This is a full stack tutorial video which includes a real time database (Convex) and authentication (Clerk) for helping youtube content creators get feedback on thumbnails. Both of these services helped sponsor this video, but I enjoy using both of them in my side projects as well because they give me a great developer experience and help me move fast.
Be sure to checkout Convex here: convex.dev/c/wdc
Be sure to checkout Clerk here: dub.sh/A2JQT7h
Link to Code as in video: github.com/webdevcody/thumbna...
00:00 Intro
03:42 Project Setup + Convex
06:16 Clerk Setup
13:02 Create Thumbnails Tests
22:39 Display Thumbnail Tests
29:06 Bring in Shadcn
30:12 Dark Mode Toggle
33:30 Header
40:22 Create Test Page
1:08:01 Thumbnail Page
1:21:35 Vote on Thumbnail
1:42:32 Dashboard Page
1:56:36 Explore Page
2:06:40 Clerk Webhook
2:18:01 Stripe Setup
2:45:24 Check Subscription Status
2:48:06 Comments
3:31:09 Footer
3:32:59 Deploying
3:43:06 Skeleton Loaders
My Courses
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
My Products
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com/
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
![CAMPปลิ้น | EP.77[2/2] "รับทราบ" แก๊งเพื่อนรัก 10 ปี ที่ไปไหนก็มีตำนาน!](http://i.ytimg.com/vi/ifc0ofD51B0/mqdefault.jpg)
A 4-hour tutorial by Cody 🤯
trying to get on your level
you both are Legends 🙌🏿
Cody is my favorite youtuber! I hope to be like Cody when I grow up!
Almost 4 hour of video of amazing content. You are killing it.
This long form of content is superb. Keep going!
Cody you're going all the way this year man! I can tell by your Thumbnails and Tutorials. This will be your year 🔥
Super impressed with how you built this with [Next.js, Stripe, Convex, Clerk]. Would be cool to see another project in this style!
More fully built projects tutorial like this pls. thanks for the educational content!
Such a simple idea but very useful! Just starting on this but already getting tons of ideas how to use Convex for my projects
Great content, i look forward trying this on the weekend. 🙏
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).
Hell yeah, i have been waiting for this
that's SICK MAN! I really love your job and I'll definitely watch this entire video. God bless you!
Thanks man
your content, my sir, is absolutly amazing
This has been a great watch! I feel like I've been pair programming with a mate all day, just on different projects 🤣
glad to hear that, that's the vibe I'm going for when I do tutorials
Damnn Cody thank you for this some solid content!!!!
The first time i see 3hr vedio on your youtube, lest'go cody
Great content as usual!
First Time on this channel.
love it thanks.
i love all ur vids it make it make me understand concept better
You are building like a mad man
Very good. Thanks.
You are amazing teacher,
Thank you!
This is great
Thank you for your sacrifice of figuring out how to implement stripe + convex so don't have to.
Good job babe!!
thank you my beautiful 😘 I hope you feel better soon!
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)
yes, you can host your UI on vercel and connect it to the convex backend.
@@WebDevCody Sweet. You've convinced me to give Convex a try! Thanks.
Replied to every single comment. Damn. You rock.
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
Great Video! Can you please do one for simple stripe one time payments with the new nextjs app router ?
What is the syntax theme you use for highlighting your typescript?
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?
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.
@@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.
Is convex able to do geo queries? Like nearest point, bounding box, etc? Cause that's a must for many projects
Out of curiosity - what is the difference between using supabase vs convex? Any trade offs?
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.
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!
Did you put use node at the top of the file? I’d check my repo link against your code
@@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!
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
I've been appreciating your content and the way you teach concepts more and more @webdevcody keep it going
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?
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
@@WebDevCody Thanks mate will check it out 👍
TH-cam 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.
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. TH-cam 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.
@@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.
@@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 TH-cam tutorial. If I did turn this into anything I’d maybe just keep it free until I see people found real use for it.
@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!
@@fl3x11 thanks man, I got a list of features I want to try adding, but we’ll see how it goes
Cody, I've one question despite I haven't watched the entire video yet: is it possible to disable that realtime communication ?
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.
how can we sync clerk data to convex? and keep them persistence on a custom user form ?
Webhooks
make a video on what are effective some ways to discover new saas ideas
Thanks so much for this tutorial Cody.
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?
yes that is an approach as well, that would prevent storing the image on my backend unless they actually submit
Man May Allah bless you please accpet my thank you for teaching us what really matter, what actual industry uses thanks
I think you should include the title along with the thumbnail, since that goes along with it
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 ?
are you able to go to the URL directly in chrome to view the file?
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
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
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.
@@ademolaadewole1288 double check their docs I think they changed how you must download images and must use a storage.getUrl call now
Can you do a stripe connect integration tutorial?
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.
4 hour video , Might create a next JS app just to learn how to use convex
Can you use Convex without Typescript?
I think so, they have a JavaScript library I believe
Convex? No one use Apache or ngnix? Of custom server?😊
why do you need next if you have convex?
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)
@@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.
How you'll come to such ideas ?
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.
See pinned comment and latest commit to my repo
You need to learn UI/UX a lot, good idea to be honest but not you application 👍🏻