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

❗️ 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

Пікірлер: 64

  • @takudzwamututa7608
    @takudzwamututa76084 ай бұрын

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

  • @parthainderson
    @parthainderson3 ай бұрын

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

  • @JesseShepeardIV
    @JesseShepeardIV11 күн бұрын

    your content is fire bro! thank you!

  • @jamestuttle
    @jamestuttle4 ай бұрын

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

  • @SonnySangha

    @SonnySangha

    4 ай бұрын

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

  • @Gamehub6000
    @Gamehub60004 ай бұрын

    amazing build beautiful work sonny

  • @sumerianbrother
    @sumerianbrother3 ай бұрын

    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.

  • @vrushankgajula4584
    @vrushankgajula45844 ай бұрын

    Great build mann!

  • @musset6491
    @musset64913 ай бұрын

    Great Work and training program thank you Sonny:)

  • @Salano_Lolkirik
    @Salano_Lolkirik4 ай бұрын

    Best Christmas gift from sonny

  • @rahulsamineni7245
    @rahulsamineni72454 ай бұрын

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

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

    Please can you make course how to create own CMS

  • @jonosuav
    @jonosuav4 ай бұрын

    Teh debugging was valuable at the end

  • @utkarshgaming8153
    @utkarshgaming8153Ай бұрын

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

  • @Husnain-developer

    @Husnain-developer

    11 күн бұрын

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

  • @utkarshgaming8153

    @utkarshgaming8153

    11 күн бұрын

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

  • @Lafsha
    @Lafsha4 ай бұрын

    nice video keep going ❤

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

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

  • @jordan9506
    @jordan95064 ай бұрын

    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

  • @DhruvMathurSSW
    @DhruvMathurSSW3 ай бұрын

    Yo go Sunny my man 🚀

  • @destinyross4608
    @destinyross46084 ай бұрын

    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.

  • @beastnighttv

    @beastnighttv

    4 ай бұрын

    ;-;

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

    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!

  • @juaneteccs
    @juaneteccs4 ай бұрын

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

  • @vaniad555

    @vaniad555

    4 ай бұрын

    The same here.

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

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

  • @DigitalAlchemyst
    @DigitalAlchemyst4 ай бұрын

    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

  • @tausifhossain8634
    @tausifhossain86344 ай бұрын

    🎉🎉 Gg man 🎉

  • @TomasJansson
    @TomasJansson4 ай бұрын

    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.

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

    Love you my teacher ❤️🥰 From Afghanistan 🇦🇫

  • @skzahirulislam2820
    @skzahirulislam28204 ай бұрын

    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.

  • @seanj3243

    @seanj3243

    4 ай бұрын

    That's a very entitled request

  • @rayyanabdulwajid7681

    @rayyanabdulwajid7681

    3 ай бұрын

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

  • @iconpem5764
    @iconpem57644 ай бұрын

    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.

  • @beastnighttv
    @beastnighttv4 ай бұрын

    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

  • @Parselinho
    @Parselinho2 ай бұрын

    is this course for beginners as well?

  • @satyam1mishra
    @satyam1mishra4 ай бұрын

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

  • @beastnighttv

    @beastnighttv

    4 ай бұрын

    you mean software? obs?

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

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

  • @zeeshan9991
    @zeeshan99912 ай бұрын

    I signed up

  • @AndrewTienNgo
    @AndrewTienNgo3 ай бұрын

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

  • @FullStack_Pro
    @FullStack_Pro4 ай бұрын

    🔥🔥🔥

  • @ifaizanMK
    @ifaizanMK3 ай бұрын

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

  • @kgamer5842

    @kgamer5842

    3 ай бұрын

    Great idea

  • @rishabh1S

    @rishabh1S

    2 ай бұрын

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

  • @ifaizanMK

    @ifaizanMK

    2 ай бұрын

    @@rishabh1S cool, how can we get connected?

  • @prajwalwalde4489
    @prajwalwalde44893 ай бұрын

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

  • @ahbegnueg
    @ahbegnueg4 ай бұрын

    Note for myself: 23:45

  • @bahodirabdullayev4453
    @bahodirabdullayev44532 ай бұрын

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

  • @waleedsharif618

    @waleedsharif618

    2 ай бұрын

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

  • @rishabh1S

    @rishabh1S

    2 ай бұрын

    TMDB got blocked here in India 😞

  • @kamelsingh8602
    @kamelsingh86024 ай бұрын

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

  • @usmanmarkaz
    @usmanmarkaz4 ай бұрын

    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

  • @shashwatshrey9248
    @shashwatshrey92482 ай бұрын

    8:20 request access to openAI service.

  • @firstlastcode
    @firstlastcode4 ай бұрын

    I have been missing a lot

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

    time stamps plz

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

    1:58:00

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

    👏🏿👏🏿👏🏿👏🏿👏🏿

  • @artoriasdenostradamus3628
    @artoriasdenostradamus362828 күн бұрын

    could you do a zapier clone or somthing similar ?

  • @mikhacavin
    @mikhacavin4 ай бұрын

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

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

    Bro What do you think of FLUTTER ?@SonnySangha