🔴 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

[@takudzwamututa7608]

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

[@parthainderson]

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

[@JesseShepeardIV]

your content is fire bro! thank you!

[@jamestuttle]

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

[@SonnySangha]

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

[@Gamehub6000]

amazing build beautiful work sonny

[@sumerianbrother]

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]

Great build mann!

[@musset6491]

Great Work and training program thank you Sonny:)

[@Salano_Lolkirik]

Best Christmas gift from sonny

[@rahulsamineni7245]

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

[@amir-rashid]

Please can you make course how to create own CMS

[@jonosuav]

Teh debugging was valuable at the end

[@utkarshgaming8153]

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

[@Husnain-developer]

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

[@utkarshgaming8153]

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

[@Lafsha]

nice video keep going ❤

[@user-cq8yz1sz3s]

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

[@jordan9506]

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]

Yo go Sunny my man 🚀

[@destinyross4608]

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]

;-;

[@user-mf5dr3oq2v]

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]

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]

The same here.

[@c-k4746]

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

[@DigitalAlchemyst]

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]

🎉🎉 Gg man 🎉

[@TomasJansson]

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]

Love you my teacher ❤️🥰 From Afghanistan 🇦🇫

[@skzahirulislam2820]

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]

That's a very entitled request

[@rayyanabdulwajid7681]

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

[@iconpem5764]

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]

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]

is this course for beginners as well?

[@satyam1mishra]

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

[@beastnighttv]

you mean software? obs?

[@user-bq7ei6kn6c]

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

[@zeeshan9991]

I signed up

[@AndrewTienNgo]

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

[@FullStack_Pro]

🔥🔥🔥

[@ifaizanMK]

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

[@kgamer5842]

Great idea

[@rishabh1S]

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

[@ifaizanMK]

@@rishabh1S cool, how can we get connected?

[@prajwalwalde4489]

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

[@ahbegnueg]

Note for myself: 23:45

[@bahodirabdullayev4453]

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

[@waleedsharif618]

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

[@rishabh1S]

TMDB got blocked here in India 😞

[@kamelsingh8602]

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

[@usmanmarkaz]

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]

8:20 request access to openAI service.

[@firstlastcode]

I have been missing a lot

[@osama-ki_masi-ki_pota7677]

time stamps plz

[@user-cq8yz1sz3s]

1:58:00

[@r.w.7267]

👏🏿👏🏿👏🏿👏🏿👏🏿

[@artoriasdenostradamus3628]

could you do a zapier clone or somthing similar ?

[@mikhacavin]

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]

Bro What do you think of FLUTTER ?@SonnySangha