๐จ 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: null
๐ 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
156 Comments