Build and Deploy a Full Stack AI SaaS Platform with Next js 14, TypeScript, Stripe

[@Cr7Nih]

Most hardworking guy on the internet -- Adrian ⚡

[@javascriptmastery]

Thank you! ⚡

[@ExampleEx-v6i]

I love the vibe and the power of programming, it's like my mother, father, brother, sister and even girlfriend ☺☺

[@mohitashliya8750]

And its accessible too

[@bilalshahid5118]

True❤

[@trailovic96]

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 KZbin!

[@javascriptmastery]

Thank you so much!

[@yogeshjoshi781]

The calmness in your voice give that comfort that is needed to pull out such a complex app

[@javascriptmastery]

Happy to hear that!

[@ArjunCodess]

Can we all just thank him for putting soo much effort in his videos? Thank you, Adrian! 😇

[@javascriptmastery]

So nice of you

[@jayaraj5479]

This is hands down the best full stack project I have seen so far on KZbin. God job and keep it up. Please keep bringing more projects like these. Really appreciate it.

[@ahmedbahnasy2243]

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.

[@javascriptmastery]

That is awesome!

[@ajzal_]

Can i know which project of JSM got you, your curret job?

[@sharjeeljaved95]

Can we know Which Project it was

[@noextrasugar]

which project?

[@mcflanky8340]

which one and for what role?

[@PemaWangchuk-w7y]

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.

[@javascriptmastery]

Best of luck!

[@captainlevi3328]

Did you complete this project

[@PemaWangchuk-w7y]

@@captainlevi3328 Yes I did...

[@PemaWangchuk-w7y]

@@captainlevi3328 Completed

[@Jason-eo7xo]

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!

[@captainlevi3328]

Did you finish the project?

[@Jason-eo7xo]

@@captainlevi3328 no. didnt need to.

[@marketmov7796]

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!

[@alexanderchepkiyeng]

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

[@javascriptmastery]

Amazing!

[@maakayp]

Which course are you using for Nextjs? Currently learning React

[@MarvineGaudrée]

for a French dev, this video is absolutely amazing, I understand everything. ty bro

[@farkaszoli9883]

You are the real deal when it comes to learning web development, man! Keep it up G, appreciate your hard work!

[@javascriptmastery]

Thanks, will do!

[@olanrewajuiremide6303]

Thank you for giving us Startups ideas as tutorial all for free. This is incredible

[@javascriptmastery]

Enjoy!

[@CC_Double]

if you get an error with MAKE sure you use Type Assertion to ger rid of it like so: Adrian thank you for these tutorials, they are awesome!

[@fernandonando1712]

why in my case always produces an empty list when searching for the name

[@CC_Double]

@@fernandonando1712 can you give me more context? which component is failing?

[@fernandonando1712]

@@CC_Double The failure is in the component collection, in the image, when I search for the name of the image in the search it always shows up as an empty list, even though I have followed all the instructions, when I console.log(images) it always shows that the length is always 0, it will automatically go into the empty list

[@CC_Double]

​@@fernandonando1712 I have similar issues: some images show, while others don’t. I believe this issue is related to the way the query is handled. Unfortunately, I am away from home and cannot test it since my database is blocking my connection. However, if you want to solve it, take a closer look at the Search component, specifically the utility functions formUrlQuery and removeKeysFromQuery inside @/lib/utils. I believe the issue could be identified by analyzing bottlenecks in the resolution times of this query.

[@CC_Double]

​@@fernandonando1712 I have similar issues, some images show, while others don’t. I believe this issue is related to the way the query is handled. Unfortunately, I am away from home and cannot test, as my database has a limited IP range and is blocking my connection. However, if you want to solve it, take a closer look at the Search component, specifically the utility functions formUrlQuery and removeKeysFromQuery inside @/lib/utils. I believe the issue could be identified by analyzing bottlenecks in the resolution times of this query, at least that should be a good start!

[@dharmeshtiwari09]

Thank you so much... I asked for something using free services with next.js and mongoDb and you made it... Amazing project ❤

[@javascriptmastery]

Enjoy!

[@ajzal_]

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?

[@2difficult2do]

It's amazing how you can explain things clearly and easily. Thank you!

[@javascriptmastery]

Glad you think so!

[@michaelgela]

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!

[@sid_liftz]

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

[@javascriptmastery]

I appreciate that!

[@sygatech]

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❤❤❤❤❤❤❤❤❤👍👍👍

[@javascriptmastery]

Wow, thank you! ❤

[@zain_x_alpha]

I am watching your videos from 2 years and I learn many things from you... Thanks for it✨

[@javascriptmastery]

My pleasure!

[@DW293Fam]

​@@javascriptmasteryrecently been watching your videos. Just a few months ago, I came to your channel and I enjoy watching your content. Keep it up brother 🙂👌

[@ncac8122]

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

[@chukwunweikeemmanuel6614]

Thanks you for taking the time to drop this. Disabling Vercel Authentication did it for me

[@syedumairnaeem6724]

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.

[@javascriptmastery]

Thank you so much!

[@arijitparia211]

You are the best youtuber, Providing ultra premium level content for FREE!

[@peppapig_-2569]

JMS is like my Teacher , i learned from JSM and I'm more experience in Nextjs and i even created my own saas ! everything is possible guys

[@Tapadar.Monsur]

Veličanstveno! Thank you for these wonderful, detailed project videos, Adrian!

[@javascriptmastery]

Hvala! Appreciate it!

[@mahmoudbarmawi4112]

Really thank you. You provide free projects that are better than all paid projects!

[@javascriptmastery]

Glad you like them!

[@captainlevi3328]

Bro did you complete this one??

[@DannyGerst]

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 😀

[@javascriptmastery]

Glad you like them!

[@allanmunene_game]

Thanks for this nice video. You're the coolest tutor I've encountered since kindergarten.

[@OscarSebeloanex]

Dude. Your timing is impeccable. I was just about to look for something similar.

[@javascriptmastery]

Happy to hear that, enjoy!

[@kgndrn]

easily one of the top 100 videos on youtube. thank you for this!

[@CodingWithImranJaved]

Awesome guy with huge knowledge about app development and share for free. Respect from Pakistan.

[@iLoveVisionZ]

High quality content where you truly get educated & expand our knowledge. Appreciate your work.

[@javascriptmastery]

Thank you!

[@dalestewart]

Top notch Professional AI Transformation Project

[@Pulsemastery]

What! All this for free 😮 thanks 🙏🏾 a lot Adrian 🎉

[@javascriptmastery]

You bet!

[@2ru2pacFan]

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 ♥

[@javascriptmastery]

Thank you so much! ❤

[@captainlevi3328]

Did you complete this one?

[@adnanekhan5838]

Their is something fresh & out of the box idea as a tutorial .Keep it up bro

[@mohammadabbas1623]

Last figma and now this ur taking the game to next level

[@javascriptmastery]

That's the goal!

[@ntormight3964]

Adrian outpaces his own tutorial every time. 🚀

[@javascriptmastery]

Haha, I try

[@stanleysstar]

Wow this is exceptional, followed all through and gained alot , thanks JSM

[@raphaelazuamaka1553]

Adrian, you are everything you think you are. Thank you for outdoing yourself

[@javascriptmastery]

I appreciate that!

[@razzaqmohammedali4653]

JSM, actually giving huge success in many developers career, thanks you so much Adrian

[@javascriptmastery]

Happy to hear that!

[@captainlevi3328]

Did you complete this project??

[@shubhamk1111]

Here you again ❤ with another mind blowing tutorial 🙌🏻

[@javascriptmastery]

Thank you so much 😀

[@davidmolizane]

Bro your tutorial are very impressive, its a free video and the knowledge that we take its awesome, a hug of developers from Brazil!

[@javascriptmastery]

Greetings to Brazil!

[@ahmedahmedx9600]

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.

[@ZEXOFFFIRE]

Man everytime you make me feel overwhelmed, with all these cool projects and I'm still struggling in making todo app

[@javascriptmastery]

You can do it!

[@hooooman.]

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 !

[@javascriptmastery]

Great idea, I'll see what I can do!

[@markus_dev_cwb]

I have no words to say... Thank you so much!

[@javascriptmastery]

Thank you!

[@umairulislam9048]

Your hard work deserve 1M subscribers and you will get it soon. ❤

[@javascriptmastery]

Thank you so much 😀

[@spaqootech]

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

[@javascriptmastery]

Great idea!

[@albanusAlbie]

This is big, Thank you JSM Community.

[@javascriptmastery]

You bet

[@thereaper7682]

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! 👍🏼❤

[@javascriptmastery]

It's already fixed in this video :)

[@naarayanakumar5877]

The hero we all need. Adrian is what I inspire to be one day:)

[@javascriptmastery]

Thank you :)

[@junaiid0104]

you are such a gem day by day I am loving ur videos so much!!!

[@youthfactfactory7877]

This is awesome project Adrian after your MERN image generation app ❤❤❤.

[@javascriptmastery]

Thank you!

[@CaleCabrera-x1t]

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.

[@Asaspor]

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.

[@ChandrakantDubey-t7b]

it worked thanks

[@XxRouninxX]

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.

[@AIZEN155]

Right in time , could you give some tips for freelance because I wonna create some paid projects to land my dream job , thanks for 1 year of vids it really helped me ❤❤❤

[@javascriptmastery]

Sure thing!

[@subodhpalayekar3779]

small advice from my side: before creating any component please show us the already built component from the hosted website, so we can have a clear idea about the UI part and tailwind classes

[@georgembajiaku4567]

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.

[@georgembajiaku4567]

@@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.

[@aakashundergrad8049]

If it still. Runs ..can u provide ur guthub repo

[@coderabdullahi444]

😮 OMG THIS IS REALLY AWESOME 👌 . THANKS MAN 👨 . FROM SOMALIA 🇸🇴 🇸🇴 🇸🇴

[@javascriptmastery]

Thank you!

[@jackfrost8969]

1:28:10 if your project is not building bacause of qs type error then do this: npm install -D @types/qs then push your code to github and re-deploy your project in vercel

[@couldbeAlex]

thanks for this!

[@ayushkab8884]

hey man, just wanted to know, are the feature in this projects completely free to build, like we can make it end to end and earn as well from the payment feature? all for free?

[@Sixtusdev]

Adrian, I respect you a lot. Your skills are incredible

[@xade8381]

bombarding with unique stuff, would also love to have some vanilla tutorials without any framework

[@javascriptmastery]

Might do it soon!

[@waltergomez7019]

Thank you very much, Adrian, I learn a lot from your tutorials.

[@javascriptmastery]

You are welcome!

[@okekeemmanuel8852]

Always giving us the best

[@javascriptmastery]

Glad you like it!

[@aayushvinay1492]

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!! 🤗🤗🤗

[@lazyprog]

Well i really thank you for your high quality content. you really helped me in my Nextjs journey. We need more people like you

[@javascriptmastery]

My pleasure!

[@captainlevi3328]

Did you complete the project?

[@DavidJonathan10]

Hi Adrian! You are always the best. I comment your work ethics, and the consistency in churnning these great videos out. 💯% Recommended.🔥🔥🔥

[@javascriptmastery]

Awesome! Thank you!

[@AshishRaj04]

Absolutely amazing work sir

[@javascriptmastery]

Thank you so much 😀

[@furkankaracan2076]

Wow, what a nice tutorial to study over the weekend :D Thankss!

[@javascriptmastery]

Enjoy Furkan!

[@motamott]

I’m more interest to learn your work discipline at this point, what a wonderful tutorial. Bro teach us how you like to code like this and what drives you ?

[@javascriptmastery]

Thank you! Great idea for a video :)

[@erickreyes5382]

Just completed this! Thanks bro

[@c4ex_net]

멋집니다👍따라해볼 엄두가 나지 않지만 그래도 해보겠습니다🙏건강하고 행복하세요🍀

[@ishmeetsingh8687]

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.

[@javascriptmastery]

You can scale it to up to 10,000 monthly users for free

[@LiveStage00]

always amaze me with the great introductions

[@janithsandaru8989]

You deserves everything as you need because the way you helping us! thanks

[@opereznet]

Adrian, God bless you, you are the man, you are the best... Thanks for sharing your knowledge !

[@javascriptmastery]

I appreciate that!

[@jakescript_]

Adrian the goat, 1 million subs and massive success for you in the future bro!

[@mayukhdg]

Amazing project, just blown away

[@Raghunadh9]

Where are you going Adrain? Well deserve 1 million!

[@javascriptmastery]

Thank you, maybe soon!

[@yugal8627]

Wow Adrian it's fantastic, I think now it will add new technology in my bucket, please introduce Prisma in your next tutorial🙂🙂

[@javascriptmastery]

Thanks for the idea!

[@ziontutorial]

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.

[@javascriptmastery]

Awesome!

[@MSRCodeLab]

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.

[@javascriptmastery]

Thank you!

[@pradeepalakruwan1362]

What a beautiful project🥺🥺🥺. Thanks JSM love you😍😍😍

[@bongumenzinzama6896]

Lord Adrian Does Again, Can't thank you enough. Our Javascript Sensei😅😅🤣

[@javascriptmastery]

You know it!

[@bongumenzinzama6896]

I am going to try and build a React Native App using the same ideas.😎😎😎

[@javascriptmastery]

@@bongumenzinzama6896 amazing. More React Native videos coming soon

[@kaushikmoralwar07]

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🎯

[@javascriptmastery]

Fantastic!

[@Kobi1973bn]

i love all your vidoes, thank you soo much Adrian God bless you

[@javascriptmastery]

Glad you like them!

[@richardmasters2045]

Wow, I’m gonna have a great weekend 😂 you’re my super hero 🎉

[@javascriptmastery]

Enjoy! 🎉

[@TryingCodeEng-58208]

you are the real youtuber

[@ChriScar1979]

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!

[@nitinthewanderer]

Top notch stuff Andrian , One thing I couldn’t able to download ARC Browser

[@Itachi16-U]

Thanks for the email notification regarding this video upload ❤🎉

[@javascriptmastery]

No problem 😊

[@letsRead_7]

Love your videos ❤🎉

[@javascriptmastery]

Thank you! ❤🎉

[@Cr7Nih]

Thank you bro Adrian ⚡⚡

[@javascriptmastery]

Thanks bro Nishant!

[@VGS_7]

u didnt mention about 1. To make the route accessible to both signed in and signed out users, pass `publicRoutes: ["/"]` to authMiddleware 2. To prevent Clerk authentication from running at all, pass `ignoredRoutes: ["/((?!api|trpc))(_next.*|.+\.[\w]+$)", "/"]` to authMiddleware 3. Pass a custom `afterAuth` to authMiddleware, and replace Clerk's default behavior of redirecting unless a route is included in publicRoutes

[@subodhkamble7150]

Hi do you have git hub where you did this ?

[@VGS_7]

@@subodhkamble7150 its incomplete brother you want to complete it ? search it - Vishalll07/PhotoHub_SaaS_Web_App

[@amjadali-cs3si]

Great work waiting for fullstack real world banking app

[@javascriptmastery]

We will try

[@projectswithpro1618]

Completed The Project. Just face some issues in eslint error. Without this All works nicely. Thanks

[@Ptasysko]

how long did it take you?

[@varunsalat619]

thank you for your hardwork bro. You deserve more and more 🎉😊

[@javascriptmastery]

Thank you so much, I'll always continue to do more! 😊

[@muatasimahmed2343]

Thank for making this amazing app ! and taking my feedback on linkedin

[@javascriptmastery]

No problem!

[@AkashKumar-hg1is]

Due to change in version of Clerk , I faced a lot of problem in webhooks section. I request you to update those with latest clerk version, So that I/we can finish the incomplete peoject Thank you

[@rishisen2424]

did you resolved the problems for the webhooks i am suffering from the same webhooks problem