Want to get mentored by me? Apply at www.codewithantonio.com/mentorship Hello everyone, thank you for choosing this video. In this tutorial you will learn how to build your own SaaS AI Platform and build 5 different AI tools using models like OpenAI and ReplicateAI. Checkout the description for links and subscribe to the newsletter! ❤
A note for anyone following along, the api code for openai has changed a bit since this video was posted, the api has the most differences so far. You need to use: const response = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages}); return NextResponse.json(response.choices[0].message);
@@rishabhgupta5974 bro still get the error AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …} code : "ERR_BAD_RESPONSE" pls help
Hi please in the conversation/page.tsx I'm getting error: role does not exist in type OpenAI, same thing with content, I have updated my API to use the v4. Anyway around this ?
I'm honestly blown away sir. This was my first ever proper project that was deployed and so well done. Your style of guiding us along was amazing and so well put out. Immensely grateful to you and these free top notch tutorials you put out. It took me 5-6 days to complete the project.
This video deserves views more than the longest video on youtube, i will keep on coming back to it - it is part of my playlist. so much value, i would recommend it for any entrepreneur venturing online.
Antonio, I must say, you are absolutely incredible! The quality of your content is truly unmatched, and I am genuinely excited for what is yet to come. Congratulations on your outstanding work!
Gosh Mr. Antonio, there are so many frameworks, libraries, packages, companies and services which are required for this Fullstack MAGNIFICENT APP. This has got to be the very best AI SAAS App, I have ever seen to date.
This is what startups build! I can't thank you enough, it's been a long time looking for complete tutorials like yours, Thank you so much Antonio for this great work! I am learning a lot from your channel so I can go and apply the knowledge to build my own SaaS. Keep up the good work.
Congratulations, Sir Antonio Erdeljac, on your first sponsored video! 🎉 You deserve this recognition for your amazing work as a developer and youtuber. I'm a huge fan of yours and I always watch your videos with great interest and admiration. This AI SaaS video is awesome! I was very excited about the content and the tips you shared. You are an inspiration to me and many other developers. Thank you so much for everything you have done for the community. I wish you much success in your journey and I hope to see more of your videos soon. 🤗Veliki zagrljaj iz Recifea, Brazila! 🇧🇷
A quick tip for the Hydration Error at 1:07:30. This error occurs because you've enclosed the button from @/components/ui/button within the SheetTrigger component, which is, in essence, another button. To wrap a button inside a button isn't compliant with HTML syntax, resulting in the error being triggered. One potential solution would be to eliminate the Button component and directly wrap the menu within the SheetTrigger component.
You can avoid hydration error by modifying in the navbar file(/components/navbar.tsx) By adding import package and changing the export function. import dynamic from 'next/dynamic '; export default dynamic (()=> Promise.resolve(Navbar),{ssr:false})
I was just doing your twitter tutorial but when I saw this, I stopped and started straight away on making this! it is a dream of mine to make an AI! Thanks for all the amazing work!
@@codewithantonio Hello Antonio, Just Superb, learn a lot from this video. I will definitely share on my on-running website in future updates. I have a question: What if I want to sell this to my client after completing this project? Should I need to have some customization from my own and what customization should I need ? Thanks a lot for this and for future updates.
love the fact that you're using shadcn -- not only because it looks good, but also because it allows you (and therefore us) to better focus on the core parts of the application instead of writing hundreds of tailwind classes and tens of small components
I just finished my 1st app with Antonio🎉 I’m gonna list the challenges I have encountered during the past week: 1. OpenAI api has been changed, the pinned comment on the 1st page helped me out. 2. The image generation also changed, for me, I can only generate 1 image a time for the latest dall-e-3 model, if you want to have multiple image generations at 1 time, the doc says do parallel requests to achieve that(I’m lazy I just limited the option to 1 page only). Thanks again Antonio, amazing job! Wish you happy new year!🎉🎉🎉
No my image option is working fine, I am able to generate 4image too, and I want to ask you how you created the database in planetscale as it is asking card details.
Antonio is back again with top quality content. Thank you very much bro. Happy for getting the first of a long list of sponsors. Upward and forward. 👏👏👏
wow another tutorial. what great timing just after i finished the ecommerce one yesterday. but I'm going to rest today and get started with this new one tomorrow or Friday. I am so grateful for all of this high quality tutorials from Antonio. Thankyou sir !
If you are getting error after deploying on Vercel 5:30:36 ,the reason is that the AI generation function takes more than 10seconds to generate a response but Vercel only gives 10sseconds of function running time on free tier. So either upgrade to prop plan on vercel and update all your AI generation routes with export const maxDuration = 300; or simply choose another hosting platform like AWS or Linode Thank You
The tutorial is great, for the ones that are following along at this moment have in mind the OpenAi import changed, now to import you need to use import OpenAI from 'openai'; instead of import { Configuration, OpenAIApi } from "openai";
finally got this build completed and it worked first time without any problems. once again i thank Antonio for his great tutorial and hard work in producing these tutorials. I am learning lots and am very grateful.
Wonderful, I've been doing your tutorials so I can enter the industry. I've learnt so much from you. Thank you, thank you, thank you. Keep the excellent work Antonio! 👏👏👏
Really appreciate your teaching style and how you managed to teach side topics which generally become big issues and beginners have to look out of RUclips windows. I wish you would make an advanced projects that focuses on free tools and gives us detailed idea about Industry level software. Thank you for this one!
Man, words can not describe how I am grateful for your contents. Your desire and quality is exceptional, hope to have you always like this in coming years. Remain valuable please ❤
Finally I Got some SaaS app... I have been searching for it for many days. There's no good SaaS app. thank you very much. I hope u keep doing these kinds of apps often😊
Hello Antonio from New York, USA! First I’d like to thank you for the great video tutorials. I completed the Netflix clone last week and really enjoyed it. I’d like to share something with you and everyone about the Shadcn “Sheet” and Button components for the mobile sidebar. I was getting render errors in the browser - server and client renders were not matching and was throwing an error at the node in the mobile sidebar. The part of the code where the custom buttons are wrapping around the Menu icon from lucid. Turns out that when you use the Sheet component and then wrap like this: It will throw the render error. It looks like SheetTrigger in and of itself IS a button element, so adding the additional Button is an issue. If you just remove the custom button tags and just have the Menu wrapped around the SheetTrigger elements, it will clear that error. Hope that helps someone! Thanks again Antonio!! Lew Savage
Thank you so much Antonio! this is what I have been looking for and to be able to add voice query to the conversational Ui FUNCTIONALITY I pray you continue giving us projects like this
Amazing work Antonio! I just finished this tutorial and I can't believe how much effort you have gone through to teach us some many different things using a single application. Really appreciate your time man, looking forward to many more! Much love from Australia 💙
Wow!! This is incredible! Thought JS Mastery was the only beast on RUclips, but your style and explanations are incredibly great. Thank you and Please keep it up. More subscribers are on their way.
Lol i quickly went through the video and mentioned this in my projects section and my interviewer was thoroughly impressed, even tho my data structures round didn't go well his mind was blown that an undergraduate could create this on his own, if i get in i donate u hald of my first year salary
My man you are absolutely the best! I have built a half assed saas product, following the docs, but now I can finally see how to do it. Thanks man. Keep up the good work. You got your self a new subscriber.
@@codewithantonio I do have 1 question though. I am going through the video, but for some reason I can't install shadcn...I get some error about a missing module called minimatch...Do you know how to fix that issue?
@@codewithantonio thanks!, i have a question in your NEXT-AUTH v5 course, there’s a logic doesn’t make sense to me in /actions/new-verification.ts, Which is u was trying to update user email from VerificationToken model in case it requested by user to change his email so user email on his VerificationToken will be different than one that on User model, but in a previous step u were throw error if the email of VerificationToken is not found in User model, can you please revert on that because i feel there’s something i misunderstood, Thanks for your efforts!
I love you, in 2 videos i see i learn more than 10 courses i made in udemy, you are a machine! keep the good works, congratz on your sponsor, now i have to become a member, i really enjoy this channel. And of course, if I can make a suggestion, I would say to build a more "simple" application covering the basics of react, that is to build something using only react and vite for example to help those who still have some difficulties in understanding react basics, if already exists on the channel, I'm sorry, I'm marathoning things here :)
In future I hope you will give us more projects like that🎉 Your all projects are unique and we hope that you will gift us more projects that will help our future journey ❤️❤️❤️ Thank you sir🎉❤
Ufff, I don't know how this content is free, is absolutly incredible, thank you very very much for this. Simple, you can almost copy this and start winning some money with this amazing SAAS software in your own country.
If any one got stuck in the image generation implementation like me. The api function and response object has changed in the latest openai version. You need to use this: const response = await openai.images.generate( { prompt, n: parseInt(amount, 10), size: resolution, }); return NextResponse.json(response.data);
thank you very much for this tutorial and especially for the discovery of Clerk which is just incredibly simple compared to Next-auth which requires more work in the configuration of providers! Do not hesitate to use it in your future projects. Thank you for your amazing videos
This is such a great project to learn SaaS and that to with OpenAI apis , WIll Start making this project once done with your last video. thanks sir antonio for such quality content.
For anyone getting the interface issue (openaiv4 had some changes): import OpenAI from "openai" //we only need to import this from openai const userMessage: OpenAI.Chat.ChatCompletionMessage = { role: "user", content: values.prompt } For node.js, no need to import configuration, here also we only need to import OpenAI. const openai = new OpenAI ({ apiKey: process.env.OPENAI_API_KEY }) const response = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages: [instructionMessage, ...messages], }) return new NextResponse(JSON.stringify(response.choices[0].message))
Hello @saurabhshakya5367, where does the 'instructionMessage' come from? Are there any other changes to be made in the conversation page? For example, should we keep this code (const [messages, setMessages] = useState([]);)? Thank you in advance
Great project. Learned a lot, I customized a lot of it too. Added some new models (speech, image optimizations etc), Also added a full Admin Panel with app management, user management, and software metrics. I managed to add some metrics for users too so they can track their usage. Thank you for putting in so much effort.
Hey this is very awesome stuff. I was wondering if you'd consider doing tutorials on complex applications like codux or figma clones. Tutorials that help us build tools and libraries thus making us understand them even more.
Hi Anthonio, your tutorials are simply amazing. I can only imagine the amount of work that goes into these contents you make free. You are a gem! Thank you.
At 34:45, to anyone dealing with issues with the middleware.ts for clerk auth, the new default is that all routes are public and you need to designate protected routes, versus in this tutorial, all routes are protected by default, and you need to designate public routes. From the clerk docs, this is how you get the behavior you want: import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; const isPublicRoute = createRouteMatcher(["/"]); export default clerkMiddleware((auth, request) => { if (!isPublicRoute(request)) { auth().protect(); } }); export const config = { matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"], };
If someone get to be hired by Antonio's videos, has to let him know. Really appreciate your videos, they're kinda the ultimate guide to be a master using Nextjs. If I ever see u I would like you to autograph my laptop 🥺
Hi Antonio, In the mobile view, the button to pull the sheet does not go to left with sheet when clicked. It just stuck in the same place.. along with the Dashboard protected text. How to make it go to the left when clicked? Very much appreciated if you can help
Nice tutorial. Reminder for people at the end of deployment is to ensure that Stripe is out of test mode and that you have activated your stripe account properly with business details etc.
I really liked the video, I'm advancing it on your platform, I had a question that was what brought me here, do you plan to include AI in future projects? Greetings
Woooooo! Congrats on the first sponsor. First of many. You've inspired and motivated me to what's possible and I thank you. Wishing you all of the success that is already determined for you bro
Hey Antonio, Amazing video! After completing the whole project, I am getting error as: "Failed to load resource: the server responded with a status of 500 (Internal Server Error)" and "Something went wrong" from hot-toast I have tried multiple openai keys from multiple accounts, still facing this problem Please help!
Thank you so much for these tutorials. I only got up to 1:30 so far, but I really enjoy these tutorials that are not just "Hello world". On the AI-topic: the most shocking part for me is how much of the tutorial github copilot is able to autocomplete. Some of it was non-working trash, but it made a different, but really nice looking dashboard for me when i just wrote tools.map(. I begin to think we are all going to be unemployed within the next five - ten years.
@@codewithantonio I don't, at least for some years, it is going to require someone to translate between customer and IT, and I would very much like not having to understand every javascript framework out there. Give me a form, I don't care how. Recently, I had it write me a python script to generate an image from a uuid (basically a QR-code, but different), I know even less Python than Javascript, but it all works, REST API and all. Put it into some docker container and the task is done. Tbh, I don't know much about react or next, I only got into it because of my old school, PHP API-Platform and i noticed it's rather quick. I have no idea what zod is, probably it's a common library to use, but when i began typing, it suggested a default value for "prompt". I didn't get much further, because i started drinking, but I assume you can set any default values for any form input fields you are going to use, so for that suggestion it either would have to have scanned your github and comprehend that I am making a copy or understand that this project is about AI from just a few headlines. Both, I think, are pretty impressive.
for the middleware in the new version of clerk: import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; const isProtectedRoute = createRouteMatcher(["/dashboard(.*)", "/forum(.*)"]); export default clerkMiddleware((auth, req) => { if (isProtectedRoute(req)) auth().protect(); }); export const config = { matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"], };
Shalom evening Mr. A, this looks FANTASTIC and very much involved. Interestingly enough, I had previously wrote a post about having an app which can perform multiple forms of AI service. And this is it but so much more. I did not know AI could generate audio files or video files. Thank you for sharing! Shalom
First of all, outstanding project, learned some cool things! I''ll organize my project like this from now on. Two tips: - To import stuff automatically you can press control+space; - Use prettier on save :P Did anyone else had problems with importing lucide icons?
yeah, after recent update of Next.js I was not able to import icons from "lucide-react", had to import from full path "../node_modules/lucid-react", but it's fixed now.
@@danialdevelops7368 Since he is ignoring us, I did some research, and the easiest solution that I found is Paddle. Look for Paddle, they are super easy to set up, and there's a video on youtube that explains how to set up Paddle on your nextJS project.
@@SerRGilk Hey, he likely is not 'ignoring you' but just has more things on his mind. Try being a bit more considerate for the amount of stuff he just gave you for free. Sucks that your country isn't supported by Stripe (it really is) but it doesn't mean Antonio should spend time coming up with alternatives for you. I don't think you would like that when the situation is reversed.
OMG, I love you Antonio❤️. I am currently watching one of your videos and I have to pause it to comment this. I recently watched JS Mastery explain the same NextJs Concept but I didn't understand a thing. But barely 20 minutes into your video I feel I can build anything because your explanation is just the best on RUclips. You deserve 100 million subscribers and much more. Thanks for making these video's. I'm looking forward to more from you.❤️❤️❤️❤️❤️❤️
There aren’t any critical changes in next 14 within this project. But I agree that for the new videos it would be better if it could see similar micro saas products rather than whole spotify, trello or duolingo clone
@@pragyashrivastava9270there are many modules are deprecated and I want to say if you want to make the project for CV don't make this project , choose another project
Amazing tutorial, cant thank you enough for taking the time to provide all this content to the rest of us for free ! it was exciting following along up to the api section where i got totally lost, it will help alot once the repo gets updated
Want to get mentored by me? Apply at www.codewithantonio.com/mentorship
Hello everyone, thank you for choosing this video. In this tutorial you will learn how to build your own SaaS AI Platform and build 5 different AI tools using models like OpenAI and ReplicateAI. Checkout the description for links and subscribe to the newsletter! ❤
Great brother
Music generation is not working in my case. I have checked everything even copy pasted your code. Still nothing works in replicate
Your demo link is not working
sir your website is showing error in live demo
@@saurabhkumarsingh4628 that is because he reached his set limit for spending in openapi and replicate
add "asChild" to fix hydration errors,
also the free tire of planetScale is gone
thank you buddy!
A note for anyone following along, the api code for openai has changed a bit since this video was posted, the api has the most differences so far. You need to use:
const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages});
return NextResponse.json(response.choices[0].message);
Thank you!
or else you can force install older version of open AI by running `npm i openai@3.3.0` and follow the exact code in the tutorial.
@@rishabhgupta5974 bro still get the error AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
code
:
"ERR_BAD_RESPONSE" pls help
@rishabhgupta5974 why would you do that? Its literally 10 times more expensive
Hi please in the conversation/page.tsx I'm getting error: role does not exist in type OpenAI, same thing with content, I have updated my API to use the v4. Anyway around this ?
Amazing, next up will be the 10 hour E-commerce! Love the styling and the amount of details that goes into it.
Can't belive this is free
Glad you like it!
I also can't believe all this content is free. Congratulations on your excellent work.
As a CSE student, I highly commend your quality beginner-friendly tutorials for aiding web programming understanding, so smooth..
Glad it was helpful!
I'm honestly blown away sir. This was my first ever proper project that was deployed and so well done. Your style of guiding us along was amazing and so well put out. Immensely grateful to you and these free top notch tutorials you put out.
It took me 5-6 days to complete the project.
can i have your github ?
hello! As the Api key is free which he take from openai like for conversation,voice,image and video.
This video deserves views more than the longest video on youtube, i will keep on coming back to it - it is part of my playlist. so much value, i would recommend it for any entrepreneur venturing online.
Glad you enjoy it!
Antonio, I must say, you are absolutely incredible! The quality of your content is truly unmatched, and I am genuinely excited for what is yet to come. Congratulations on your outstanding work!
Glad you enjoy it!
PLEASE provide the code files and the links in the description as soon as possible for free. @@codewithantonio Thank You so much ❤️
Gosh Mr. Antonio, there are so many frameworks, libraries, packages, companies and services which are required for this Fullstack MAGNIFICENT APP.
This has got to be the very best AI SAAS App, I have ever seen to date.
Thank you for your kind words!
This is what startups build! I can't thank you enough, it's been a long time looking for complete tutorials like yours, Thank you so much Antonio for this great work! I am learning a lot from your channel so I can go and apply the knowledge to build my own SaaS.
Keep up the good work.
You're very welcome!
Amazing video! Checkpoint: 40:00
Quality gets better by the day. I'm really enjoying the teaching approach you've decided to go for in your latest videos. Keep it up, Antonio!
Thank you!
Congratulations, Sir Antonio Erdeljac, on your first sponsored video! 🎉
You deserve this recognition for your amazing work as a developer and youtuber.
I'm a huge fan of yours and I always watch your videos with great interest and admiration.
This AI SaaS video is awesome! I was very excited about the content and the tips you shared.
You are an inspiration to me and many other developers.
Thank you so much for everything you have done for the community.
I wish you much success in your journey and I hope to see more of your videos soon.
🤗Veliki zagrljaj iz Recifea, Brazila! 🇧🇷
Thank you a lot for supporting my channel!
BRBRBRBR
You're also from Recife? haaha
Hey,is your code working?
A quick tip for the Hydration Error at 1:07:30. This error occurs because you've enclosed the button from @/components/ui/button within the SheetTrigger component, which is, in essence, another button. To wrap a button inside a button isn't compliant with HTML syntax, resulting in the error being triggered. One potential solution would be to eliminate the Button component and directly wrap the menu within the SheetTrigger component.
Change the Button component to a span or i element with the className="md:hidden" is better otherwise the icon will not be hidden on large screen.
@@snoviie you saved my life
@@snoviie fixed it for me too. Thanks bud
Literal lifesaver. Thank you so much.
You can avoid hydration error by modifying in the navbar file(/components/navbar.tsx)
By adding import package and changing the export function.
import dynamic from 'next/dynamic ';
export default dynamic (()=> Promise.resolve(Navbar),{ssr:false})
I think this the first video on RUclips development of a whole SaaS. Love from India ❤️. Keep it up.
Glad you liked it!!
I was just doing your twitter tutorial but when I saw this, I stopped and started straight away on making this! it is a dream of mine to make an AI! Thanks for all the amazing work!
Glad you like it!
Your channel is destined to be the platform for web developer❤
Thank you a lot !!
@@codewithantonio Hello Antonio, Just Superb, learn a lot from this video. I will definitely share on my on-running website in future updates. I have a question: What if I want to sell this to my client after completing this project? Should I need to have some customization from my own and what customization should I need ? Thanks a lot for this and for future updates.
love the fact that you're using shadcn -- not only because it looks good, but also because it allows you (and therefore us) to better focus on the core parts of the application instead of writing hundreds of tailwind classes and tens of small components
Yes, I love shadncui!
I just finished my 1st app with Antonio🎉 I’m gonna list the challenges I have encountered during the past week: 1. OpenAI api has been changed, the pinned comment on the 1st page helped me out. 2. The image generation also changed, for me, I can only generate 1 image a time for the latest dall-e-3 model, if you want to have multiple image generations at 1 time, the doc says do parallel requests to achieve that(I’m lazy I just limited the option to 1 page only). Thanks again Antonio, amazing job! Wish you happy new year!🎉🎉🎉
Great job!!
No my image option is working fine, I am able to generate 4image too, and I want to ask you how you created the database in planetscale as it is asking card details.
@@sudhanshugautam425any updates??
Hey can you please share your github
I am doing changes but they are not working for me
Good to hear that, I am stuck in the image generation, can you please share how to change the code for image generation?
Antonio is back again with top quality content. Thank you very much bro. Happy for getting the first of a long list of sponsors. Upward and forward. 👏👏👏
Thank you for the nice words!
wow another tutorial. what great timing just after i finished the ecommerce one yesterday. but I'm going to rest today and get started with this new one tomorrow or Friday. I am so grateful for all of this high quality tutorials from Antonio. Thankyou sir !
You got this!
Hey the OpenAi Api is charging now, its not free anymore, Any alternative we can use?
If you are getting error after deploying on Vercel 5:30:36 ,the reason is that the AI generation function takes more than 10seconds to generate a response but Vercel only gives 10sseconds of function running time on free tier. So either upgrade to prop plan on vercel and update all your AI generation routes with
export const maxDuration = 300;
or simply choose another hosting platform like AWS or Linode
Thank You
Hi, I am facing this error. Can you give me more details on how to add maxDuration in the api routes? Thanks!
The tutorial is great, for the ones that are following along at this moment have in mind the OpenAi import changed, now to import you need to use import OpenAI from 'openai'; instead of import { Configuration, OpenAIApi } from "openai";
Can you give the first 20 line code of route.ts.
Bcz i am confused about that Configuration and OpenAIApi objects
after fighting with next-auth and iron-session for hours and hours, clerk is imcredible!
You are wonderful at what you do! First time using Shadcn, Stripe & Clerk and I love it!! So fast!! Thank You
Glad you enjoy it!
You have to take a shot everytime Antonio says "Amazing" -- it's the law
hahahahaha
Hahah
first 3 minutes of the video and I feel 🥴 dizzy
finally got this build completed and it worked first time without any problems. once again i thank Antonio for his great tutorial and hard work in producing these tutorials. I am learning lots and am very grateful.
Great job!!!!! Thank you for following the tutorial!
Is this mobile responsive?
@@LegendSaaab yes
Awesome @codewithantonio - Please make more videos for SAAS, its so helpful and we get to learn a lot about building saas from scratch
I agree more
Wonderful, I've been doing your tutorials so I can enter the industry. I've learnt so much from you. Thank you, thank you, thank you. Keep the excellent work Antonio! 👏👏👏
Glad I Could Help!
Really appreciate your teaching style and how you managed to teach side topics which generally become big issues and beginners have to look out of RUclips windows. I wish you would make an advanced projects that focuses on free tools and gives us detailed idea about Industry level software. Thank you for this one!
can you tell me is openai api is free or not?
@@ujjwalmaheshwari2327 It's complimentary for newcomers, at least for a limited duration, I presume.
@@mohitcodeswell ohk Thanks buddy!
I have not gone through the project but Sir, I appreciate your effort. You have empowered me with knowledge. Thank you.
You are most welcome
Man, words can not describe how I am grateful for your contents. Your desire and quality is exceptional, hope to have you always like this in coming years. Remain valuable please ❤
thank you!
Finally I Got some SaaS app... I have been searching for it for many days. There's no good SaaS app. thank you very much. I hope u keep doing these kinds of apps often😊
Happy to help
Hello Antonio from New York, USA! First I’d like to thank you for the great video tutorials. I completed the Netflix clone last week and really enjoyed it.
I’d like to share something with you and everyone about the Shadcn “Sheet” and Button components for the mobile sidebar. I was getting render errors in the browser - server and client renders were not matching and was throwing an error at the node in the mobile sidebar. The part of the code where the custom buttons are wrapping around the Menu icon from lucid.
Turns out that when you use the Sheet component and then wrap like this:
It will throw the render error. It looks like SheetTrigger in and of itself IS a button element, so adding the additional Button is an issue. If you just remove the custom button tags and just have the Menu wrapped around the SheetTrigger elements, it will clear that error. Hope that helps someone!
Thanks again Antonio!!
Lew Savage
Thanks for that info, it will help someone and I will keep it in mind!
Thanks man!!! It was really helpful.
Thank you so much!
Also, don't forget to add 'md:hidden' into className of 'Menu' :)
seems to work for me
Thank you! It was helpful
Svaka cast za tutorijal presisao si i Denissa i Traversy Media i sve njih po kvaliteti tutorijala
👏👏
Hvalaa!
You are awesome Antonio. You can't possibly imagine how much you've helped me. Thanks. I'm really grateful.
Happy to hear that!
Thank you so much Antonio! this is what I have been looking for and to be able to add voice query to the conversational Ui FUNCTIONALITY
I pray you continue giving us projects like this
Glad it was helpful!
Thank you man, I learned Typescript because I loved your explanation❤❤
Glad it helped!
Hey,is your code working?
Hvala ti puno za ovaj tutorial! Pozdrav iz Njemacke
Drago mi je da je pomogao! :)
Oopa. Svaka cast Antonio!
This is massive, I've been waiting for you to drop the video. Also congrats on your first sponsorship. You're doing very great
Thanks a ton!
Amazing work Antonio! I just finished this tutorial and I can't believe how much effort you have gone through to teach us some many different things using a single application. Really appreciate your time man, looking forward to many more! Much love from Australia 💙
Wow!! This is incredible! Thought JS Mastery was the only beast on RUclips, but your style and explanations are incredibly great. Thank you and Please keep it up. More subscribers are on their way.
Glad you like it, JS Mastery is amazing!
Good Antonio 🎉 can I thief your ideas and mix with golang and svelte? ❤❤😊
Yea after ja mastery your video is very much helpful
TRY Lama Dev, you will see
@@didosrukundo3271 Lama Dev only build navbar and bunch of divs. No quality project with APIs and Libraries
Congratz for your first sponsor Antonio, you deserve it!
I'm looking forward to watch your video!
Thanks! 😃
Absolutely amazing, i used to do webdev in django but learned react and nextjs just to follow along with your brilliant tutorials
Glad I could help!
How is it superior to just vanilla JS html and css(beginner here)
Man what am I doing not subscribing to your channel?! Your channel is so underrated, I will tell my friends about your channel bro, I gotchu!
Thank you!
@@codewithantonio The api you use is free or paid
Lol i quickly went through the video and mentioned this in my projects section and my interviewer was thoroughly impressed, even tho my data structures round didn't go well his mind was blown that an undergraduate could create this on his own, if i get in i donate u hald of my first year salary
As always, Antonio is providing tons of great value for the community, every time you upload something I just know its going to be awesome!
Thank you!
I appreciate that!
My man you are absolutely the best! I have built a half assed saas product, following the docs, but now I can finally see how to do it. Thanks man. Keep up the good work.
You got your self a new subscriber.
Happy I could help!
@@codewithantonio I do have 1 question though. I am going through the video, but for some reason I can't install shadcn...I get some error about a missing module called minimatch...Do you know how to fix that issue?
Actually I ran the wrong command... 😅
YOU'RE ABSOLUTELY AMAZING!, Thanks so much from Egypt!
You're so welcome!
@@codewithantonio thanks!, i have a question in your NEXT-AUTH v5 course, there’s a logic doesn’t make sense to me in /actions/new-verification.ts, Which is u was trying to update user email from VerificationToken model in case it requested by user to change his email so user email on his VerificationToken will be different than one that on User model, but in a previous step u were throw error if the email of VerificationToken is not found in User model, can you please revert on that because i feel there’s something i misunderstood, Thanks for your efforts!
Javascript Mastery, Lama Dev and now Code with Antonio ❤
Indeed so far your are the only one who trully went over every detail. Thank you !
Glad it was helpful!
I love you, in 2 videos i see i learn more than 10 courses i made in udemy, you are a machine! keep the good works, congratz on your sponsor, now i have to become a member, i really enjoy this channel.
And of course, if I can make a suggestion, I would say to build a more "simple" application covering the basics of react, that is to build something using only react and vite for example to help those who still have some difficulties in understanding react basics, if already exists on the channel, I'm sorry, I'm marathoning things here :)
Glad my videos helped you, and thank you for the suggestion!
The content you provide is massive. I'm a react engineer and I wanted to advance my skill and here I am
Took me awhile, but finally done with this tutorial! Time to start selling this as a SaaS!! THanks bro
Great job!
how did you get the Api to work it doesn't generate anything for me
how's your saas doing now? :)
In future I hope you will give us more projects like that🎉
Your all projects are unique and we hope that you will gift us more projects that will help our future journey ❤️❤️❤️
Thank you sir🎉❤
Glad you like my videos!
Ufff, I don't know how this content is free, is absolutly incredible, thank you very very much for this. Simple, you can almost copy this and start winning some money with this amazing SAAS software in your own country.
Glad you enjoy it!
If any one got stuck in the image generation implementation like me. The api function and response object has changed in the latest openai version.
You need to use this:
const response = await openai.images.generate(
{
prompt,
n: parseInt(amount, 10),
size: resolution,
});
return NextResponse.json(response.data);
thank you very much for this tutorial and especially for the discovery of Clerk which is just incredibly simple compared to Next-auth which requires more work in the configuration of providers!
Do not hesitate to use it in your future projects.
Thank you for your amazing videos
Glad it was helpful!
One like button is not enough for your content. You're the best Antonio!
Appreciate that! Thank you!
This is such a great project to learn SaaS and that to with OpenAI apis , WIll Start making this project once done with your last video.
thanks sir antonio for such quality content.
Have fun!
Antonio, your work is truly a well-explained and exceptional masterpiece. Please keep going.💻
Thanks a lot!
Finished 🎉🎉 , it was great 5 days with you😇 , thank for this amazing tutorial ❤
Great job!!!
For anyone getting the interface issue (openaiv4 had some changes):
import OpenAI from "openai" //we only need to import this from openai
const userMessage: OpenAI.Chat.ChatCompletionMessage = {
role: "user",
content: values.prompt
}
For node.js, no need to import configuration, here also we only need to import OpenAI.
const openai = new OpenAI ({
apiKey: process.env.OPENAI_API_KEY
})
const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [instructionMessage, ...messages],
})
return new NextResponse(JSON.stringify(response.choices[0].message))
Thanks man for saving my life
Hello @saurabhshakya5367, where does the 'instructionMessage' come from? Are there any other changes to be made in the conversation page? For example, should we keep this code (const [messages, setMessages] = useState([]);)? Thank you in advance
@@jordanesanson6911 i had the same question...
@jordanesanson6911 my mistake, instructionMessage is used in the code route, so if you are currently working on the conversation route then remove it.
@@saurabhshakya5367 can you show the code ?
Great project. Learned a lot, I customized a lot of it too. Added some new models (speech, image optimizations etc), Also added a full Admin Panel with app management, user management, and software metrics. I managed to add some metrics for users too so they can track their usage. Thank you for putting in so much effort.
Amazing job!
@@codewithantonio Hey! Thanks a lot for responding, you're doing an amazing job. Absolutely love your videos.
great to hear that. @codewithantonio provided great base for me too. I also want to build some thing like that. Can you guide me how you dd that ?
Hey this is very awesome stuff. I was wondering if you'd consider doing tutorials on complex applications like codux or figma clones. Tutorials that help us build tools and libraries thus making us understand them even more.
Great suggestion!
Hi Anthonio, your tutorials are simply amazing. I can only imagine the amount of work that goes into these contents you make free. You are a gem! Thank you.
Did you finish the project recently?
You are amazing Antonio Sir ❤
Every single time, you drop an incredible projects 🎉🔥
Glad you enjoy it!
Thank you, Antoni. I have watched many of your videos, but this video you taught very carefully and in detail. Lots of love!
Glad it was helpful!
At 34:45, to anyone dealing with issues with the middleware.ts for clerk auth, the new default is that all routes are public and you need to designate protected routes, versus in this tutorial, all routes are protected by default, and you need to designate public routes.
From the clerk docs, this is how you get the behavior you want:
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const isPublicRoute = createRouteMatcher(["/"]);
export default clerkMiddleware((auth, request) => {
if (!isPublicRoute(request)) {
auth().protect();
}
});
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
sir im still facing the same issue what shoud i do (i'm not able to redirect to dashboard)
@@swarshashvat4777 i am also facing the same issue did you find any solutions?
did not solve the problem unable to redirect the dashboard can you please solve this issue
If someone get to be hired by Antonio's videos, has to let him know. Really appreciate your videos, they're kinda the ultimate guide to be a master using Nextjs. If I ever see u I would like you to autograph my laptop 🥺
hahahaha thank you for the kind words
Hi Antonio,
In the mobile view, the button to pull the sheet does not go to left with sheet when clicked. It just stuck in the same place.. along with the Dashboard protected text.
How to make it go to the left when clicked?
Very much appreciated if you can help
Yes this was an issue I also faced.
Nice tutorial. Reminder for people at the end of deployment is to ensure that Stripe is out of test mode and that you have activated your stripe account properly with business details etc.
I really liked the video, I'm advancing it on your platform, I had a question that was what brought me here, do you plan to include AI in future projects? Greetings
I definitely plan on using AI in the future projects :)
@@codewithantonio Thanks 💜
Woooooo! Congrats on the first sponsor. First of many. You've inspired and motivated me to what's possible and I thank you. Wishing you all of the success that is already determined for you bro
Hey Antonio, Amazing video!
After completing the whole project, I am getting error as: "Failed to load resource: the server responded with a status of 500 (Internal Server Error)"
and "Something went wrong" from hot-toast
I have tried multiple openai keys from multiple accounts, still facing this problem
Please help!
How did you fixed this?
Thank you so much for these tutorials. I only got up to 1:30 so far, but I really enjoy these tutorials that are not just "Hello world".
On the AI-topic: the most shocking part for me is how much of the tutorial github copilot is able to autocomplete. Some of it was non-working trash, but it made a different, but really nice looking dashboard for me when i just wrote tools.map(. I begin to think we are all going to be unemployed within the next five - ten years.
Glad you like them! Dont look at AI as the enemy, look at it as a friend who is going to improve your coding speed!
@@codewithantonio I don't, at least for some years, it is going to require someone to translate between customer and IT, and I would very much like not having to understand every javascript framework out there. Give me a form, I don't care how. Recently, I had it write me a python script to generate an image from a uuid (basically a QR-code, but different), I know even less Python than Javascript, but it all works, REST API and all. Put it into some docker container and the task is done.
Tbh, I don't know much about react or next, I only got into it because of my old school, PHP API-Platform and i noticed it's rather quick. I have no idea what zod is, probably it's a common library to use, but when i began typing, it suggested a default value for "prompt". I didn't get much further, because i started drinking, but I assume you can set any default values for any form input fields you are going to use, so for that suggestion it either would have to have scanned your github and comprehend that I am making a copy or understand that this project is about AI from just a few headlines. Both, I think, are pretty impressive.
for the middleware in the new version of clerk:
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const isProtectedRoute = createRouteMatcher(["/dashboard(.*)", "/forum(.*)"]);
export default clerkMiddleware((auth, req) => {
if (isProtectedRoute(req)) auth().protect();
});
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
Thanks a lot!! I was so confused!
Dude I’m still digesting your last video, sheeesh, big props bro, I’ll get to this one soon
Glad you like it!
I can watch this hero all day🥇thank you so much, Antonio!
My pleasure!!
I followed you but when using Clerk's SignIn and SignUp components, it doesn't render anything, why? Please help me fix it pls
I am running into that same issue. Were you able to determine what the issue is?
Error: The default export is not a React Component in page: "/sign-in/[[...sign-in]]" that's what I got oops
I run into the same issue :/ @@Gh05t_Dev
Shalom evening Mr. A, this looks FANTASTIC and very much involved.
Interestingly enough, I had previously wrote a post about having an app which can perform multiple forms of AI service.
And this is it but so much more. I did not know AI could generate audio files or video files.
Thank you for sharing!
Shalom
Glad you like it, thank you!
Did openai api get updated? ChatCompletionRequestMessage doesn't seem to be working for me
Exactly I have the same problem
Yes it gets updated
Now OpenAiApi changed to OpenAI
Also there is another changes.
You just search youtube, it will help you
@@MelvinManoj-kx2msHey have you completed this project and its working perfectly?
I accidentally ended up watching the entire 5-hour video. Fantastic!
if someone has problems with lucide react -> downgrade next to
"next": "13.4.12",
First of all, outstanding project, learned some cool things! I''ll organize my project like this from now on.
Two tips:
- To import stuff automatically you can press control+space;
- Use prettier on save :P
Did anyone else had problems with importing lucide icons?
yeah, after recent update of Next.js I was not able to import icons from "lucide-react", had to import from full path "../node_modules/lucid-react", but it's fixed now.
Stripe is not supported in my country. What are my alternatives for a subscription model?
same problem lol
@@danialdevelops7368 Since he is ignoring us, I did some research, and the easiest solution that I found is Paddle.
Look for Paddle, they are super easy to set up, and there's a video on youtube that explains how to set up Paddle on your nextJS project.
@@SerRGilk Hey, he likely is not 'ignoring you' but just has more things on his mind. Try being a bit more considerate for the amount of stuff he just gave you for free. Sucks that your country isn't supported by Stripe (it really is) but it doesn't mean Antonio should spend time coming up with alternatives for you. I don't think you would like that when the situation is reversed.
nice one! especially the stripe stuff!!! I will be referencing this when integrating stripe to my platform over the next few weeks
Glad it was helpful!
1:52:32 unable to find the module in openai . Cant find resourse on this . How to fix this can anyone help .
Same problem
@@HAMOKA- solution 1 : install old openai version: v3.3.0
Solution 2: try this ChatCompletionMessageParam instead
Hope this helps
Use ChatCompletionMessageParam instead, this is due to the updated SDK of openai.
Thank you for making us learn clerk and all its features
Happy you like it!
i had error in configuration and openaiapi
Same bro
What the solution of this
Open ai has updated and changed its api. That was used in v3. The new V4 has a different method of doing it. Check the documentation
Hello bro, did you manage to solve this problem? I'm stuck here too.
All love, you're creating next-gen devs left right center !
Happy to hear that!
OMG, I love you Antonio❤️. I am currently watching one of your videos and I have to pause it to comment this. I recently watched JS Mastery explain the same NextJs Concept but I didn't understand a thing. But barely 20 minutes into your video I feel I can build anything because your explanation is just the best on RUclips. You deserve 100 million subscribers and much more.
Thanks for making these video's. I'm looking forward to more from you.❤️❤️❤️❤️❤️❤️
Can you bring this course updated ?
There aren’t any critical changes in next 14 within this project. But I agree that for the new videos it would be better if it could see similar micro saas products rather than whole spotify, trello or duolingo clone
I have been looking for this type of channel for a long time. Thanks so much Antonio!
Glad you enjoy it!
MANY MODULES are deprecated
Hey can you tell me which ones are deprecated and how do I manage making it otherwise
@@pragyashrivastava9270there are many modules are deprecated and I want to say if you want to make the project for CV don't make this project , choose another project
@@pragyashrivastava9270ｕcan refer to the documentation to switch for the deprecated function
Dont follow if u are a beginner
Welcome to software development 😅 Time to learn how to read documentation
this channel is underrated for learning, great job antonio
Glad you think so!
Amazing tutorial, cant thank you enough for taking the time to provide all this content to the rest of us for free !
it was exciting following along up to the api section where i got totally lost, it will help alot once the repo gets updated
Thank you, I really whole heartedly admire you. Your projects are awesome and unique that based on real world problem solving.
Thank you very much!
What a time to be alive! Thank you for this precious content, sir. Keep it Up!
you just answered all the questions I had to build my own app online with AI :) Thank you