https://github.com/andrejkoller/wonderweather
⛅ Accessible weather dashboard, featuring customizable themes, font sizes, and real-time weather data.
https://github.com/andrejkoller/wonderweather
css html javascript mui nextjs react tailwindcss
Last synced: 19 days ago
JSON representation
⛅ Accessible weather dashboard, featuring customizable themes, font sizes, and real-time weather data.
- Host: GitHub
- URL: https://github.com/andrejkoller/wonderweather
- Owner: andrejkoller
- License: mit
- Created: 2025-03-24T18:18:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-05-29T13:27:06.000Z (21 days ago)
- Last Synced: 2026-05-29T15:12:14.427Z (21 days ago)
- Topics: css, html, javascript, mui, nextjs, react, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 1020 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# wonderweather
A modern, responsive weather dashboard application built with Next.js 15 and React 19. WonderWeather provides real-time weather information with a beautiful, customizable interface that adapts to your preferences.
## ✨ Features
- Real-Time Weather Data: Get current weather conditions for any city worldwide using the WeatherAPI
- Multiple Theme Options: Choose from 4 distinct themes:
- Light Theme (Default)
- Sun Theme
- Sky Theme
- Moon Theme
- Adjustable Font Sizes: Customize text size for better accessibility (Small, Medium, Large, Extra Large)
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Dashboard Layout: Organized navigation with settings and system settings pages
- Persistent Preferences: Your theme and font size choices are saved in local storage
## 🛠️ Technologies Used
- Next.js
- Material-UI
- Tailwind CSS
- WeatherAPI
## 📋 Prerequisites
- Node.js 18.0 or higher
- npm or yarn package manager
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/andrejkoller/wonderweather-frontend.git
cd wonderweather-frontend
```
2. Install dependencies:
```bash
npm install
```
3. Create a `.env.local` file in the root directory and add your Weather API credentials:
```env
NEXT_PUBLIC_WEATHER_API_BASE_URL="https://api.weatherapi.com/v1/current.json"
NEXT_PUBLIC_WEATHER_API_KEY="your-api-key-here"
```
4. Run the development server:
```bash
npm run dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
## 🔑 Getting an API Key
This application uses the [Weather API](https://www.weatherapi.com). To get your free API key:
1. Visit [https://www.weatherapi.com](https://www.weatherapi.com)
2. Sign up for a free account
3. Generate your API key
4. Add it to your `.env.local` file
## 📸 Screenshots