🔴 Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)
172,982
Published 2023-12-19
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
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 coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: www.papareact.com/universityofcode
🎵 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
All Comments (21)
-
My mentor, teacher, brother..sending love all the way from Zimbabwe 🇿🇼
-
I absolutely love you and your videos Sonny. I've been watching you for a few years now!
-
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.
-
amazing build beautiful work sonny
-
Best Christmas gift from sonny
-
that was something totally amazing ,I learnt a lot more new stuff from this video
-
As ALWAYS => Great video @sonny!! And Team PAPAFAM!!!! Hooyah, Lets Code!!!!
-
Great build mann!:elbowcough:
-
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
-
Great Work and training program thank you Sonny:)
-
Teh debugging was valuable at the end
-
Hey nice build man ,are u going to make a mern stack project with stripe payment ??
-
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
-
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.
-
nice video keep going ❤
-
Love you my teacher ❤️🥰 From Afghanistan 🇦🇫
-
Why don't you never use the "container" class? Would love to know your answer.
-
Yo go Sunny my man 🚀
-
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!
-
🎉🎉 Gg man 🎉
