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