Skip to content

Latest commit

 

History

History
63 lines (43 loc) · 2.37 KB

README.md

File metadata and controls

63 lines (43 loc) · 2.37 KB
Raw

🌦️ Weather-App

Weather-App is an interactive web page that provides real-time 🌍 weather information for any location in the world! Users can easily search for a city or country and get instant updates, including temperature 🌡️, humidity 💧, wind speed 💨, and a brief description. With a simple, intuitive UI, the app includes:

  • Main Weather Display 🖥️
  • Search Bar 🔍 for cities or countries
  • Search History 🕒 to track previous searches
  • Detailed Weather Info 📊 for a deeper dive into conditions

✨ Features

  • 🌍 Global Coverage: Get weather info for any location worldwide.
  • 🎨 User-Friendly Interface: Easy to navigate, intuitive design.
  • ⏳ Real-Time Updates: Always get up-to-the-minute weather.
  • 🕒 Search History: Keep track of your previously searched locations.
  • 🌡️ Detailed Weather Info: Includes temperature, humidity, wind speed, and more.
  • 🧱 BEM Methodology: Styles written with BEM (Block Element Modifier) for better scalability and maintenance.
  • 📱 Responsive Design: Works seamlessly across different devices.

💻 Technologies Used

  • ⚛️ React: A JavaScript library for building interactive user interfaces.
  • ⌨️ TypeScript: A superset of JavaScript that adds static types and more features.
  • 🎨 Sass: A CSS preprocessor with additional functionality and a more readable syntax.
  • 📡 Axios: A popular HTTP client for making requests.
  • 🌐 OpenWeatherMap API: Provides current and forecasted weather data.

🗂️ Project Structure

src/
│
├── assets/         # Static assets (images, icons, etc.)
├── components/     # Reusable components for the UI
├── context/        # Context providers and consumers for state management
├── models/         # TypeScript interfaces/types for data structures
├── services/       # Weather service to fetch data from OpenWeatherMap API
└── styles/         # Sass styles for the app

📱 Responsive Design

Weather-App is designed to be responsive, ensuring a seamless experience whether you're on a desktop 🖥️, tablet 📱, or mobile device 📲.

👨‍💻 Author

Feel free to reach out with any questions, concerns, or interests!