🌦 Noob Weather – A Practice Weather App

Live Demo 🚀

Overview

Noob Weather is a practice project built to explore and learn modern web development using React, Redux, and API handling with the OpenWeather API. This project is designed to help you understand core concepts of React components, state management with Redux, asynchronous API requests, and using Yarn for dependency management. Although it’s a simple application, it serves as a great learning tool and a base for further improvements.

Features

• City Weather Search: Search for any city to fetch current weather data.
• Real-Time Data: Retrieve live weather updates including temperature, humidity, wind speed, and weather conditions.
• Responsive Design: Clean, minimalistic, and responsive user interface that works on desktops and mobile devices.
• Basic Error Handling: Displays error messages when an invalid city is entered or if data retrieval fails.

Tech Stack

• React: Building the interactive user interface.
• Redux: Managing the global application state.
• OpenWeather API: Fetching real-time weather information.
• Yarn: Managing dependencies and project scripts.
• Vercel: Hosting the live demo of the project.

Installation

To run this project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/your-username/noob-weather.git

2. Navigate to the Project Directory:

   cd noob-weather

3. Install Dependencies:

   yarn install

4. Start the Development Server:

   yarn dev -- --host

   The application will be available at http://localhost:5173.

Usage

1. Search for a City:
   • Type a city name into the search bar.
   • Press Enter or click the search button to submit.
2. View Weather Data:
   • The app will display current temperature, humidity, wind speed, and overall weather conditions.
3. Error Notifications:
   • If the city is not found or an error occurs, a user-friendly error message will be shown.

Learning Objectives

This project was created as a learning exercise and to practice the following:

• Building and structuring React applications.
• Implementing state management with Redux.
• Handling asynchronous API calls and managing responses.
• Utilizing Yarn for project dependency management.
• Creating a responsive UI with basic error handling.

Future Improvements

• Enhanced Error Handling: Improve feedback for network issues or API rate limiting.
• Unit Conversion: Allow users to toggle between Celsius and Fahrenheit.
• UI/UX Enhancements: Refine the user interface with animations and a more polished design.
• Additional Metrics: Add more weather details such as sunrise/sunset times, atmospheric pressure, and air quality index.
• Testing: Integrate unit and integration tests to ensure reliability.

Contributing

Contributions are welcome! If you have suggestions, improvements, or bug fixes, please follow these steps:

Acknowledgments

• Special thanks to the OpenWeather API for providing the weather data.
• Inspired by various online tutorials and documentation that helped shape this learning project.

Contact

For questions, suggestions, or feedback, please reach out at rakeshkund3355@gmail.com.

---