WeatherWeb

A modern weather application with a beautiful glassmorphic dark mode UI built with Next.js.

Features

• 🌈 Modern glassmorphic dark mode UI
• 🔍 Search for weather by city name
• 🌡️ Current weather conditions
• 📅 5-day weather forecast
• 💨 Wind speed, humidity, sunrise, and sunset information
• 📱 Fully responsive design
• ✨ Smooth animations with Framer Motion

Screenshots

Getting Started

Prerequisites

• Node.js 18 or later
• npm or yarn
• OpenWeatherMap API key (get it for free at OpenWeatherMap)

Installation

1. Clone the repository:

git clone https://github.com/taynotfound/weatherweb.git
cd weatherweb

2. Install dependencies:

npm install
# or
yarn install

3. Create a .env.local file in the root directory and add your OpenWeatherMap API key:

NEXT_PUBLIC_OPENWEATHER_API_KEY=your_api_key_here

4. Start the development server:

npm run dev
# or
yarn dev

5. Open http://localhost:3000 in your browser to see the app.

Tech Stack

• Next.js - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Framer Motion - Animations
• React Icons - Icons
• Axios - API requests
• For the API's see weather.taymaerz.de/about

License

This project is licensed under the MIT License.

Acknowledgements

• OpenWeatherMap for providing the weather data API
• Glassmorphism CSS Generator for inspiration on glassmorphism design