🔴 Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)
❗️ Sign up to get the Code for FREE here (Form must be submitted, not skipped!): aka.ms/Sonny_functions
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 Looking for the code for my other builds? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? 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 👉 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
Пікірлер: 64
My mentor, teacher, brother..sending love all the way from Zimbabwe 🇿🇼
I absolutely love you and your videos Sonny. I've been watching you for a few years now!
your content is fire bro! thank you!
As ALWAYS => Great video @sonny!! And Team PAPAFAM!!!! Hooyah, Lets Code!!!!
@SonnySangha
4 ай бұрын
Hell yeah James thank you for being awesome always!!!
amazing build beautiful work sonny
dayum - I got lost in the first 10min but watched till the end anyway. Very soothing experience while designing frontends in SASS. I gotta look at some of your more easier tuts for sure. Mad respect - you seem like a wizard to me. lol. Cheers.
Great build mann!
Great Work and training program thank you Sonny:)
Best Christmas gift from sonny
Hey nice build man ,are u going to make a mern stack project with stripe payment ??
Please can you make course how to create own CMS
Teh debugging was valuable at the end
that was something totally amazing ,I learnt a lot more new stuff from this video
@Husnain-developer
11 күн бұрын
can you please tell me did he used tmdb api key or access token ?
@utkarshgaming8153
11 күн бұрын
@@Husnain-developer It's Api key, access token usually has an expiry date, api key just for preventing api abuse.
nice video keep going ❤
Why don't you never use the "container" class? Would love to know your answer.
Damn.. I ran into the same problem with the 429 error and then solved it by myself. Then later saw that you dealt with it as well :D
Yo go Sunny my man 🚀
Great content, but super disappointed that access to OpenAI is being put behind a corporate email wall. I watched and coded along for 2.5 hours before realizing I couldn't use it because my application for access would be denied for using a personal email account. Nevertheless, good intro to tailwind, shadcdn and some of the newer NextJS 14 features.
@beastnighttv
4 ай бұрын
;-;
Great video mate, thanks a lot for sharing your knowledge with us! I'm trying to create a new OpenAI Azure but in the plan I do not have any options to chose and I recieve this error: "The subscription does not have QuotaId/Feature required by SKU 'S0' from kind 'OpenAI' or contains blocked QuotaId/Feature." I really do not know what to do. Thanks you all!
Great video bro! The step by step is very well done! The only thing is if I already had a microsoft account linked to my github profile it gets quite tricky to continue with the Azure part of the video, even the part of filling out the form I think it goes too complicated to not have explained the process in the video (also such a boomer from Microsoft to have such an old way to let users use this, when the trial ends and if you want to continue using the services then I think a proper formal form should be filled but for people just trying for free I think they went too much). I think I will go past of the Azure part of it as it did not feel like a user friendly system really for signing up. Maybe it's just my case as I have already a microsoft account so (but who doesn't?)... even in the form microsoft asks for a company email which cannot be gmail or hotmail or outlook... I mean what's the scope of Microsoft for this apps? Just for use for big companies or can actually developers go test them for educational/research purposes? Great build anyway Sonny! Keep 'em coming! 🤟🤟
@vaniad555
4 ай бұрын
The same here.
Hey what are u using for getting screen shots images with text
If you cant deploy due to a map issue very easy fix, just modify your dropdown menu {data.genres?.map((genre) => ( add the ? to genres
🎉🎉 Gg man 🎉
Another great build. A small note. notFound is not returning, it is throwing an exception that next handles. Important to know about so you don’t put it in a try/catch.
Love you my teacher ❤️🥰 From Afghanistan 🇦🇫
Sir, I have a request. Please create a video on pagination and infinite scroll. This topic is frequently asked in interviews for React.js, Node.js, and even in regular JavaScript. Additionally, please provide an in-depth explanation on when to use each and the implementation details. Please make it similar to the way you create content. Make it in a way that questions or projects related to pagination or infinite scroll never pose any challenges.
@seanj3243
4 ай бұрын
That's a very entitled request
@rayyanabdulwajid7681
3 ай бұрын
You forgot to include search autocomplete with multi select search, start rating component, nested comments section
Thanks a Lot Sonny... You really inspire a lot of Us. Wz wondering if you will be building a payment app in future, like google pay, Paypal or something similar... I will very much appreciate it. Thanks again. Emmanuel, ur huge fan from Nigeria.
isnt the build available on your github repo? then whats the need to fill the form? I don't need the code anyway as you will only learn if you code along sonny! P.S: I filled the form to help sonny! I just didnt liked the fact that he said, its a "must" to fill the form for the code
is this course for beginners as well?
which livestream platform you are using ,i mean that pink color sidebars and all?
@beastnighttv
4 ай бұрын
you mean software? obs?
Отличная связка по заработку, всем успеха
I signed up
Anyone know how to enable auto import of components? it's not showing up for me
🔥🔥🔥
waiting for building portfolio 2024 with NEXT.js 14 😍❤️
@kgamer5842
3 ай бұрын
Great idea
@rishabh1S
2 ай бұрын
I am building one with all the latest stack, ping me if you want to know the progress
@ifaizanMK
2 ай бұрын
@@rishabh1S cool, how can we get connected?
I am getting 500: Internal server error. What should I do?
Note for myself: 23:45
are all services(azure, openAI, tmdb,...) free?
@waleedsharif618
2 ай бұрын
This is what i want to know before watching whole video…
@rishabh1S
2 ай бұрын
TMDB got blocked here in India 😞
You should make a how to get a job video :) or create a agency landing page? something worth our wild
sir please start react native full stack projects like chat apps or any soical media apps plz sir plz i am waiting with modern technologies with light and dark themes etc
8:20 request access to openAI service.
I have been missing a lot
time stamps plz
1:58:00
👏🏿👏🏿👏🏿👏🏿👏🏿
could you do a zapier clone or somthing similar ?
i've got some issue when try using dark mode. the error says "Unhandled Runtime Error InvalidCharacterError: DOMTokenList.add: The token can not contain whitespace."
Bro What do you think of FLUTTER ?@SonnySangha