Antreey — Queue & Booking OS

Sistem antrean & reservasi berbasis web untuk bisnis jasa modern (arena olahraga, salon, barbershop, klinik) dengan estetika premium glassmorphism dan pembaruan status real-time. Berkontribusi sebagai Frontend & UI/UX Developer — merancang ulang ilustrasi interaktif, halaman Queue TV bertema sinematik, dan menyempurnakan layout dashboard admin.

---

Ringkasan Proyek

• Kategori: Personal Project
• Peran: Full-Stack Engineer
• Tech Stack: React 19, React Router DOM 6, Tailwind CSS 3, Sonner, Firebase Firestore, Firebase Authentication, Firebase Storage

---

Latar Belakang / Ide Awal

Antreey lahir dari pengamatan pada operasional bisnis jasa harian — seperti arena olahraga, salon, barbershop, dan klinik — yang masih mengandalkan antrean fisik konvensional. Pelanggan kerap harus menunggu di lokasi tanpa kepastian waktu giliran yang jelas, sementara pemilik bisnis berisiko kehilangan potensi pendapatan akibat pemesanan yang dibatalkan sepihak (no-show) serta bentrokan jadwal yang dipicu oleh pengelolaan manual.

Antreey dikembangkan sebagai solusi operasional sekaligus produk eksplorasi teknis full-stack: merancang arsitektur database NoSQL berkecepatan tinggi dengan pola domain-driven repository, membangun alur sinkronisasi data real-time, serta menerapkan standar UI/UX modern seperti fluid typography untuk layar Smart TV dan estetika glassmorphism.

---

Kontribusi Full-Stack Saya

• Arsitektur Backend & Domain-Driven Repository Pattern: Merancang dan mengimplementasikan lapisan arsitektur Repository Pattern (BookingRepository, BusinessRepository, UserRepository, ServiceRepository) untuk memisahkan logika kueri Firebase dari komponen antarmuka React, memastikan kode modular dan mudah dipelihara.
• Sistem Sinkronisasi Data Real-Time: Membangun integrasi listener snapshot Firestore (onSnapshot) pada seluruh modul kritis (pemanggilan tiket, pembaruan jadwal, dan konfirmasi pembayaran) untuk menjamin pembaruan data secara instan tanpa perlu memuat ulang halaman (zero page-refresh).
• Logika Penjadwalan & Penguncian Slot Reservasi: Menerapkan alur pemindaian bentrokan jadwal pada backend/repository layer untuk mengecek irisan ketersediaan jam kerja staf dan kapasitas fasilitas operasional (lapangan/ruangan) sebelum data transaksi disimpan.
• Autentikasi Multi-Peran & Keamanan Akses: Mengonfigurasi Firebase Authentication dan menerapkan kontrol otorisasi berbasis peran (owner, admin, staff, customer) untuk mengamankan hak akses fitur, data transaksi merchant, dan visibilitas dashboard.
• Desain Halaman Queue TV : Membangun antarmuka siaran antrean publik bertema gelap yang dioptimalkan untuk layar besar ruang tunggu. Dilengkapi dengan fluid typography agar ukuran font menyesuaikan dimensi layar secara otomatis, efek visual shimmering & calling pulse saat nomor tiket dipanggil, serta widget statistik real-time yang menampilkan ringkasan antrean harian.
• Pengembangan Dashboard Merchant & Komponen UI Modular: Membangun reusable UI components berbasis estetika glassmorphism modern (kartu transparan, badges, modals, toast notifications, integrasi kalender CalendarCard, dan grafik mingguan WeeklyChart) menggunakan Tailwind CSS untuk menyajikan statistik operasional bisnis secara intuitif.
• Desain & Optimasi Ilustrasi SVG Interaktif: Merancang ulang ilustrasi vektorial dinamis pada bagian Hero, Workflow ("Bagaimana Antreey Bekerja"), dan Seamless Journey agar sepenuhnya responsif dengan animasi mikro (pulse & float) tanpa mengorbankan performa rendering.

---

Fitur Utama Produk

1. Smart Booking Flow
   Alur pemesanan interaktif yang memungkinkan pelanggan memilih jenis layanan, staf spesifik, serta fasilitas atau sumber daya (seperti lapangan atau ruangan) berdasarkan ketersediaan slot waktu secara real-time.

2. Live Queue Tracking
   Penerbitan tiket digital berkode dinamis (misalnya A-007) yang dilengkapi dengan estimasi waktu tunggu transparan dan pembaruan posisi antrean secara langsung melalui ponsel pelanggan.

3. Central Merchant Dashboard
   Panel kendali terpusat bagi pemilik bisnis untuk memantau indikator kinerja harian, grafik statistik reservasi mingguan, jadwal kerja staf, serta arus transaksi dalam satu tampilan terintegrasi.

4. Queue TV / Display Konsol Publik
   Layar siaran antrean publik yang dirancang khusus untuk Smart TV di ruang tunggu, menampilkan nomor antrean yang sedang dipanggil, daftar antrean berikutnya, serta ringkasan aktivitas antrean hari ini.

5. Payment Proof Verification Inbox
   Kotak masuk verifikasi pembayaran deposit yang memudahkan admin meninjau dan mengonfirmasi bukti transfer pelanggan secara cepat, guna mencegah pemesanan fiktif dan pemblokiran slot jadwal.

6. Staff & Resource Scheduling
   Sistem pengaturan kapasitas kerja staf dan alokasi aset operasional otomatis yang membatasi pemesanan berlebih (double-booking) pada fasilitas atau jam kerja yang sama.

---

Tech Stack & Arsitektur

Arsitektur aplikasi memanfaatkan Firebase Firestore sebagai basis data dokumen berkecepatan tinggi dengan sinkronisasi real-time snapshot, Firebase Authentication untuk manajemen akses pengguna multi-peran, serta Firebase Storage untuk penyimpanan berkas bukti pembayaran. Seluruh kode disusun mandiri dengan pendekatan full-stack, memisahkan logika pengolahan data dari komponen antarmuka visual.

---

Tantangan Teknis & Solusi

• Reliabilitas Data Real-Time pada Layar Konsol Publik:
  Memastikan layar Queue TV selalu sinkron dengan tindakan admin saat memanggil nomor antrean. Solusi diimplementasikan dengan memanfaatkan snapshot listener Firestore yang mendeteksi perubahan status tiket secara instan, memicu animasi calling pulse dan pembaruan visual dalam hitungan milidetik.
• Skalabilitas Teks Nomor Antrean di Smart TV:
  Menampilkan nomor antrean di berbagai resolusi layar TV memerlukan ukuran font yang elastis. Solusi diterapkan menggunakan teknik fluid typography berbasis CSS sehingga ukuran teks nomor antrean dapat membesar atau mengecil secara presisi mengikuti lebar viewport TV.
• Responsivitas Elemen Vektor pada Layar Seluler:
  Ilustrasi alur kerja yang kompleks rawan saling bertumpuk pada layar smartphone. Solusi dilakukan dengan merancang ulang struktur SVG menjadi linear timeline horizontal dengan proporsi whitespace yang terukur serta dukungan CSS media query adaptif.

---

Pembelajaran & Pencapaian

• Merancang dan membangun aplikasi berarsitektur real-time dari hulu ke hilir secara mandiri (end-to-end solo development).
• Menerapkan Domain-Driven Repository Pattern pada Firebase Firestore untuk memisahkan logika database dari komponen visual React.
• Menguasai teknik fluid typography dan layout adaptif untuk perangkat layar lebar non-konvensional seperti Smart TV di ruang tunggu.