Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/axestein/weatherly
Most minimalist and modern looking weather app you will ever see.
https://github.com/axestein/weatherly
chartjs figma javascript reactjs tailwindcss weather-api
Last synced: 3 months ago
JSON representation
Most minimalist and modern looking weather app you will ever see.
- Host: GitHub
- URL: https://github.com/axestein/weatherly
- Owner: Axestein
- Created: 2024-09-08T08:24:31.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-17T09:59:43.000Z (3 months ago)
- Last Synced: 2024-09-26T17:42:08.783Z (3 months ago)
- Topics: chartjs, figma, javascript, reactjs, tailwindcss, weather-api
- Language: JavaScript
- Homepage: https://weatherly-rust.vercel.app/
- Size: 205 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
1. **Clone the repository**:
```bash
git clone https://github.com/your-username/weatherly.git
cd weatherly
```
2. **Install dependencies**:
```bash
npm install
```
3. **Get your OpenWeatherMap API key**:
- Visit [OpenWeatherMap](https://openweathermap.org/) and sign up to get a free API key.
- Add your API key to the environment file or directly in the code where required.
4. **Run the development server**:
```bash
npm start
```
5. 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
```
## 📬 Contact
If you have any questions, suggestions, or feedback, please reach out:
- **Email**: [email protected]
- **GitHub**: [Axestein](https://github.com/Axestein)
---