Summary
Keywords
Full Transcript
🚨 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
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
