Weatherp

Weatherp is a weather app powered by the OpenWeather API.

Tech

Weatherp makes use of the following:

• TypeScript
• Next.js framework
• Tailwind CSS
• Headless UI

Demo

A working demo of the application can be found here: https://weatherp.vercel.app

Description

Features

• A search palette (opened by pressing "/") for locations
• Search suggestions when user pauses their input
• Automatic refresh of displayed data on page focus
• Dynamic day/night background based on the location being displayed
• Celsius/Fahrenheit toggle

Data displayed

• Current temperature, weather description, and the high and low for the day
• Hourly weather forecast (for the next 24 hours)
  • weather icon, probability of precipitation, and temperature
  • Sunrise/sunset times
• 8 day forecast
  • weather icon
  • probability of precipitation
  • daily temperature range relative to the highs and lows of the next 8 days
• Current air quality indicator
  • Air Quality Index on a scale from 1 to 5 with 5 being the worst
• Feels like temperature
  • measurement of the current temperature accounting for human perception of weather
• Humidity level

Screenshots

Dynamic day/night background

Search Palette with location suggestions