📔 Webkelas: XII A1 Digital Archive

Arsip Digital & Hub Komunitas XII A1 SMAN 1 Rasau Jaya

Features • Tech Stack • Getting Started • Config • License

---

🌟 Overview

Webkelas adalah aplikasi web modern yang dirancang sebagai buku kenangan digital (scrapbook) dan pusat interaksi bagi alumni kelas XII A1 SMAN 1 Rasau Jaya. Platform ini berfungsi sebagai arsip persisten untuk kenangan kolektif, interaksi komunitas, dan dokumentasi visual dengan estetika yang personal dan interaktif.

🚀 Core Features

1. 🎨 Interactive Digital Scrapbook

Antarmuka terinspirasi dari buku tempel nyata, menggunakan coretan (doodles) melayang dan elemen SVG gambar tangan.

• Interactive Canvas: Coret-coret langsung di background yang akan memudar secara otomatis.
• Physical Ornaments: Ornamen seperti klip kertas, pin, dan washi tape acak memberikan kedalaman visual 3D.
• Highlighter Effects: Efek stabilo otomatis saat kursor diarahkan ke teks tertentu.

2. 📸 Dynamic Memory Gallery

Grid foto gaya polaroid dengan dekorasi doodle prosedural yang unik.

• Shake to Develop (Kocok Polaroid): Simulasi foto polaroid asli! Gambar awalnya kosong, gerakkan kursor atau jari Anda di atas foto untuk "memunculkan" gambarnya.

3. 💬 Community Communication System

Papan pesan persisten bagi siswa untuk berbagi catatan publik dan sapaan, mendukung anonimitas atau identitas opsional.

4. 🔐 Administrative Control Panel

Dashboard aman dengan proteksi password untuk manajemen konten (Upload foto, moderasi pesan, dll).

5. 🌗 Adaptive User Experience

Dukungan penuh untuk Dark/Light mode dengan persistensi state dan desain yang sepenuhnya responsif.

---

🛠 Technology Stack

Frontend

Backend & Database

---

📂 Project Structure

├── api/                # Backend server & API routes
├── src/                # React application source
│   ├── components/     # UI & Layout components
│   ├── lib/            # Utilities, API helpers, & Constants
│   └── assets/         # Images, Icons, & Global styles
└── public/             # Static assets

---

⚙️ Getting Started

Prerequisites

• Node.js (v18+)
• npm

Installation

1. Clone & Enter

   git clone https://github.com/kyiov/Webkelas.git
   cd Webkelas

2. Install Deps

   npm install

Development

npm run dev

Production Build

npm run build

---

🔐 Configuration

Buat file .env di root direktori (gunakan .env.example sebagai referensi):

• VITE_ADMIN_PASSWORD: Password aman untuk akses Dashboard Admin.
• MONGODB_URI: Connection string untuk database MongoDB Atlas.

---

📄 License

Project ini dilisensikan di bawah MIT License. Lihat file LICENSE untuk detail lebih lanjut.

---

📊 Analytics

---

Made with ❤️ by kyiov