https://github.com/sandreass/wetter-app
Weather Dashboard Application
https://github.com/sandreass/wetter-app
context-api css deployment html react tailwind vite
Last synced: 3 months ago
JSON representation
Weather Dashboard Application
- Host: GitHub
- URL: https://github.com/sandreass/wetter-app
- Owner: Sandreass
- Created: 2024-03-21T13:26:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-10T13:26:09.000Z (over 1 year ago)
- Last Synced: 2025-02-07T13:44:39.972Z (over 1 year ago)
- Topics: context-api, css, deployment, html, react, tailwind, vite
- Language: JavaScript
- Homepage: https://wetter-app-opal.vercel.app
- Size: 569 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather Dashboard Application
This **Weather Dashboard Application** provides users with accurate weather forecasts and a visual map for any city worldwide.
The app is built using modern web technologies and showcases dynamic functionality and responsive design.
---
## 🌟 Features
- **City Weather Search:** Enter a city.
- **Weather Details:** Includes temperature, humidity, and a visual weather icon.
- **Interactive Map:** Displays the city's location on a map using Leaflet.js.
- **Dynamic Background:** A visually appealing background that adapts to the app's theme.
- **Responsive Design:** Fully responsive layout for desktop, tablet, and mobile users.
---
## 🛠️ Technologies Used
- **Frontend Framework:** React.js
- **State Management:** React Context API
- **API Integration:**
- [OpenWeatherMap](https://openweathermap.org/) for weather data.
- [OpenStreetMap](https://www.openstreetmap.org/) for location mapping.
- **Styling:** Tailwind CSS for modern, responsive styling.
- **Mapping Library:** Leaflet.js for interactive maps.
- **Axios:** For seamless HTTP requests.
---
## 🛠️ Installation and Setup
1. Clone the repository:
```bash
git clone git@github.com:Sandreass/Wetter-App.git
```
2. Install the dependencies:
```bash
npm install
```
3. Set up environment variables:
```env
add your API key
```
4. Start the development server:
```bash
npm run dev
```
---