/weatherbot

A weather dashboard demo using React

Primary LanguageTypeScript

Weatherbot

Things to look for

  • theming is managed with CSS Variables using the Harmony Color Palette
    • This allows for using colors in the p3 colorspace and more importantly always offers accessible color contrast meeting the criteria of WCAG 3 requirements
  • each card is themed to match their weather condition. Clear skies are light blue, cloudy days are a darker blue shade, rainy days are purple, thunderstorms are fuschia, and snowy days are gray with a touch of blue mixed in.
    • for each card style, there is a light and dark variant depending on if the device is in a dark or light theme itself
  • this project also uses CSS variables following the guidelines of Utopia to manage things like font-sizes, spacing, and CSS grid
    • This allows us to offer size values that make sense for different viewports without having to heavily rely on media-queries causing things to seemingly pop in an out
  • everything meets the success criteria (2.1.1) for navigating with a keyboard
    • All interactive elements are accessible via tabbing
    • toggling between celsius and fahrenheit can be controlled with arrow keys when focused
  • in the hourly forecast, hovering on the condition icons displays a tooltip of the condition description
  • The location and weather API data comes from Open Meteo
  • the icons come from react-icons, specifically the weather icons and remix packs
  • there's a small example of utilizing storybook with mocked location data, to access run storybook locally. You can also access via the published version online
  • used ARIAKit, a library of utility components focused on accessibility and leveraging ARIA where needed. This ensures proper-semantics in the markup while not being dogmatic about how that UI is presented (see FToggle component)

Commands

  • run npm i to install necessary packages
  • run npm run dev to run the app locally
  • run npm run storybook to view component documentation
  • run npm run test to run tests

Things I would change if this were a real product

  • Firefox currently doesn't support :has() in CSS, I would use a different approach for styling the celsius/fahrenheit toggle
  • I would add loading states to cards to reduce the lag from when cards are added
  • I would add error states when data is unavailable as well as when a location is improperly entered for adding a new location
  • I would add an auto-fill+dropdown to the input field for adding new locations

Requirements

  • interface is list of weather cards
  • card shows location, temp, high, low, and condition
  • view as either Fº or Cº
  • user can create new cards as needed
  • user can remove cards
  • user can expand card
  • expanded card displays hourly forecast
  • card remains after closing & reopening page
  • service calls are made (mocked)
  • there are tests

Bonus

  • handles network outages and service downtime gracefully
  • user is able to reorder weather cards
  • code & project is well-documented
  • testing is thorough & extensive

Extensions:

  • alerts for changes from "not-rain" to "rain" and from "rain" to "not-rain"
    • closable, not stack, persist across page close & reopens, bonus for alerts to appear through browser notif API
  • cloud sync
  • real-time forecasts