SWeather+

sweather-plus.vercel.app

         

 

    

 

💡 Motivation

The name "SWeather" comes from "Styled Weather" and represents the idea of creating an alternative way to show the weather forecast, being special to the user experience.

With smooth transitions and animations that vary according to the weather, the app is very intuitive, making it possible to navigate between time intervals from the past to the future.

Try it yourself!

 

This project is a remake of the previous SWeather, with the same goal, but with many additional features.

The reason to develop a whole app again is simple, learn more and improve my programming skills.

Using TypeScript with React and Express, the new app is better for the user and the developer, with easier maintenance and bug fixing.

 

✨ Features

• 🔍 Search weather by name of any city in the world or by user location

• 🎚 Time slider to see the weather for the day [-6h in the past, +6h in the future]

• 🌙 Day/Night animations with moonphases

• 🌧 Precipitation animations (Rain, Freezing Rain, Sleets and Snow)

• 📲 PWA (Progressive Web App) support

 

⚙️ APIs

This is a non-commercial and non-profit project, all data used is aimed at learning more about APIs usage and Front-end development.

⛅ Weather

All weather data comes from Tomorrow.io, a great Weather API.

Access the official website

Access the official repository

📌 Location

The location data is provided by OpenWeather.

Access the official website

 

🖥️ Running the project

As said before, this app uses two public APIs do get data from local and weather, so you must have the keys and provide them to the server using a .env in server folder:

PORT=8080
TOMORROWIO_API_KEY="~"
OPENWEATHER_API_KEY="~"

The client needs to know the URL to request data. This is also provided using a .env, but in client folder:

VITE_API_URL="http://localhost:8080"