Kedai Species (Scout E-Commerce)
Platform e-commerce komprehensif untuk peralatan pramuka dengan aplikasi mobile Flutter, backend Express.js & Supabase, dan panel admin Next.js.
Ikhtisar Proyek
Platform perdagangan digital khusus perlengkapan pramuka untuk memodernisasi pemesanan seragam dan atribut yang sebelumnya terfragmentasi di berbagai kanal pesan chat.
Dikembangkan sebagai proyek andalan, Kedai Species memberikan pengalaman berbelanja perlengkapan pramuka yang mulus. Aplikasi ini mencakup aplikasi mobile Flutter untuk pengguna utama, backend tangguh menggunakan Express.js dan Supabase, serta dashboard admin web modern yang dibangun dengan Next.js dan shadcn/ui untuk manajemen operasional.
Masalah yang Dihadapi
Pemesanan perlengkapan pramuka di gugus depan dan sekolah sebelumnya dilakukan secara manual melalui pesan WhatsApp. Hal ini menimbulkan selisih stok fisik, lambatnya konfirmasi ukuran seragam, dan hilangnya riwayat transaksi.
Pembeli tidak dapat melihat ketersediaan varian ukuran dan badge secara langsung tanpa menunggu balasan chat admin.
Pengelola toko harus mencatat pesanan satu per satu ke buku besar fisik, memicu kesalahan rekap saat pergantian shift.
Ketiadaan nomor resi dan pelacakan digital membuat pembeli berulang kali menanyakan status pengiriman barang.
Pengguna Sasaran
Pembina & Anggota Pramuka (Pembeli)
Akses mudah untuk memesan seragam dan atribut resmi lengkap kapan saja langsung dari ponsel pintar.
Menunggu balasan chat admin yang lambat dan barang sering habis saat baru dibayar.
Aplikasi mobile Flutter dengan katalog terstruktur, checkout mandiri, dan status pesanan langsung.
Pengelola Toko (Admin Gudang & Kasir)
Dashboard terpusat untuk memantau stok, memvalidasi pesanan masuk, dan memperbarui status pengiriman.
Stok fisik di etalase toko sering bentrok dengan barang yang sudah terlanjur dipesan lewat chat.
Panel admin Next.js + shadcn/ui dengan mutasi stok otomatis dan log transaksi rapi.
Solusi & Prinsip Desain
Membangun ekosistem terpadu dengan memisahkan antarmuka klien mobile (Flutter) dan panel kontrol web admin (Next.js), yang dihubungkan oleh REST API Express.js dan database real-time Supabase.
Pemisahan Domain Klien & Admin
Aplikasi mobile dioptimasi untuk kecepatan browsing dan checkout pembeli; dashboard web dioptimasi untuk efisiensi input data operasional di desktop.
Sinkronisasi Inventaris Real-Time
Setiap barang yang dibayar langsung mengunci kuantitas gudang agar tidak terjadi overselling barang langka.
Validasi Transaksi Sisi Server
Total harga, ongkos kirim, dan ketersediaan dihitung ulang di backend Express.js untuk mencegah manipulasi data client-side.
Sistem menggunakan Express.js terintegrasi Supabase sebagai penyedia REST API. Aplikasi mobile Flutter bertindak sebagai klien utama (frontend), sementara aplikasi Next.js (dengan shadcn/ui) menangani pengelolaan data internal sebagai web admin.
Fitur Utama & Dampak
Katalog & Keranjang Belanja Mandiri
Penyaringan kategori seragam, pemilihan varian atribut bertahap, dan kalkulasi total belanja otomatis.
Panel Manajemen Inventaris & Order
Tabel data interaktif dengan pencarian cepat, filter status transaksi, dan pembaruan stok produk.
Pelacakan Status Pengiriman Pesanan
Pemantauan tahapan pesanan mulai dari diverifikasi, dikemas, hingga dikirim secara transparan.
Alur Pengembangan
1. Analisis Kebutuhan Sistem
Mengidentifikasi alur pemesanan perlengkapan pramuka dan titik hambatan pencatatan manual via chat.
2. Perancangan Skema Database
Merancang skema relasi di Supabase PostgreSQL untuk produk master, varian ukuran, keranjang, dan order.
3. Pengembangan REST API & Otorisasi
Membangun endpoint Express.js dengan otorisasi JWT untuk memisahkan hak akses pelanggan dan admin.
4. Pembuatan UI Mobile Flutter
Mengembangkan antarmuka mobile Flutter untuk browsing katalog, pemilihan varian, dan checkout pesanan.
5. Pembangunan Dashboard Web Admin
Mengimplementasikan antarmuka Next.js dengan shadcn/ui untuk mempermudah manajemen data operasional.
Tantangan & Pemecahan Masalah
Integrasi Komunikasi Klien dan Backend API
Menghubungkan aplikasi Flutter dengan REST API Express.js sekaligus mengelola session autentikasi pengguna secara konsisten.
Menggunakan token otorisasi yang divalidasi pada middleware Express.js untuk membatasi akses endpoint transaksional.
Aplikasi mobile dan dashboard admin dapat berkomunikasi secara aman dengan backend terpusat.
Struktur Varian Atribut dan Keranjang Belanja
Peralatan dan seragam pramuka memiliki varian ukuran dan tingkatan yang membutuhkan struktur data teratur agar tidak salah catat.
Merancang relasi database terstruktur antara master produk dan item varian, serta mengelola alur pemilihan bertahap di aplikasi mobile.
Pembeli dapat memilih varian seragam dengan jelas dan total pesanan dihitung secara akurat.
Dampak (Sebelum vs Sesudah)
- Pesanan masuk secara tidak terstruktur di chat personal kasir.
- Risiko selisih stok saat pesanan diproses bersamaan secara manual.
- Pencatatan manual di buku kasir sulit direkap dan diaudit.
- Seluruh transaksi tersentralisasi dalam database digital yang aman.
- Ketersediaan stok produk terpantau secara konsisten saat pesanan dibuat.
- Rekap data penjualan dapat dilihat langsung melalui dashboard web admin.
Keputusan Teknologi
Membangun aplikasi mobile multi-platform yang responsif dan konsisten pada smartphone Android dengan satu basis kode Dart.
Kombinasi fleksibilitas Express.js untuk logika routing bisnis dengan Supabase untuk manajemen database PostgreSQL dan autentikasi.
Menyediakan komponen tabel dan form berkualitas tinggi yang siap pakai, mempercepat pembuatan UI admin modern.
Galeri & Bukti Visual
Tampilan Utama & Arsitektur Sistem
Pratinjau antarmuka aplikasi mobile dan dashboard terintegrasi Kedai Species.
Pelajaran & Refleksi
Kombinasi arsitektur terpisah (mobile user app & web admin app) memudahkan manajemen proyek yang kompleks.
Supabase sangat efisien ketika digabungkan dengan Express.js untuk kebutuhan autentikasi dan database real-time.
Penggunaan shadcn/ui mempermudah membangun UI admin yang konsisten tanpa mengorbankan fleksibilitas kode.