React Visual Weather Forecast App

WeatherONE is a React-based local weather app that uses visual cues to tell you about current, hourly, or seven-day weather forecasts before you actually read temperature values.

Temperature values in this app are presented in Celcius and are matched up to a colour; the warmer it gets, the warmer the colour. This allows for easy and visually appealing scrolling, allowing the user to quickly find the warmest or coolest part of the day, or warmest or coolest day of the coming week. WeatherONE also uses colour to inform users of the severity of the day’s UV index, and to easily say if current conditions are cloudy or sunny – indicated by a grey or blue background during daylight hours.

In plain text, WeatherONE will also tell you if you need an umbrella that day, if you should wear a jacket, or if it’s a perfect day to wear sandals, right from the home screen. Changing colour contrasts with text was considered in the design and changes to text colour happen when necesssary to maintain readability.

WeatherONE lets you save your current location in your device’s local storage. By default, WeatherONE loads information from its current location, but allows you to save locations you’ve visited in the past.

How it works:
☑️Location coordinates come from device GPS or IP address

☑️Allows you to remember your current location for later browsing 
☑️Javascript chained promises used to get weather data and location name
☑️Unique colours matched up temperature values from +30C to -30C in CSS
☑️Component classnames matched up to colour names given to temperature values
☑️Hourly Data for 48 hours and Daily Data for 7 days available.
☑️For Long-Range Forecast, click “down” arrow for more detailed information about that day’s forecast
☑️Conditionals used to create plain-text versions of upcoming weather details, such as needing to bring an umbrella or coat
☑️Built using a combination of Class and Functional components, including UseState hook

View more project posts in the React category.