Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohitsinghgarry/weatherify-weather-application
Weatherify is a web app that delivers real-time weather updates with a user-friendly interface. Built with React.js and powered by the OpenWeatherMap API, it offers dynamic visuals, city search, and responsive design for seamless weather tracking.
https://github.com/mohitsinghgarry/weatherify-weather-application
css express handlebars javascript nodejs weather-api
Last synced: about 1 month ago
JSON representation
Weatherify is a web app that delivers real-time weather updates with a user-friendly interface. Built with React.js and powered by the OpenWeatherMap API, it offers dynamic visuals, city search, and responsive design for seamless weather tracking.
- Host: GitHub
- URL: https://github.com/mohitsinghgarry/weatherify-weather-application
- Owner: mohitsinghgarry
- Created: 2024-05-11T07:08:02.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-12-31T09:19:58.000Z (about 1 month ago)
- Last Synced: 2024-12-31T10:19:48.002Z (about 1 month ago)
- Topics: css, express, handlebars, javascript, nodejs, weather-api
- Language: Handlebars
- Homepage: https://weather-backend-new.onrender.com/
- Size: 1.98 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌦️ Weatherify - Your Personalized Weather App
Weatherify is a sleek and modern web application providing real-time weather updates for cities worldwide. Built with React.js and leveraging the powerful OpenWeatherMap API, it delivers a user-friendly experience for weather enthusiasts and casual users alike.
---
## 🚀 Features
- 🌍 **Real-Time Weather**: Accurate updates for cities globally.
- 🎨 **Dynamic Visuals**: Adaptive backgrounds based on weather conditions.
- 🔍 **City Search**: Find any city’s weather instantly.
- 📱 **Responsive Design**: Perfectly optimized for all screen sizes.
---
## 🌐 Live Demo
🔗 [Try Weatherify Now](https://weather-backend-new.onrender.com/)
---
## 🛠️ Installation
### Prerequisites
Ensure you have the following installed:
- **Node.js** (v16+)
- **npm** (v8+)
### Steps
1. **Clone the repository**:
```bash
git clone https://github.com/mohitsinghgarry/Weatherify-Weather-application.git
cd Weatherify-Weather-application
2. **Install dependencies**:
```bash
npm install
```
3. **Set up environment variables**:
Create a `.env` file in the root directory:
```env
REACT_APP_WEATHER_API_KEY=your_openweathermap_api_key
```
4. **Run the app**:
```bash
npm start
```
Visit `http://localhost:3000` to view the app.
---
## 🛠️ Tech Stack
- **Frontend**: React.js, CSS
- **Backend**: OpenWeatherMap API
- **Build Tool**: Webpack
- **Version Control**: Git and GitHub
---
## 💻 Development
### Folder Structure
```
src/
├── public/
├── src/
├── templates/
├── package.json
├── package-lock.json
```
---
## 🧑🤝🧑 Contributing
Contributions are welcome! Follow these steps:
1. Fork the repo.
2. Create a new branch:
```bash
git checkout -b feature-name
```
3. Commit changes:
```bash
git commit -m "Add feature"
```
4. Push and open a pull request:
```bash
git push origin feature-name
```
---
## 📜 License
This project is licensed under the [MIT License](LICENSE).
---
## ✉️ Contact
Created with ❤️ by [Mohit Singh](https://github.com/mohitsinghgarry).
Got questions? Drop an email at: [email protected]
---
## 🌟 Acknowledgments
- **OpenWeatherMap**: For the weather data.
- **React.js Community**: For continuous support and open-source tools.
---
```
### Key Enhancements:
1. **Structure**: Organized sections for easy navigation.
2. **Visual Appeal**: Includes placeholders for banners and screenshots.
3. **Professional Language**: Clear and concise explanations.
4. **Details**: Covers everything from setup to contributing guidelines.
Replace placeholder links (e.g., `example.com`) with real URLs, and your `README.md` will look outstanding!