One moment…
Building the next page.
One moment…
Building the next page.
React Weather Application
A simple React weather application that lets users search for a city and view current weather information through a clean, reusable card-based interface.
SearchDiscoverLearnBuild!
Idea to ImpactOne Sprint at a Time
XWeather is a React-based weather application built to practice and demonstrate core frontend development concepts.
The application allows users to search for a city and view its current weather information through a clean card-based interface.
Rather than focusing on a large number of features, the project focuses on building the fundamentals correctly — from API integration and state management to custom hooks and reusable components.
The goal of XWeather was to build a small but complete application around a real external API.
The application allows users to:
The project also demonstrates how API logic can be separated from UI components using custom React hooks.
Users can enter a city name through the search interface.
Once a city is searched, the application requests the corresponding weather information from the WeatherAPI service.
The returned data is then displayed through a collection of reusable weather cards.
The current weather experience presents four key pieces of information:
The card-based layout keeps each piece of information visually separated while maintaining a simple overall interface.
One of the main learning goals of the project was understanding Custom React Hooks.
The API communication logic is encapsulated inside:
useWeatherApi.ts
This keeps API-related logic separate from the UI components.
Instead of putting request logic directly inside the weather display component, the custom hook provides a reusable abstraction for retrieving weather data.
The application integrates with WeatherAPI to retrieve current weather information.
The basic flow is:
The project uses React's useState hook to manage application state.
State is used for handling information such as:
This provides a practical example of managing asynchronous API-driven UI with React.
The application follows a simple component-based architecture.
Common UI elements are separated from weather-specific components.
The structure includes:
This keeps individual components focused and makes the application easier to extend.
The project includes reusable components such as:
The reusable Card component provides a consistent visual structure for displaying individual weather metrics.
Because weather information comes from an external API, the application needs to handle asynchronous states.
The project includes handling for:
This provides feedback to the user while weather information is being retrieved.
The WeatherAPI key is configured through a Vite environment variable:
VITE_WEATHER_API_KEY
Keeping the API configuration outside the component code makes the application configuration easier to manage across environments.
The project is built with:
React provides the UI framework, TypeScript adds type safety, CSS Modules handle component styling, and the custom hook separates weather API logic from the presentation layer.
XWeather was a small project, but it helped reinforce several important frontend concepts.
Building a complete flow from:
User Input → API Request → State → UI
makes concepts such as hooks, asynchronous operations and component architecture much easier to understand.
The project also reinforced the value of keeping API logic separate from presentation logic and building reusable components instead of putting everything inside a single page.
There are several directions the project could be extended:
The current implementation intentionally keeps the scope small while providing a foundation for these future features.