A highly responsive, intelligent, and premium weather analytics application designed to provide rich meteorological data and predictive insights with a seamless user experience.

The primary objective of the Smart Weather application is to deliver an unparalleled, data-rich weather monitoring experience. It aims to bridge the gap between simple forecasting and complex meteorological analysis by providing an intuitive, premium interface that caters to both casual users and data enthusiasts.

Traditional weather applications often suffer from the following issues:

• Data Overload vs. Simplicity: They either present too much raw data, confusing the average user, or oversimplify forecasts, leaving out crucial details for those who need them.
• Static Interfaces: Most weather tools offer static layouts that do not adapt dynamically to the varying nature of meteorological data.
• Lack of Actionable Insights: Standard apps show conditions but fail to provide contextual advice (e.g., UV protection needs, travel warnings based on visibility, or humidity health impacts).

Smart Weather Analytics Dashboard resolves these issues through:

• Dynamic Data Visualization: Utilizing responsive ECharts to plot 24-hour trends and 7-day predictive models.
• AI-Driven Insights: A dedicated Smart Insights engine evaluates raw data (such as temperature, rain probability, wind speed, and UV index) to output actionable health and travel advice.
• Premium User Experience: Designed with a persistent dark mode, glassmorphism UI cards, v-motion entrance animations, and a collapsible sidebar tailored for optimal viewing across mobile, tablet, and desktop screens.

The application is built upon a modern, highly efficient frontend stack:

• Framework: Vue 3 (Composition API)
• Build Tool: Vite
• Styling: Tailwind CSS v4
• Components UI: shadcn-vue (reka-ui)
• Icons: Lucide Icons
• Charting: vue-echarts / Apache ECharts
• Animations: @vueuse/motion
• Weather API: Open-Meteo API
• Location Detection: Browser Geolocation API

graph TD
 A[Client Browser] --> B(Vue Application)
 B --> C{State Management Store}
 
 C -->|Requests Location| D[Browser Geolocation API]
 D -->|Returns Coordinates| C
 
 C -->|Coordinates Payload| E[Open-Meteo REST API]
 E -->|Hourly, Daily & Current Conditions| C
 
 C --> F(UI Components)
 
 subgraph Frontend Rendering
 F --> G[Overview Cards]
 F --> H[Interactive Charts]
 F --> I[Smart Insight Panel]
 F --> J[Extra Metrics Grid]
 end

sequenceDiagram
 participant User
 participant App
 participant Geolocation
 participant OpenMeteo
 participant InsightEngine
 User->>App: Launch Dashboard
 App->>Geolocation: Request User Coordinates
 Geolocation-->>App: Return Latitude/Longitude
 App->>OpenMeteo: Fetch Weather Data
 OpenMeteo-->>App: Return JSON payload
 App->>InsightEngine: Pass Current & Hourly Data
 InsightEngine->>InsightEngine: Calculate UV, Rain, Wind, Temp
 InsightEngine-->>App: Generate Actionable Advice
 App->>User: Display Dashboard with Animations

1. Clone the repository:

git clone https://github.com/JonniTech/Smart-Weather.git

2. Navigate into the project directory:

cd Smart-Weather

3. Install dependencies:

npm install

4. Run the development server:

npm run dev

5. Build for production:

npm run build

Programmed by NYAGANYA

This project is licensed under the MIT License.