🔴 Let’s Build an AI Weather App with ChatGPT-4 (Next.js 13.3, React, Tremor 2.0, StepZen, GraphQL)

🚨 Upgrade your coding skills by joining the world’s BEST developer community & course “Zero to Full Stack Hero”: https://www.papareact.com/course

❗️StepZen has hooked us up with a Customized FREE plan… Check it out! 👉 https://stepzen.com/signup?utm_source=papareact&utm_medium=videotutorial

📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

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!

🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github

🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up to the PAPA Newsletter here 👉 https://links.papareact.com/newsletter

👇🏻 FOLLOW ME HERE:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPA Merch: https://links.papareact.com/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