Weather App
Design and development of a bilingual weather app where the whole screen is the city's live sky, computed from the real sun position, with a 24-hour ruler to travel through the day.
Visit site (opens in a new tab)- Role
- Design + development
- Year
- 2026
- Services
- Web design, Web development
- Tools
- Figma, Next.js, React, TypeScript, Tailwind CSS
About the project
Weather App shows the sky of any city right now. The background follows the real sun altitude, the cloud cover and the rain, and changes continuously as you travel through the day with a 24-hour ruler you can drag, scroll or use with the keyboard. It includes city search with suggestions, current location, shareable URLs, English and Spanish, and °C / °F.
I designed the interface in Figma and built it with Next.js, React, TypeScript and Tailwind CSS. Open-Meteo data is validated with Zod on the server, text picks a light or dark ink from the sky behind it to keep WCAG AA contrast, and the ruler runs on a native control that screen readers understand. The project has unit and end-to-end tests, and CI with GitHub Actions.
