Weatherly

Stay updated with the latest weather information using Weatherly, your minimalist weather dashboard application. Weatherly provides real-time weather data with a sleek, modern look that makes checking the weather a delightful experience.

📖 Project Description

Weatherly offers a clean and minimalist approach to displaying weather data. It features:

Current Weather: View temperature, humidity, wind speed, and other key weather details.
Sunrise and Sunset: Check the exact times for sunrise and sunset in your location.
Minimalist and Modern UI: Designed with a focus on aesthetics and usability, making weather data easy to read and understand.

🛠️ Project Tech Stack

Weatherly is developed using the following technologies:

React.js: For building the user interface and managing component state.
Tailwind CSS: For styling the application with a modern, responsive design.
Figma: Used for creating and refining the UI design.
OpenWeatherMap API: Fetches real-time weather data from an external source.

🚀 Installation

Follow these steps to run Weatherly on your local machine:

Clone the repository:

git clone https://github.com/your-username/weatherly.git
cd weatherly

Install dependencies:
```
npm install
```
Get your OpenWeatherMap API key:
- Visit OpenWeatherMap and sign up to get a free API key.
- Add your API key to the environment file or directly in the code where required.
Run the development server:
```
npm start
```
Open your browser and go to http://localhost:3000 to see Weatherly in action.

📁 Project Structure

Here's an overview of the project structure:

weatherly/
├── public/
│   ├── index.html
├── src/
│   ├── components/
│   │   └── magicui/
│   │       └── Globe.jsx         # A component for rendering the globe UI element
│   ├── GlobeDemo.jsx             # Demonstrates the Globe component usage
│   ├── WeatherCard.jsx           # Component for displaying weather information
│   ├── App.jsx                   # Main app component
│   ├── index.css                 # Global styles
│   ├── main.jsx                  # Entry point of the application
│   └── App.css                   # Styles specific to the App component
├── package.json
└── README.md