🚀 Want to become a Fullstack Developer? https://scrimba.com/fullstack-path-c0fullstack?via=codewithsadee (Get 20% OFF Scrimba’s Fullstack Developer Path using my link)
In this video, we’ll build a fully-featured Weather App from scratch using React and TypeScript.
This is not just another beginner weather app.
We’ll focus on real-world features, clean architecture, and modern React patterns used in production apps.
🚀 What we’ll build
- Fast search command with keyboard shortcuts
- Light / dark theme switch
- Unit conversion (Celsius & Fahrenheit)
- Get weather based on user’s current location
- Interactive weather map using Mapbox
- Bar and area charts to visualize weather data
🛠 Tech Stack
- React + TypeScript
- ShadCN (reusable UI components)
- Mapbox (maps & visualization)
- OpenWeather API (weather data)
📚 What you’ll learn
- This project is designed to help you understand how React is used in real applications:
- useContext for shared state
- useMemo & useCallback for performance
- useRef, useState, useEffect
- Creating clean and reusable custom hooks
- Structuring a real-world React + TypeScript project
✅ Prerequisite
- Basic React knowledge is enough to follow along.
🔗 Essential links:
- Github gist: https://gist.github.com/codewithsadee/87ded184030172bc59ebcd770cd0619a
- Source code 1: https://www.patreon.com/posts/weather-app-code-150486108?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
- Source code 2: https://buymeacoffee.com/codewithsadee/e/509320
🕐 Timestamp
0:00 Intro
2:39 Project initial
13:49 Light and dark mode
23:00 Top app bar
27:29 Search implementation
1:05:33 Unit dropdown & weather provider
1:38:13 Page header
1:42:17 Implementing geolocation api
1:47:27 Current weather card
2:04:00 Weather map using Mapbox
2:29:23 Hourly weather tab
2:37:19 Overview chart
2:53:18 Precipitation chart
2:58:50 Wind chart
3:03:41 Humidity chart
3:07:18 Cloud cover chart
3:09:49 Pressure chart
3:12:38 UV index chart
3:14:51 Visibility chart
3:17:43 Feels like chart
3:20:22 Footer
3:21:04 Outro
Top comments (0)