KZhead

🔴 Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)

Sonny Sangha
2024 ж. 6 Мам.
180 151 Рет қаралды
Жүктеу

❗️ Sign up to get the Code for FREE here (Form must be submitted, not skipped!): aka.ms/Sonny_functions
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 Looking for the code for my other builds? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
Join me as I show you how to build a Disney+ clone from scratch with the newly released Next.js 14. You'll learn the following in this build:
👉 Create a Beautiful UI & UX for our Disney+ clone using the highly Popular Shadcn!
👉 How to create and leverage the power of Azure Functions
👉 How to use the Azure OpenAI service for AI movie suggestions and completions!
👉 How to use Loaders in various ways whilst data is being fetched!
👉 How to cache data with Next.js 14 to optimise API calls and provide a Seamless, fast experience for the user
👉 How to build a beautiful UI design with Tailwind CSS!
👉 Learn how to implement Dark Mode toggling to update the UI based on user preference!
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
🕐 TIMESTAMPS
00:00 Introduction
01:02 Build Showcase
04:21 Access the Build Source Code for Free!
06:53 Build Tech (1/2)
07:26 Microsoft Azure Sponsorship
08:37 Build Tech (2/2)
12:27 Initialising the Build
17:32 Building the Home Page (1/2)
22:37 Build Plan
24:56 Building the Search Page (1/2)
31:31 Building the Genre Page (1/2)
38:09 Implementing Shadcn/ui
43:32 Building the Header Component (1/2)
51:08 Implementing Light & Dark Mode
56:06 Building the Header Component (2/2)
59:11 Building the Search Input Component
1:10:49 Implementing TMDB (The Movie Database) API
1:21:56 Setting Up Type Definitions
1:22:46 Building the Genre Dropdown Component
1:27:49 Building the Home Page (2/2)
1:29:26 Building the Movies Carousel Component (1/3)
1:32:15 Fetching Movie Information from TMDB API
1:40:17 Building the Movies Carousel Component (2/3)
1:41:05 Building the Movie Card Component
1:53:24 Building the Movies Carousel Component (3/3)
2:01:54 Building the Carousel Banner Wrapper Component
2:19:01 Building the Search Page (2/2)
2:27:37 Implementing Microsoft Azure OpenAI Service (1/3)
2:43:59 Implementing the OpenAI API Key
2:45:11 Implementing Microsoft Azure OpenAI Service (2/3)
2:54:04 Implementing useSWR (Approach #2 for AI Assistant)
3:06:35 Implementing Microsoft Azure OpenAI Service (3/3)
3:12:48 Building the Open AI Azure Suggestion Component
3:17:41 Building the Genre Page (2/2)
3:19:57 Deploying to Vercel with Live Debugging
3:54:04 Final Build Demo
3:54:37 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Disney and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.
#nextjs #nextjs14 #react #disneyplus #typescript #reactjs #disney #coding #javascript #tailwindcss #shadcn #nosql #reactjstutorial #coding #tutorial #beginner #programming

Пікірлер

  • I absolutely love you and your videos Sonny. I've been watching you for a few years now!

    @parthainderson@parthainderson3 ай бұрын

  • My mentor, teacher, brother..sending love all the way from Zimbabwe 🇿🇼

    @takudzwamututa7608@takudzwamututa76084 ай бұрын

  • amazing build beautiful work sonny

    @Gamehub6000@Gamehub60004 ай бұрын

  • dayum - I got lost in the first 10min but watched till the end anyway. Very soothing experience while designing frontends in SASS. I gotta look at some of your more easier tuts for sure. Mad respect - you seem like a wizard to me. lol. Cheers.

    @sumerianbrother@sumerianbrother3 ай бұрын

  • Great Work and training program thank you Sonny:)

    @musset6491@musset64913 ай бұрын

  • Great build mann!

    @vrushankgajula4584@vrushankgajula45844 ай бұрын

  • As ALWAYS => Great video @sonny!! And Team PAPAFAM!!!! Hooyah, Lets Code!!!!

    @jamestuttle@jamestuttle4 ай бұрын

    • Hell yeah James thank you for being awesome always!!!

      @SonnySangha@SonnySangha4 ай бұрын

  • Best Christmas gift from sonny

    @Salano_Lolkirik@Salano_Lolkirik4 ай бұрын

  • your content is fire bro! thank you!

    @JesseShepeardIV@JesseShepeardIV4 күн бұрын

  • Teh debugging was valuable at the end

    @jonosuav@jonosuav4 ай бұрын

  • Damn.. I ran into the same problem with the 429 error and then solved it by myself. Then later saw that you dealt with it as well :D

    @jordan9506@jordan95064 ай бұрын

  • Hey nice build man ,are u going to make a mern stack project with stripe payment ??

    @rahulsamineni7245@rahulsamineni72454 ай бұрын

  • If you cant deploy due to a map issue very easy fix, just modify your dropdown menu {data.genres?.map((genre) => ( add the ? to genres

    @DigitalAlchemyst@DigitalAlchemyst4 ай бұрын

  • nice video keep going ❤

    @Lafsha@Lafsha4 ай бұрын

  • Please can you make course how to create own CMS

    @amir-rashid@amir-rashid4 ай бұрын

  • Sir, I have a request. Please create a video on pagination and infinite scroll. This topic is frequently asked in interviews for React.js, Node.js, and even in regular JavaScript. Additionally, please provide an in-depth explanation on when to use each and the implementation details. Please make it similar to the way you create content. Make it in a way that questions or projects related to pagination or infinite scroll never pose any challenges.

    @skzahirulislam2820@skzahirulislam28204 ай бұрын

    • That's a very entitled request

      @seanj3243@seanj32434 ай бұрын

    • You forgot to include search autocomplete with multi select search, start rating component, nested comments section

      @rayyanabdulwajid7681@rayyanabdulwajid76813 ай бұрын

  • that was something totally amazing ,I learnt a lot more new stuff from this video

    @utkarshgaming8153@utkarshgaming8153Ай бұрын

    • can you please tell me did he used tmdb api key or access token ?

      @Husnain-developer@Husnain-developer4 күн бұрын

    • @@Husnain-developer It's Api key, access token usually has an expiry date, api key just for preventing api abuse.

      @utkarshgaming8153@utkarshgaming81534 күн бұрын

  • Love you my teacher ❤️🥰 From Afghanistan 🇦🇫

    @amir-jahangir@amir-jahangir4 ай бұрын

  • Great content, but super disappointed that access to OpenAI is being put behind a corporate email wall. I watched and coded along for 2.5 hours before realizing I couldn't use it because my application for access would be denied for using a personal email account. Nevertheless, good intro to tailwind, shadcdn and some of the newer NextJS 14 features.

    @destinyross4608@destinyross46084 ай бұрын

    • ;-;

      @beastnighttv@beastnighttv3 ай бұрын

  • Another great build. A small note. notFound is not returning, it is throwing an exception that next handles. Important to know about so you don’t put it in a try/catch.

    @TomasJansson@TomasJansson4 ай бұрын

  • Why don't you never use the "container" class? Would love to know your answer.

    @user-cq8yz1sz3s@user-cq8yz1sz3s4 ай бұрын

  • Great video mate, thanks a lot for sharing your knowledge with us! I'm trying to create a new OpenAI Azure but in the plan I do not have any options to chose and I recieve this error: "The subscription does not have QuotaId/Feature required by SKU 'S0' from kind 'OpenAI' or contains blocked QuotaId/Feature." I really do not know what to do. Thanks you all!

    @user-mf5dr3oq2v@user-mf5dr3oq2v3 ай бұрын

  • Great video bro! The step by step is very well done! The only thing is if I already had a microsoft account linked to my github profile it gets quite tricky to continue with the Azure part of the video, even the part of filling out the form I think it goes too complicated to not have explained the process in the video (also such a boomer from Microsoft to have such an old way to let users use this, when the trial ends and if you want to continue using the services then I think a proper formal form should be filled but for people just trying for free I think they went too much). I think I will go past of the Azure part of it as it did not feel like a user friendly system really for signing up. Maybe it's just my case as I have already a microsoft account so (but who doesn't?)... even in the form microsoft asks for a company email which cannot be gmail or hotmail or outlook... I mean what's the scope of Microsoft for this apps? Just for use for big companies or can actually developers go test them for educational/research purposes? Great build anyway Sonny! Keep 'em coming! 🤟🤟

    @juaneteccs@juaneteccs4 ай бұрын

    • The same here.

      @vaniad555@vaniad5554 ай бұрын

  • Hey what are u using for getting screen shots images with text

    @c-k4746@c-k47464 ай бұрын

  • Yo go Sunny my man 🚀

    @DhruvMathurSSW@DhruvMathurSSW2 ай бұрын

  • Thanks a Lot Sonny... You really inspire a lot of Us. Wz wondering if you will be building a payment app in future, like google pay, Paypal or something similar... I will very much appreciate it. Thanks again. Emmanuel, ur huge fan from Nigeria.

    @iconpem5764@iconpem57644 ай бұрын

  • 🎉🎉 Gg man 🎉

    @tausifhossain8634@tausifhossain86344 ай бұрын

  • 🔥🔥🔥

    @FullStack_Pro@FullStack_Pro4 ай бұрын

  • is this course for beginners as well?

    @Parselinho@Parselinho2 ай бұрын

  • I signed up

    @zeeshan9991@zeeshan9991Ай бұрын

  • Отличная связка по заработку, всем успеха

    @user-bq7ei6kn6c@user-bq7ei6kn6c3 ай бұрын

  • isnt the build available on your github repo? then whats the need to fill the form? I don't need the code anyway as you will only learn if you code along sonny! P.S: I filled the form to help sonny! I just didnt liked the fact that he said, its a "must" to fill the form for the code

    @beastnighttv@beastnighttv3 ай бұрын

  • waiting for building portfolio 2024 with NEXT.js 14 😍❤️

    @ifaizanMK@ifaizanMK3 ай бұрын

    • Great idea

      @kgamer5842@kgamer58423 ай бұрын

    • I am building one with all the latest stack, ping me if you want to know the progress

      @rishabh1S@rishabh1S2 ай бұрын

    • @@rishabh1S cool, how can we get connected?

      @ifaizanMK@ifaizanMK2 ай бұрын

  • which livestream platform you are using ,i mean that pink color sidebars and all?

    @satyam1mishra@satyam1mishra4 ай бұрын

    • you mean software? obs?

      @beastnighttv@beastnighttv3 ай бұрын

  • Anyone know how to enable auto import of components? it's not showing up for me

    @AndrewTienNgo@AndrewTienNgo2 ай бұрын

  • Note for myself: 23:45

    @ahbegnueg@ahbegnueg4 ай бұрын

  • You should make a how to get a job video :) or create a agency landing page? something worth our wild

    @kamelsingh8602@kamelsingh86024 ай бұрын

  • I am getting 500: Internal server error. What should I do?

    @prajwalwalde4489@prajwalwalde44893 ай бұрын

  • I have been missing a lot

    @firstlastcode@firstlastcode4 ай бұрын

  • 8:20 request access to openAI service.

    @shashwatshrey9248@shashwatshrey92482 ай бұрын

  • sir please start react native full stack projects like chat apps or any soical media apps plz sir plz i am waiting with modern technologies with light and dark themes etc

    @usmanmarkaz@usmanmarkaz4 ай бұрын

  • are all services(azure, openAI, tmdb,...) free?

    @bahodirabdullayev4453@bahodirabdullayev44532 ай бұрын

    • This is what i want to know before watching whole video…

      @waleedsharif618@waleedsharif6182 ай бұрын

    • TMDB got blocked here in India 😞

      @rishabh1S@rishabh1S2 ай бұрын

  • 👏🏿👏🏿👏🏿👏🏿👏🏿

    @r.w.7267@r.w.72672 ай бұрын

  • time stamps plz

    @osama-ki_masi-ki_pota7677@osama-ki_masi-ki_pota76774 ай бұрын

  • 1:58:00

    @user-cq8yz1sz3s@user-cq8yz1sz3s4 ай бұрын

  • could you do a zapier clone or somthing similar ?

    @artoriasdenostradamus3628@artoriasdenostradamus362821 күн бұрын

  • i've got some issue when try using dark mode. the error says "Unhandled Runtime Error InvalidCharacterError: DOMTokenList.add: The token can not contain whitespace."

    @mikhacavin@mikhacavin4 ай бұрын

  • Bro What do you think of FLUTTER ?@SonnySangha

    @MWStudiooo@MWStudiooo4 ай бұрын
KZhead