https://github.com/claudyv/weather-dashboard
A responsive weather dashboard that displays current weather information for a given city
https://github.com/claudyv/weather-dashboard
nextjs open-meteo-api tailwindcss tanstack-react-query
Last synced: about 2 months ago
JSON representation
A responsive weather dashboard that displays current weather information for a given city
- Host: GitHub
- URL: https://github.com/claudyv/weather-dashboard
- Owner: ClaudyV
- License: mit
- Created: 2025-02-26T14:19:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-26T15:13:17.000Z (over 1 year ago)
- Last Synced: 2025-06-12T01:04:56.051Z (about 1 year ago)
- Topics: nextjs, open-meteo-api, tailwindcss, tanstack-react-query
- Language: TypeScript
- Homepage: https://weather-dashboard-three-gray.vercel.app/
- Size: 118 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Weather Dashboard
A modern, responsive weather dashboard application built with Next.js, Tailwind CSS, TanStack Query and Open-Meteo. This application allows users to search for weather information by city, view current conditions, and check the 5-day forecast.
## Features
- Search for weather by city name
- Display current weather conditions including:
- Temperature
- Weather conditions (sunny, cloudy, rain, etc.)
- Wind speed
- Humidity
- Show 5-day weather forecast
- Toggle between Celsius and Fahrenheit
- Save favorite cities for quick access
- Responsive design for all device sizes
## Technologies Used
- Next.js
- TanStack Query
- Tailwind CSS for styling
- Axios for API requests
- React Icons for weather icons
- Open-Meteo API for weather data
## Installation and Setup
1. Clone the repository:
```
git clone https://github.com/ClaudyV/weather-dashboard.git
cd weather-dashboard
```
2. Install dependencies:
```
npm install
```
3. Start the development server:
```
npm start
```
4. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## API Information
This project uses the [Open-Meteo API](https://open-meteo.com/), which is a free, open-source weather API that does not require an API key for basic usage.
## Testing
Run the test suite with:
```
npm test
```
## Deployment
The application is deployed and can be accessed at [https://weather-dashboard-three-gray.vercel.app/](https://weather-dashboard-three-gray.vercel.app/).
## License
MIT License
## Acknowledgements
- [Next.js](https://nextjs.org/) for building React application
- [TanStack Query](https://tanstack.com/query/latest) for data fetching and state management
- [Tailwind CSS](https://tailwindcss.com/) for the styling framework
- [Open-Meteo](https://open-meteo.com/) for the free weather API
- [React Icons](https://react-icons.github.io/react-icons/) for the icon sets