🌦️ Atmosfera - Modern Weather Dashboard

A modern weather forecasting platform with beautiful visualizations and real-time updates, built with Next.js 15 and cutting-edge web technologies.

✨ Key Features

• 🌓 Adaptive Theme System

  • Automatic dark/light mode based on system preference
  • Smooth theme transitions
  • Customizable color palettes

• 📊 Data Visualization

  • Interactive temperature charts
  • Hourly weather timeline
  • 7-day forecast overview
  • Atmospheric pressure graphs

• 🎨 Modern UI Components

  • Glassmorphism effects
  • Responsive grid layouts
  • Animated transitions
  • Custom scrollbars

• ⚡ Performance Optimized

  • Turbopack-powered development
  • Lazy-loaded components
  • Efficient state management
  • Client-side rendering for dynamic content

🚀 Getting Started

Prerequisites

• Node.js v18.18.0 or higher
• npm v9.8.1 or higher
• Git

Installation

1. Clone the repository

git clone https://github.com/ervareza/Atmosfera.git
cd atmosfera

2. Install dependencies

npm install

Development

npm run dev

Buka http://localhost:3000

Production Build

npm run build
npm start

🛠 Tech Stack

Core Technologies

• Framework: Next.js 15 + Turbopack
• Styling: Tailwind CSS v4 + PostCSS
• Animations: Framer Motion
• Charting: Chart.js 4 + react-chartjs-2
• State Management: Zustand
• Icons: Lucide React

Key Dependencies

• dayjs – Date manipulation
• @tailwindcss/nesting – CSS nesting support
• postcss-preset-env – Modern CSS features
• geist – Font system

📂 Project Structure

src/
├─ components/
│  ├─ Weather/       # Cuaca components
│  ├─ Layout/        # Layout components
│  ├─ UI/            # UI components
├─ pages/            # Next.js pages
├─ store/            # Zustand stores

📄 License

Distributed under the MIT License. See LICENSE for more information.

🌐 Live Demo

View Live Demo

---

🛠 Built with ❤️ by [Ervareza Naurian (ShiroX Dev)]
📧 Contact: rianskp644@gmail.com 🔗 Portfolio: https://ervareza.github.io/