🌤️ Weather Finder - Modern React Weather App

with all proper location. highly precise A stunning, modern weather application built with React, Tailwind CSS, and Framer Motion that provides real-time weather information for any city worldwide with beautiful animations and glassmorphism design.

✨ Features

• 🔍 Intuitive city search with real-time results
• 🌡️ Live temperature display in Celsius
• 🌅 Sunrise and sunset times
• 💧 Humidity levels
• 💨 Wind speed information
• 🌊 Atmospheric pressure
• 🌡️ "Feels like" temperature
• 🎨 Modern liquid glass UI design
• ✨ Smooth Framer Motion animations
• 🌓 Dynamic theme switching (light welcome screen, dark weather display)
• 📱 Fully responsive design
• 🎭 Dynamic weather icons based on conditions

🎨 Design Highlights

• Welcome Screen: Clean white background with animated floating cloud
• Weather Display: Dark theme with cyan and purple gradient blurs
• Glassmorphism Effects: Backdrop blur and semi-transparent cards
• Bento Grid Layout: Modern card-based information display
• Smooth Animations: Floating icons, fade transitions, and hover effects
• Gradient Button: Beautiful purple-to-pink-to-red gradient
• Dynamic Icons: Weather-specific icons using Lucide React

🚀 Live Demo

Check out the live demo: Weather Finder

🛠️ Technologies Used

• React 18 - Frontend framework
• Tailwind CSS 3 - Utility-first CSS framework
• Framer Motion - Animation library
• Lucide React - Beautiful icon library
• Axios - HTTP client for API requests
• OpenWeatherMap API - Weather data provider

📦 Installation

1. Clone the repository:

git clone https://github.com/Parth-077/react-weather-app.git
cd react-weather-app

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 to view it in your browser.

🌐 Deployment

To deploy to GitHub Pages:

npm run deploy

📸 Screenshots

Welcome Screen

Beautiful light-themed welcome screen with animated cloud icon and gradient search button.

Weather Display

Dark-themed weather display with glassmorphism cards showing detailed weather information.

🔑 API Key

This project uses the OpenWeatherMap API. The API key is included for demo purposes. For production use, please:

1. Get your own API key from OpenWeatherMap
2. Replace the API key in src/App.js

📝 Available Scripts

• npm start - Runs the app in development mode
• npm run build - Builds the app for production
• npm run deploy - Deploys the app to GitHub Pages

🎯 Key Components

• Dynamic Theme: Switches between light and dark themes based on app state
• Weather Icons: Conditional rendering of weather-specific icons
• Animated Elements: Floating animations for icons and smooth transitions
• Responsive Layout: Works seamlessly on all device sizes

🤝 Contributing

Contributions, issues, and feature requests are welcome!

👨‍💻 Author

Parth Chalke

• GitHub: @Parth-077

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Weather data provided by OpenWeatherMap
• Icons from Lucide React
• Design inspired by modern glassmorphism and neumorphism trends
• Built with ❤️ using React, Tailwind CSS, and Framer Motion

---

⭐ Star this repo if you find it helpful!