A modern weather web application that provides real-time weather data, forecasts, and interactive features to enhance the user experience. Design is focused on separation of concerns and maintainability.
Users can:
- 🔍 Search for weather by entering a city or using device geolocation.
- 🌡 View current conditions: temperature, weather icon, and location details.
- 📊 Explore metrics: "feels like", humidity, wind speed, precipitation, AQI.
- 📅 Check a 7-day forecast with highs/lows and weather icons.
- 🕒 Browse hourly forecasts with temperature trends.
- 📌 Switch between days in the hourly forecast.
- 🔄 Toggle between Metric and Imperial units (C°/F°, km/h/mph, mm/inch).
- 📱 Enjoy responsive layouts optimized for all devices.
- 🖱 Experience hover/focus states for all interactive elements.
- 📍 Detect current location automatically (first visit).
- ⭐ Save favorite locations for quick access.
- 🎙 Use voice search to find weather quickly.
- Vite (bundler)
- React + React Query (TanStack)
- CSS Modules with custom properties & variable fonts
- Mobile-first workflow
- Light/Dark mode via system preference
- Vitest + React Testing Library for testing
The SearchForm component is a feature-rich, interactive input for location-based search. It combines immediate feedback (live search), client-side validation, accessibility features, and GPS integration to provide a robust user experience.
Key Features:
-
Live Search with Debouncing: Provides real-time suggestions as the user types, using the useLiveSearch hook to efficiently query data. The search query is debounced by 500ms to prevent excessive API calls while the user is actively typing.
-
Form Validation: Uses SearchSchema for client-side validation of the search input, displaying immediate error messages when invalid input is detected.
-
Dismissal Outside: Uses the useDismissalOutside hook to close the live search dropdown when the user clicks or focuses anywhere outside the search input and dropdown area.
-
GPS Integration: Allows users to automatically use their current location with the "Locate me" button, utilizing the useGpsLocation hook.
-
Speech Recognition: Includes a dedicated button for voice input, enhancing accessibility and ease of use.
-
Location Context Management: Updates the global application state for the user's current location (city and/or coords) via the useLocation context.
A React hook to manage the dismissal of components (like dropdowns, modals, or tooltips) when a user clicks or focuses outside of the component and its associated trigger element. This hook is reusable on all dropdowns from search dropdowns to any select dropdown.
- Starts listening when the button is clicked.
- Automatically stops after 10 seconds.
- Updates the search query live while listening.
- Validates the search input using
SearchSchema. - Shows toast notifications for errors and info.
A custom React hook that provides continuous speech recognition using the native Web Speech API (webkitSpeechRecognition). This hook manages the entire speech recognition lifecycle — including setup, start/stop control, cleanup, and automatic text updates.
Support: - ✅ Chrome (desktop & Android) -
⚠️ Edge (Chromium-based) -⚠️ Safari (partial, experimental) - ❌ Firefox (not supported)
Used a class-based ErrorBoundary integrated with React Query’s QueryErrorResetBoundary and useQueryErrorResetBoundary hook. This setup ensures query errors and runtime errors are gracefully isolated to their component scope. The Retry button in the fallback UI calls both the local ErrorBoundary.reset() and React Query’s reset() to trigger automatic re-fetching of failed data.
To ensure optimal performance, particularly for initial load speed and SEO, the website utilizes a Server-Side Rendered (SSR) architecture powered by Express.js. This approach resulted in a huge difference in performance compared to a purely Client-Side Rendered (CSR) setup, especially for high-speed metrics like First Contentful Paint.
- Demo url :- https://weatherssr.onrender.com/
- PR#15 :- #15
Note: Keep separate for learning purpose. And I am still learning and experimenting with react API
renderToPipeableStream().
- Unit Test : Written using Vitest and React Testing Library to validate core utility functions and reusable hooks.
- Integration Test : Focused on user behavior and component interactions. Most of the components are are covered through integration testing.
- Test coverage is tracked continuously on codecov.io
- Efficient data fetching and caching using React Query.
- Managing geolocation APIs and permissions.
- Creating a scalable and responsive UI with CSS Grid and Flexbox.
- Implementing accessibility best practices for interactive UI elements.
- Testing react query
- Error Boundaries : Error handling in react query. Catching runtime errors that happen during rendering, and react properly to them by displaying a fallback UI instead.
- OpenMeteo API – Free weather data API used.
- TanStack Query Docs – React Query documentation.
- React query error handling - TkDodo's blog post on react query handling
Clone and set up the project locally:
# Clone the repository
git clone https://github.com/ShubhamOulkar/weather.git
# Navigate to project
cd weather/app
# Install dependencies
pnpm install
# Create .env file and add your API keys if needed
cp .env.example .env
# Start development server
pnpm devfor formating and linting
pnpm format:lint
for testing
pnpm test for build and preview
pnpm previewContent submitted by shubham oulkar is Creative Commons Attribution 4.0 International licensed, as found in the LICENSE file.