HCC · Dokumen Internal Tim

Pembagian role: siapa mengerjakan apa

Batas tanggung jawab UI/UX, Frontend, dan Backend selama pembangunan App HCC — termasuk wilayah abu-abu yang biasanya baru jadi masalah di minggu keempat.

Draf v0.1 18 Agustus 2026 Belum disetujui
Asumsi scope

Aplikasi komunitas HCC: profil anggota, event & open recruitment, absensi kegiatan, dan pengumuman. Kalau scope-nya beda, ubah bagian ini dulu — sisa dokumen menyesuaikan sendiri.

01 · Susunan

Tiga role, tiga output

Total sepuluh orang. Tidak ada yang bekerja sendirian di satu role — minimal berdua supaya ada yang me-review. Merangkap dua role boleh; memegang UI/UX, FE, dan BE untuk fitur yang sama tidak, karena tidak ada yang mengoreksi.

RoleKuotaFokusOutput yang dinilai
UI/UX3Alur, wireframe, desain final, design systemFile Figma siap-bangun + spec
Frontend4Semua yang dilihat dan disentuh userHalaman jalan, terhubung API asli
Backend3Data, auth, API, deployEndpoint stabil + dokumentasi

02 · Anggota

Sepuluh orang yang membangun

Kolom role sengaja dikosongkan — diisi bersama saat kickoff, bukan ditunjuk sepihak. Klik nama pengguna untuk membuka profil GitHub-nya.

Rama @jnnsyah role belum diisi
Xavier @christianxavierVibecode role belum diisi
Akmal @muhammadfadilakmalhafizzyf-lang role belum diisi
Hidayah @hitoforce role belum diisi
Jepri @Emzyjeppp role belum diisi
Indah @Indah135 role belum diisi
Sofia @sofiyahauliah24-lab role belum diisi
Diyan @diyantoro role belum diisi
Melia @MeliaFransiskaSung role belum diisi
Piping @finkyyy role belum diisi

Sebelum fase 0 dimulai

  • Semua sudah diundang ke organisasi GitHub HCC — dan sudah menerima undangannya
  • Akses Figma dibagikan: UI/UX dapat edit, sisanya view dan comment
  • 2FA GitHub aktif — wajib kalau repo menyimpan env produksi
  • Setiap orang menulis role-nya sendiri di daftar ini

03 · Rincian per role

Batas kerja masing-masing

Kolom kanan sama pentingnya dengan kolom kiri. Sebagian besar gesekan tim datang dari orang yang mengerjakan hal di luar kolomnya dengan niat baik.

R-01

UI/UX

Memutuskan bentuk pengalaman sebelum satu baris kode ditulis. Mengacu pada panduan warna & tipografi HCC yang sudah ada.

Dikerjakan

  • User flow tiap fitur — daftar, verifikasi, masuk dashboard
  • Wireframe low-fi untuk memvalidasi alur sebelum masuk visual
  • Desain hi-fi mobile-first, lalu turunan desktop
  • Design system: warna, tipografi, spacing, komponen
  • State kosong, loading, error, dan "data cuma satu baris"
  • Copywriting UI: label tombol, pesan error, teks halaman kosong

Bukan urusannya

  • Menentukan struktur database
  • Menjanjikan animasi tanpa mengecek kelayakannya ke FE
  • Mengubah desain yang sudah dibangun tanpa lewat backlog

Deliverable

  • Figma dengan halaman terpisah: Flow, Wireframe, Design, Components
  • Nama layer dan komponen rapi — FE membaca ini, bukan menebak
  • Spec spacing dan ukuran font, atau token yang sudah tersambung

Selesai kalau

  • Semua state tiap layar sudah ada
  • Sudah dicek di lebar layar 360px
  • FE sudah membaca dan tidak ada pertanyaan tersisa
R-02

Frontend

Menerjemahkan desain jadi antarmuka yang jalan di HP anggota — termasuk saat sinyalnya jelek dan datanya kosong.

Dikerjakan

  • Setup project, routing, struktur folder
  • Membangun komponen dari design system, bukan style per halaman
  • Integrasi API: fetching, loading, error handling, retry
  • Validasi form sisi klien untuk feedback cepat
  • Auth sisi klien: simpan token, guard route, redirect
  • Responsif dan aksesibilitas dasar: fokus keyboard, alt text, kontras
  • Optimasi: lazy load, ukuran gambar, hindari fetch dalam loop

Bukan urusannya

  • Mengarang desain sendiri saat spec kurang — tanya UI/UX
  • Menyimpan aturan bisnis di klien: harga, kuota, hak akses
  • Memutuskan nama field API sendirian

Deliverable

  • Halaman jalan dengan data asli, bukan dummy hardcode
  • Komponen yang terpakai ulang minimal di dua tempat

Selesai kalau

  • Jalan di Chrome dan Safari mobile
  • Console bersih dari error
  • Loading dan error state terlihat, bukan layar putih
  • Sudah dicoba dengan throttle 3G
R-03

Backend

Memegang kebenaran data. Semua yang tidak boleh dipercayakan ke perangkat user berhenti di sini.

Dikerjakan

  • Skema database dan relasinya
  • Endpoint + dokumentasi: Postman collection atau file .http
  • Autentikasi dan otorisasi — siapa boleh melihat dan mengubah apa
  • Validasi input di server; semua input dianggap tidak dipercaya
  • Upload file dengan batas ukuran dan tipe
  • Notifikasi email/WA untuk pengumuman
  • Deploy, backup database, pengelolaan env dan secret
  • Logging error yang terbaca saat produksi bermasalah

Bukan urusannya

  • Menentukan bentuk tampilan
  • Mengirim isi tabel apa adanya tanpa memikirkan bentuk untuk FE
  • Mengubah kontrak API diam-diam

Deliverable

  • Endpoint terdokumentasi: method, path, body, response sukses dan error
  • Seed data supaya FE bisa jalan tanpa menunggu data asli
  • Environment staging yang terpisah dari produksi

Selesai kalau

  • Diuji dengan input salah dan tetap membalas error rapi, bukan 500
  • Tidak ada data sensitif bocor di response
  • FE sudah memakainya tanpa perlu menambal

04 · Wilayah abu-abu

Putuskan sekarang, bukan saat sudah ribut

Delapan perkara yang di hampir semua proyek jadi rebutan atau justru tidak dikerjakan siapa pun. Satu nama pemilik keputusan per baris.

PerkaraPemilik keputusanCatatan
Teks pesan error yang dibaca userUI/UXBE mengirim kode error, FE menerjemahkannya ke teks dari UI/UX
Format tanggal dan angkaUI/UXBE mengirim ISO 8601, FE yang memformat
Aturan validasi: panjang minimal, format NIMBackendFE menyalin aturan yang sama untuk feedback instan
Jumlah item per halamanBackendDesain menyesuaikan kemampuan query, bukan sebaliknya
Nama field di response APIBackendDisepakati bersama FE sebelum ditulis
Modal atau halaman baruUI/UXFE mengangkat kendala teknis sebelum diputuskan
Ukuran dan kompresi gambar uploadBackendFE menampilkan batasnya ke user sebelum upload gagal
Urutan default sebuah daftarUI/UXBE menyediakan parameter sort

05 · Serah-terima

Urutan kerja antar role

Urutannya nyata — tiap langkah membuka pekerjaan orang berikutnya, jadi keterlambatan di satu titik terasa di seluruh rantai.

1
UI/UX → BackendFlow disetujui, BE mulai merancang skema database.
2
UI/UX → FrontendDesain dan komponen siap, FE mulai membangun antarmuka.
3
Backend → FrontendKontrak API dikirim — dokumennya saja, endpoint boleh belum jadi.
4
Backend → FrontendEndpoint dan seed data siap, FE mengganti mock dengan API asli.
5
Frontend → UI/UXHalaman jalan di staging, UI/UX melakukan review visual.
Aturan yang menghapus antrean

Backend mengirim kontrak API lebih dulu, sebelum endpoint-nya jadi. Frontend membangun di atas mock yang mengikuti kontrak itu. Tanpa ini, FE menganggur menunggu BE dan seluruh jadwal mundur.

06 · Jadwal

Sembilan minggu, lima fase

Perkiraan untuk tim 4–5 orang paruh waktu. Angka ini titik awal negosiasi, bukan janji.

FaseDurasiUI/UXFrontendBackend
0 — Sepakat1 mggFlow + wireframeSetup project, pilih stackSkema DB, kontrak API
1 — Fondasi2 mggDesign system + 3 layar intiKomponen dasar, UI authAuth, user, deploy staging
2 — Fitur inti3 mggSisa layarEvent, pendaftaran, profilEndpoint fitur inti
3 — Lengkapi2 mggReview dan revisiIntegrasi penuh, responsifNotifikasi, upload, laporan
4 — Rapikan1 mggQA visualPerbaikan bug, performaBackup, monitoring, rilis

07 · Kesepakatan

Aturan main bersama

Siap dikerjakan

  • Desainnya sudah ada
  • Kontrak API-nya sudah ada
  • Kriteria selesainya tertulis

Dianggap selesai

  • Jalan di staging
  • Sudah dicoba orang lain, bukan hanya yang mengerjakan
  • Tidak memecahkan fitur yang sudah ada

Ritual

  • Standup 15 menit, tiga kali seminggu
  • Demo ke pengurus tiap akhir fase
  • Keputusan teknis ditulis di repo, bukan hanya di grup WA

Tidak dinegosiasikan

  • Tidak ada push langsung ke main
  • Secret tidak pernah masuk repo
  • Perubahan kontrak API diberitahukan ke FE di hari yang sama