Skip to content

Repository files navigation

🌦️ WeatherSphere

A modern and responsive weather application built with React.js, Redux, Tailwind CSS, and DaisyUI. Weather-Now provides real-time weather information by fetching data from a weather API and displaying accurate weather details with a clean user interface.

🚀 Live Demo

🔗 https://graceful-puffpuff-dc40d7.netlify.app/


📌 Features

  • 🌍 Search weather by city name
  • 🌡️ Real-time temperature updates
  • ☁️ Current weather conditions
  • 💧 Humidity information
  • 🌬️ Wind speed details
  • 📍 Location-based weather data
  • 🔄 Global state management using Redux
  • 🎨 Modern UI with Tailwind CSS and DaisyUI
  • 📱 Fully responsive design for all devices
  • ⚡ Fast and optimized performance using Vite

🛠️ Tech Stack

Frontend

  • ⚛️ React.js
  • 🔄 React Redux
  • 🟨 JavaScript (ES6+)
  • ⚡ Vite

Styling

  • 🎨 Tailwind CSS
  • 🌼 DaisyUI

API & Data Handling

  • 🌐 Weather API
  • 📡 Axios for API requests

Deployment

  • 🚀 Netlify

📂 Project Structure

Weather-Now/
│
├── public/
├── src/
│   ├── components/
│   ├── redux/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── .env
├── package.json
├── vite.config.js
└── README.md

⚙️ Installation & Setup

1. Clone the repository

git clone https://github.com/your-username/Weather-Now.git

2. Navigate to project folder

cd Weather-Now

3. Install dependencies

npm install

4. Add API Key

Create a .env file in the root directory:

5. Start development server

npm run dev

The application will run on:

http://localhost:5173

📸 Screenshots

(Add your application screenshots here)


🔑 API Integration

Weather-Now uses a weather API to fetch live weather information including:

  • Temperature
  • Weather condition
  • Humidity
  • Wind speed
  • Location details

🎯 Learning Outcomes

Through this project, I learned:

  • Building scalable React applications
  • Managing application state using Redux
  • API integration with Axios
  • Creating responsive layouts using Tailwind CSS
  • Using DaisyUI components
  • Environment variable handling
  • Deploying React applications on Netlify

🚀 Future Improvements

  • 🌤️ 7-day weather forecast
  • 🌙 Dark/light theme support
  • 📍 Current location weather detection
  • ⭐ Save favorite locations
  • 📊 Weather charts and analytics

👨‍💻 Author

Kavi Kumar Singh

GitHub: https://github.com/kavisingh300


⭐ If you like this project, consider giving it a star!

Releases

Packages

Contributors

Languages