🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: [ Ссылка ]
🫂 Join my Community, "University of Code" for FREE: [ Ссылка ]
🔴 LOOKING FOR THE CODE? 🛠️
[ Ссылка ]
❗️StepZen has hooked us up with a Customized FREE plan… Check it out! 👉 [ Ссылка ]
📩 Want coding problems (with solutions!) delivered to your inbox daily? [ Ссылка ]
Join me as I show you how to build an AI Weather app with Next.js 13. You'll learn the following in this build:
👉 How to use the Free Weather API to generate real-time weather data for any city in the world!
👉 How to use the ChatGPT API to create a summary of your weather data!
👉 Create API endpoints in your Next.js 13.3 app to securely manage requests
👉 How to use StepZen to easily create a GraphQL interface with the weather API!
👉 How to utilise Apollo to connect with our GraphQL backend
👉 How to build a fully responsive site with Tailwind CSS
👉 Adding Tremor 2.0 to level up your app's UI!
👉 Leverage the power of Server components in Next.js 13 (and how to use client components alongside them correctly!)
👉 How to use the new App folder structure in Next.js 13!
👉 Dynamic page routing in Next.js 13
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!
+ So Much More!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up to the PAPA Newsletter here 👉 [ Ссылка ]
👇🏻 FOLLOW ME HERE:
Instagram: [ Ссылка ]
Facebook: [ Ссылка ]
LinkedIn: [ Ссылка ]
Twitter: [ Ссылка ]
Discord: [ Ссылка ]
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: [ Ссылка ]
Grab some PAPA Merch: [ Ссылка ]
🕐 TIMESTAMPS:
00:00 Introduction
01:03 Build Showcase
03:56 Build Tech (1/2)
04:17 StepZen Sponsorship
05:42 Build Tech (2/2)
07:15 Zero to Full Stack Hero
08:11 University of Code
09:47 Build Tech Stack
11:05 Initialising the Build
18:59 Build Layout
21:56 Setting Up Tremor
24:40 Building the Home Page
30:32 Building the City Picker Component (1/2)
41:35 Implementing Heroicons
42:45 Live Debugging
45:04 Building the City Picker Component (2 /2)
52:04 Implementing Dynamic Routing in Next.js 13
54:04 Creating the Weather Page
58:11 Explaining the Free Weather API
59:24 Implementing StepZen
1:02:14 Implementing the Free Weather API with StepZen
1:08:51 Setting up Type Definitions
1:11:30 Implementing Apollo Client
1:18:01 Fetching Weather Queries from GraphQL
1:30:32 Building Callout Cards in the Weather Page
1:33:29 Building Stat Cards in the Weather Page
1:44:39 Building the Information Panel in the Weather Page
2:07:06 Building the Temperature Chart in the Weather Page
2:13:19 Live Debugging
2:19:54 Building the Rain Chart in the Weather Page
2:23:38 Building the Humidity Chart in the Weather Page
2:27:27 Implementing the Loading Functionality
2:30:14 Implementing GPT-4 using OpenAI API
2:53:21 Showcasing the Caching Functionality
2:55:14 Trying GPT 3.5 Turbo for the Build
2:57:15 Deploying to Vercel
3:02:50 Final Deployed Build Demo
3:10:03 Build Summary
3:12:01 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with ChatGPT, OpenAI or/and 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 educational purposes.
#chatgpt #nextjs #gpt4 #javascript #openai #javascript #tailwindcss #tutorial #android #reactjs #ai
