Build a Livestream App With Next.js | Twitch Clone | Part 2/2

Поділитися
Вставка
  • Опубліковано 25 гру 2024

КОМЕНТАРІ •

  • @codewithantonio
    @codewithantonio  Рік тому +42

    There we go, part 2 and last part of our Twitch Clone. This was extremely fun to build and hope you will learn a lot in this free 14 hour tutorial! A quick reminder that I am also actively developing "Additional content" including using next-auth for this course which you can find in the description if you want to learn more or use it as a donation for this channel ❤

    • @nishantkathrotiya7723
      @nishantkathrotiya7723 Рік тому

      hello Brother can you provide Figama Design link for this clone app?

    • @fira0lg
      @fira0lg Рік тому +1

      I am speechless you are very generous. May God give bless you!
      it is unbelievable to see full project for free, I couldn't afford this if it was by payment. I owe you a lot, "Thank you" is not enough 🙏

    • @codewithantonio
      @codewithantonio  Рік тому +1

      @@nishantkathrotiya7723 I dont have figma designs for any of my videos, I use original website that I am cloning and ocasionally visit dribbble for inspiration

    • @nishantkathrotiya7723
      @nishantkathrotiya7723 Рік тому +1

      @@codewithantonio thanks brother

    • @ee-shan5125
      @ee-shan5125 Рік тому

      Sir plz make tiktok clonee too

  • @SuperPompey77
    @SuperPompey77 Рік тому +17

    I want to say that I finished this project and it is by far the best project I have ever seen in my life. Your other ones were excellent as well, but this was a lot of learning different things in one tutorial. Not only do i wish to thank all the effort that undoubtably takes into creating these, but your teaching the way you do is very thorough and comprehensive. I truly learned a lot and I will subscribe to this because just this tutorial is worth a lot more than you can ever imagine.
    Merry Christmas to you Antonio. and thanks again.

    • @prathameshladkat7352
      @prathameshladkat7352 Рік тому

      i have started doing this project. just wanted to ask you did you faced any error which i should take care of.

    • @codewithantonio
      @codewithantonio  Рік тому +2

      Very happy to hear that, I tried my best in this project, great job and happy holidays!

    • @SuperPompey77
      @SuperPompey77 Рік тому +1

      I did not have any errors during this build. It went quite smooth. I also did this, this week so i used the latest dependencies. I also did not have any issues with Next JS that Antonio had where he had to edit the config files or was it the middleware? I cannot remembers now.

  • @walker-snow
    @walker-snow 11 місяців тому +5

    I was trying to learn Web development since the last summer. Before finding your Twitch tutorial, I was struggling too much while trying to learn something. Being a Unity game developer for over 7 years the Web development requires a completely different mindset to create something working. Your tutorial best "Intro to Web Dev" content I could find. I really attached to your content and learned a lot of things.

    • @codewithantonio
      @codewithantonio  11 місяців тому +2

      Im very glad I could be of help on your journey! Good luck!

  • @alulamekonen3155
    @alulamekonen3155 Рік тому +1

    I express my sincere gratitude, acknowledging that no amount of thanks can adequately convey my appreciation. Thank you very much, not only on my behalf but also on behalf of others who may benefit.

  • @jessen1278
    @jessen1278 Рік тому +4

    Currently following your first part, excited about this one. Keep up the good work my friend and thank you for providing such resource 🙏🏻

  • @amannny13
    @amannny13 Рік тому +4

    Bro , mad respect to you for sharing such builds. Gonna pay you money for such tutorials once i get a job xD

  • @SmartSproutsTech
    @SmartSproutsTech 7 місяців тому +1

    This course was very long. The VIDEO part was difficult, but I was able to complete it. Your channel is very informative. Thank you for everything.

  • @scottsteven6560
    @scottsteven6560 Рік тому +2

    Thank you for all these great comprehensive tutorials. please keep up this excellent work.

  • @Skm-k4c
    @Skm-k4c Рік тому +2

    Sir, you are a gem for us.
    A Student

  • @mohamednabil4874
    @mohamednabil4874 Рік тому +3

    I was confused about so much things and you made everything clear for me. thank you Antonio.

  • @Pierrot24382
    @Pierrot24382 Рік тому +1

    Thank you so much, Antonio! I just bought the additional content too! :)

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Glad you like it! Thank you very much for your support ❤️

  • @leandropqd
    @leandropqd Рік тому +2

    Amazing tutorial!!
    Im not a react developer and even so im able to understand pretty much everything you taught !!

  • @sethaddo9380
    @sethaddo9380 Рік тому +2

    Antonio out here showing us levels in the coding 😂… man, I love it 🎉🎉🎉

  • @kleberernestobaldarragosal1904

    You are the most beautiful person I found on UA-cam, thank you for existing, greetings from Peru

  • @Nanonan71
    @Nanonan71 Рік тому +1

    this is a crazy content. i get a lot new knowledge. thanks man

  • @sohanchaudhuree4169
    @sohanchaudhuree4169 Рік тому +1

    lots of new stuff to learn. thank you man for all of the dedication you do for the community .

  • @Jashan77114
    @Jashan77114 Рік тому +2

    Really great tutorial. One suggestion : please use atomic design folder structure in next videos as there is not even a single video on youtube on it.

  • @Daniel-xl7ne
    @Daniel-xl7ne Рік тому +3

    Thank you for making such great tutorials.

  • @SharifKhan-v8d
    @SharifKhan-v8d Рік тому +1

    long time ago I said You are the best developer on YT and now I would say u are like an AI 😂

  • @codinginflow
    @codinginflow Рік тому +22

    As a creator myself, I have no idea how you manage to create these 14-hour-long tutorials 😅 The max I can do is 7

  • @markus_dev_cwb
    @markus_dev_cwb Рік тому +2

    Amazing Man! The best tutorial ever.

  • @programmerslife01
    @programmerslife01 Рік тому +3

    Really interesting content! I appreciate the effort that went into creating such high quality content. Looking forward to seeing what you come up with next!

  • @muoshueiink
    @muoshueiink Рік тому +1

    Little issue: At around 2:59:08, date format "HH:MM" should be "HH:mm" as "MM" stands for month and "mm" stands for minutes.
    Excellent content anyway!

  • @SaeedM.Parast
    @SaeedM.Parast Рік тому +1

    you're doing a lot for us Antonio, thank you.

  • @anvrag
    @anvrag Рік тому +1

    you deserve every love possible

  • @goalpost7442
    @goalpost7442 Рік тому +1

    Thank u for these tutorials, u are turning us in to better developers ☺️❤️

  • @luistrumpetboy
    @luistrumpetboy 4 місяці тому

    Hi Antonio, first of all I want to congratulate you, you are an excellent programmer, if one day you can make a UA-cam clone that would be amazing. Take care and keep up the good work, good luck with your projects.

  • @mohsenahmadi4851
    @mohsenahmadi4851 Рік тому +2

    Great Job! Thanks Bro For your Excellent Tutorials 👍👏👏

  • @Hassan-b6l
    @Hassan-b6l Рік тому +1

    I AM JUST SEEING YOUR YOUR VIDEOS I DONT KNOW HOW TO THANK YOU I REALLY LOVE YOUR CONTENT I LIKE YOU

  • @maximiulian2848
    @maximiulian2848 Рік тому +1

    Awesome video, thanks for the hardwork you put in! Do you maybe have in store for the future tutorialsa Fullstack with NextJS Prisma GraphQL ? Happy Holidays!

  • @kalednarino7868
    @kalednarino7868 Рік тому +1

    Exelent antonio!

  • @melcrafter
    @melcrafter 10 місяців тому +1

    Congrat Antonio for the Mention you got from Theo!!!... Keep making awesome Build and the way you code!

  • @Abhay14
    @Abhay14 3 місяці тому +1

    52:17 failed to connect the server error is showing in OBS

  • @codingjustice
    @codingjustice Рік тому +1

    Thanks bro, this is great keep up the good work, you are blessed ❤❤❤

  • @davisibles
    @davisibles Рік тому +1

    Thank you for this gem of a content. Cant thank you enough. You set the bar of top notch content. I can give you one suggestion. Please dont only code also explain what are you using it for. You didnt provide enough information regarding Livekit implementation and all I am doing copy pasting. It will be better if you explain the code step by step in your upcoming videos. Apart from that I am learning alot from your videos.

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Thank you for the feedback, at one point I started rushing because I wanted to fit the video inside 12 hours (youtube limit for 1 video), but ended up doing part 1 and part 2 so some parts are a bit rushed sorry :)

    • @davisibles
      @davisibles Рік тому

      @@codewithantonio Its okay. You will get better and better with more videos you do. And dont worry about the time if this was 20hrs video. I would still watch it. Your content is is love man. Keep it up.

  • @Cufylicy_shorts
    @Cufylicy_shorts Рік тому +1

    this video is awesome

  • @hamennicheharoune6879
    @hamennicheharoune6879 Рік тому +2

    Thank you so much Antonio

  • @floodyboy5307
    @floodyboy5307 Рік тому

    Awesome 🎉

  • @J0Y22
    @J0Y22 Рік тому +1

    thanks for this..surely i will do it in this week

  • @dnira1855
    @dnira1855 11 місяців тому

    Great video, really like the way you explained each step and made everything clear. Would be really cool if you created a Steam client clone, would be nice to see how these game clients work.

  • @pcodesdev
    @pcodesdev Рік тому +5

    Man this is like magic. How do you master and apply all this things at such a fast pace.

    • @codewithantonio
      @codewithantonio  Рік тому +3

      Glad you like the content, its a combination of lots of experience and fact that I love doing this :)

  • @biLLie_wiLLie
    @biLLie_wiLLie Рік тому +1

    You are great 👍 one question - will we ever see a backend from you? Nest js?

  • @shivanand0297
    @shivanand0297 Рік тому +2

    The goat 🐐

  • @shahnu_shorts
    @shahnu_shorts Рік тому +1

    Unstoppable 🔥

  • @chihhaolin8771
    @chihhaolin8771 8 місяців тому +1

    Awesome course for me, thanks a lot.

  • @mlamintamba
    @mlamintamba Рік тому +1

    I love your tutorials, here is another great one. Is it possible to get a learn more button to your other tutorials like the lms?

    • @codewithantonio
      @codewithantonio  Рік тому

      Thank you, yes! I definitely plan on adding "learn more" button to my older tutorials on my platform, this one was a great way to test that functionality out and it seems to be ready to be used further. What tutorial did you have in mind?

    • @mlamintamba
      @mlamintamba Рік тому

      @@codewithantonio Build An LMS Platform

  • @RuslanGonzalez-ox6vz
    @RuslanGonzalez-ox6vz Рік тому +1

    I really voted you to push your second video in your platform but . As always, thanks for your content.

    • @codewithantonio
      @codewithantonio  Рік тому +1

      oh its been on the platform since yesterday! This is just for those who find it easier to use youtube :)

  • @_PhamVuTien
    @_PhamVuTien 2 місяці тому

    Sorry sir, I have a problem, at 45:06 after selecting RTMP and clicking Generate, in console the error appears Internal error: Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. but i check on Prisma successfully created the data. help me sir

  • @ADHDOCD
    @ADHDOCD Рік тому +1

    Amazing as always! Maybe next tutorial on building widgets like Intercom's chat widget? Or a zapier clone?

  • @laurapeterson146
    @laurapeterson146 Рік тому +1

    Do you do React Native too? Will be very interested in a RN eCommerce tutorial :)

  • @bharatsoni9577
    @bharatsoni9577 Рік тому +1

    thanks mann

  • @salmahamido2472
    @salmahamido2472 Рік тому +1

    Thank you again! you are awesome
    one question - what's next? I'm so excited to build more and more projects

  • @Mark-ry5cv
    @Mark-ry5cv Рік тому +1

    I've been enjoying your videos lately. I was wondering if you could create a tutorial on building a Clockify clone.

  • @anvrag
    @anvrag Рік тому +1

    can u make a tutorial on pen tab note taking apps

  • @Daiphiron
    @Daiphiron Рік тому

    Once again - very useful! Btw do you have any video (or plan to do) which includes Server Side filtering of bigger datasets? Like Reporting or Dashboards?
    Something like Kibana just based on Next and JSON data :D

  • @Tabiajania
    @Tabiajania Рік тому +2

    Please make Canvas/Figma project ❤❤❤❤❤

  • @abdullahinafiu6040
    @abdullahinafiu6040 Рік тому

    Dope ❤
    Can you do portfolio project.

  • @swastikpatro6436
    @swastikpatro6436 Рік тому +1

    Project idea:
    A google meet clone, with face blur, bg blur, emojis at face, this will be a complex project involving lots of learning.
    Thanks for this

  • @kadir_ozyurek
    @kadir_ozyurek Рік тому +1

    As always such a huge share

  • @anirudhcodes
    @anirudhcodes Рік тому +1

    THANK YOU!!! 🤝

  • @edwinaritama
    @edwinaritama Рік тому

    super cool as always
    can you please do another clone but a simpler version website so that the duration would be around 2 hours only?

  • @mannu7249
    @mannu7249 10 місяців тому +1

    there is an error:
    preset: IngressVideoEncodingPreset.H264_1080P_30FPS_3_LAYERS,
    error: Object literal may only specify known properties, and 'preset' does not exist in type 'IngressVideoOptions'.

    • @yonnie0521
      @yonnie0521 9 місяців тому

      get a different version of livekit

    • @gamingdp0078
      @gamingdp0078 7 місяців тому

      "livekit-client": "^1.15.4",
      "livekit-server-sdk": "^1.2.7"
      you have to do only this in package.json and everything is working fine

  • @esfantastic-shorts
    @esfantastic-shorts Рік тому +1

    Dear ❤❤ Antonio Sir,
    I'm a huge fan of your work and I've watched all of your videos! They've been incredibly helpful in expanding my knowledge of various technologies, especially Next.js. Coming in with little prior knowledge, your videos have made me comfortable with its features and potential. Additionally, I've gained valuable insights into tools like Clerk and Prisma, which have significantly strengthened my frontend development skills.
    Recently, I aware Gemini AI from Google and I'm truly impressed by its capabilities. The ease of accessing powerful built-in models through an API key is remarkable and its potential to enrich web applications with advanced features while maintaining lightness and security is truly exciting.
    This brings me to a request. I believe a video showcasing an application built around Gemini AI, demonstrating its feature integration with a well-designed UI, would be incredibly valuable for many viewers, myself included. Such an application could serve as a practical example of how to leverage Gemini AI's potential and inspire future projects.

  • @Spkntei
    @Spkntei 11 місяців тому

    Could you guide me in writing a backend with Express.js in TypeScript and a frontend with Next.js?

  • @hitanshushahare2029
    @hitanshushahare2029 Рік тому +1

    Thank you sir ❣

  • @SANTOSH_Raut
    @SANTOSH_Raut Рік тому

    I hope you make a video on building a UA-cam platform on your own, or facebook ( maybe).

  • @salahdaniel
    @salahdaniel Рік тому +1

    Hi wich program do u use to record ur screen ? Thank u keep up

  • @UmaisIhsan
    @UmaisIhsan Рік тому

    Hey Antonio i love your videos. therefore i've subscribed your channel. you're serving amazing work.
    "My request is that please build ClickFunnel clone or drag and drop websie builder clone " ?

  • @logicmonster6197
    @logicmonster6197 Рік тому

    antonio if u see this please reply, how do u maintain to know and understand all this libraries? I mean reading documentation and apply it on ur projects is one of the challenges that i have right now after 2 years coding

  • @hellboy4642
    @hellboy4642 Рік тому

    Bro when will you launch your courses?? .

  • @Saad_2129
    @Saad_2129 5 місяців тому

    Hey! Great video I want to continue it can you guide me a little how can I implement webrtc in it?

    • @blackssails
      @blackssails 4 місяці тому

      Hi ! Can you finished de project?

  • @muzamilfootballer5682
    @muzamilfootballer5682 Рік тому +1

    First comment 😊 u are amazing sir 😍

  • @clashon9940
    @clashon9940 Рік тому +1

    Hey,as i dont know next and prisma ,can i learn it on the way watching your video or have to learn individually ?

    • @codewithantonio
      @codewithantonio  Рік тому

      I try my best to explain things along the way, Give it a shot!

  • @dscscd291
    @dscscd291 Рік тому

    you do project Backend-golang and Frontend-Nextjs

  • @sayidali431
    @sayidali431 Рік тому

    Another amazing effort lil Antonio, now am doing your lms next13 project so can i use like commercial bro gimy advice for that

  • @yadvendra_shukla
    @yadvendra_shukla 10 місяців тому

    Hey planetscale's hobby database are not available in India what to do??

  • @lossantos327
    @lossantos327 8 місяців тому

    I have a question, hope you will answer me. Does this livestream app support adaptive streaming with VOD?

  • @yunyang6267
    @yunyang6267 10 місяців тому

    I have a question. you called getSelf function in both dashboard layout and page routes under that layout. Are those request to databased executed in a sequential or parallel way? is having those functions in both parent and child component going to affect performance?

  • @roshankumar-um9he
    @roshankumar-um9he Рік тому

    To access environment variables in a Next.js application with Docker on the client side,
    when i try to access in docker it give me undefined.. solution next js docker

  • @ref1ecty_twitch
    @ref1ecty_twitch 11 місяців тому

    Can anyone suggest what the problem might be? I am getting an error when creating Video component:
    "Error: No response is returned from route handler 'D:\streaming-app\app\api\webhooks\livekit
    oute.ts'. Ensure you return a `Response` or a `NextResponse` in all branches of your handler."

    • @codewithantonio
      @codewithantonio  11 місяців тому

      make sure inside your livekit webhook you are always returning a default response! compare your livekit webhook with mine from source code

    • @ref1ecty_twitch
      @ref1ecty_twitch 11 місяців тому +1

      I reinstalled all the packages with your versions and after that the error was solved, thanks@@codewithantonio

  • @mobix25
    @mobix25 Рік тому

    Super Amazing. if i could make a suggestion, can you show us how to use our pc and turn it into a server? as well as handle file upload and data store and make it public to be accessible globally? i know it requires a public ip from our ISP but there might be other way for this method.

  • @roberth8737
    @roberth8737 Рік тому +1

    What a champ!

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 11 місяців тому

    Do you plan to do a project using React with tailwind and so on? perhaps using an architecture or in an educational way but focused more on React and not Next?

  • @kaustavgoswami7454
    @kaustavgoswami7454 8 місяців тому

    How to install the same version of livekit/components-react that you have used

  • @shaheryaryousaf
    @shaheryaryousaf Рік тому +1

    Thank you

  • @Love-id8gu
    @Love-id8gu Рік тому +1

    Hello again!!!😘❤
    I want the following video - authorization example (Nextjs 14, typescript, server actions, nextauth 5, prisma, shadcn ui, react-hook-form, zod, sonner). User authorization, user registration, user roles.
    😇Thank you dear friend!😇

  • @jamesnelson174
    @jamesnelson174 Рік тому

    Are the packages and db used free? Or I need to pay for anything. Please I need answer 🙏. Great work Antonio. You r the G.O.A.T

  • @_PhamVuTien
    @_PhamVuTien 2 місяці тому

    Can someone help me fix Error: Request failed with status 429: Too Many Requests when generating key? I've been waiting for a few days and it's still the same.

  • @ControllerCommand
    @ControllerCommand Рік тому

    I like to follow all these videos but do you have videos for beginners? I know HTML & CSS & very basic JavaScript so I need to know what to learn first and from where so I can follow you along. I really want to build or better web apps. I don’t like no code tools as there are always limitations.
    Thanks 🙏

  •  Рік тому

    Thank you antonio for this amazing course! I made it to the end and successfully deployed the app to vercel with just one error. I can stream to the app with keys I made from earlier, but when I try creating new keys I get an error of status code 500. Any idea what could be causing this? It worked perfectly in development.

  • @mahdiboughanmi6781
    @mahdiboughanmi6781 Рік тому

    Hi i love your videos i want to ask you something please , am intending on doing an lms project with realtime communication but i am hesitating to integrate it , i don't know how much will it cost in the production can you give me advices

  • @AndreasBruehl2589
    @AndreasBruehl2589 9 місяців тому

    Really really nice tutorial! BUT PlanetScale has changed something: Starting April 8th, the Hobby plan will no longer be available. So, which DB do you recommend instead? Keep up the good work!

    • @codewithantonio
      @codewithantonio  9 місяців тому +1

      Hi, you can go on my website and find the “Prisma and free databases” course to see alternatives and how to connect them

  • @theartisticcoder
    @theartisticcoder Рік тому +1

    Can you please create excalidraw in mern stack?

  • @oguz2241
    @oguz2241 Рік тому +1

    please make Miro

  • @ShubhamPatel-v9b
    @ShubhamPatel-v9b 10 місяців тому

    Hello Antonio at this moment we are occurring of problem of livekit-server-sdk and we are not able to create RTMP connection the problem in server actions createIngress can you please try to resolve it you have so many posts in discrod regarding this but no one findd

  • @joker-wr8pt
    @joker-wr8pt Рік тому

    i've question can i make this full stack with react and node express i've good backend so yeah tell i want to learn web sockets and webrtc via express can i follow this ?

  • @jiayizhan967
    @jiayizhan967 Рік тому

    Where did you learn all the stuff you know?

  • @magog6852
    @magog6852 5 місяців тому

    Can't find this info anywhere, does this save the streams as a vod after?

    • @blackssails
      @blackssails 4 місяці тому

      Hi ! Can you finished the project?

  • @ThanhNguyen-fi4pv
    @ThanhNguyen-fi4pv Рік тому +1

    I got the error:" Failed to connect to server. The RTMP server sent an invalid SSL certificate." when Start Streaming from OBS. Anyone has the same issue?

    • @codewithantonio
      @codewithantonio  Рік тому

      I will test this out today and see what it could be!

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Ok, there seems to be a problem with SSL, and it should be resolved soon. For now you can simply use "rtmp://..." instead of "rtmps://..." for your server url in OBS and everything should work fine! Later you can try rtmps:// again.

    • @ThanhNguyen-fi4pv
      @ThanhNguyen-fi4pv Рік тому +1

      @@codewithantonio yep, it's! Thanks so much bro!

    • @ThanhNguyen-fi4pv
      @ThanhNguyen-fi4pv Рік тому

      @@codewithantoniothank you so much for all your great courses! I'm learning. a lot from them. How can I donate bro? not much money but just my appreciation

  • @咕哩-b1b
    @咕哩-b1b 7 місяців тому

    I have just finished the project, everything worked just fine except for one thing: The volume and mute management don't work. The volume of video element is changed, but the voice I heard doesn't.