Iyola Oyabiyi logo

iyoolaoyabiyi

Iyola Oyabiyi O.

Personal Project

Weather Now

A fast, accessible weather app with opt-in geolocation and flexible unit controls.

Role

Frontend Engineer

Stack

Vue 3 Vite TypeScript Pinia CSS Modules Day.js
Demo Repository Documentation

Public web application / Solo project: Primary ownership

Weather Now is a fast, accessible weather app for users who want reliable forecasts with deliberate, opt-in geolocation.

Project overview

A Vue 3 single-page weather application that supports search-driven location lookup, current conditions, and forecast browsing. The app boots with a safe default location and only attempts geolocation when the user clicks “Use current location.” Unit formatting and conversion are centralized so presentation components render ready-to-display labels.

My role and ownership

Owned the end-to-end frontend build: requirements framing, component inventory, Vue + Pinia architecture, the location and weather service layer, unit formatting utilities, and the testing/CI guardrails. If something broke in production, responsibility would include debugging store orchestration, service requests/fallback logic, UI state rendering (loading/empty/error), and maintaining performance and accessibility budgets.

Key features

  • Search for weather by location.
  • Current conditions (temperature, icon, and location details).
  • Additional metrics (feels like, humidity, wind speed, precipitation).
  • 7-day forecast and an hourly forecast scoped to the selected day.
  • Metric/Imperial toggles plus granular unit overrides.
  • Responsive layout with keyboard and focus affordances.
  • Intentional geolocation via “Use current location,” with safe fallback behavior when permissions are denied.

Skills demonstrated

  • Vue 3 (Composition API) and TypeScript application development.
  • State management with Pinia stores and serializable state boundaries.
  • Component-driven development with clear container vs presentational separation.
  • Accessibility implementation and verification (keyboard flows, ARIA patterns, automated audits).
  • Performance-minded UI delivery (budgets and Lighthouse targets enforced through CI).
  • Automated testing across unit and end-to-end layers.

Tech stack

  • Vue 3
  • Vite
  • TypeScript
  • Pinia
  • Tailwind
  • CSS Modules
  • Day.js (UTC/timezone)
  • Vitest
  • Playwright, axe-core
  • ESLint, Stylelint, Prettier
  • GitHub Actions.

Project type

Frontend single-page product build with external weather/location API integration.