HomeSuomeksi

Sää Nyt – Sääsovellus

ReactReact
CSSCSS
OpenWeatherOpenWeather

Projektin tausta

Sää Nyt syntyi halusta syventää React.js-osaamista ja harjoitella asynkronista tiedonhakua ulkoisista rajapinnoista. Projekti toteutettiin itsenäisesti "React Fundamentals" -kurssin jälkeen. Rajapinnaksi valikoitui OpenWeather, joka on alan standardi säädatan tarjoamisessa. Sovelluksessa hyödynnetään JSON-muotoista dataa, mikä on nykyaikaisessa web-kehityksessä XML:ää yleisempi standardi.

Tekninen toteutus ja ominaisuudet

Sovellus on rakennettu React.js-kirjastolla, ja se keskittyy tarjoamaan käyttäjälle olennaisimmat säätiedot selkeässä muodossa.

Keskeiset ominaisuudet:

  • Reaaliaikainen haku: Käyttäjä voi hakea minkä tahansa kaupungin tai kunnan säätiedot.
  • Relevantit mittarit: Sovellus näyttää nykyisen sääolosuhteen, lämpötilan, "tuntuu kuin" -asteet, ilmankosteuden sekä tuulen nopeuden.
  • Dynaaminen UI: Sovelluksen visuaalinen ilme muuttuu sääolosuhteiden mukaan. Taustakuva vaihtuu dynaamisesti lämpötilarajan (12°C) perusteella, mikä parantaa käyttäjäkokemusta ja havainnollistaa sään tilaa visuaalisesti.

Opit ja tulokset

Vaikka sovellus on rakenteeltaan suoraviivainen, se tarjosi arvokasta harjoitusta API-dokumentaation lukemisessa ja virheenkäsittelyssä. Projekti vahvisti ymmärrystäni Reactin tilanhallinnasta (state) sekä siitä, miten dataa käsitellään ja renderöidään käyttäjälle viiveettömästi.

Linkit ja lisätiedot:

  • 🌐 Verkkosivu: Sää Nyt -sovellus
  • 💻 Lähdekoodi: GitHub

Kuvat

Etusivu

Etusivu

Työpöytäversio

Työpöytäversio

Mobiiliversio lämpimässä säässä

Mobiiliversio lämpimässä säässä

Mobiiliversio kylmässä säässä

Mobiiliversio kylmässä säässä