This project is a fully functional weather forecast application that allows users to view weather conditions for their current location or search for weather data by city name. The application is designed with a clean and user-friendly interface and integrates real-time weather data using a weather API. The primary focus is on providing accurate weather details, including temperature, humidity, wind speed, and weather conditions like sunny, cloudy, or rainy.

Key Features

Real-time Weather Data: The application fetches live weather data from a reliable weather API based on the user's input or current location.

User Location Detection: Automatically detects the user's location to provide accurate and immediate weather updates.

Search Functionality: Users can search for weather conditions by city, enabling them to check the weather in any region worldwide.

Dynamic Backgrounds: The background image of the application changes dynamically based on the current weather condition (e.g., sunny, rainy, or cloudy), enhancing user experience.

Responsive Design: Optimized for various screen sizes, ensuring compatibility across devices including desktops, tablets, and smartphones.

MongoDB Integration: Utilizes MongoDB for storing user preferences and ensuring personalized weather updates upon returning visits.

Technologies Used

Frontend:

HTML5, CSS3, JavaScript for building a responsive and interactive user interface.

Fetch API for making asynchronous requests to the weather API.

Backend:

Node.js and Express.js for handling server-side logic and API requests.

MongoDB for storing and managing user preferences and data.

API Integration:

Weather API (like OpenWeatherMap or similar) is integrated to fetch and display real-time weather updates.

User Flow

Home Page: Users are greeted with an intuitive interface that either displays the weather for their current location or prompts them to search for a city.

Weather Data Display: Once the user enters a city or uses location detection, the app shows weather details such as temperature, humidity, wind speed, and conditions. Background changes dynamically based on weather conditions.

How It Works

The app interacts with the weather API to fetch current weather data. MongoDB is used for storing user data such as preferences or previous searches. Users can access the app via both desktop and mobile devices due to the responsive design. When the weather data is fetched, the app automatically adjusts the background image to reflect the current weather condition, providing an engaging user experience.