HomeSuomeksi

Sää Nyt – Weather Application

ReactReact
CSSCSS
OpenWeatherOpenWeather

Project Background

Weather Now was created as a personal project to deepen my knowledge of React.js and practice asynchronous data fetching from external APIs. The project followed my completion of a "React Fundamentals" course. I chose the OpenWeather API, a widely used industry standard, to provide the data. The application utilizes JSON formatting, which is the modern standard for web development.

Technical Implementation and Features

The application is built with React.js and focuses on delivering essential weather information in a clean, user-friendly format.

Key Features:

  • Real-time Search: Users can fetch weather data for any city or municipality.
  • Relevant Metrics: The app displays current weather conditions, temperature, "feels like" temperature, humidity percentage, and wind speed.
  • Dynamic UI: The visual language of the app adapts to the weather. The background image changes dynamically based on a temperature threshold (12°C), providing a visual representation of the current climate.

Lessons and Results

While the application is conceptually straightforward, it provided valuable practice in reading API documentation and handling asynchronous requests. The project strengthened my understanding of React state management and the process of transforming raw JSON data into a seamless user experience.

Links and resources:

  • 🌐 Live Project: Sää Nyt -App (In Finnish)
  • 💻 Source Code: GitHub

Images

Landing Page

Landing Page

Desktop version

Desktop version

Mobile version in warm weather

Mobile version in warm weather

Mobile version in cold weather

Mobile version in cold weather