Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, Stripe | Full Tutorial 2023

Поделиться
HTML-код
  • Опубликовано: 31 май 2024
  • Discord for any problems/errors/bugs: www.codewithantonio.com/discord
    Github & Live Website: www.codewithantonio.com/proje...
    Clerk Authentication: bit.ly/3pNzsYX
    In this video, we dive deep into crafting a state-of-the-art AI SaaS Platform with five AI tools. Powered by the Next.js 13 App Router, our platform will not only be efficient but also user-centric.
    The Next.js 13 App Router is a groundbreaking addition to the Next.js framework, enabling developers to design intricate client-side routing effortlessly. Leveraging this powerful tool, we'll integrate a seamless Stripe subscription system, ensuring a smooth billing process for your users.
    Beyond the core functionalities, we'll embark on an instructive journey of building our SaaS application using a rich palette of web development technologies like React, Tailwind, Prisma, MySQL, Clerk, and more. Each step is elucidated in detail, ensuring a comprehensive learning experience.
    Whether you're just stepping into the world of development or have years of experience under your belt, this video is tailored to impart knowledge valuable for all. Ready to master the art of building a 5-tool AI SaaS platform? Grab your coding gear, perhaps a cup of coffee, and let's pioneer the AI-driven web landscape of 2023 with Next.js 13 App Router!
    Timestamps
    00:00 Intro
    05:40 Environment Setup
    16:32 Folder Setup
    25:41 Clerk Authentication
    40:01 Sidebar
    01:06:29 Dashboard
    01:20:08 Conversation AI UI
    01:42:10 Conversation AI API (Open AI)
    02:08:44 Code Generation AI (Open AI)
    02:19:38 Image Generation AI (Open AI)
    02:43:03 Music Generation AI (Replicate AI)
    02:56:03 Video Generation AI (Replicate AI)
    03:03:45 API Limit
    03:23:46 API Limit UI Counter
    03:40:05 Pro Modal UI
    04:04:47 Stripe Integration
    04:59:42 Error Handling & Customer Support (Crisp)
    05:08:35 Landing Page
    05:24:35 Deployment & Wrap Up

Комментарии • 1,5 тыс.

  • @codewithantonio
    @codewithantonio  10 месяцев назад +177

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

    • @durgashukla240
      @durgashukla240 10 месяцев назад +5

      Great brother

    • @Evil_E_ye
      @Evil_E_ye 10 месяцев назад

      Music generation is not working in my case. I have checked everything even copy pasted your code. Still nothing works in replicate

    • @krishnachaitanya4067
      @krishnachaitanya4067 10 месяцев назад +2

      Your demo link is not working

    • @saurabhkumarsingh4628
      @saurabhkumarsingh4628 10 месяцев назад

      sir your website is showing error in live demo

    • @Evil_E_ye
      @Evil_E_ye 10 месяцев назад

      @@saurabhkumarsingh4628 that is because he reached his set limit for spending in openapi and replicate

  • @GavinHHHH
    @GavinHHHH 3 месяца назад +12

    add "asChild" to fix hydration errors,

    • @arkaacharya_7047
      @arkaacharya_7047 2 месяца назад

      also the free tire of planetScale is gone

  • @thedesigner987654321
    @thedesigner987654321 9 месяцев назад +183

    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);

    • @codewithantonio
      @codewithantonio  9 месяцев назад +10

      Thank you!

    • @rishabhgupta5974
      @rishabhgupta5974 9 месяцев назад +30

      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.

    • @tiqlol
      @tiqlol 9 месяцев назад +1

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

    • @jd2161
      @jd2161 9 месяцев назад +2

      @rishabhgupta5974 why would you do that? Its literally 10 times more expensive

    • @edutech8909
      @edutech8909 9 месяцев назад +1

      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 ?

  • @danielkrsak4338
    @danielkrsak4338 10 месяцев назад +23

    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!

  • @Eventyret
    @Eventyret 10 месяцев назад +71

    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

    • @codewithantonio
      @codewithantonio  10 месяцев назад +12

      Glad you like it!

    • @felype_dev
      @felype_dev 7 месяцев назад +3

      I also can't believe all this content is free. Congratulations on your excellent work.

  • @marciplan
    @marciplan 10 месяцев назад +59

    You have to take a shot everytime Antonio says "Amazing" -- it's the law

  • @jormencar
    @jormencar 10 месяцев назад +61

    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!

    • @codewithantonio
      @codewithantonio  10 месяцев назад +2

      Glad you enjoy it!

    • @pandipatipavan3804
      @pandipatipavan3804 5 месяцев назад +1

      PLEASE provide the code files and the links in the description as soon as possible for free. ​@@codewithantonio Thank You so much ❤️

  • @motivations_uplift
    @motivations_uplift 8 месяцев назад +15

    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.

  • @adlerspencer
    @adlerspencer 10 месяцев назад +83

    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! 🇧🇷

  • @AbhishekYadav-ch2mn
    @AbhishekYadav-ch2mn 10 месяцев назад +57

    Your channel is destined to be the platform for web developer❤

    • @codewithantonio
      @codewithantonio  10 месяцев назад +2

      Thank you a lot !!

    • @juman8407
      @juman8407 10 месяцев назад

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

  • @Kevin-jc1fx
    @Kevin-jc1fx 10 месяцев назад +9

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

  • @ItzAyon
    @ItzAyon 2 месяца назад

    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 💙

  • @nihal2516
    @nihal2516 8 месяцев назад +7

    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.

    • @avishtaukoorah9359
      @avishtaukoorah9359 8 месяцев назад

      can i have your github ?

    • @faisaliqbal6681
      @faisaliqbal6681 3 месяца назад

      hello! As the Api key is free which he take from openai like for conversation,voice,image and video.

  • @vksskssks
    @vksskssks 10 месяцев назад +12

    As a CSE student, I highly commend your quality beginner-friendly tutorials for aiding web programming understanding, so smooth..

  • @johnadriandodge
    @johnadriandodge 10 месяцев назад +4

    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.

  • @mariooliver4051
    @mariooliver4051 10 месяцев назад

    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

  • @TheJockerproductions
    @TheJockerproductions 9 месяцев назад +1

    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

  • @s9saiyajin
    @s9saiyajin 8 месяцев назад +13

    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.

    • @sunji568
      @sunji568 8 месяцев назад

      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.

    • @davidvillamil3387
      @davidvillamil3387 7 месяцев назад

      @@snoviie you saved my life

    • @l.uke_
      @l.uke_ 7 месяцев назад

      @@snoviie fixed it for me too. Thanks bud

    •  5 месяцев назад

      Literal lifesaver. Thank you so much.

    • @adharshs1211
      @adharshs1211 4 месяца назад

      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})

  • @TheGaoNan
    @TheGaoNan 10 месяцев назад +5

    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!

  • @quantaraum
    @quantaraum 8 месяцев назад

    wow just wow. i appreciate this detailed and step by step tutorial alot. this is one of the first youtube tutorial which i could follow from start to finish. i reckon this took alot of work so i just wanted to thank you so much. you are doing god's work. i had to figure out the gpt-4 version on my own since the update but this was actually quiet fun. you are genuinely the best at explaining, going through it step by step so it's organized and clear. cheers!

    • @nurasxni
      @nurasxni 6 месяцев назад +4

      How did you figure out the gpt 4 version? I’m currently stuck please help

    • @j2devstudio
      @j2devstudio 5 месяцев назад +1

      I'm also stuck. trying to follow the docs and adapt the code. can you share your repo link ?

  • @moizkhan1950
    @moizkhan1950 3 дня назад +1

    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.

    • @codewithantonio
      @codewithantonio  3 дня назад +1

      Amazing job!

    • @moizkhan1950
      @moizkhan1950 День назад +1

      @@codewithantonio Hey! Thanks a lot for responding, you're doing an amazing job. Absolutely love your videos.

  • @oscarokereke2675
    @oscarokereke2675 10 месяцев назад +3

    This is massive, I've been waiting for you to drop the video. Also congrats on your first sponsorship. You're doing very great

  • @jonathanramirez6187
    @jonathanramirez6187 10 месяцев назад +4

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

  • @shorts_faceless
    @shorts_faceless 10 месяцев назад +7

    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

  • @SuperPompey77
    @SuperPompey77 10 месяцев назад +3

    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 !

    • @codewithantonio
      @codewithantonio  10 месяцев назад +1

      You got this!

    • @RohitKumar-ws3pt
      @RohitKumar-ws3pt 10 месяцев назад

      Hey the OpenAi Api is charging now, its not free anymore, Any alternative we can use?

  • @mohitcodeswell
    @mohitcodeswell 10 месяцев назад +8

    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!

    • @ujjwalmaheshwari2327
      @ujjwalmaheshwari2327 7 месяцев назад

      can you tell me is openai api is free or not?

    • @mohitcodeswell
      @mohitcodeswell 7 месяцев назад

      @@ujjwalmaheshwari2327 It's complimentary for newcomers, at least for a limited duration, I presume.

    • @ujjwalmaheshwari2327
      @ujjwalmaheshwari2327 7 месяцев назад +1

      @@mohitcodeswell ohk Thanks buddy!

  • @guardian1243
    @guardian1243 10 месяцев назад +5

    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!

  • @EdwardBudaza
    @EdwardBudaza 10 месяцев назад +4

    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.

  • @mehdichamiani6838
    @mehdichamiani6838 10 месяцев назад +7

    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 ❤

  • @maharshiguin7813
    @maharshiguin7813 10 месяцев назад +3

    Absolutely amazing, i used to do webdev in django but learned react and nextjs just to follow along with your brilliant tutorials

    • @codewithantonio
      @codewithantonio  10 месяцев назад +1

      Glad I could help!

    • @SageSoundd
      @SageSoundd 10 месяцев назад

      How is it superior to just vanilla JS html and css(beginner here)

  • @dart_ariz604
    @dart_ariz604 6 месяцев назад +5

    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

    • @hanspreinfalk8072
      @hanspreinfalk8072 3 месяца назад

      Hi, I am facing this error. Can you give me more details on how to add maxDuration in the api routes? Thanks!

  • @iconics_cms
    @iconics_cms 8 месяцев назад

    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.❤️❤️❤️❤️❤️❤️

  • @timattracts
    @timattracts 10 месяцев назад +2

    You are wonderful at what you do! First time using Shadcn, Stripe & Clerk and I love it!! So fast!! Thank You

  • @easilyCoded
    @easilyCoded 10 месяцев назад +19

    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.

    • @codewithantonio
      @codewithantonio  10 месяцев назад +6

      Glad you like it, JS Mastery is amazing!

    • @jafarghorbani-vh4qb
      @jafarghorbani-vh4qb 10 месяцев назад

      Good Antonio 🎉 can I thief your ideas and mix with golang and svelte? ❤❤😊

    • @codingvidyalaya8370
      @codingvidyalaya8370 10 месяцев назад +1

      Yea after ja mastery your video is very much helpful

    • @didosrukundo3271
      @didosrukundo3271 10 месяцев назад +3

      TRY Lama Dev, you will see

    • @easilyCoded
      @easilyCoded 10 месяцев назад

      @@didosrukundo3271 Lama Dev only build navbar and bunch of divs. No quality project with APIs and Libraries

  • @peteresezobor7
    @peteresezobor7 10 месяцев назад +3

    You are awesome Antonio. You can't possibly imagine how much you've helped me. Thanks. I'm really grateful.

  • @DisasterSPA
    @DisasterSPA 10 месяцев назад +2

    Your videos are such a blast to watch and also very informative. As you'd say "Great, great job!"

  • @SuperPompey77
    @SuperPompey77 10 месяцев назад +2

    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.

    • @codewithantonio
      @codewithantonio  10 месяцев назад +1

      Great job!!!!! Thank you for following the tutorial!

    • @LegendSaaab
      @LegendSaaab 9 месяцев назад +1

      Is this mobile responsive?

    • @SuperPompey77
      @SuperPompey77 9 месяцев назад

      @@LegendSaaab yes

  • @aadarsh8306
    @aadarsh8306 10 месяцев назад +4

    Awesome @codewithantonio - Please make more videos for SAAS, its so helpful and we get to learn a lot about building saas from scratch

    • @jd2161
      @jd2161 9 месяцев назад

      I agree more

  • @avishekdas4947
    @avishekdas4947 10 месяцев назад +3

    I think this the first video on RUclips development of a whole SaaS. Love from India ❤️. Keep it up.

  • @nguyenhongson5749
    @nguyenhongson5749 10 месяцев назад +1

    Thank you, Antoni. I have watched many of your videos, but this video you taught very carefully and in detail. Lots of love!

  • @user-tq1bd9nd5y
    @user-tq1bd9nd5y 7 месяцев назад +1

    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

  • @bikesbeersbeats
    @bikesbeersbeats 9 месяцев назад +3

    after fighting with next-auth and iron-session for hours and hours, clerk is imcredible!

  • @domz19901
    @domz19901 10 месяцев назад +3

    Antonio, your work is truly a well-explained and exceptional masterpiece. Please keep going.💻

  • @jacopoalberto
    @jacopoalberto 7 месяцев назад

    This is absolutely amazing. Thank you so much, Antonio!

  • @ismailk7021
    @ismailk7021 10 месяцев назад +1

    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
      @codewithantonio  10 месяцев назад

      Happy I could help!

    • @ismailk7021
      @ismailk7021 10 месяцев назад

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

    • @ismailk7021
      @ismailk7021 10 месяцев назад +1

      Actually I ran the wrong command... 😅

  • @jichaoan7484
    @jichaoan7484 5 месяцев назад +4

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

    • @codewithantonio
      @codewithantonio  5 месяцев назад

      Great job!!

    • @sudhanshugautam425
      @sudhanshugautam425 5 месяцев назад

      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.

    • @shs4293
      @shs4293 4 месяца назад

      ​@@sudhanshugautam425any updates??

    • @yashikanagpal6010
      @yashikanagpal6010 3 месяца назад

      Hey can you please share your github
      I am doing changes but they are not working for me

    • @zeon8380
      @zeon8380 2 месяца назад

      Good to hear that, I am stuck in the image generation, can you please share how to change the code for image generation?

  • @SavagesoundsincTV
    @SavagesoundsincTV 10 месяцев назад +15

    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

    • @codewithantonio
      @codewithantonio  10 месяцев назад

      Thanks for that info, it will help someone and I will keep it in mind!

    • @anchitsinha8821
      @anchitsinha8821 10 месяцев назад

      Thanks man!!! It was really helpful.

    • @tommykim3061
      @tommykim3061 9 месяцев назад

      Thank you so much!
      Also, don't forget to add 'md:hidden' into className of 'Menu' :)

    • @thebooktutor
      @thebooktutor 9 месяцев назад +1

      seems to work for me

    • @vansaber
      @vansaber 9 месяцев назад

      Thank you! It was helpful

  • @theSavanahDev
    @theSavanahDev 10 месяцев назад +1

    I have not gone through the project but Sir, I appreciate your effort. You have empowered me with knowledge. Thank you.

  • @agamydesign
    @agamydesign 10 месяцев назад +13

    Thank you man, I learned Typescript because I loved your explanation❤❤

  • @saurabhshakya5367
    @saurabhshakya5367 9 месяцев назад +11

    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))

    • @ankitupadhyay918
      @ankitupadhyay918 9 месяцев назад

      Thanks man for saving my life

    • @jordanesanson6911
      @jordanesanson6911 9 месяцев назад

      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

    • @snehakaimal7529
      @snehakaimal7529 9 месяцев назад

      @@jordanesanson6911 i had the same question...

    • @saurabhshakya5367
      @saurabhshakya5367 9 месяцев назад

      @jordanesanson6911 my mistake, instructionMessage is used in the code route, so if you are currently working on the conversation route then remove it.

    • @snehakaimal7529
      @snehakaimal7529 9 месяцев назад

      @@saurabhshakya5367 can you show the code ?

  • @build-things
    @build-things 10 месяцев назад +1

    nice one! especially the stripe stuff!!! I will be referencing this when integrating stripe to my platform over the next few weeks

  • @user-eg2xc7rh4z
    @user-eg2xc7rh4z 6 месяцев назад

    you just answered all the questions I had to build my own app online with AI :) Thank you

  • @rudinhok
    @rudinhok 10 месяцев назад +3

    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 :)

    • @codewithantonio
      @codewithantonio  10 месяцев назад

      Glad my videos helped you, and thank you for the suggestion!

  • @mistersir3185
    @mistersir3185 10 месяцев назад +4

    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!

  • @donovanbenfouzari1553
    @donovanbenfouzari1553 10 месяцев назад +2

    Congratz for your first sponsor Antonio, you deserve it!
    I'm looking forward to watch your video!

  • @curtiskelton9760
    @curtiskelton9760 4 месяца назад +1

    I have been looking for this type of channel for a long time. Thanks so much Antonio!

  • @abdelrahmanmedhat2182
    @abdelrahmanmedhat2182 Месяц назад +3

    YOU'RE ABSOLUTELY AMAZING!, Thanks so much from Egypt!

    • @codewithantonio
      @codewithantonio  Месяц назад

      You're so welcome!

    • @abdelrahmanmedhat2182
      @abdelrahmanmedhat2182 Месяц назад

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

  • @mahafujhossain7708
    @mahafujhossain7708 10 месяцев назад +5

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

  • @jeffdelnero
    @jeffdelnero 4 месяца назад

    What a time to be alive! Thank you for this precious content, sir. Keep it Up!

  • @koobessah
    @koobessah 10 месяцев назад +1

    This is wow and amazing. My first time watching your video and I'm blown away. Keep it up mate and many thanks for sharing this nugget of gold.

  • @niteshprajapat7918
    @niteshprajapat7918 10 месяцев назад +17

    You are amazing Antonio Sir ❤
    Every single time, you drop an incredible projects 🎉🔥

  • @Pierrot24382
    @Pierrot24382 10 месяцев назад +1

    Thank you for another awesome tutorial, Antonio! You are the one doing an amazing job!

  • @oluwaseunladeinde410
    @oluwaseunladeinde410 4 месяца назад

    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.

  • @raphaeljaggerd3585
    @raphaeljaggerd3585 10 месяцев назад +8

    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.

  • @danialdevelops7368
    @danialdevelops7368 8 месяцев назад +3

    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);

  • @wndGGaRkGBKpXvM6NWHGOeMJv
    @wndGGaRkGBKpXvM6NWHGOeMJv 10 месяцев назад +1

    Amazing tutorial. I loved every minute of it. I can't wait for the next one.

  • @cvg2023
    @cvg2023 5 месяцев назад +1

    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";

  • @firstlastcode
    @firstlastcode 8 месяцев назад +3

    The content you provide is massive. I'm a react engineer and I wanted to advance my skill and here I am

  • @khalidkhan5308
    @khalidkhan5308 10 месяцев назад +1

    Thank you so much for these wonderful tutorials. It's time to add framer motion 😊

  • @yanDev
    @yanDev 10 месяцев назад +1

    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

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 5 месяцев назад +3

    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

    • @codewithantonio
      @codewithantonio  5 месяцев назад +1

      I definitely plan on using AI in the future projects :)

    • @Deus-lo-Vuilt
      @Deus-lo-Vuilt 5 месяцев назад +1

      @@codewithantonio Thanks 💜

  • @igorhideki95
    @igorhideki95 23 дня назад +5

    Can you bring this course updated ?

    • @molcay8355
      @molcay8355 4 дня назад

      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

  • @atmanirbharofficialindiaon2789
    @atmanirbharofficialindiaon2789 10 месяцев назад +1

    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

  • @prajwalurkude007
    @prajwalurkude007 10 месяцев назад +2

    Thank you, I really whole heartedly admire you. Your projects are awesome and unique that based on real world problem solving.

  • @user-br8eh7zl6k
    @user-br8eh7zl6k 9 месяцев назад +4

    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!

  • @rashadbay
    @rashadbay 6 месяцев назад +1

    Indeed so far your are the only one who trully went over every detail. Thank you !

  • @sudhanshugautam425
    @sudhanshugautam425 5 месяцев назад +2

    Finished 🎉🎉 , it was great 5 days with you😇 , thank for this amazing tutorial ❤

  • @angphuonghai2926
    @angphuonghai2926 7 месяцев назад +4

    I followed you but when using Clerk's SignIn and SignUp components, it doesn't render anything, why? Please help me fix it pls

    • @foxooo
      @foxooo 7 месяцев назад +3

      I am running into that same issue. Were you able to determine what the issue is?

    • @Gh05t_Dev
      @Gh05t_Dev 6 месяцев назад +1

      Error: The default export is not a React Component in page: "/sign-in/[[...sign-in]]" that's what I got oops

    • @frederikefalke
      @frederikefalke 5 месяцев назад

      I run into the same issue :/ @@Gh05t_Dev

  • @tjmusicofficial6408
    @tjmusicofficial6408 10 месяцев назад

    man your content is something else which will put you above all thanks & really appreciated . keep working and Growing

  • @sebastianrojas4176
    @sebastianrojas4176 10 месяцев назад +1

    Cant wait to get started on this tomorrow. Thank you!

  • @nikhilpatil3767
    @nikhilpatil3767 3 месяца назад +6

    Did openai api get updated? ChatCompletionRequestMessage doesn't seem to be working for me

    • @yashsinghal7236
      @yashsinghal7236 Месяц назад

      Exactly I have the same problem

    • @MelvinManoj-kx2ms
      @MelvinManoj-kx2ms Месяц назад

      Yes it gets updated

    • @MelvinManoj-kx2ms
      @MelvinManoj-kx2ms Месяц назад

      Now OpenAiApi changed to OpenAI

    • @MelvinManoj-kx2ms
      @MelvinManoj-kx2ms Месяц назад

      Also there is another changes.
      You just search youtube, it will help you

    • @yashsinghal7236
      @yashsinghal7236 Месяц назад

      ​@@MelvinManoj-kx2msHey have you completed this project and its working perfectly?

  • @rehanm2305
    @rehanm2305 7 месяцев назад +4

    1:52:32 unable to find the module in openai . Cant find resourse on this . How to fix this can anyone help .

    • @HAMOKA-
      @HAMOKA- 7 месяцев назад +1

      Same problem

    • @rehanm2305
      @rehanm2305 7 месяцев назад

      @@HAMOKA- solution 1 : install old openai version: v3.3.0
      Solution 2: try this ChatCompletionMessageParam instead
      Hope this helps

  • @tusharmaithani7174
    @tusharmaithani7174 10 месяцев назад +1

    I have been learning and building from your tutorials and seriously they are pretty awesome.... Keep it bro...

  • @juneketchum787
    @juneketchum787 10 месяцев назад +1

    Can't wait to follow this tutorial!! Thank you for providing these!! Also I'd love to learn about LMS systems like maybe teams Or canvas 🥰

    • @codewithantonio
      @codewithantonio  10 месяцев назад

      Glad you like the tutorial! Thank you for the suggestion!

  • @SerRGilk
    @SerRGilk 9 месяцев назад +3

    Stripe is not supported in my country. What are my alternatives for a subscription model?

    • @danialdevelops7368
      @danialdevelops7368 8 месяцев назад

      same problem lol

    • @SerRGilk
      @SerRGilk 8 месяцев назад

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

    • @marciplan
      @marciplan 8 месяцев назад

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

  • @RicheyLiek
    @RicheyLiek 9 месяцев назад +3

    if someone has problems with lucide react -> downgrade next to
    "next": "13.4.12",

  • @elton-react-dev
    @elton-react-dev 10 месяцев назад +1

    This is pure gold, thanks for sharing this amazing content with us.

  • @Jordan-tr3fn
    @Jordan-tr3fn 8 месяцев назад

    Thanks you for this. it's well explained and you can follow from a to z without getting stuck... !

  • @user-cv6mb4dp9f
    @user-cv6mb4dp9f 7 месяцев назад +6

    i had error in configuration and openaiapi

    • @mashoodfarid6524
      @mashoodfarid6524 5 месяцев назад

      Same bro
      What the solution of this

    • @musabiqbal253
      @musabiqbal253 4 месяца назад

      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

  • @DungAnhify
    @DungAnhify 8 месяцев назад

    I accidentally ended up watching the entire 5-hour video. Fantastic!

  • @hourglass8450
    @hourglass8450 6 месяцев назад

    Thank you for the tutorial :) was looking for something like this to complete my web app

  • @wutrax1
    @wutrax1 10 месяцев назад +1

    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
      @codewithantonio  10 месяцев назад +1

      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!

    • @wutrax1
      @wutrax1 10 месяцев назад

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

  • @mountoubriandavid5472
    @mountoubriandavid5472 6 месяцев назад

    I think you definitely have the best full stack app content on RUclips

  • @davyengone
    @davyengone 10 месяцев назад +1

    really well done Antonio! There's only one way, up and up!

  • @Master_Joh
    @Master_Joh 10 месяцев назад +1

    This is what i have been looking for in a long time, thank you so much

  • @komalsiddharth3616
    @komalsiddharth3616 9 месяцев назад +1

    your videos are truly amazing....i must say u r absolutely incredible

  • @SmadDuff
    @SmadDuff 10 месяцев назад +1

    Nice video!!! congratulations for the new spoonsor!! amazing job

  • @ricardopicchi1509
    @ricardopicchi1509 9 месяцев назад

    Really great content! Thank you for this!

  • @justinsanjuan2679
    @justinsanjuan2679 9 месяцев назад

    This is absolutely amazing Antonio! I must say, the only thing missing from a startup perspective is to integrate google analytics. This would then be the ultimate starter kit. Will you make a video on that as well?

  • @Truthsaayr
    @Truthsaayr 10 месяцев назад +1

    Wow finally it has dropped,the most anticipated video on RUclips 🎉🎉, thank you Antonio you are a rare gem

    • @codewithantonio
      @codewithantonio  10 месяцев назад +1

      Hope you enjoy it!

    • @Truthsaayr
      @Truthsaayr 10 месяцев назад +1

      Yes I enjoyed it , still learning alot from it