Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vijaysingh1621/weather-web-app
This is a dynamic weather web application built using Next.js and styled with Tailwind CSS, incorporating Next UI components. The app fetches real-time weather data and updates the background dynamically based on the current weather conditions.
https://github.com/vijaysingh1621/weather-web-app
next-ui nextjs14 openweathermap-api tailwindcss
Last synced: 3 days ago
JSON representation
This is a dynamic weather web application built using Next.js and styled with Tailwind CSS, incorporating Next UI components. The app fetches real-time weather data and updates the background dynamically based on the current weather conditions.
- Host: GitHub
- URL: https://github.com/vijaysingh1621/weather-web-app
- Owner: Vijaysingh1621
- Created: 2024-06-21T08:04:11.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-02T06:06:12.000Z (7 months ago)
- Last Synced: 2024-07-06T11:24:57.940Z (7 months ago)
- Topics: next-ui, nextjs14, openweathermap-api, tailwindcss
- Language: JavaScript
- Homepage: https://weather-web-app-ivory.vercel.app
- Size: 12.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
## Weather Web App
This is a dynamic weather web application built using Next.js and styled with Tailwind CSS, incorporating Next UI components. The app fetches real-time weather data and updates the background dynamically based on the current weather conditions.
### Features
- **Real-Time Weather Data**: Fetches current weather information using a weather API.
- **Dynamic Backgrounds**: Changes the background according to the weather conditions (e.g., sunny, rainy, snowy).
- **Next.js**: Utilizes the powerful features of Next.js for server-side rendering and static site generation.
- **Tailwind CSS**: Styled with Tailwind CSS for rapid UI development and customization.
- **Next UI**: Uses Next UI components for a polished and responsive user interface.
### Getting Started
To run the project locally, follow these steps:
1. **Clone the repository**:
```bash
git clone https://github.com/yourusername/weather-web-app.git
```
2. **Navigate to the project directory**:
```bash
cd weather-web-app
```
3. **Install dependencies**:
```bash
npm install
```
4. **Set up environment variables**:
Create a `.env.local` file in the root directory and add your weather API key:
```plaintext
NEXT_PUBLIC_WEATHER_API_KEY=your_api_key
```
5. **Run the development server**:
```bash
npm run dev
```
6. **Open the app in your browser**:
Visit [http://localhost:3000](http://localhost:3000)
### Deployment
To deploy the app, you can use platforms like Vercel, Netlify, or any other hosting service that supports Next.js.
### Contributing
Feel free to contribute by submitting issues or pull requests. All contributions are welcome!
### License
This project is licensed under the MIT License.
---