πŸ”΄ Let’s build Disney+ Clone with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, TailwindCSS)
Sonny Sangha Sonny Sangha
279K subscribers
320,489 views
2.4K

 Published On Streamed live on Dec 19, 2023

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

πŸ«‚ Join my Community, "University of Code" for FREE: https://www.universityofcode.com

πŸ”΄ Looking for the code for my other builds? πŸ› οΈ
https://links.papareact.com/github

πŸ“© Want coding problems (with solutions!) delivered to your inbox daily? https://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 πŸ‘‰ https://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

show more

Share/Embed