Dokumen ini menjelaskan apa yang sudah tersedia di aplikasi toko online (website + panel admin), cocok sebagai bahan presentasi atau lampiran penawaran.
Ringkas: Apa yang Anda dapatkan
Website toko online siap pakai dengan:
- Katalog produk (termasuk varian warna/ukuran & stok)
- Keranjang, wishlist, checkout + ongkir otomatis (RajaOngkir)
- Pembayaran online via Xendit (VA, QRIS, e-wallet, kartu) + fallback konfirmasi manual admin
- Akun pelanggan (profil, alamat, pesanan, notifikasi, invoice)
- Panel admin lengkap (produk, pesanan, konten, pelanggan/CRM, pengaturan)
- Chat WhatsApp, newsletter, blog, FAQ, halaman info
- Email otomatis (ke pelanggan & pemberitahuan ke admin)
- Optimasi SEO & bisa dipasang di layar HP (PWA online)
- Keamanan dasar production-ready
Cocok untuk: brand / UMKM yang ingin punya toko online sendiri (bukan hanya bermodal marketplace pihak ketiga).
1. Toko untuk Pelanggan (Storefront)
Beranda & katalog
| Fitur |
Manfaat untuk bisnis |
| Banner & video promo |
Menyorot kampanye / produk unggulan |
| Kategori & brand |
Navigasi belanja lebih rapi |
| Pencarian & filter |
Pelanggan cepat menemukan produk |
| Produk rekomendasi & trending |
Mendorong penemuan produk |
| Detail produk + galeri |
Presentasi produk profesional |
| Varian (warna/ukuran) |
Stok & harga per varian terkendali |
| Ulasan + foto |
Social proof; tingkatkan kepercayaan |
| Bagikan ke WhatsApp / sosial |
Bantu viral & referral |
Belanja
| Fitur |
Manfaat untuk bisnis |
| Keranjang + reservasi stok sementara |
Mengurangi bentrok stok antar pembeli |
| Wishlist |
Pelanggan menyimpan minat beli |
| Checkout + alamat |
Proses order terstruktur |
| Pembayaran Xendit |
Bayar online (VA, QRIS, e-wallet, kartu); status otomatis setelah lunas |
| Ongkir otomatis (RajaOngkir) |
Estimasi biaya pengiriman akurat |
| Voucher / kode diskon |
Promo terukur |
| Invoice |
Bukti order untuk pelanggan & pembukuan ringan |
Akun pelanggan
| Fitur |
Manfaat untuk bisnis |
| Daftar & login |
Basis data pelanggan milik Anda |
| Profil & ubah password |
Layanan mandiri |
| Buku alamat |
Checkout lebih cepat |
| Riwayat pesanan + invoice |
Transparansi status order |
| Notifikasi in-app |
Update status / promo tanpa spam berlebihan |
| Lupa password (email) |
Pemulihan akun mandiri |
Konten & saluran komunikasi
| Fitur |
Manfaat untuk bisnis |
| Blog |
Konten SEO & edukasi produk |
| FAQ, About, Contact |
Kurangi pertanyaan berulang |
| Halaman CMS dinamis |
Kebijakan, promo khusus, dll. |
| Floating WhatsApp (+ form) |
Lead langsung ke chat (di HP tampil full layar) |
| Newsletter (footer) |
Kumpulkan email untuk info promo |
| PWA (pasang di HP) |
Akses cepat seperti “aplikasi ringan” (butuh internet) |
Email otomatis
| Ke pelanggan |
Ke admin toko |
| Selamat datang (daftar) |
Ada pendaftaran baru |
| Reset password |
— |
| Konfirmasi pesanan baru |
Ada pesanan baru |
| Update status / resi / refund |
— |
| Konfirmasi langganan newsletter |
Ada subscriber / inquiry baru |
| — |
Pesan dari form kontak / WhatsApp float |
Catatan: email terkirim jika SMTP sudah dikonfigurasi di server (mis. Hostinger).
2. Panel Admin
Operasional harian
| Menu |
Fungsi |
| Dashboard |
Ringkasan penjualan, pesanan, stok menipis |
| Pesanan |
Ubah status, isi resi, lihat invoice |
| Refund |
Setujui / tolak pengembalian |
| Voucher |
Buat & kelola kode diskon |
| Ulasan |
Moderasi review pelanggan |
| Pesan kontak |
Lihat inquiry dari website / WA float |
Katalog
| Menu |
Fungsi |
| Produk |
Tambah/ubah produk, foto, varian, stok |
| Kategori |
Susun kategori toko |
| Brand |
Kelola merek |
Konten website
| Menu |
Fungsi |
| Banner |
Gambar carousel beranda |
| Video promo |
Video + tautan produk |
| Pages |
Halaman statis (kebijakan, dll.) |
| FAQ |
Kelola tanya-jawab |
| Blog |
Tulis & publikasikan artikel |
Pelanggan & marketing
| Menu |
Fungsi |
| Pelanggan |
Data pelanggan + detail riwayat |
| Laporan CRM |
Segmentasi & export CSV |
| Kampanye |
Promo ke segmen (voucher + notifikasi di akun) |
| Newsletter |
Lihat / export daftar subscriber |
Pengaturan toko
| Menu |
Fungsi |
| Akun |
Kelola admin & pengguna |
| Website |
Nama toko, kontak, WhatsApp, sosial media, warna tema |
| Upload aman |
File gambar/video tersimpan di luar folder deploy (aman saat update) |
3. Tech stack
Aplikasi dibangun modern, terpisah storefront & API, cocok di-hosting Node.js + MySQL.
Storefront (toko + admin UI)
| Layer |
Teknologi |
| Framework |
Next.js 16 (App Router) |
| UI |
React 19, TypeScript, Bootstrap 5 + Bootstrap Icons |
| Editor / konten |
Quill, sanitasi HTML, Markdown (marked) |
| Auth di edge |
jose (proteksi rute /admin, /account) |
| Lain |
SweetAlert2, html2pdf, Sharp (ikon PWA), Zod |
Backend (API)
| Layer |
Teknologi |
| Runtime |
Node.js + Express 5 + TypeScript |
| ORM / database |
Prisma 6 + MySQL |
| Auth |
JWT + cookie httpOnly, bcrypt; Google OAuth (opsional) |
| Security |
Helmet, CORS, rate-limit, cookie-parser |
| Upload |
Multer (file di luar folder deploy) |
| Email |
Nodemailer (SMTP) |
| Validasi |
Zod |
Integrasi & deploy
| Area |
Detail |
| Ongkir |
RajaOngkir |
| Pembayaran |
Xendit Invoice |
| Email |
SMTP (Hostinger / Gmail / dll.) |
| Hosting |
Node.js (mis. Hostinger): Next next start + API Express; upload di folder sibling marketplace-uploads |
4. SEO, keamanan & teknis (bahasa sederhana)
| Area |
Yang sudah ada |
| SEO |
Judul/deskripsi per halaman, data terstruktur Google, sitemap, robots |
| Keamanan |
Login cookie aman, proteksi halaman akun/admin, sanitasi konten, header keamanan, batasi spam request |
| Performa |
Cocok hosting Node.js + MySQL (mis. Hostinger); beban resource wajar untuk toko online lengkap |
| Mobile |
Tampilan responsif; chat WA full page di HP; bisa “Install” PWA |
Detail teknis internal: lihat Setup · Admin Panel · Stok.
5. Yang termasuk vs belum termasuk
✅ Sudah termasuk dalam sistem ini
- Toko online + panel admin seperti di atas
- Manajemen stok & keranjang
- Ongkir RajaOngkir (perlu API key klien)
- Pembayaran Xendit Invoice (perlu akun Xendit + API key klien)
- Email transactional (perlu akun SMTP klien)
- Deploy ke Hostinger / VPS Node.js
- Dokumentasi & alur demo
❌ Belum termasuk / opsional (bisa ditambah terpisah)
| Item |
Keterangan |
| Gateway lain (Midtrans, dll.) |
Saat ini terintegrasi Xendit; Midtrans bisa add-on |
| Aplikasi native iOS / Android |
Website responsif + PWA; bukan App Store/Play Store |
| Multi-cabang / multi-vendor |
Satu toko, satu pengelolaan |
| Email blast massal tipe Mailchimp |
Kampanye memakai notifikasi akun + voucher |
| Login Google di form |
Fitur sudah disiapkan; sementara disembunyikan di UI (bisa diaktifkan) |
| Desain brand custom besar |
Tema warna sudah ada; redesign UI full custom = add-on |
| Maintenance & update bulanan |
Biasanya paket terpisah setelah serah terima |
6. Alur demo singkat (untuk meeting klien)
- Pelanggan: beranda → pilih produk/varian → keranjang → checkout → bayar Xendit → lihat pesanan & notifikasi
- Admin: input produk → proses pesanan + resi → cek pelanggan / kampanye → ubah tema & WhatsApp
- Mobile: buka floating WhatsApp (full page) · coba Install PWA (butuh HTTPS)
7. Catatan untuk penawaran
- Sistem ini adalah website toko online custom, bukan sewa bulanan SaaS pihak ketiga — data & merek ada di sisi klien.
- Biaya domain, hosting, API RajaOngkir, akun Xendit, dan SMTP biasanya ditanggung klien (atau dibantu setup).
- Desain ulang besar / maintenance / gateway tambahan disepakati sebagai add-on di kontrak terpisah.
Dokumen ini mencerminkan kondisi fitur terkini aplikasi Marketplace. Update bila ada penambahan modul baru.