SimpleWeatherApp

SimpleWeatherApp is a simple weather forecast application (SPA) developed using Vue.js, JS, and SCSS. It also features Lottie animations for a experience and integrates OpenWeatherMap API to fetch real-time weather data.

Features

• City search: Enter a city name to get the weather forecast.
• Geolocation support: Use your current location to get local weather automatically.
• Search history: Quick access to your 5 most recent searches.
• Current weather display: Temperature, humidity, wind speed, and weather conditions description.
• 5-day weather forecast: Detailed forecast with daily high/low temperatures and weather conditions.
• Loading states: Visual feedback during data fetching.
• Multi-day forecast: Weather information for the upcoming days.
• Open API Integration: The application uses an open API key to fetch weather data from OpenWeatherMap.
• Lottie Animations: Smooth and lightweight animations enhance the user experience.

Technologies

• Vue.js: JavaScript framework for building user interfaces.
• SCSS: CSS preprocessor for better-structured and maintainable styles.
• Vite: Modern and fast frontend build tool.
• Lottie: Animation library for seamless animated weather icons and effects.

Project Structure

public/         # Static files
src/            # Application source code
  components/   # Vue components
  assets/       # Resources such as images, styles, and animations
  constants/    # API constants
  utils/        # Utility functions
index.html      # Main HTML file
package.json    # Project dependencies and scripts
vite.config.js  # Vite configuration

Installation and Running

Clone the repository:

git clone https://github.com/Jackcubbi/SimpleWeatherApp.git

Navigate to the project directory and create a constants folder:

cd SimpleWeatherApp

Create environment file:

Copy .env.example to .env and add your OpenWeatherMap API key:

cp .env.example .env

Then edit .env and replace your_api_key_here with your actual API key from OpenWeatherMap:

VITE_WEATHER_API_KEY=your_actual_api_key
VITE_WEATHER_BASE_URL=https://api.openweathermap.org/data/2.5

Install dependencies:

npm install

Run the application:

npm run dev

The application will be available at http://localhost:5173 or another port if specified.

Build for Production

To build the application for production, run:

npm run build

The build files will be located in the dist/ directory.

Screenshot

License

This project does not have a specified license. Please contact the author for more details.