Hi guys, Welcome to the Advanced Video Search Engine, and you are watching 🔴 Let’s build Disney+ Clone with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, TailwindCSS). That video is uploaded by Sonny Sangha at 2023-12-19T07:13:44-08:00. We are promoting this video only for entertainment and educational purpose only. So, I hope you like & enjoy it. [G6X6CnxBDI4]
| Name | 🔴 Let’s build Disney+ Clone with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, TailwindCSS) |
| Video Uploader | Video From Sonny Sangha |
| Upload Date | This Video Uploaded At 19-12-2023 15:13:44 |
| Video Discription | ❗️ Sign up to get the Code for FREE here (Form must be submitted, not skipped!): https://aka.ms/Sonny_functions 🚨 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/dailycodingchallenges 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 G6X6CnxBDI4 |
| Category | Education |
| Tags | react | developer | reactjs | html | css | js | javascript | papa | papareact | papa-react | tutorial | frontend | webdev | web-dev | clone | fullstack | backend | motivation | reactnative | react-native | redux | typescript | nextjs13 | next js 13 | nextjs 14 | next js 14 | next.js 14 |
