Climatrix
Dynamic Weather & Forecasting App
Role
Frontend Developer
Timeline
3 Weeks
Technologies



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.
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.