The Challenge

The goal was to build a weather dashboard that:

• Fetches and displays accurate weather data from external APIs
• Supports searching by location
• Presents both hourly and 7-day forecasts in a clear, accessible format
• Allows users to switch between different measurement units without friction
• Maintains a clean and responsive UI across devices

The Solution

The application was built with Next.js and TypeScript, using a modern UI stack and multiple data sources. Key highlights:

• Weather data fetched from the OpenWeather API and Open-Meteo API
• Search functionality for retrieving weather by location
• Hourly forecast and 7-day forecast views
• Unit switching for Temperature (C/F), Wind speed (km/h/mph), and Precipitation (mm)
• Styling and layout handled with Tailwind CSS, with shadcn/ui components for consistency and accessibility

The Outcome

The final result is a fully responsive weather application that delivers real-time forecasts in an intuitive and easy-to-navigate interface. Through this project, I improved my ability to:

• Work with multiple external APIs
• Manage complex data-driven UI states
• Build reusable UI components with Tailwind and shadcn
• Structure Next.js applications for clarity and scalability