Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rfkyalf/cloudly
Cloudly is a weather app built with Next.js, TypeScript, and Tailwind CSS, offering real-time weather updates and forecasts.
https://github.com/rfkyalf/cloudly
forecast nextjs react-query tailwindcss typescript weather zustand
Last synced: about 2 months ago
JSON representation
Cloudly is a weather app built with Next.js, TypeScript, and Tailwind CSS, offering real-time weather updates and forecasts.
- Host: GitHub
- URL: https://github.com/rfkyalf/cloudly
- Owner: rfkyalf
- Created: 2024-11-12T09:38:29.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-26T09:45:43.000Z (about 2 months ago)
- Last Synced: 2024-11-26T10:59:16.197Z (about 2 months ago)
- Topics: forecast, nextjs, react-query, tailwindcss, typescript, weather, zustand
- Language: TypeScript
- Homepage: https://cloud-ly.vercel.app
- Size: 34.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cloudly - The Forecast in Your Pocket 🌤️
## 🌟 Introduction
With **Cloudly**, predicting the weather has never been easier. Stay up-to-date with real-time weather information, from current conditions to hourly forecasts and long-term outlooks. Cloudly is your reliable source for accurate weather data, helping you plan your day with confidence.
## 🧰 Tech Stack
- **Next.js**: A React framework for building server-side rendered applications.
- **TypeScript**: JavaScript with static typing for better developer experience and code quality.
- **Tailwind CSS**: A utility-first CSS framework for creating responsive and modern designs.
- **React Query**: A library for fetching, caching, and syncing server data in React applications.
- **Axios**: A promise-based HTTP client for making requests to external APIs.
- **Zustand**: A small, fast state management solution for React.
## ✨ Key Features
- **🔍 Search**: Easily search for weather details by entering the name of your city or location.
- **🌡️ Current Temperature**: Get real-time temperature readings for your current location.
- **☁️ Weather Information**: View detailed weather information, including conditions (sunny, rainy, cloudy, etc.), humidity, and wind speed.
- **⏱️ 3-Hour Forecast**: View weather forecasts for every 3 hours throughout the day.
- **🌤️ 5-Day Forecast**: See the weather forecast for the next 5 days, helping you plan ahead.
- **💨 Additional Weather Info**: Get extra details like air pressure, UV index, and more.
- **📱 Responsive Design**: Enjoy a seamless experience on any device, from desktops to smartphones, with a fully responsive design.
## ⚙️ Prerequisites
- **Node.js**
- **npm** or **yarn** or **pnpm** or **bun** for package management
## 🛠️ Installation
Follow the steps below to set up the project locally.
1. Clone this repository:
```bash
https://github.com/rfkyalf/cloudly.git
```
2. Navigate to the project directory:
```bash
cd cloudly
```
3. Install the dependencies:
```bash
npm install
```
## 🚀 Usage
1. Start the development server:
```bash
npm run dev
```
2. Access the application in your browser at http://localhost:3000.