🌤️

Weather App

Professional weather app with accurate forecasts, detailed climate analysis, bilingual UI, and a smart weather assistant

Overview

The Weather App is a professional application delivering accurate weather forecasts and detailed climate analysis with a modern, elegant design. The app supports a 7-day forecast view with charts showing temperature, humidity, and wind evolution. The bilingual interface supports Arabic and English seamlessly, with a smart weather assistant answering user questions about weather conditions. Automatic location detection identifies the user's city instantly. Animations designed with Framer Motion make interacting with the app an enjoyable experience.

Features

  • Accurate and updated weather forecasts with comprehensive data including temperature, humidity, wind, and precipitation chances
  • 7-day forecast view with interactive charts showing weather condition evolution
  • Detailed climate analysis charts displaying historical and seasonal weather patterns
  • Bilingual interface supporting Arabic and English with seamless switching without page reload
  • Smart weather assistant answering user questions and providing advice appropriate to weather conditions
  • Automatic user location detection to display city forecasts immediately upon opening the app

How It Works

The app relies on Next.js with weather APIs fetching updated data. Charts are displayed through specialized visualization libraries with Framer Motion animations. The smart assistant analyzes weather data and answers user queries. Location detection uses the Geolocation API to automatically identify the city.

Challenges

The biggest challenge was obtaining accurate and updated weather data from reliable sources and presenting it attractively. Designing interactive charts that work smoothly on mobile required continuous optimization. Supporting both Arabic and English while maintaining design consistency in both directions was an additional challenge.

Technologies Used

Next.jsReactTypeScriptTailwind CSSPrismaNextAuthFramer MotionPWAshadcn/uiRadix UIZustandRechartsReact Hook FormZoddnd-kitSonnerEmbla CarouselLucideVercelGitNode.jsBunnext-intlnext-themesReact QuerySharpcmdkdate-fnsTanStack TableMDX EditorReact MarkdownLeafletESLint