SKENA

Toko lokal modern dengan pengalaman belanja yang cepat dan mulus.

SKENA adalah platform e-commerce brand lokal dengan tampilan minimalis, elegan, dan sangat interaktif untuk pelanggan serta tim admin. Produk ini dirancang untuk menghadirkan pengalaman belanja tanpa reload halaman, sekaligus memberi kontrol operasional yang kuat lewat dashboard admin modern berbasis vanilla PHP, MySQL, dan integrasi API JSON internal.

Business Goals

  • Meningkatkan conversion rate mobile-first ke 2,5% dalam 3 bulan setelah launch.
  • Mencapai repeat purchase rate 20% dalam 6 bulan melalui pengalaman belanja yang lebih cepat dan personal.
  • Menurunkan cart abandonment sebesar 15% dalam 90 hari dengan add-to-cart tanpa reload dan checkout yang lebih ringkas.
  • Meningkatkan average session duration sebesar 25% dalam 60 hari berkat navigasi smooth scroll dan animasi yang responsif.
  • Mencapai 99,5% uptime aplikasi produksi pada 30 hari pertama setelah go-live.

User Goals

  • Pengguna dapat menemukan produk, memfilter, dan melihat detail tanpa refresh halaman.
  • Pengguna dapat menambahkan item ke cart dan mengubah kuantitas secara instan.
  • Pengguna dapat checkout dengan alur singkat, jelas, dan aman.
  • Admin dapat mengelola produk, stok, pesanan, dan promo dari satu dashboard.
  • Tim operasional dapat memantau aktivitas transaksi dan status order secara real-time.

Non-Goals

  • Tidak membangun mobile app native pada fase awal.
  • Tidak mendukung marketplace multi-vendor pada versi pertama.
  • Tidak memasukkan fitur live streaming commerce atau chat marketplace eksternal pada MVP.
  • Tidak mengganti full CMS untuk blog konten editorial kompleks pada tahap awal.

Nadia, 28, Pembeli Urban - Nadia sering belanja dari smartphone sambil berpindah antar aktivitas. Ia ingin pengalaman yang cepat, modern, dan tidak ribet saat memilih produk fashion atau lifestyle lokal.

Nadia, 28, Pembeli Urban

  • Sebagai pembeli mobile, saya ingin memfilter produk tanpa reload halaman, supaya saya bisa membandingkan item lebih cepat.
  • Sebagai pembeli, saya ingin melihat perubahan cart secara instan, supaya saya yakin barang yang dipilih sudah tersimpan.
  • Sebagai pembeli, saya ingin checkout yang ringkas, supaya saya bisa menyelesaikan pembelian dalam waktu kurang dari 3 menit.

Raka, 34, Admin Operasional - Raka bertanggung jawab terhadap katalog, stok, pesanan, dan promo. Ia membutuhkan dashboard yang cepat, terstruktur, dan mudah dipakai setiap hari.

Raka, 34, Admin Operasional

  • Sebagai admin, saya ingin mengubah status pesanan dari dashboard, supaya proses fulfilment lebih terkontrol.
  • Sebagai admin, saya ingin menambah atau mengedit produk dengan validasi yang jelas, supaya data katalog tetap konsisten.
  • Sebagai admin, saya ingin melihat ringkasan penjualan harian, supaya saya bisa mengambil keputusan lebih cepat.

Sinta, 39, Owner Brand - Sinta memantau performa bisnis dan kualitas pengalaman pelanggan. Ia membutuhkan gambaran yang jelas tentang penjualan, produk laku, dan area yang perlu dioptimalkan.

Sinta, 39, Owner Brand

  • Sebagai owner, saya ingin melihat produk terlaris dan stok menipis, supaya saya bisa mengatur restock tepat waktu.
  • Sebagai owner, saya ingin memahami funnel pembelian, supaya saya bisa meningkatkan conversion rate.
  • Sebagai owner, saya ingin dashboard yang ringkas namun kaya insight, supaya saya tidak bergantung pada laporan manual.

Katalog Produk dan Discovery · High priority

  • Sistem harus memungkinkan pengguna menjelajahi katalog produk secara cepat dengan filter dinamis dan pencarian yang responsif tanpa reload halaman.
  • Mendukung pencarian berdasarkan nama produk, kategori, harga, dan atribut seperti warna atau ukuran.
  • Filter produk harus diproses via endpoint JSON internal dan diperbarui menggunakan Vanilla JavaScript Fetch API.
  • Menyediakan pagination atau infinite loading yang aman terhadap beban data besar.
  • Menangani state kosong, produk habis, dan hasil pencarian nol dengan pesan yang jelas.
  • Menyimpan preferensi filter sementara di browser agar pengguna dapat melanjutkan sesi dengan konteks yang sama.

Cart dan Checkout · High priority

  • Pengguna harus dapat menambah, mengubah, dan menghapus item cart secara instan, lalu menyelesaikan checkout dengan alur yang singkat dan aman.
  • Add to cart tidak boleh memicu full page reload.
  • Kuantitas item harus divalidasi terhadap stok aktual di server.
  • Checkout wajib menghitung subtotal, ongkir, diskon, dan total secara server-side.
  • Sistem harus menyediakan notifikasi sukses dan error yang konsisten melalui response JSON.
  • Order final harus tersimpan atomik agar tidak terjadi duplikasi transaksi.

Admin Dashboard · High priority

  • Admin dashboard harus menyediakan kontrol operasional untuk produk, stok, pesanan, pengguna, dan promo dalam layout modern dan efisien.
  • Sidebar tetap terlihat dengan grouping menu yang jelas untuk katalog, order, pelanggan, dan laporan.
  • Tabel data harus mendukung pencarian, filter status, dan aksi cepat.
  • Form create/edit produk harus mendukung upload gambar, slug otomatis, dan validasi field.
  • Dashboard menampilkan metrik utama seperti omzet, order baru, dan stok kritis.
  • Akses admin harus dibatasi melalui autentikasi dan otorisasi berbasis role.

Autentikasi dan Akun · Medium priority

  • Sistem harus mendukung registrasi, login, logout, dan manajemen profil dasar dengan keamanan yang memadai.
  • Mendukung login pelanggan dan akun admin terpisah berdasarkan role.
  • Password disimpan menggunakan password_hash dan diverifikasi dengan password_verify.
  • Session harus memiliki timeout dan proteksi terhadap session hijacking dasar.
  • Pengguna dapat melihat riwayat order dan status pengiriman dari akun mereka.
  • Mendukung reset password berbasis token jika diaktifkan pada fase berikutnya.

Konten dan Branding · Medium priority

  • Antarmuka harus konsisten dengan identitas brand SKENA yang minimalis, clean slate, dan elegan, dengan animasi yang halus tetapi tidak berlebihan.
  • Menggunakan palet putih, abu-abu muda, border tipis, dan accent color elektrik yang terkontrol.
  • Transisi UI harus menggunakan GSAP dengan durasi yang cepat dan easing yang lembut.
  • Smooth scroll menggunakan Lenis hanya pada area yang sesuai dan tidak mengganggu aksesibilitas.
  • Komponen visual seperti card, badge, dan button harus seragam di seluruh halaman.
  • Mode admin dashboard boleh memakai glassmorphism ringan dan bento layout untuk memudahkan scanning.

Onboarding dan Discovery Cepat

  • Pengguna membuka homepage dengan hero singkat, CTA jelas, dan produk unggulan yang langsung terlihat.
  • Pengguna melakukan scroll halus atau navigasi kategori menggunakan Lenis tanpa kehilangan konteks.
  • Pengguna memfilter atau mencari produk, dan hasil diperbarui instan lewat fetch API.
  • Pengguna membuka detail produk dengan animasi transisi yang ringan dan informasi stok yang jelas.
  • Pengguna menambahkan item ke cart dan melihat update mini-cart tanpa refresh.
  • Target time-to-value: pengguna mencapai product detail atau cart dalam 30 detik pertama.

1. Jelajahi Katalog

  • Pengguna memulai dari landing page atau halaman katalog yang menampilkan produk secara terstruktur.
  • Grid responsif harus memprioritaskan visual produk dan harga.
  • Filter yang aktif harus terlihat jelas.
  • Jika hasil kosong, tampilkan saran pencarian atau kategori lain.

2. Lihat Detail Produk

  • Halaman detail menampilkan gambar, deskripsi, ukuran, stok, dan variasi secara ringkas.
  • Gambar memakai lazy loading dan placeholder agar halaman terasa cepat.
  • Jika stok habis, tombol beli harus berubah menjadi state nonaktif dengan alasan yang jelas.
  • Produk serupa ditampilkan untuk membantu eksplorasi.

3. Tambah ke Cart

  • Pengguna memasukkan item ke cart tanpa reload, dengan feedback visual instan.
  • Response server harus memvalidasi stok dan harga terbaru.
  • Cart badge di header harus diperbarui segera.
  • Jika gagal, tampilkan pesan error yang spesifik, bukan pesan generik.

4. Checkout Aman

  • Pengguna mengisi alamat, memilih kurir atau metode pengiriman, lalu mengonfirmasi pesanan.
  • Form wajib melakukan validasi sisi client dan server.
  • Total akhir harus dihitung ulang di server saat submit.
  • Jika pembayaran di tahap awal masih manual, tampilkan instruksi yang jelas setelah order dibuat.

5. Pelacakan Pesanan

  • Pengguna melihat status order dari akun mereka dan menerima pembaruan status yang konsisten.
  • Status order harus memiliki state yang jelas seperti pending, paid, packed, shipped, completed, cancelled.
  • Riwayat order menampilkan nomor order, tanggal, total, dan status terbaru.
  • Perubahan status harus tersimpan dengan audit trail dasar.

Fitur Lanjutan dan Edge Cases

  • Saved wishlist untuk item favorit tanpa mengganggu checkout.
  • Filter kombinasi multi-atribut dengan state URL-friendly agar mudah dibagikan.
  • Rekomendasi produk terkait berdasarkan kategori dan histori lihat produk.
  • Optimasi untuk koneksi lambat dengan skeleton loader dan fallback image.
  • Mode admin untuk bulk update stok dan status order.
  • Pencegahan duplikasi add-to-cart saat user mengklik berulang kali.

Prinsip UI, Aksesibilitas, dan Performa

  • Light theme dominan dengan putih bersih, abu-abu lembut, dan border tipis untuk kesan premium.
  • Accent color seperti Electric Blue atau Neon Lime hanya dipakai untuk CTA, state aktif, dan highlight penting.
  • Animasi GSAP harus singkat, purposeful, dan tidak menghambat interaksi.
  • Lenis harus tetap menjaga aksesibilitas keyboard, skip link, dan reduced-motion fallback.
  • Dashboard admin memakai sidebar unik, card modular, dan bento layout agar data mudah dipindai.
  • Semua komponen harus mobile responsive dan memiliki kontras warna yang memenuhi standar aksesibilitas dasar.

Nadia awalnya sering meninggalkan keranjang karena toko online yang ia pakai lambat, penuh reload, dan sulit dipakai di ponsel. Saat membuka SKENA, ia langsung melihat produk unggulan, memfilter ukuran dan kategori tanpa pindah halaman, lalu menambahkan item ke cart dalam satu interaksi singkat.

Ketika ia masuk ke checkout, form yang ringkas dan validasi yang jelas membuatnya selesai membeli dalam waktu kurang dari tiga menit. Ia mendapat pengalaman yang terasa premium dan mulus, sementara brand mendapatkan peluang conversion yang lebih tinggi dan penurunan abandonment.

Di sisi bisnis, SKENA memberi tim admin kontrol yang jauh lebih rapi atas produk, stok, dan pesanan. Hasilnya, operasional menjadi lebih cepat, keputusan stok lebih akurat, dan pengalaman pelanggan tetap konsisten di seluruh sesi belanja.

User-Centric Metrics

  • 80% pengguna menyelesaikan lihat produk ke add-to-cart dalam kurang dari 90 detik.
  • Minimal 70% sesi mobile mencapai halaman detail produk atau cart dalam 30 detik.
  • Skor kepuasan checkout mencapai rata-rata 4,5 dari 5 dalam survei in-app.
  • Error rate pada aksi add-to-cart di bawah 1% dari total percobaan.
  • Waktu respon visual UI untuk filter produk terasa instan, dengan target under 300 ms untuk update hasil awal.

Business Metrics

  • Conversion rate naik ke 2,5% dalam 3 bulan.
  • Cart abandonment turun 15% dalam 90 hari.
  • Repeat purchase rate mencapai 20% dalam 6 bulan.
  • Nilai rata-rata pesanan naik 10% dalam 4 bulan melalui rekomendasi dan upsell ringan.
  • Minimal 30% traffic organik dapat diarahkan ke katalog atau detail produk yang relevan.

Technical Metrics

  • Uptime produksi 99,5% per bulan.
  • P95 response time endpoint katalog dan cart di bawah 250 ms.
  • Zero critical SQL injection vulnerability melalui penggunaan prepared statements.
  • Core Web Vitals halaman utama memenuhi ambang baik pada mayoritas traffic mobile.

Tracking Plan

  • track_page_view pada homepage, katalog, detail produk, cart, dan checkout.
  • track_product_filter_applied untuk kombinasi filter dan keyword search.
  • track_add_to_cart untuk setiap aksi sukses dan gagal.
  • track_cart_quantity_updated untuk perubahan item dan validasi stok.
  • track_checkout_started saat user masuk ke form checkout.
  • track_order_created setelah order tersimpan sukses.
  • track_admin_status_changed untuk audit perubahan pesanan di dashboard.

Technical Needs

  • Backend menggunakan Native PHP 8.2+ dengan arsitektur Custom MVC.
  • Database MySQL dengan PDO dan prepared statements untuk semua query.
  • Routing berbasis .htaccess dan router array/regex buatan sendiri.
  • Frontend HTML5, CSS3, dan Vanilla JavaScript ES6+ tanpa framework SPA.
  • Asset pipeline sederhana untuk CSS, JS, dan gambar, dengan versioning file statis.
  • Session management yang aman untuk pelanggan dan admin.
  • OPcache aktif di server produksi untuk mempercepat eksekusi PHP.

Integration Points

  • Payment gateway seperti Midtrans atau Xendit untuk tahap checkout lanjutan.
  • Email service seperti SMTP SendGrid atau Mailgun untuk notifikasi order.
  • WhatsApp notification link atau API gateway jika diperlukan komunikasi cepat dengan pelanggan.
  • Google Analytics 4 atau Plausible untuk pelacakan perilaku pengguna.
  • Object storage seperti S3-compatible storage untuk gambar produk.

Data Storage & Privacy

  • Password disimpan hash, bukan plaintext, dan token sensitif disimpan ter-hash bila perlu.
  • Gunakan CSRF token pada semua form state-changing dan endpoint internal yang relevan.
  • Semua input user harus disanitasi untuk mencegah XSS sebelum rendering ke HTML.
  • Siapkan kebijakan retensi data pesanan dan akun sesuai kebutuhan GDPR atau CCPA jika target pasar meluas.
  • Batasi akses data admin dengan role-based access control dan logging aktivitas penting.

Scalability & Performance

  • Gunakan caching untuk data katalog statis seperti kategori dan navigasi.
  • Optimalkan query dengan index pada slug, category_id, user_id, order status, dan created_at.
  • Gunakan lazy loading gambar dan responsive image sizes untuk menekan bandwidth.
  • Batasi animasi berat pada viewport yang relevan agar GSAP dan Lenis tetap halus di perangkat menengah.

Potential Challenges

  • Risiko query lambat saat katalog tumbuh besar, mitigasinya dengan indexing, pagination, dan caching terukur.
  • Risiko duplikasi order saat submit berulang, mitigasinya dengan idempotency key atau token checkout unik.
  • Risiko animasi menyebabkan jank pada perangkat low-end, mitigasinya dengan reduced-motion mode dan pembatasan animasi.
  • Risiko kesalahan implementasi router custom, mitigasinya dengan test coverage untuk route statis, dinamis, dan fallback 404.
  • Risiko XSS dari konten admin atau deskripsi produk, mitigasinya dengan escaping output ketat dan sanitasi input pada field yang relevan.

Team & resourcing - Small team - 2 backend engineers, 1 frontend/UI engineer, 1 designer, part-time PM.

Phase 1: Foundation MVP · Weeks 1–3

  • Struktur folder custom MVC native PHP.
  • Router dasar, koneksi PDO, session, auth awal.
  • Homepage, katalog, detail produk, dan layout responsif light theme.
  • Schema database inti untuk users, products, categories, carts, orders.

Phase 2: Cart, Checkout, and Admin Core · Weeks 4–6

  • API JSON internal untuk add-to-cart, update cart, dan filter produk.
  • Checkout flow dengan validasi server-side dan pembuatan order.
  • Admin dashboard dengan sidebar modern, table management, dan edit produk.
  • CSRF protection, sanitasi output, dan logging dasar.

Phase 3: Polish and Performance · Weeks 7–8

  • Integrasi GSAP dan Lenis dengan fallback reduced-motion.
  • Optimasi gambar, lazy loading, dan peningkatan Core Web Vitals.
  • Dashboard bento/glassmorphism lebih matang dengan state loading dan empty state.
  • Analytics event tracking dan error monitoring dasar.

Phase 4: Launch Hardening · Weeks 9–10

  • Hardening keamanan, audit SQL injection, dan review akses role.
  • Load testing ringan untuk katalog dan checkout.
  • Backup database, document deployment, dan runbook operasional.
  • Perbaikan UX berdasarkan feedback beta dan final bugfix release.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a local Indonesian e-commerce website called SKENA using Vanilla PHP 8.2+, MySQL, HTML5, CSS3, and Vanilla JavaScript ES6+ with no framework.

Requirements:
Create a custom MVC architecture from scratch with a simple router based on .htaccess plus array/regex route definitions. Use PDO with prepared statements everywhere. Separate folders for public assets, core, controllers, models, views, config, and helper utilities.

Main user experience:
Light theme, minimal clean slate design with white and light gray surfaces, subtle borders, and one elegant accent color like Electric Blue or Neon Lime. Use GSAP for purposeful micro-animations and Lenis for smooth scrolling. No full page reload for dynamic interactions like filter products, add to cart, update quantity, or cart badge updates. Use internal PHP JSON endpoints consumed by Fetch API.

Pages and flows:
Homepage with hero, featured products, categories, and trust signals.
Catalog page with search, multi-filter, pagination or infinite scroll, and empty states.
Product detail page with gallery, variants, stock status, related products, and add-to-cart.
Cart page with live quantity updates and server-side recalculation.
Checkout page with validation, order creation, and confirmation.
Customer account page with order history and order detail.
Admin dashboard with a unique modern sidebar and bento or glassmorphism layout for products, categories, orders, users, promos, and analytics.

Data model:
Users, roles, products, product_images, categories, product_variants, carts, cart_items, orders, order_items, payments, shipping_addresses, coupons, and audit_logs.

Security and quality:
Implement CSRF tokens, escaped output to prevent XSS, role-based admin access, session hardening, and server-side validation. Add image lazy loading, OPcache-friendly code, query indexing strategy, and lightweight analytics event hooks.

Generate the full app scaffold, database schema SQL, sample route definitions, key controllers, models, views, and internal API endpoints. Make the code production-minded and consistent with the SKENA brand aesthetic.

Business Idea

Bertindaklah sebagai Senior Backend Architect dan Lead UI/UX Designer. Tugas Anda adalah membuat Product Requirements Document (PRD) dan Technical Architecture Document yang sangat detail untuk e-commerce brand lokal "SKENA". KONTEKS & REQUIREMENT UTAMA: 1. BRAND & UI/UX: Light theme, minimalis, "clean slate" (putih, abu-abu muda, subtle borders). Accent color elegan (misal: Electric Blue/Neon Lime). Full animation menggunakan GSAP & Lenis smooth scroll. Admin dashboard dengan sidebar unik dan layout modern (Bento/Glassmorphism). 2. TECH STACK STRICT: - Backend: VANILLA PHP (Native PHP 8.2+). TANPA FRAMEWORK (No Laravel, No CodeIgniter, No Symfony). - Database: MySQL (Wajib menggunakan PDO dengan Prepared Statements). - Frontend: HTML5, CSS3 (Vanilla/SCSS), Vanilla JavaScript (ES6+). 3. ARSITEKTUR VANILLA PHP: - Wajib menerapkan Custom MVC (Model-View-Controller) dari nol. - Menggunakan Custom Router sederhana (berbasis .htaccess dan array/regex routing). - Struktur folder harus memisahkan public assets, core logic, models, views, dan controllers. 4. INTEGRASI FRONTEND-BACKEND (KRUSIAL): - Karena menggunakan GSAP & Lenis, halaman TIDAK BOLEH melakukan full-reload saat interaksi dinamis (seperti Add to Cart, Filter Produk). - Backend PHP harus menyediakan endpoint API internal (mengembalikan JSON) untuk ditangani oleh Vanilla JS via Fetch API. TOLONG BUAT DOKUMEN DENGAN STRUKTUR BERIKUT: 1. Executive Summary & Design System (Clean slate palette, GSAP/Lenis rules). 2. Technical Architecture (Vanilla PHP Custom MVC, Folder Structure, Custom Router logic). 3. Database Schema Design (Relasi tabel untuk Products, Users, Orders, Cart, dll). 4. Security Implementation (Custom CSRF token generator, XSS sanitization, PDO SQLi prevention). 5. API & Frontend Integration Strategy (Bagaimana Vanilla JS berkomunikasi dengan PHP tanpa reload page). 6. Admin Dashboard UI/UX Concept (Detail sidebar unik dan layout). 7. Performance Optimization (Handling GSAP/Lenis performance, image lazy loading, PHP OPcache). 8. Development Milestones. Gunakan bahasa Indonesia yang profesional dan teknis. Berikan contoh snippet kode pendek untuk Custom Router dan PDO Connection di bagian arsitektur.

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company