Update Resmi Web hccutdi.web.id — Status: Fase 0 (Perencanaan)

Pengembangan & Renewal Web HCC UTDI

Pusat dokumentasi arsitektur, PRD, workflow pengurus, dan standar teknis dalam membangun portal resmi Himpunan Mahasiswa UTDI Computer Club (HCC).

Target Rilis: Q3 2026 Domain: hccutdi.web.id Tim: 10 Kolaborator Standard: Single Light Theme (#FFFFFF)

01 · Product Requirement Document (PRD)

Visi & Spesifikasi Produk

Web hccutdi.web.id berfungsi sebagai pusat informasi publik sekaligus portal internal anggota untuk kegiatan komunitas computer club di UTDI.

Tujuan Utama

Portal Informasi & Keanggotaan

Menyajikan profil organisasi, jadwal Open Recruitment, pendaftaran acara, absensi digital presensi acara, serta arsip kegiatan anggota HCC UTDI secara terpusat.

Target Pengguna

Mahasiswa UTDI & Publik

Pengunjung umum (calon anggota & mitra) yang ingin mengenal HCC, serta anggota aktif yang mengakses dashboard internal presensi dan modul kegiatan.

Fitur Inti MVP

Modul Fitur Utama

Landing Page interaktif, Auth & Member Profile, System Presensi QR/OTP, Event & Class Catalog, serta Pengumuman Resmi Komunitas.

02 · Workflow & Alur Kerja

Alur Kolaborasi 5 Fase

Setiap divisi (UI/UX, Frontend, Backend) bekerja dalam urutan serah-terima tanpa saling mengunci (decoupled workflow).

0

Fase 0 — Sepakat & Rencana (1 Minggu)

UI/UX menyusun user flow & wireframe. Backend merancang skema DB & mempublikasikan dokumen Kontrak API awal. Frontend mempersiapkan repositori & stack dasar.

1

Fase 1 — Fondasi & Design System (2 Minggu)

UI/UX menyelesaikan Design System Figma (mengacu `Value.tokens.json`). Frontend membangun komponen UI dasar. Backend merilis API Auth & User Management di environment Staging.

2

Fase 2 — Pengembangan Fitur Inti (3 Minggu)

Frontend mengintegrasikan endpoint fitur event, presensi, dan profil anggota menggunakan mock data yang telah disetujui, lalu menyambungkan ke API Staging Backend.

3

Fase 3 — Refinement & Integrasi Penuh (2 Minggu)

Backend mengaktifkan notifikasi email/WA dan modul upload. Frontend merapikan aspek responsif layar 360px+ dan aspek aksesibilitas. UI/UX melakukan visual QA.

4

Fase 4 — Testing & Rilis Produksi (1 Minggu)

Uji coba throttling 3G, audit keamanan environment secret, backup database, dan deployment final ke domain hccutdi.web.id.

03 · Setup & Standar Repositori GitHub

Aturan Branching & Keamanan

Repositori terpusat pada Organisasi GitHub HCC dengan perlindungan branch utama dan kewajiban verifikasi.

Cabang (Branch) Fungsi & Aturan Proteksi & Akses
main Kode produksi stabil yang tayang di hccutdi.web.id. Protected — Dilarang push langsung. Minimal 1 PR Review.
staging Cabang integrasi untuk pengujian sebelum rilis resmi. Staging Auto-deploy — Digunakan FE/BE untuk testing interaktif.
feat/* / fix/* Cabang pengerjaan fitur individual (misal: feat/presensi-qr). Dibuat oleh anggota tim sesuai tugas PIC masing-masing.
Lihat Pembagian Role Tim (10 Anggota) → Buka Dokumen STYLE.md

04 · Arsitektur Sistem

Diagram Arsitektur Decoupled

Pemisahan peran secara tegas antara antarmuka pengguna (Frontend), layanan data (Backend API Gateway), dan tempat penyimpanan data (Database & Storage).

flowchart TD
    classDef client fill:#FFE866,stroke:#001F3F,stroke-width:2px,color:#001F3F,font-weight:bold;
    classDef fe fill:#F4F6FA,stroke:#001F3F,stroke-width:2px,color:#001F3F;
    classDef be fill:#001F3F,stroke:#001F3F,stroke-width:2px,color:#FFFFFF;
    classDef data fill:#FFFFFF,stroke:#DCE3ED,stroke-width:2px,color:#3D5876;

    A["📱 Perangkat Mahasiswa / User Browser"]:::client
    B["💻 Frontend Web App (Next.js / Vite SPA)"]:::fe
    C["⚡ Backend API Gateway (Node.js Service)"]:::be
    D[("🗄️ PostgreSQL Database\nData Anggota & Event")]:::data
    E[("📦 Object Storage R2/S3\nFoto & Bukti Presensi")]:::data
    F["📧 Notification Service\nEmail & WA Gateway"]:::data

    A -->|"HTTPS / JSON"| B
    B -->|"JWT Bearer Auth / REST API"| C
    C -->|"SQL Queries"| D
    C -->|"S3 Upload SDK"| E
    C -->|"Webhook / API Trigger"| F
Client Layer

Frontend Web (SPA / SSR)

Dibuat dengan Next.js / Vite. Bertanggung jawab atas render antarmuka responsif, state management, serta pengiriman JWT Token pada setiap permintaan API.

Server Layer

Backend REST API Service

Layanan Node.js mandiri yang menangani autentikasi JWT, otorisasi role, enkripsi password, serta validasi input di sisi server secara ketat.

Data & Storage

Database & Media Storage

PostgreSQL sebagai single source of truth data terstruktur (relasi mahasiswa & presensi), serta Object Storage (Cloudflare R2/S3) untuk file media.

05 · Tokens & Identitas Visual

Standar Token Terintegrasi

Setiap warna dan nilai spacing diambil dari file Value.tokens.json untuk menjamin konsistensi antara Figma dan Kode.

Token Name Hex / Value Peran Utama Pratinjau Visual
color.navy #001F3F Teks utama, header, logo solid, section gelap
color.paper #FFFFFF Latar belakang utama seluruh halaman web
color.sun #FFE866 Aksen tombol utama, badge, highlight kata penting
color.mist #F4F6FA Latar belakang kartu, header tabel, panel pendukung
color.line #DCE3ED Border kartu, pemisah kolom, pembatas baris