Cuplikan Platform
Ringkasan
Tanjung Duren Pet Shop adalah retailer kebutuhan hewan peliharaan di Jakarta yang beroperasi sejak 1989 dengan tiga cabang fisik dan kehadiran di Tokopedia serta Shopee. EWWD membangun platform e-commerce omnichannel yang menyatukan:
- Toko online di shop.tjdurenpetshop.com (Next.js 16, siap PWA)
- REST API untuk seluruh operasi commerce (Laravel 13)
- Panel admin dan POS in-store (Filament 5)
Pelanggan membeli makanan, aksesoris, dan layanan hewan peliharaan secara online dengan pengiriman reguler, kurir instan, atau ambil di toko—sementara staf mengelola katalog, inventaris multi-outlet, pesanan, retur, dan penjualan walk-in dari satu backend.
Masalah Bisnis
Menjalankan tiga outlet plus channel marketplace tanpa platform terpadu menimbulkan hambatan operasional:
| Masalah | Dampak |
|---|---|
| Inventaris online dan toko terpisah | Overselling, pengecekan stok manual, dan keterlambatan fulfillment |
| Belum ada channel e-commerce milik sendiri | Ketergantungan marketplace tanpa kontrol brand penuh atau data pelanggan |
| POS dan update katalog manual | Entri data ganda di outlet dan channel |
| Opsi pengiriman online terbatas | Kehilangan penjualan dari pelanggan yang mengharapkan instan atau pickup |
| Penanganan pasca-jual tersebar | Retur, langganan, dan pelacakan pesanan ditangani ad hoc |
Solusi
Kami membangun sistem omnichannel tiga lapisan untuk operasi retail Indonesia dengan dukungan katalog bilingual (ID/EN).
Storefront online (Next.js):
- Homepage mobile-first dengan navigasi jenis hewan, flash sale, produk unggulan, bundle, dan blog
- Katalog produk dengan filter kategori, brand, jenis hewan, dan harga; halaman produk ISR dengan JSON-LD
- Pencarian Meilisearch dengan saran autocomplete
- Keranjang server-side, voucher, dan checkout terautentikasi
- Tiga mode pengiriman: reguler (RajaOngkir), instan (GoSend, Grab, Lalamove), dan ambil di toko
- Pembayaran Midtrans Snap dan Xendit dengan konfirmasi webhook dan alur retry
- Akun pelanggan: pesanan, alamat, wishlist, ulasan, profil hewan, langganan, retur, notifikasi
- Store locator tiga cabang, halaman bantuan, kontak WhatsApp, dan PWA yang dapat diinstal
Admin & POS (Filament):
- Dashboard dengan widget penjualan, pesanan terbaru, dan alert stok rendah
- CRUD katalog lengkap dengan matriks varian, gambar, brand, kategori, dan jenis hewan
- Inventaris multi-outlet dengan pergerakan stok, pelacakan batch/kadaluarsa, dan rekonsiliasi
- Manajemen pesanan dengan siklus status dan alur retur barang
- Terminal POS dengan scan barcode, sesi laci kas, keranjang ditahan, dan cetak struk
- Promosi, voucher, bundle, blog, log sinkronisasi marketplace, dan audit aktivitas
Backend & integrasi:
- REST API Laravel dengan token Bearer Sanctum dan akses berbasis peran (`customer`, `staff`, `admin`)
- PostgreSQL dengan field JSONB bilingual, antrian Redis via Horizon, dan Laravel Reverb untuk update pesanan real-time
- Job terjadwal untuk pembersihan keranjang, pesanan langganan, audit stok, dan pull katalog marketplace
- Handler webhook untuk Midtrans, Xendit, dan provider kurir instan
Kapabilitas Commerce yang Diimplementasikan
- Operasi omnichannel terpadu — Toko online, tiga outlet, dan POS berbagi satu model katalog dan inventaris.
- Fulfillment fleksibel — Pengiriman reguler, instan dengan kurir otomatis, dan ambil di toko dari cabang pilihan.
- Checkout andal — Dual payment gateway, TTL quote pengiriman, dan email transaksional di setiap tahap pesanan.
- Visibilitas operasional — Dashboard admin, alert stok rendah, audit trail pergerakan stok, dan log aktivitas.
- Fitur retensi pelanggan — Profil hewan dengan rekomendasi, langganan berulang, wishlist, dan alur retur 14 hari.
- Discovery siap SEO — Halaman produk ISR, sitemap dinamis, structured data, dan pencarian Meilisearch dengan filter.
Logika Implementasi Teknis
| Lapisan | Pilihan | Alasan |
|---|---|---|
| Storefront | Next.js 16 App Router dengan SSR/ISR | Halaman produk kritis SEO butuh server rendering; keranjang dan checkout tetap client-side |
| API | Laravel 13 dengan pola Actions/Services | Workflow commerce matang, webhook, dan admin Filament dalam satu codebase |
| Database | PostgreSQL 16 dengan JSONB | Field katalog bilingual dan inventaris relasional kompleks tanpa schema berlebihan |
| Pencarian | Meilisearch via Laravel Scout | Full-text search dengan filter untuk katalog produk hewan besar |
| Admin/POS | Filament 5 | CRUD cepat, gate peran, dan terminal POS embedded tanpa UI admin terpisah |
| Real-time | Laravel Reverb WebSocket | Update status pesanan saat checkout dan fulfillment tanpa polling |
| Pembayaran | Midtrans + Xendit | Cakupan GoPay, QRIS, virtual account, dan e-wallet umum di Indonesia |
| Pengiriman | RajaOngkir + kurir instan | Tarif reguler nasional plus same-day delivery dalam radius terkonfigurasi |
| State frontend | TanStack Query + Zustand | Cache server untuk katalog; store client untuk auth, keranjang, dan UI |
| PWA | plugin next-pwa | Pembeli mobile-first dapat instal toko tanpa biaya pengembangan app native |
Pertanyaan Umum
Channel apa saja yang terhubung?
Toko online aktif menghubungkan storefront milik brand dengan workflow inventory, POS, pembayaran, fulfillment, pelanggan, dan administrasi yang terdokumentasi.
Apakah peningkatan penjualan sudah terukur?
Belum ada data before/after penjualan yang disetujui untuk showcase ini.
Teknologi yang Digunakan
Storefront Next.js 16 (React 19, TypeScript, Tailwind CSS 4, shadcn/ui, TanStack Query, Zustand, Laravel Echo), API Laravel 13 (Sanctum, Horizon, Reverb, Scout/Meilisearch), admin dan POS Filament 5, PostgreSQL 16, Redis, Midtrans Snap, Xendit, RajaOngkir, GoSend, Grab, Lalamove, dan tooling sinkronisasi katalog marketplace terjadwal.