Build and Deploy a Full Stack AI SaaS Platform with Next js 14, TypeScript, Stripe
Вставка
- Опубліковано 15 тра 2024
- Build a REAL Software-as-a-Service app with AI features and a payments and credits system that you might even turn into a side income or business using Next.js 14, Cloudinary AI, Clerk, and Stripe.
✨Get 3 Bonus Credits for your Free Cloudinary Account: cld.media/jsmastery
📙 Next Cloudinary Documentation: next.cloudinary.dev/
⭐ Clerk: dub.sh/j4oY3Io
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
🚀 Skyrocket your career in 4 months: jsmastery.pro/masterclass
📚Materials/References:
GitHub Repository (give it a star ⭐) github.com/adrianhajdin/ai_sa...
README (assets & code): github.com/adrianhajdin/ai_sa...
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:03:49 - Project Setup
00:12:12 - Next.js Routing & folder structure
00:23:21 - Clerk Authentication
00:37:15 - Layout Sidebar & Mobile Navigation
01:02:06 - Database & Models Setup
01:18:54 - Server Actions & Webhook
01:47:50 - Add Image Form (React Hook Form + Zod Validation)
02:26:05 - Cloudinary Media Uploader
02:49:00 - Transformed Image Components
03:01:10 - Image Server Action
03:33:25 - Homepage + Search & Pagination
03:52:10 - Image details, Update & Delete Image
04:12:21 - Checkout & Pay with Stripe
04:30:10 - Final Deployment & Production fixes
Most hardworking guy on the internet -- Adrian ⚡
Thank you! ⚡
I love the vibe and the power of programming, it's like my mother, father, brother, sister and even girlfriend ☺☺
And its accessible too
True❤
This is hands down the best full stack project I have seen so far on UA-cam. God job and keep it up. Please keep bringing more projects like these. Really appreciate it.
Not only does he provide such detailed and complex videos in a comprehensive and beginner-friendly manner, but he also follows the most advanced and trending technologies, that will get you equipped with in-demand skills that will land you a job. Adrian, you are a legend, and the fact that you are giving this away for free makes you one of the most amazing people on UA-cam!
Thank you so much!
The calmness in your voice give that comfort that is needed to pull out such a complex app
Happy to hear that!
for a French dev, this video is absolutely amazing, I understand everything. ty bro
Hey Adrian, first of all, I want to thank you for such excellent content you create. It's the kind of content that someone might easily reserve for a paid course. I think it would be great if your next class could teach how to create a blog from scratch with a functional newsletter for people to subscribe to. Additionally, integrating it with marketing tools to track the number of followers, etc., would be fantastic. Thank you so much for the effort and time you put into each project and video. You're doing an excellent job!
Can we all just thank him for putting soo much effort in his videos? Thank you, Adrian! 😇
So nice of you
You are the real deal when it comes to learning web development, man!
Keep it up G, appreciate your hard work!
Thanks, will do!
Back again to appreciate your effort you have put in this project. Great explanation along with coding. I started to build it already.
Enjoy!
It is Friday evening here in Bhutan. I will download video and learn to code. Thanks a lot, Adrian. I have learned many things from your tutorials.
Best of luck!
Did you complete this project
@@captainlevi3328 Yes I did...
@@captainlevi3328 Completed
Veličanstveno! Thank you for these wonderful, detailed project videos, Adrian!
Hvala! Appreciate it!
It's amazing how you can explain things clearly and easily. Thank you!
Glad you think so!
im a 27 year full-stack developer and ux/ui designer (node.js and react over the past 10 years) and i still learned a lot. great job!
Did you finish the project?
@@captainlevi3328 no. didnt need to.
High quality content where you truly get educated & expand our knowledge.
Appreciate your work.
Thank you!
Am a beginner who is still learning JS but i still like to see your project videos because you make it so easy to understand and follow through the video ❤keep up the good work
I appreciate that!
Sweet!! Another opportunity to learn and explore the capabilities of Shadcn, Cloudinary and Next JS! Currently 80% through learning the Next JS Course! 🤩 Amazing!! Thank you #JSM #Adrian
Amazing!
Which course are you using for Nextjs? Currently learning React
Just watched the intro and it's leaving me speechless. Thank God that I am following your channel. And by the way , I was hired in my current company because I added one of your AMAZING projects to my portfolio, so I really hope youtube is full of more people like you . Thank you Adrian.
That is awesome!
Can i know which project of JSM got you, your curret job?
Can we know Which Project it was
which project?
which one and for what role?
Their is something fresh & out of the box idea as a tutorial .Keep it up bro
I am jealous of the React guys. Your contents are all amazing and informative! I hope someone from the Angular community arises and creates a similar content like this. Though I can migrate this in Angular on my own, it's still helpful to have a similar channel like this. Keep it up!
Thank you for giving us Startups ideas as tutorial all for free. This is incredible
Enjoy!
Dude. Your timing is impeccable. I was just about to look for something similar.
Happy to hear that, enjoy!
I am watching your videos from 2 years and I learn many things from you... Thanks for it✨
My pleasure!
To be honest bro you are a legend, i wish you made a react course to build such projects like this with all fun libraries you using, I'll definitely buy the course.
I'm sooooo in love with your work, you have no idea how much your content helped me getting a job!! ❤❤ Please keep up the good work, it really helps young devs!! 🤗🤗🤗
Here you again ❤ with another mind blowing tutorial 🙌🏻
Thank you so much 😀
Thanks again for this beauty free of charge. I like these high quality videos of yours. Now I need someone telling me how to build an amazing backend like Cloudinary to skip vendor locking 😀
Glad you like them!
Second project I've completed from your follow along videos. Thanks very much.
Hi bro are you completed the whole project
could you please say where did he deploy at 1:27:43 , please 😭😭😭
Love your videos Adrian. The amount of effort you put in making these is just amazing. And your Ultimate Next JS course is on another level.
Thank you so much!
You are the best youtuber, Providing ultra premium level content for FREE!
always amaze me with the great introductions
Wow this is exceptional, followed all through and gained alot , thanks JSM
Thank you so much... I asked for something using free services with next.js and mongoDb and you made it... Amazing project ❤
Enjoy!
hi, i had doubt regrading this project, can you share ur mail id so that I can contact you if you have finished this project?
Eureka I finished...the project was fun...and it has it's real life usages...thanks Adrian for such amazing content❤
Great job!
could you please say where did he deploy at 1:27:43 , please 😭😭😭
Just when I was bored and needed another project to boost my portfolio...Thanks Adrian you the man 💯
Glad I could help!
It's not very impressive to wrap an API.
멋집니다👍따라해볼 엄두가 나지 않지만 그래도 해보겠습니다🙏건강하고 행복하세요🍀
Adrian, person or developer like you I have never seen in my life you are so a generous and great guy. Even I am speechless don't even know what to say and how to even give thanks to you but nothing than just to say keep up the good works and God be with you every. Bosssssss❤❤❤❤❤❤❤❤❤👍👍👍
Wow, thank you! ❤
you are such a gem day by day I am loving ur videos so much!!!
Awesome guy with huge knowledge about app development and share for free. Respect from Pakistan.
Thanks for this nice video. You're the coolest tutor I've encountered since kindergarten.
I have no words to say... Thank you so much!
Thank you!
Bro your tutorial are very impressive, its a free video and the knowledge that we take its awesome, a hug of developers from Brazil!
Greetings to Brazil!
I love Adrian for his great course
Wow, what a nice tutorial to study over the weekend :D Thankss!
Enjoy Furkan!
Adrian outpaces his own tutorial every time. 🚀
Haha, I try
Adrian, you are everything you think you are. Thank you for outdoing yourself
I appreciate that!
Man everytime you make me feel overwhelmed, with all these cool projects and I'm still struggling in making todo app
You can do it!
Adrian the goat, 1 million subs and massive success for you in the future bro!
Really thank you. You provide free projects that are better than all paid projects!
Glad you like them!
Bro did you complete this one??
This is big, Thank you JSM Community.
You bet
Thank you very much, Adrian, I learn a lot from your tutorials.
You are welcome!
Damn.. I'm excited and can't wait to try this one Adrian also please get rid of the three dots that hide Tailwind CSS designs in the div ClassNames cause it's kinda hard to follow if you haven't already. Cheers mate! 👍🏼❤
It's already fixed in this video :)
Well i really thank you for your high quality content. you really helped me in my Nextjs journey. We need more people like you
My pleasure!
Did you complete the project?
Top notch Professional AI Transformation Project
i love all your vidoes, thank you soo much Adrian God bless you
Glad you like them!
astonishingly cool work
Top notch stuff Andrian , One thing I couldn’t able to download ARC Browser
Thanks for the email notification regarding this video upload ❤🎉
No problem 😊
Awesome! Thank you very much for your tutorials! Could you make one for barber appointment bookings? Make it scalable, where many businesses can have their account by paying a subscription with their own homepage, and many clients can register to book their appointments!
Thank you a lot. Respect from Thailand
What! All this for free 😮 thanks 🙏🏾 a lot Adrian 🎉
You bet!
Hi Adrian!
You are always the best. I comment your work ethics, and the consistency in churnning these great videos out. 💯% Recommended.🔥🔥🔥
Awesome! Thank you!
Just finished this .. really robust walkthrough. Thanks!
Other possible features others could add:
Color picker instead of text input for the color change page.
Automatic payment into cloudinary if a user subscribes for a paid plan.
Skeleton loading for the card on home page.
Thanks a lot again. Learnt so much.
Please build a project with more heavy functionality with webhooks.
@@shorts_shots514 It'll be something with your webhooks setup.
check the following:
* Your webhools route.ts file is located in api/webhooks/clerk.
* Your webhooks are setup to call your deployed URL. check your dashboard for (baseurl/api/webhooks/clerk)
*The code in your route.js is correct.
This is awesome project Adrian after your MERN image generation app ❤❤❤.
Thank you!
One of the Best video, We think you will comes more crazy video than this. Love You Bro ❤❤❤❤
Last figma and now this ur taking the game to next level
That's the goal!
Wow, I’m gonna have a great weekend 😂 you’re my super hero 🎉
Enjoy! 🎉
Adrian, God bless you, you are the man, you are the best... Thanks for sharing your knowledge !
I appreciate that!
I was looking for any tutorial on how to build something similar to Peter Levels interiorAI, like, i had no clue how he is able to let you upload a room image and get variations, I bet this video will give the concepts I need
Wow man, this is awesome. Thank you very much
Glad you like it!
JSM, actually giving huge success in many developers career, thanks you so much Adrian
Happy to hear that!
Did you complete this project??
Absolutely amazing work sir
Thank you so much 😀
Your hard work deserve 1M subscribers and you will get it soon. ❤
Thank you so much 😀
For those getting "User not found" error, it seems this is happening when you try to sign up for the very first time (that is, users collection is empty in db) with a google account, if you try to sign up with the email and password option, this will create the users collection in the database and will even add the gmail account you tried with the first time, not sure exactly why. Anyway, after creating the first user, I was able to sign up with a second gmail account with no issues.
Or sign in with GitHub. I was just about to give up on another tutorial, when I read your comment, so thank you! He did say to make sure to sign in with a different account, but he didn't emphasize it enough.
Woah! Awesome project! 🤩🔥
Thanks! 😁
thank you for your hardwork bro. You deserve more and more 🎉😊
Thank you so much, I'll always continue to do more! 😊
Wow. Absolutely amazing
Thank you very much!
Thank you bro Adrian ⚡⚡
Thanks bro Nishant!
😮 OMG THIS IS REALLY AWESOME 👌 . THANKS MAN 👨 . FROM SOMALIA 🇸🇴 🇸🇴 🇸🇴
Thank you!
keep going bro you doing good job Love your ❤❤❤❤ content
bombarding with unique stuff,
would also love to have some vanilla tutorials without any framework
Might do it soon!
I was just about to look for something similar. AI project which i want to build all are in same video really thanx you r great.
Awesome!
bro you are literally next level 🤩🤩🤩🤩🤩🤩
Andran, you are doing well, but it could be even better if you offered a mini bootcamp covering JavaScript to full-stack development live. This way, we could interact with you directly
Great idea!
I love you bro
this the thing I need to learn
Adrian I want to take a moment and Thank you for your work it has really helped me a lot learning key skills of nextjs also how to apply them in real life🎯
Fantastic!
You are king of startups ❤
Thank you!
You probably do know this but most likely you don't, we really do love you dude! ❤ No seriously beyond these amazing projects, you really are changing lives and not too sure what will happen in the future but if you were to take anything from all this, just know you really are an inspiration and we got too much love and respect for you sir 🫡 thank you and you may not be Muslim but may Allah bless you ♥
Thank you so much! ❤
Did you complete this one?
For anyone that has a problem with the webhooks try this:
1.Go to your project in vercel >Settings > Deployment protection and disabled Vercel Authentication
2. check that the endpoint of clerk doesnt have a "/" at the end
Thanks you for taking the time to drop this. Disabling Vercel Authentication did it for me
The hero we all need. Adrian is what I inspire to be one day:)
Thank you :)
Hi, loved the project, I've got a request, please make a video on how do you prepare a project to be developed with tailwind css from a figma file to a full nextjs project. How do you prepare your utility classes and tailwind config files and the thought process around it. Thanks
Always giving us the best
Glad you like it!
Hey Adrian, already requested you about this in linkedIn, anyway once again requesting you that, please upload a tutorial about microservices architecture in node js, kubernetes, etc so that to build a scalable real world advanced projects . Only you can teach those in a beginner friendly manner !
Great idea, I'll see what I can do!
Thank for making this amazing app ! and taking my feedback on linkedin
No problem!
Great, I have no words that's awesome
Thank you so much 😀
Could you do a tutorial on supabase and nextjs. Great video really enjoying it!
Tq for this amazing project ❤
you are the best creator on internet
This is something crazy bro. You are doing next level things, so glad that we have found a such talented developer like you.
But I have just one doubt, which is if I deploy this then how will I manage the large user base , basically I want to ask how will we make it a scalable application.
You can scale it to up to 10,000 monthly users for free
As always Adrian best❤
Thank you so much! ❤
Wow Adrian it's fantastic, I think now it will add new technology in my bucket, please introduce Prisma in your next tutorial🙂🙂
Thanks for the idea!