A simple, responsive, and user-friendly weather application built with React that allows users to quickly check current weather conditions for any city worldwide. It fetches live data from the free Open-Meteo API and supports animated UI elements for enhanced user experience.
- Input any city and retrieve up-to-date weather data
- Displays city name, temperature (°C), wind speed (km/h), and local time
- Animated background and fade-in weather info for a modern look
- Loading spinner while fetching data
- Responsive design works seamlessly on all device sizes (mobile, tablet, desktop)
- Weather condition icons based on live weather codes
- Built with React, leveraging hooks for state and effects
- Node.js (v14+ recommended)
- npm comes bundled with Node.js
- Clone the repository:
git clone https://github.com/your-username/weather-now.git
- Navigate to the project directory:
cd weather-now
- Install dependencies:
npm install
Start the development server:
npm start
Open your browser and visit http://localhost:3000 to view the app.
- React (with functional components and hooks)
- Open-Meteo public weather API
- React Icons for weather and UI icons
- CSS3 for styling and animations
- Responsive design with CSS flexbox and media queries
src/App.js- Main React component containing UI and logic for fetching/displaying weatherApp.css- Styling for the app including animations and responsive layout- Other standard React files
- Add more detailed weather forecasts (hourly/daily)
- Include user location-based weather detection
- Dark mode toggle
- Improved error handling and notifications
- Unit and integration tests
- Shivam Kanaujiya
- Contact: shivamk.dev2002@gmail.com
- GitHub: (https://github.com/Sk2k19)
This project is open source and available under the MIT License.
- Open-Meteo for their free and reliable weather API
- React community and documentation
- React Icons for beautiful scalable icons
If you have any questions or suggestions, feel free to open an issue or contact me directly.