Kembali ke Studi Kasus

QuickHub — Platform Counter Walk-in

Tech Lead Fullstack
Team: 3
2025-04 - 2025-11
QuickHub — Platform Counter Walk-in

Technology Stack

Nuxt.jsVueGolangMongoDBRedisTailwind CSS

Ringkasan

QuickHub adalah platform counter pengiriman walk-in yang lahir dari hackathon internal perusahaan berlapis — dan proyek yang mengantarkan Juara 1 di fase implementasi final. Yang membuat kemenangan ini bermakna bukan sekadar produknya. Ini tentang mengerjakannya sebagai Tech Lead Fullstack: memiliki PRD, mengarahkan desain, mengkoordinasi tim, sekaligus mengirimkan kode production-grade — tanpa mengorbankan satu peran pun.

Ini juga momen pertama di mana AI-assisted development menjadi workflow yang sistematis dan disengaja — GPT untuk ideasi, Claude Code untuk implementasi intensif.

Perjalanan Hackathon

Konteks & Kebutuhan

Hackathon ini berlangsung dalam beberapa fase terstruktur — bukan sprint satu akhir pekan, melainkan program multi-bulan yang dirancang untuk menyaring ide, mempertajam pemikiran, dan memberi penghargaan pada eksekusi:

  1. Fase Ideasi — Submission terbuka untuk seluruh perusahaan. Lebih dari 100 ide masuk.
  2. Fase Seleksi — Ide dievaluasi berdasarkan dampak bisnis dan kelayakan. Ide terbaik maju.
  3. Fase Bootcamp — Tim terpilih menyempurnakan konsep, validasi dengan stakeholder, dan membangun spesifikasi awal.
  4. Fase Implementasi — 12 tim masuk. 3 mencapai final. 1 menang.

Ruang masalah yang ditangani: counter layanan walk-in yang lambat, rawan kesalahan, dan tidak transparan. Staf counter mengelola banyak alat sekaligus. Pelanggan menunggu tanpa visibilitas. Manajer tidak punya gambaran operasional real-time. Mandatnya adalah memperbaiki pengalaman counter end-to-end — bukan hanya satu bagiannya saja.

Arsitektur

Arsitektur Sistem QuickHub

Stack dipilih untuk kecepatan pengembangan, kesederhanaan operasional, dan kecocokan antara alat dan kebutuhan:

Tech Stack:

KomponenTeknologiAlasan
FrontendNuxt.js, VueSSR-ready, component-driven, cepat diiterasi
BackendGolangPerforma tinggi, concurrency-safe, binary ringan
Queue StateRedisKecepatan in-memory untuk baca/tulis antrian
PersistensiMongoDBModel dokumen fleksibel untuk data pengiriman
StylingTailwind CSSUI konsisten di counter, kiosk, dan display
Real-timePolling API 3 detikSederhana, reliable, tanpa overhead WebSocket

Mengapa polling bukan WebSocket? Keputusan yang disengaja. Untuk display antrian yang refresh setiap 3 detik, koneksi WebSocket full-duplex menambah kompleksitas deployment (sticky sessions, manajemen koneksi) tanpa manfaat UX yang signifikan. Redis menyimpan state antrian di memori; polling cepat, stateless, dan mudah discale. Alat yang tepat untuk constraintnya.

Memimpin End-to-End

Peran Tech Lead Fullstack dalam konteks hackathon punya makna spesifik: lead tidak hanya mendelegasikan — mereka tetap berada di dalam kode sambil juga memiliki setiap keputusan upstream dan downstream. Itulah beban ganda yang diemban proyek ini.

Seperti apa "end-to-end" dalam praktiknya:

  • Proses analitis: Menerjemahkan ruang masalah menjadi PRD terstruktur — mendefinisikan persona pengguna (staf counter, pelanggan, manajer), memetakan pain point, dan menetapkan kriteria keberhasilan yang terukur sebelum satu baris kode pun ditulis
  • Arahan desain: Berkolaborasi pada alur UX dan struktur UI, memastikan counter app dioptimalkan untuk kecepatan, kiosk bersifat self-explanatory, dan display antrian terbaca dari jarak jauh
  • Koordinasi tim: Menjalankan workstream paralel di frontend, backend, dan infrastruktur — mengurutkan dependensi, menyelesaikan blocker, menjaga delivery tetap pada jalurnya
  • Implementasi langsung: Berkontribusi langsung ke codebase — bukan dalam kapasitas supervisory, tetapi mengirikan fitur bersama tim

Mengelola waktu di antara tanggung jawab-tanggung jawab ini — tanpa output coding menurun dan tanpa tim kehilangan arah — adalah tantangan nyata yang diuji proyek ini.

Pengembangan Berbasis AI

QuickHub adalah proyek pertama di mana AI menjadi bagian terstruktur dari workflow, bukan bantuan sesekali:

  • GPT untuk ideasi: Selama fase brainstorming dan bootcamp, GPT digunakan untuk stress-test ide — generasi skenario cepat, eksplorasi edge case, dan framing analisis kompetitif
  • Claude Code untuk implementasi: Selama fase implementasi, Claude Code digunakan secara intensif — scaffolding handler Golang, menghasilkan struktur komponen Vue, menulis pola query MongoDB, dan secara signifikan mempercepat kecepatan iterasi

Ini bukan "AI membantu saya menulis boilerplate." Ini adalah aplikasi sistematis pertama dari AI pair programming di seluruh siklus pengembangan. Keuntungan kecepatan nyata dan terukur — dan secara langsung mempengaruhi bagaimana tim ini bersaing dengan finalis lainnya.

Fitur Utama

1. Manajemen Antrian Digital

Menggantikan proses manual yang terfragmentasi dengan platform digital terpadu — pelanggan melihat posisi antrian secara live, staf bekerja dari data yang sudah ter-load, dan manajer mendapat visibilitas throughput real-time untuk pertama kalinya.

2. Dashboard Staf Counter

Dibuat khusus untuk lingkungan throughput tinggi:

  • Data pelanggan pre-loaded dari registrasi antrian — tidak ada re-entry
  • Quick actions untuk jenis transaksi yang sering digunakan
  • Keyboard shortcuts untuk power user yang memproses transaksi beruntun
  • Indikator status menampilkan kedalaman antrian dan beban counter saat ini

3. Sistem Display Antrian

Display format besar untuk area tunggu:

  • Nomor yang sedang dilayani diperbarui setiap 3 detik
  • Estimasi waktu tunggu berdasarkan kedalaman antrian saat ini
  • Pengumuman layanan dan status counter
  • Dirancang untuk keterbacaan pada jarak 5–10 meter

4. Kiosk Pelanggan

Titik masuk self-service:

  • Registrasi antrian digital dengan opsional pre-fill pengiriman
  • Posisi antrian live setelah registrasi
  • Scan drop-off paket
  • Cetak resi dan tiket

Hasil & Metrik

Dampak Operasional

Hasil kompetisi:

  • Meraih Juara 1 di fase implementasi final (3 tim)
  • Lolos semua fase: 100+ ide → seleksi → bootcamp → 12 tim → final → Juara 1
  • Diakui untuk kualitas teknis dan kejelasan dampak bisnis

Peningkatan operasional yang dihasilkan:

  • Penanganan transaksi turun dari 10+ menit (manual penuh) ke di bawah 5 menit
  • Visibilitas antrian pelanggan diperkenalkan untuk pertama kalinya — sebelumnya nol
  • Entry data manual menggunakan form kertas dieliminasi sepenuhnya
  • Manajer counter mendapatkan dashboard operasional live, menggantikan estimasi throughput anekdotal

Tim & Kepemimpinan

Memimpin tim 3 engineer sepanjang arc hackathon penuh — dari konsep pertama hingga demo final:

  • Menyusun proses analitis: mendefinisikan masalah, menulis PRD, menetapkan kriteria keberhasilan
  • Mengarahkan keputusan UX dan desain dalam kolaborasi dengan tim
  • Mengurutkan workstream implementasi untuk menghindari bottleneck dependensi
  • Mempresentasikan demo live ke panel juri dan menjawab pertanyaan teknis di bawah tekanan
  • Mempertahankan kontribusi coding personal sepanjang proses — kepemimpinan tidak mengurangi ekspektasi delivery individual

Tantangannya bukan satu masalah teknis tertentu. Ini tentang melakukan semua ini secara paralel, di bawah tekanan kompetisi, sementara tim finalis lain melakukan hal yang sama.

Yang Akan Saya Tingkatkan

Push notification menggantikan polling — polling 3 detik bekerja dengan baik, tetapi untuk kiosk menghadap pelanggan, push native atau SSE akan memungkinkan notifikasi proaktif "giliran Anda hampir tiba" tanpa pelanggan perlu terus memperhatikan display.

Lapisan analytics — tampilan admin menampilkan state antrian real-time, tetapi analytics throughput historis (jam sibuk, rata-rata waktu handle per counter, tren efisiensi staf) akan memberi manajer data yang dapat ditindaklanjuti untuk keputusan penjadwalan dan pelatihan.

Admin berbasis peran — satu peran admin terpadu mencakup kasus penggunaan saat ini, tetapi rollout produksi akan mendapat manfaat dari izin yang terbatas: staf counter, supervisor lantai, dan manajer operasional masing-masing membutuhkan tampilan berbeda dari data yang sama.


Proyek ini adalah tolok ukur bagaimana saya bekerja di bawah tekanan — memimpin tanpa mundur dari kode, dan mengirimkan bersama tim bukan sekadar mengarahkannya. Ini menetapkan standar bagaimana saya mendekati setiap delivery kompleks sejak saat itu.