WeatherPilot AI is a modern weather intelligence dashboard built with React, TypeScript, and the WeatherAI API. The application transforms raw weather data into actionable insights through intelligent scoring, visual analytics, and AI-powered weather summaries.
WeatherPilot AI is more than a weather application. Instead of simply displaying forecasts, it analyzes weather conditions and generates decision-support metrics to help users understand how weather impacts travel, outdoor activities, and farming conditions.
The application consumes multiple WeatherAI endpoints and presents the information through an intuitive and responsive user interface.
- Real-time weather conditions
- Temperature display
- Wind speed and direction
- Weather condition icons
- Last updated timestamp
- Hour-by-hour forecast visualization
- Interactive temperature trend charts
- Weather condition tracking
- Precipitation probability analysis
- Multi-day weather outlook
- Sunrise and sunset times
- Daily temperature ranges
- Rainfall predictions
- Wind forecasts
- Weather condition indicators
Calculates the suitability of weather conditions for travel and outdoor activities.
Factors considered:
- Temperature
- Wind speed
- Rain probability
Analyzes weather conditions for agricultural activities.
Factors considered:
- Humidity
- Rainfall
- Temperature
Provides a weather risk assessment based on:
- Wind gusts
- Rain probability
- Weather severity
Automatically generates weather recommendations and alerts based on forecast conditions.
Examples:
- Heavy rainfall warnings
- Outdoor activity recommendations
- Travel advisories
- Agricultural recommendations
- Recent location searches
- Local storage persistence
- Quick location recall
- Desktop optimized
- Tablet optimized
- Mobile friendly
Designed with support for future dark mode enhancements.
- React 19
- TypeScript
- Vite
- React Hooks
- React Query
- Axios
- Recharts
- Tailwind CSS
- React Icons
- OpenStreetMap Nominatim API
- WeatherAI API
GET /v1/currentReturns current weather conditions.
GET /v1/hourlyReturns hourly forecast information.
GET /v1/dailyReturns daily forecast information.
src
│
├── api
│ ├── axios.ts
│ └── weatherApi.ts
│
├── components
│ ├── CurrentWeatherCard.tsx
│ ├── DailyForecastCards.tsx
│ ├── FarmingScoreCard.tsx
│ ├── HourlyChart.tsx
│ ├── RiskScoreCard.tsx
│ ├── SearchBar.tsx
│ ├── SearchHistory.tsx
│ ├── TravelScoreCard.tsx
│ └── WeatherInsight.tsx
│
├── pages
│ └── Home.tsx
│
├── services
│ ├── geocodingService.ts
│ └── weatherService.ts
│
├── types
│ └── weather.ts
│
├── utils
│ ├── insights.ts
│
├── App.tsx
├── main.tsx
└── index.css
The application follows a layered architecture that separates concerns and improves maintainability.
Responsible for rendering UI components.
Components
Pages
Layouts
Responsible for API communication.
weatherService.ts
geocodingService.ts
Contains weather calculations and weather insights.
scores.ts
insights.ts
Defines API contracts and TypeScript models.
weather.ts
Evaluates travel conditions using:
Temperature
Rain Probability
Wind Speed
Evaluates agricultural suitability using:
Humidity
Rainfall
Temperature
Evaluates weather severity using:
Rain Probability
Wind Gusts
UV Exposure
Instead of creating a basic weather dashboard, WeatherPilot AI introduces an intelligence layer that transforms weather data into actionable insights.
Most weather applications display raw weather information. While useful, users still need to interpret the data themselves.
WeatherPilot AI addresses this by:
- Converting weather conditions into simple scores
- Generating insights and recommendations
- Highlighting potential risks
- Providing decision-support metrics
This demonstrates how weather data can be transformed into business value rather than simply visualized.
- TypeScript for type safety and maintainability.
- Component-based architecture for scalability and reusability.
- Service layer abstraction to isolate API communication.
- Utility layer for business logic and scoring algorithms.
- Local storage for search history persistence.
- Responsive-first design for accessibility across devices.
Create a .env file in the root directory.
VITE_WEATHER_AI_API_KEY=your_api_key_heregit clone https://github.com/yourusername/weatherpilot-ai.gitcd weatherpilot-ainpm installCreate:
.envAdd:
VITE_WEATHER_AI_API_KEY=your_api_key_herenpm run devnpm run testApplication runs on:
http://localhost:5173
Generate production build:
npm run buildPreview production build:
npm run preview- Weather alerts and notifications
- Progressive Web App (PWA) support
- Offline mode
- Weather comparison between cities
- Export reports to PDF
- Weather map integration
- Historical weather trends
- User accounts and preferences
- Advanced AI recommendations
- Lazy-loaded components
- Cached API responses
- Memoized calculations
- Optimized chart rendering
- Local storage caching
Full Stack Software Engineer
- Java
- Spring Boot
- React
- TypeScript
- Angular
- PostgreSQL
- MySQL
- Cloud & Enterprise Systems
https://www.linkedin.com/in/gabriel-gitonga-b5a611183/