Meghya — Weather Search App

Meghya is a small, friendly weather search app built with React and Vite. Type a city name and Meghya fetches the current weather from OpenWeatherMap and presents it in a clean, Material UI-powered card.

This repository is intended as a lightweight demo: it focuses on UX, simple error handling, and showing how to wire a third-party weather API into a React UI.

Features

• Search: Look up current weather by city name.
• Live data: Uses OpenWeatherMap to show temperature, humidity, and a short description.
• Polished UI: Built with Material UI components and responsive CSS.
• Visual cues: Background images and icons change depending on temperature/humidity.
• Basic error handling: Friendly messages for unknown cities and API problems.

Run Locally

• Prerequisites: Node.js (v16+ recommended) and npm or pnpm.
• Install dependencies:

npm install

• Start the dev server:

npm run dev

• Open the app at http://localhost:5173 (Vite default) in your browser.

API key (important)

• The app uses the OpenWeatherMap API from src/components/ui/SearchBox.jsx.
• For security and portability, replace the hard-coded key with an environment variable. Create a .env file at the project root with:

VITE_OPENWEATHER_API_KEY=your_api_key_here

Then update src/components/ui/SearchBox.jsx to use import.meta.env.VITE_OPENWEATHER_API_KEY (or keep a fallback during development).

Key files

• src/components/WeatherApp.jsx — app shell and state management.
• src/components/ui/SearchBox.jsx — input, API request, and error handling.
• src/components/ui/InfoBox.jsx — displays the fetched weather data.

You can inspect these files directly:

• src/components/WeatherApp.jsx
• src/components/ui/SearchBox.jsx
• src/components/ui/InfoBox.jsx

Implementation notes

• The app stores the current weatherInfo in the WeatherApp component and passes an updateInfo callback to SearchBox to update it.
• InfoBox protects against missing data and chooses images/icons based on simple thresholds (temperature/humidity).

Future improvements

• Secure API key: Move the API key to an environment variable and remove it from source control.
• Forecast support: Add 3- or 7-day forecast using OpenWeatherMap's forecast endpoints.
• Caching & rate limiting: Cache recent queries to reduce API calls and add exponential backoff for failures.
• Geolocation: Allow users to get weather for their current location via the browser Geolocation API.
• Unit tests: Add unit tests for components and integration tests for the API layer.
• Accessibility: Improve keyboard navigation and ARIA labels for better accessibility.
• Internationalization: Support multiple languages and unit systems (Celsius/Fahrenheit).

Notes

• This project is intentionally small and easy to extend. If you want, I can help move the API key into a .env file and update SearchBox.jsx to read from import.meta.env.

Enjoy exploring Meghya! — If you'd like, I can also add a quick CI workflow or implement one of the future improvements.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.