The feature image for the project Weather Now.
The feature image for the project Weather Now.
The feature image for the project Weather Now.
The feature image for the project Weather Now.

FRONTEND WEB APP | 2026

Weather Now

A clean, responsive weather app with real-time conditions, 7-day forecasts, and hourly breakdowns — with automatic geolocation, bookmarkable locations, unit switching, and dark mode support.

React
TypeScript
Tailwind CSS
Open-Meteo API

OVERVIEW

Weather App pulls live data from the Open-Meteo API to display current conditions, a 7-day daily forecast, and hourly predictions for any location. It detects your location automatically on load, supports bookmarking multiple cities, and handles unit conversion between metric and imperial. Built with React and TypeScript with a focus on correctness — covering edge cases like timezone-aware time rendering and typed async error handling.

IMPLEMENTATION

TECH STACK

Framework

React, Vite

Language

TypeScript

Styling

Tailwind CSS

API

Open-Meteo

Deployment

Render

FEATURES

Current weather conditions with real-time data

7-day daily forecast and hourly breakdown

Automatic geolocation on page load

Bookmarkable locations for quick access

Metric and imperial unit toggle

Timezone-aware time display per location

Dark and light mode

Fully responsive layout

CHALLENGES & SOLUTIONS

Geolocation API incompatibility with async/await

The browser Geolocation API is callback-based and does not return a Promise, making it incompatible with async/await out of the box. Wrapped it in a custom Promise to normalise the interface and allow it to integrate cleanly with the rest of the async data-fetching logic.

Timezone mismatch between browser and server environments

JavaScript's Date object behaves differently depending on the runtime — browsers convert to the local system timezone automatically, while Node.js defaults to GMT+0. Handled this explicitly by passing timezone identifiers from the API response into date formatting calls, ensuring displayed times always reflect the target location rather than the user's machine.

Typed error handling in async flows

Used TypeScript union types with useActionState() to model both success and error states explicitly, and applied instanceof checks when catching exceptions to safely narrow error types — avoiding the pitfall of treating all caught values as Error objects.