Studi kasus
DemoToko online UMKM
Toko online full-stack untuk UMKM fiktif: katalog, keranjang, checkout, akun pelanggan, dan dasbor admin.
- Peran
- Perencanaan, pengembangan, pengujian, dan deploy
- Nama demo
- Lumbung Kabut
- Stack
- Next.js 16
- TypeScript
- Tailwind CSS 4
- Drizzle ORM
- SQLite
- Better Auth
- Zod
- Caddy
- Kode sumber
- Lihat di GitHub: Toko online UMKM (membuka situs lain)tenmaryut/toko-online-umkm
Bisnis pada demo ini fiktif. Data di dalamnya bukan data asli.
Masalah
Banyak UMKM bergantung penuh pada marketplace. Toko sendiri memberi kendali atas tampilan, data pelanggan, dan hubungan dengan pembeli, tetapi harus tetap mudah dipakai: produk gampang dicari, ongkir jelas sejak awal, dan pesanan mudah dikelola.
Solusi
Toko dibangun dengan Next.js 16 (App Router), Drizzle ORM, dan database SQLite. Pembeli bisa mencari dan memfilter produk, menyimpan keranjang, lalu checkout dengan ongkir tetap per zona dan pembayaran simulasi.
Pemilik toko mendapat dasbor untuk melihat grafik penjualan, mengelola produk dan stok, serta mengubah status pesanan dari dibayar, dikemas, dikirim, sampai selesai.
Fitur utama
- Katalog dengan kategori, pencarian, filter harga dan ketersediaan, urutan, dan harga dalam format Rupiah
- Keranjang yang tetap tersimpan setelah halaman dimuat ulang
- Checkout dengan ongkir tetap per zona (38 provinsi, 4 zona) dan pembayaran simulasi; stok berkurang saat pesanan dibuat
- Akun pelanggan: daftar, masuk, riwayat pesanan dengan linimasa status, dan pembatalan
- Dasbor admin: grafik penjualan 14 hari, produk dengan unggah gambar, kategori, status pesanan, dan pelanggan
- Akun demo pelanggan dan admin, dengan data yang direset otomatis tiap malam
- Animasi belanja: konfirmasi tambah ke keranjang, keranjang mini, skeleton katalog, toast, linimasa pesanan, dan angka dasbor yang menghitung naik
Cuplikan animasi
Tantangan teknis
Stok yang tetap konsisten
Pesanan dibuat dan stok dikurangi dalam satu transaksi database yang dijaga aturan CHECK stok ≥ 0, sehingga stok tidak bisa minus ketika dua pembeli checkout bersamaan. Harga dan stok di keranjang selalu dihitung ulang dari database.
Keamanan dijaga di server
Setiap input divalidasi dengan Zod, akses admin diperiksa di layout dan di setiap Server Action, login, pendaftaran, checkout, serta aksi admin dibatasi lajunya, dan setiap halaman memakai CSP dengan nonce per permintaan.
Unggahan gambar yang aman
Isi file diperiksa dengan sharp, bukan sekadar ekstensinya, ukurannya dibatasi 2 MB, lalu dikonversi ke WebP tanpa metadata EXIF dan disimpan di luar folder build.
Layanan yang dikunci rapat
Build standalone Next.js berjalan sebagai layanan systemd non-root (DynamicUser) dengan ProtectSystem=strict, PrivateTmp, dan NoNewPrivileges; systemd-analyze security menilainya 1,2 (OK). Admin demo hanya melihat data pelanggan dalam bentuk tersamar.
Hasil uji
Lighthouse (mobile)
Beranda
Halaman yang diukur: /
Halaman produk
Halaman yang diukur: /produk/kopi-arabika-lereng-pagi
Diukur pada 3 Oktober 2026 dengan Lighthouse 13.5.0 dalam mode mobile, langsung terhadap situs live. Skor bisa sedikit berubah antar-pengukuran.
Test otomatis
- Test unit: keranjang, ongkir, format harga, validasi, pesanan dan stok Vitest51
- Test end-to-end: belanja sampai checkout, admin mengubah status pesanan, keamanan, dan animasi Playwright16
Total 67 test, semuanya lulus menurut laporan pengujian proyek pada 3 Oktober 2026.