π΄ Lets build an Entertainment Streaming Platform with NEXT.JS 14! (Azure, Caching, OpenAI, Tailwind)
Sonny Sangha
@sonnysanghaAbout
I'm Sonny. π― You might also know me as PAPA React! I've been coding for over 10 years now. As a Full Stack developer I've worked both with startups and large corporations to help build & scale their companies. Along the journey I realised my passion existed in helping others excel and pursue their dreams as upcoming developers and if thatβs not enough I have cloned most of the applications you have used in your life! π π¨ Join the worldβs BEST developer community βZero to Full Stack Heroβ NOW: https://www.papareact.com/course
Latest Posts
Video Description
π¨ 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 it from scratch with the newly released Next.js 14. You'll learn the following in this build: π Create a Beautiful UI & UX for our app 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
Build Your Disney+ Clone Stack
AI-recommended products based on this video














