This project is an interactive web-based dashboard designed to visualize historical and current weather data for various locations around the globe. Leveraging the Open-Meteo API, users can explore temperature trends, precipitation, wind speed, and more through intuitive and dynamic charts. The dashboard aims to provide a clear, engaging, and responsive interface for meteorological data analysis, showcasing strong front-end development skills, API integration, and data visualization capabilities.
- Location Search: Users can search for weather data by entering a city name.
- Current Weather Display: Shows real-time weather conditions for the selected location.
- Historical Data Visualization: Interactive charts display historical weather metrics over a user-defined period.
- Dynamic Charting: Users can select different weather variables to visualize on the charts.
- Responsive Design: Optimized for seamless viewing and interaction across various devices.
- Intuitive User Interface: Clean and user-friendly design for easy navigation and data exploration distraction free.
- Next.js & Tailwind CSS
- Charting Library (e.g., Recharts, Chart.js, D3.js)
- Git & GitHub
- Github Actions (CI/CD Workflow to deploy to vercel)
- Docker (for a local development build)
You can simply run docker compose up if you have docker. Or run natively using node/yarn by following these steps:
- Clone the repository:
git clone https://github.com/YourUsername/weather-data-dashboard.git
cd weather-data-dashboard- Install dependencies:
npm install
# or yarn install- Start the development server:
npm run dev # or yarn devThe application should then be available to visit at http://localhost:3000.
- Enter a Location: Use the search bar to type in a city name.
- Select Data Type: Choose from available weather metrics (e.g., "Max Temperature," "Precipitation") to update the chart.
- Adjust Date Range: Use the date pickers to specify the historical period you wish to visualize.
- Explore: Interact with the charts to see specific data points.
This project utilizes the Open-Meteo API to fetch weather data. It's a free and open-source weather API that provides historical and forecast data.
