Build an Advance Weather APP With ReactJS

Source: Dev.to

Introduction

🚀 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:
• Source code 1:
• Source code 2:

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