A sleek, user-friendly weather forecast application built with React that utilizes the OpenWeatherMap API to provide real-time weather information.
- 🔍 Search for weather forecasts by city name
- 🌡️ Display current temperature in both Celsius and Fahrenheit
- 💨 Show wind speed, humidity, and atmospheric pressure
- 🌅 Sunrise and sunset times
- 📊 Five-day weather forecast
- 🌈 Responsive design (works on mobile and desktop)
- 🎨 Light and dark theme support
- 📍 Option to use current location (requires user permission)
-
🌐 Multi-language Support: Switch between different languages for a localized experience. The app will support English, Portuguese, Spanish, French, and more, making weather information accessible to users worldwide.
-
⏱️ Hourly Weather Details: Expand the forecast cards to view detailed hourly weather predictions. This feature will allow users to see temperature changes, precipitation chances, wind shifts, and other weather conditions throughout the day with an intuitive, interactive interface.
- React: JavaScript library for building the user interface
- Context API: Application state management
- OpenWeatherMap API: Weather data API
- Axios: HTTP client for API requests
- CSS Modules: Local scoped styling
- Jest & React Testing Library: Unit and integration testing
- Netlify/Vercel: Deployment and hosting
To run this project locally, you need to have installed:
- Node.js (v14.0.0 or higher)
- npm (v6.0.0 or higher) or yarn
- Clone this repository:
git clone https://github.com/yourusername/weather-now.git
cd weather-now- Install dependencies:
npm install
# or
yarn install- Create a
.envfile in the root directory and add your OpenWeatherMap API key:
REACT_APP_OPENWEATHER_API_KEY=your_api_key_here
- Start the development server:
npm start
# or
yarn start- Access the app in your browser:
http://localhost:3000
- Visit OpenWeatherMap and create a free account
- After logging in, go to the "API Keys" section
- Generate a new API key
- Copy the key and add it to your
.envfile as shown above
This project uses the free tier of the OpenWeatherMap API which has the following limitations:
- 60 calls per minute
- 1,000,000 calls per month
- 5-day forecast available at 3-hour intervals
To avoid exceeding these limits, this application implements several protective measures:
- Client-side caching of weather data for 30 minutes
- Throttling to prevent rapid successive API calls
- Usage tracking with visual warnings
- Limited recent searches history
For Portfolio Visitors: This is a demonstration project. Please be mindful of API usage when testing the application. The weather data refreshes only every 30 minutes, so there's no need to search for the same location repeatedly.
weather-now/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ └── ...
├── src/
│ ├── components/
│ │ ├── CurrentWeather/
│ │ ├── Forecast/
│ │ ├── Search/
│ │ └── ...
│ ├── context/
│ │ └── WeatherContext.js
│ ├── services/
│ │ └── api.js
│ ├── utils/
│ │ └── helpers.js
│ ├── App.js
│ └── index.js
├── .env
├── .gitignore
├── package.json
└── README.md
Run unit and integration tests:
npm test
# or
yarn testThe app is fully responsive and adapts to different screen sizes:
- Mobile devices (<768px)
- Tablets (768px - 1024px)
- Desktop (>1024px)
Check out the live demo at: https://weather-now-six-lime.vercel.app
Contributions are welcome! Feel free to open an issue or submit a pull request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Maryele Trzaskos Gruber - [email protected]
Project Link: https://github.com/trzaskos/weather-now
If you find this project helpful, consider buying me a coffee!
