πŸ”΄ Lets build an Entertainment Streaming Platform with NEXT.JS 14! (Azure, Caching, OpenAI, Tailwind)

Sonny Sangha β€’ December 19, 2023
Video Thumbnail
Sonny Sangha Logo

Sonny Sangha

@sonnysangha

About

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

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

You May Also Like