# 🌤 WeatherNow (Vite + React) A React weather app built with Vite — fast dev server, CSS Modules, and custom hooks. ## Why Vite over CRA? | | Vite | Create React App | |---|---|---| | Dev server startup | ~300ms | ~5–10s | | Hot Module Reload | Instant | Slow | | Build tool | Rollup (ESM) | Webpack | | Config | vite.config.js | Ejection needed | | Env vars prefix | `VITE_` | `REACT_APP_` | ## Project Structure ``` src/ ├── components/ │ ├── SearchBar.jsx + .module.css │ ├── WeatherCard.jsx + .module.css │ ├── ForecastCard.jsx + .module.css │ └── ErrorMessage.jsx + .module.css ├── hooks/ │ └── useWeather.js # Custom hook — all data logic ├── utils/ │ └── weatherApi.js # Axios + OpenWeather API ├── App.jsx + App.module.css ├── main.jsx # Vite entry point └── index.css # Global styles only ``` ## Setup ### 1. Get a Free API Key Go to https://openweathermap.org/api → Sign up → Copy your API key. ### 2. Create your .env file ```bash cp .env.example .env ``` Open `.env` and replace the placeholder with your key. > ⚠️ In Vite, env vars MUST start with `VITE_` to be exposed to the browser. ### 3. Install & Run ```bash npm install npm run dev ``` App runs at http://localhost:5173 ### 4. Build for Production ```bash npm run build npm run preview ``` ## Key Vite Concepts in This App | Topic | Where | |---|---| | `import.meta.env.VITE_*` | `src/utils/weatherApi.js` | | CSS Modules (`.module.css`) | Every component | | `.jsx` entry point | `src/main.jsx` | | Env prefix `VITE_` | `.env.example` | ## Practice Challenges 1. Add Celsius / Fahrenheit toggle. done 2. Save recent searches with localStorage .done 3. Change background gradient based on weather condition.done 4. Add geolocation support (navigator.geolocation).done 5. Replace spinner with a skeleton loading UI .done # WeatherNow