Beginner Web Dev Project Tutorial – Weather App with Next.js, Tailwind CSS, and TypeScript

✏️ Course from @reactwithutkarsh

⭐️ Chapters ⭐️
⌨️ (0:00:13) Introduction
⌨️ (0:03:45) Navbar Component
⌨️ (0:27:41) API and Data Types Configurations
⌨️ (0:38:59) Current Day Section Components
⌨️ (1:12:45) Additional Details Component
⌨️ (1:30:53) 7 Days Forecast Data Section
⌨️ (1:41:53) Search and Current Location Logic

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[reactwithutkarsh]

Thanks for the opportunity and looking forward to more such collabs.

[TheFrostGuardAnalyst]

This YouTube channel is beyond superior compared to my schooling and college system

[StevenAl]

Thanks for the opportunity and waiting for more similar videos.

[botify]

00:01 Learn to build a fully functional weather app using Next.js, Tailwind CSS, and TypeScript
02:32 Setting up the weather app using Next.js
07:33 Creating and styling the navigation component
10:09 Installing and using React Icons for a weather app logo.
15:13 Importing and styling icons and location display
17:43 Creating a form with input and search icon
22:27 Using event handlers and passing props in React form handling
24:45 Creating the CN function and installing required libraries
29:19 Replacing the API key and accessing weather data for a specific location
31:27 Setting up React Query for data fetching
36:15 Fetching and handling API data for weather information
38:45 Creating loading component and UI for weather app
43:25 Using the date-fns library to manipulate and format dates in the project.
45:46 Creating a separate component for container usage
50:24 Creating a function to convert Kelvin to Celsius
52:44 Conditional handling using nullish coalescing operator
57:20 Creating divs to display weather icons and temperature.
59:39 Display time and temperature with formatting
1:04:20 Customizing height for quality image and passing extra props
1:06:38 Configuring OpenWeather image API and resolving errors
1:11:10 Creating the 7-day weather forecast component
1:13:29 Styling the weather app components
1:18:15 Creating a single weather detail component
1:20:35 Importing icons and creating props for the Weather App component
1:25:07 Using default values for visibility, air pressure, and resolving import errors
1:27:31 Converting sunrise and sunset data into time format and converting wind speed units.
1:32:12 Creating props for weather forecast detail component
1:34:46 Creating left and right sections for weather app UI.
1:39:29 Mapping and displaying data
1:41:43 Implement search and display weather report functionality.
1:46:23 Storing and using the weather API key in a Next.js environment variable
1:48:49 Creating a new component for session box and applying styling
1:53:55 Creating click and submit functions for the Weather App
1:56:15 Prevent page refresh and handle error state
2:00:49 Implementing global state management for user's current city in the Weather App
2:03:07 Implementing data fetching and state management with Next.js and TypeScript
2:07:55 Handling loading state and delays after button click
2:10:20 Implementing a conditional loading skeleton component
2:15:07 Making the Navar responsive for mobile screens.
2:17:23 Weather app project completed

[sergekol]

Great tutorial, thank you

Would love if you also included deploy process

[conw_y]

Great video! Clever use of ChatGPT to automate type definition tedium.

[toannguyenkhanh]

A copy-paste and ChatGPT tutorial 👍 Very helpful

[moonchild_아포방포]

9:20 Warning: Expected server HTML to contain a matching <p> in <div>.

[jopadjr]

1.2k+...Thanks. Just in time !!! May I suggest to create a YouTube clone next if you have the time. You are a great teacher.

[TimelessMysteriesAI]

lots of love from i come here from react with utkarsh channel

[BusinessM-llzn]

First today
Thanks sir for your information ❤❤❤❤

[theMaroFlow]

What is the point of using Next.js if you wrapped your layout, making component ‘use client’ and remove metadata. That doesn’t make sense. If you using next i think then is better create new component make it client and import in your layout and don’t remove metadata.

[heather-d]

@reactwithutkarsh Thanks for the tutorial. Curious about your thought process. What steps did you use to solve the problem of finding icons that react to data from the api? How did you know where to look? How did you know they existed at all? 1:02:35

[just_A_doctor]

Congratulations for the 9 million free code camp 🎉🎉🎉🎉🎉🎉🎉🎉

[lonleybeer]

I was just thinking of revising next.js, talk about good timing

[yourpoookieboo]

Code is good, but I feel its still not beginner friendly

[xade]

please bring tutorial on elixir's ASH framework

[hotwings]

Ive done one in php, this year im learning react. Will be nice to refactor all my projects to react

[Thisisdeepanshumishra]

Atkarsh==utkarsh

By the way great! Content ❤

[denispilyutin]

at best this tutorial is mediocre, i decided to check difference between react and next, and there aren't any answers here
still appreciate the efforts
1. you don't need getDayOrNightIcon, because API already determine this in icon prop
2. also you don't need to create separate function to convert kelvin to celcius, just add &units=metric to your queryString