Manush.
01

Climatrix

Dynamic Weather & Forecasting App

Say: "New York"

Role

Frontend Developer

Timeline

3 Weeks

Technologies

ReactViteTailwind CSSOpenWeatherWeb Speech API
Climatrix screenshot 1
Climatrix screenshot 2
Climatrix screenshot 3
Hover to pause auto-scroll

Overview

An interactive, real-time weather dashboard that adapts its visual theme based on current meteorological conditions. Features voice recognition for accessibility and seamless location-based forecasting.

The Problem

Standard weather apps often feel static and require manual typing for locations. The goal was to create a highly tactile, voice-enabled weather dashboard that visually reflects the environment you are checking.

// Geolocation & Voice Abort Controller
const useWeatherFetcher = () => {
  const [controller, setController] = useState(new AbortController());

  const fetchWeather = async (query) => {
    controller.abort(); // Cancel stale requests instantly
    const newController = new AbortController();
    setController(newController);
    
    try {
      const res = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${query}&appid=${API_KEY}`,
        { signal: newController.signal }
      );
      return await res.json();
    } catch (err) {
      if (err.name === 'AbortError') return;
      console.error('Weather Fetch Error', err);
    }
  };
  return { fetchWeather };
};

Architecture & Design

Voice Search

Integrated the Web Speech API (via react-speech-recognition) to allow users to search for cities completely hands-free, improving accessibility.

Dynamic Theming

Utilized Tailwind gradient overlays mapped dynamically to OpenWeatherMap weather codes (Clear, Rain, Snow) for an immersive UI.

Clear
Rain
Snow
Storm
Client Layer
useGeolocationWeather()useClock()
External APIs
OpenWeatherMapGeocoding API

Outcomes

Reduced location lookup time from 3 manual clicks to a single 1.5-second voice command.

Rendered 10+ dynamic WebGL-style weather gradients at a locked 60 FPS across mobile devices.

Cut repetitive API calls by 80% using custom React hooks and AbortController caching strategies.