Build and Deploy a Full Stack AI SaaS Platform with Next js 14, TypeScript, Stripe
HTML-код
- Опубликовано: 7 июн 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
![Dimension 20: Never Stop Blowing Up Trailer [Dropout Exclusive Series]](http://i.ytimg.com/vi/xYeXpbHnGEM/mqdefault.jpg)
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 RUclips. God job and keep it up. Please keep bringing more projects like these. Really appreciate it.
for a French dev, this video is absolutely amazing, I understand everything. ty bro
The calmness in your voice give that comfort that is needed to pull out such a complex app
Happy to hear that!
Can we all just thank him for putting soo much effort in his videos? Thank you, Adrian! 😇
So nice of you
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!
You are the real deal when it comes to learning web development, man!
Keep it up G, appreciate your hard work!
Thanks, will do!
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
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!
Veličanstveno! Thank you for these wonderful, detailed project videos, Adrian!
Hvala! 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 RUclips!
Thank you so much!
Back again to appreciate your effort you have put in this project. Great explanation along with coding. I started to build it already.
Enjoy!
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
You are the best youtuber, Providing ultra premium level content for FREE!
It's amazing how you can explain things clearly and easily. Thank you!
Glad you think so!
I am watching your videos from 2 years and I learn many things from you... Thanks for it✨
My pleasure!
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!
Awesome guy with huge knowledge about app development and share for free. Respect from Pakistan.
Thank you for giving us Startups ideas as tutorial all for free. This is incredible
Enjoy!
High quality content where you truly get educated & expand our knowledge.
Appreciate your work.
Thank you!
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!! 🤗🤗🤗
Dude. Your timing is impeccable. I was just about to look for something similar.
Happy to hear that, enjoy!
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?
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.
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! ❤
Here you again ❤ with another mind blowing tutorial 🙌🏻
Thank you so much 😀
Their is something fresh & out of the box idea as a tutorial .Keep it up bro
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!
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?
Wow this is exceptional, followed all through and gained alot , thanks JSM
Thanks for this nice video. You're the coolest tutor I've encountered since kindergarten.
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.
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!
멋집니다👍따라해볼 엄두가 나지 않지만 그래도 해보겠습니다🙏건강하고 행복하세요🍀
always amaze me with the great introductions
Adrian the goat, 1 million subs and massive success for you in the future bro!
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 😭😭😭
Adrian, you are everything you think you are. Thank you for outdoing yourself
I appreciate that!
This is big, Thank you JSM Community.
You bet
Top notch Professional AI Transformation Project
you are such a gem day by day I am loving ur videos so much!!!
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 have no words to say... Thank you so much!
Thank you!
Adrian outpaces his own tutorial every time. 🚀
Haha, I try
Wow, what a nice tutorial to study over the weekend :D Thankss!
Enjoy Furkan!
I love Adrian for his great course
Thank you very much, Adrian, I learn a lot from your tutorials.
You are welcome!
Really thank you. You provide free projects that are better than all paid projects!
Glad you like them!
Bro did you complete this one??
One of the Best video, We think you will comes more crazy video than this. Love You Bro ❤❤❤❤
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.
You deserves everything as you need because the way you helping us! thanks
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!
What! All this for free 😮 thanks 🙏🏾 a lot Adrian 🎉
You bet!
This is great content, thank you! One tip that I see often, these tuts should be versioning their packages. If I type in @latest then I (likely) wont be getting the same version that is in the video, which can often make a tutorial very difficult or impossible. Not hard to just grab the repo and install the package.json though, but I like to follow along and do it all manually. Just a thought- thanks again for your fantastic content.
Top notch stuff Andrian , One thing I couldn’t able to download ARC Browser
Wow, I’m gonna have a great weekend 😂 you’re my super hero 🎉
Enjoy! 🎉
i love all your vidoes, thank you soo much Adrian God bless you
Glad you like them!
Absolutely amazing work sir
Thank you so much 😀
Thank you a lot. Respect from Thailand
This is awesome project Adrian after your MERN image generation app ❤❤❤.
Thank you!
Adrian, God bless you, you are the man, you are the best... Thanks for sharing your knowledge !
I appreciate that!
Thanks for the email notification regarding this video upload ❤🎉
No problem 😊
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!
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 :)
JSM, actually giving huge success in many developers career, thanks you so much Adrian
Happy to hear that!
Did you complete this project??
Wow man, this is awesome. Thank you very much
Glad you like it!
Your hard work deserve 1M subscribers and you will get it soon. ❤
Thank you so much 😀
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?
😮 OMG THIS IS REALLY AWESOME 👌 . THANKS MAN 👨 . FROM SOMALIA 🇸🇴 🇸🇴 🇸🇴
Thank you!
Last figma and now this ur taking the game to next level
That's the goal!
The hero we all need. Adrian is what I inspire to be one day:)
Thank you :)
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!
astonishingly cool work
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.
You are king of startups ❤
Thank you!
thank you for your hardwork bro. You deserve more and more 🎉😊
Thank you so much, I'll always continue to do more! 😊
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!
Wow. Absolutely amazing
Thank you very much!
bro you are literally next level 🤩🤩🤩🤩🤩🤩
Thank for making this amazing app ! and taking my feedback on linkedin
No problem!
Always giving us the best
Glad you like it!
Thank you bro Adrian ⚡⚡
Thanks bro Nishant!
Great, I have no words that's awesome
Thank you so much 😀
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!
keep going bro you doing good job Love your ❤❤❤❤ content
you are the best creator on internet
Woah! Awesome project! 🤩🔥
Thanks! 😁
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?
bombarding with unique stuff,
would also love to have some vanilla tutorials without any framework
Might do it soon!
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!
you are the real youtuber
You Are Real Devloper Bro 🧠
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
Thank you Adrian.
Thank you Varun!
Great teacher thank you 👍👍👍
Thank you! 😃
Love your videos ❤🎉
Thank you! ❤🎉
Subscribed sir, Thank you for uploading such an amazing project, Eagerly waiting for an AI SAAS project like Vizard ai . Clone of vizard ai focusing on 'Turn long videos into social-ready clips with one magical click.' along with different templates, and so on.
Thank you!
As always Adrian best❤
Thank you so much! ❤
you the best adrian, i did the userSchema challneged right haha thankss
Great Job, I'm going to build on this and make it a web3 application
Don't build, you will die with the error of this video