Case Study · Frontend / API Integration
Weather Forecasting App
Live conditions and forecasts through a fast, focused interface.
- React.js
- JavaScript
- REST APIs
- Responsive UI
What it is
A React application that queries a third-party weather API and renders current conditions plus an upcoming forecast. The focus was a fast, readable interface with sensible loading and error states rather than a dashboard full of noise.
The objective
Third-party API responses are verbose and not shaped for the UI, and failures need to fail visibly rather than blankly.
- Third-party API responses are verbose and not shaped for the UI.
- Network failures and unknown cities need to fail gracefully, not blankly.
How it was solved
API responses are normalised into a small view model before rendering, and loading, empty and error branches are handled explicitly in the UI layer.
- Normalised API responses into a small view model before rendering.
- Handled loading, empty and error branches explicitly in the UI layer.
Key features
City search
Live lookup of current conditions by city name.
API integration
Third-party responses normalised into a small view model.
Explicit states
Loading, empty and error branches handled in the UI layer.
Technology
Frontend
- React.js
- JavaScript
- CSS
Other
- REST API integration
Development approach
- Thin data-mapping layer keeps components free of API-specific shapes.
- Every request renders one of loading, empty, error or result.
- Layout built once and kept legible at small widths.
Interface decisions
- Interface stays legible at small widths without a separate mobile design.
- Unknown cities produce a clear message rather than an empty screen.
Challenges & solutions
Verbose API payloads leaked into components.
Added a mapping layer producing a minimal view model.
Network failures rendered a blank view.
Explicit error branch with a retry affordance.
