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

🚨 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? πŸ› οΈ
https://links.papareact.com/github

❗️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? https://www.papareact.com/dailycodingchallenges

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 πŸ‘‰ 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