SKENA

E-commerce lokal yang terasa premium, cepat, dan hidup.

SKENA adalah platform e-commerce brand lokal dengan storefront berestetika clean slate dan pengalaman interaktif yang mulus, ditenagai Native PHP 8.2+ tanpa framework. Produk ini ditujukan untuk pembeli muda yang menginginkan pengalaman belanja premium, cepat, dan visualnya kuat, sekaligus memberi tim internal admin dashboard yang modern, efisien, dan berbeda dari panel standar.

Business Goals

  • Meningkatkan conversion rate storefront ke pembelian sebesar 20% dalam 6 bulan melalui UX yang lebih cepat dan storytelling visual yang kuat.
  • Mencapai repeat purchase rate minimal 25% dalam 9 bulan lewat pengalaman checkout dan post-purchase yang lebih konsisten.
  • Menurunkan cart abandonment sebesar 15% dalam 4 bulan dengan alur add-to-cart tanpa reload dan micro-interactions yang responsif.
  • Meningkatkan average order value sebesar 10% dalam 6 bulan melalui rekomendasi produk, bundling, dan upsell di cart.
  • Mempercepat operasional admin dengan menurunkan waktu rata-rata update produk dan order fulfillment sebesar 30% dalam 3 bulan.

User Goals

  • Pengunjung dapat menelusuri produk dengan cepat tanpa halaman terasa berat atau patah-patah.
  • Pembeli dapat menambahkan produk ke cart dan melihat update instan tanpa full reload.
  • Pengguna mendapat pengalaman visual premium yang konsisten di mobile dan desktop.
  • Admin dapat memantau pesanan, stok, dan katalog dari satu dashboard yang mudah dipindai.
  • Tim internal dapat melakukan perubahan data secara aman tanpa mengganggu pengalaman frontend.

Non-Goals

  • Tidak membangun marketplace multi-seller pada fase awal.
  • Tidak membangun aplikasi mobile native terpisah pada fase pertama.
  • Tidak mendukung pembayaran kompleks multi-currency atau cross-border pada MVP.
  • Tidak membangun CMS konten editorial penuh seperti blog suite enterprise pada awal peluncuran.

Raka, 24, pembeli fashion dan lifestyle - Raka suka brand lokal yang punya identitas visual kuat dan navigasi yang cepat di mobile. Ia biasanya membandingkan beberapa produk sekaligus dan sangat sensitif terhadap halaman yang lambat atau transisi yang mengganggu.

Raka, 24, pembeli fashion dan lifestyle

  • As a pembeli muda, I want to browse produk dengan scroll yang halus dan animasi yang elegan, so that pengalaman belanja terasa premium dan tidak membosankan.
  • As a pembeli muda, I want to add items to cart tanpa reload halaman, so that saya bisa belanja cepat saat mobile.
  • As a pembeli muda, I want to melihat ringkasan cart yang langsung berubah, so that saya yakin tindakan saya berhasil.

Nadia, 33, pemilik brand lokal - Nadia mengelola stok, harga, dan pesanan setiap hari dengan tim kecil. Ia butuh sistem yang aman, cepat dipakai, dan tidak memerlukan pengetahuan teknis untuk mengelola toko.

Nadia, 33, pemilik brand lokal

  • As a owner, I want to melihat order terbaru dan status pembayaran secara ringkas, so that saya bisa memprioritaskan fulfillment.
  • As a owner, I want to update produk dan stok dari dashboard yang intuitif, so that operasional berjalan tanpa bergantung pada developer.
  • As a owner, I want to melihat performa produk terlaris, so that saya bisa memutuskan restock dan promosi.

Dimas, 29, admin operasional - Dimas menangani input produk, kategori, dan verifikasi order. Ia membutuhkan panel yang cepat dipindai, minim klik, dan aman dari error data.

Dimas, 29, admin operasional

  • As an admin, I want to mengedit produk melalui form yang divalidasi, so that data katalog tetap konsisten.
  • As an admin, I want to mencari order dan memfilter status dengan cepat, so that saya bisa memproses pesanan lebih efisien.
  • As an admin, I want to menerima notifikasi perubahan stok kritis, so that saya dapat mencegah overselling.

Storefront Browsing dan Discovery · High priority

  • Pengguna harus dapat menjelajah katalog SKENA dengan cepat, visual yang kuat, dan tanpa reflow yang mengganggu.
  • Halaman homepage menampilkan hero, koleksi unggulan, dan CTA utama dengan animasi GSAP yang terukur.
  • Listing produk mendukung filter kategori, sorting, pencarian, dan infinite pagination atau load more tanpa full reload.
  • Setiap kartu produk memiliki micro-interaction hover/tap, status stok, dan indikasi quick add.
  • SEO dasar untuk katalog tetap terjaga melalui server-side rendering dari PHP untuk halaman utama dan halaman detail produk.

Cart dan Checkout Interaktif · High priority

  • Add to cart, update quantity, remove item, dan ringkasan checkout harus berjalan sebagai interaksi asynchronous berbasis JSON.
  • Semua aksi cart menggunakan Fetch API ke internal PHP endpoint yang merespons JSON.
  • Update cart harus mengubah UI secara instan dengan animasi GSAP tanpa memicu reload halaman.
  • Validasi stok dilakukan di server sebelum cart disimpan atau order dibuat.
  • State cart untuk guest disimpan di session atau cookie signed, dan untuk user login diselaraskan ke tabel cart.

Admin Dashboard Modern · High priority

  • Admin dashboard harus membantu pengelolaan katalog, order, dan stok dengan visual yang unik namun tetap fungsional.
  • Dashboard menggunakan layout bento grid dengan card informatif yang memprioritaskan scanability.
  • Sidebar bersifat inovatif, misalnya floating, magnetic hover, dan context-aware state sesuai halaman aktif.
  • CRUD produk, kategori, dan order memakai form modern dengan validasi real-time dan feedback yang jelas.
  • Dashboard harus tetap usable di layar laptop 1366px dan resolusi yang lebih besar tanpa memecah layout.

Authentication dan Authorization · High priority

  • Sistem harus membedakan akses publik, customer, dan admin secara aman.
  • Login customer dan admin dipisah berdasarkan role dan middleware custom di controller.
  • Password disimpan memakai password_hash dan diverifikasi dengan password_verify.
  • Akses endpoint admin dibatasi memakai session-based auth dan pemeriksaan role.
  • Session regeneration dilakukan saat login untuk mencegah session fixation.

Analytics dan Operational Visibility · Medium priority

  • Tim perlu visibilitas pada performa user journey, performa produk, dan efisiensi operasional.
  • Event tracking untuk view item, add to cart, remove from cart, begin checkout, dan place order.
  • Admin dashboard menampilkan metrik ringkas seperti order hari ini, conversion proxy, dan stok kritis.
  • Log error server dan aplikasi harus terpisah dari log akses.
  • Metrik performa frontend seperti waktu render, error fetch, dan cart latency dapat diinspeksi.

First-Time User Experience

  • Pengguna mendarat di homepage dengan hero visual singkat, CTA jelas, dan scroll yang halus.
  • Dalam 3 detik pertama, pengguna melihat nilai brand, koleksi unggulan, dan satu aksi utama seperti Shop Now.
  • Pengguna menggulir katalog dengan transisi teks dan kartu produk yang muncul secara bertahap.
  • Saat pengguna memilih produk, detail page membuka informasi, gambar, harga, dan tombol add to cart tanpa gangguan.
  • Jika pengguna menambahkan item ke cart, panel ringkasan muncul instan dengan animasi konfirmasi.
  • Target time-to-value: pengguna mencapai aksi add-to-cart pertama dalam kurang dari 45 detik di perangkat mobile.

1. Browse

  • Pengguna menjelajah homepage dan katalog produk dengan scroll yang buttery smooth serta visual yang ringan.
  • GSAP ScrollTrigger digunakan untuk reveal sekunder, bukan untuk memaksa seluruh halaman bergerak berlebihan.
  • Lenis mengendalikan scroll secara global, sementara komponen tertentu tetap respect preferensi reduced motion.
  • Jika koneksi lambat, gambar dan animasi dekoratif ditunda agar interaksi utama tetap cepat.

2. Filter dan Temukan

  • Pengguna memfilter produk berdasarkan kategori, harga, dan sort tanpa refresh halaman.
  • Vanilla JS mengirim request ke endpoint PHP internal untuk mendapatkan HTML partial atau JSON data.
  • State filter disimpan di URL query string agar bisa dibagikan dan di-refresh tanpa kehilangan konteks.
  • Jika hasil kosong, UI menampilkan empty state yang informatif dan menyarankan reset filter.

3. Product Detail

  • Pengguna melihat detail produk yang imersif namun tetap clean, dengan fokus pada foto, harga, dan value proposition.
  • Galeri gambar memiliki lazy loading dan fallback jika gambar gagal dimuat.
  • Variasi ukuran atau warna divalidasi sebelum tombol add to cart aktif bila produk membutuhkan opsi.
  • CTA utama tetap visible melalui sticky action bar di mobile.

4. Add to Cart

  • Pengguna menambahkan item ke cart secara instan tanpa reload dan mendapatkan konfirmasi visual yang jelas.
  • Klik add to cart memicu Fetch API ke PHP endpoint yang mengembalikan JSON sukses atau error.
  • Jika stok tidak cukup, pesan error tampil inline tanpa merusak scroll position.
  • GSAP dipakai untuk animasi cart badge, mini cart drawer, dan feedback success.

5. Checkout dan Konfirmasi

  • Pengguna masuk ke checkout yang sederhana, cepat, dan minim distraksi.
  • Form checkout divalidasi di client dan server, dengan sanitasi input yang konsisten.
  • Setelah order sukses, pengguna mendapat halaman konfirmasi dan ringkasan pesanan.
  • Jika pembayaran dilakukan via gateway, status order dipisahkan antara pending, paid, dan failed.

Advanced Features dan Edge Cases

  • Quick view modal untuk produk tanpa keluar dari katalog.
  • Wishlist sederhana untuk pengguna terdaftar atau cookie-based guest list pada fase awal.
  • Persistent cart lintas sesi untuk user login.
  • Abandoned cart recovery lewat email atau reminder internal.
  • Fallback UI untuk JS gagal, dengan halaman tetap dapat digunakan melalui request server-side biasa.
  • Admin mass update stok dan harga untuk kampanye tertentu.
  • Role-based access control untuk owner, admin, dan staff.

UI Highlights

  • Clean slate visual system dengan banyak ruang kosong, border tipis, dan hierarchy yang sangat jelas.
  • Accent color tunggal dipakai hemat untuk CTA, status aktif, dan highlight interaktif agar tidak melelahkan mata.
  • Micro-interactions di hover, tap, focus, success, dan error harus konsisten.
  • Reduced motion mode wajib tersedia untuk pengguna yang sensitif terhadap animasi.
  • Semua komponen utama harus keyboard accessible dan memiliki focus state yang terlihat.
  • Optimasi mobile-first dengan touch target minimal 44px dan drawer yang ergonomis.

Seorang pembeli muda membuka SKENA dari ponselnya saat istirahat. Ia langsung melihat tampilan yang bersih, produk unggulan, dan scroll yang terasa halus sehingga ia nyaman menjelajah tanpa merasa situsnya berat atau kaku.

Saat ia menemukan jaket yang cocok, ia menekan add to cart dan cart badge berubah seketika tanpa refresh. Di belakang layar, Vanilla JS mengirim request ke PHP internal API, data divalidasi oleh server, lalu respons JSON memicu animasi GSAP yang memberi rasa instan dan meyakinkan.

Bagi tim SKENA, pengalaman ini mengurangi friction dalam pembelian dan meningkatkan konversi tanpa mengorbankan kontrol teknis. Admin juga bisa memantau order, stok, dan produk dari dashboard yang modern, sehingga operasional lebih cepat dan brand terasa jauh lebih premium.

User-Centric Metrics

  • Waktu ke add-to-cart pertama kurang dari 45 detik untuk 70% pengguna baru.
  • Cart interaction success rate di atas 98% tanpa reload halaman.
  • Bounce rate homepage turun 15% dalam 3 bulan.
  • Checkout completion rate naik minimal 18% dalam 6 bulan.
  • 90% pengguna mobile menyelesaikan browsing katalog tanpa layout shift yang mengganggu.

Business Metrics

  • Conversion rate storefront naik 20% dalam 6 bulan.
  • Average order value naik 10% dalam 6 bulan.
  • Repeat purchase rate mencapai 25% dalam 9 bulan.
  • Cart abandonment turun 15% dalam 4 bulan.
  • Waktu operasional admin untuk update katalog turun 30% dalam 3 bulan.

Technical Metrics

  • Uptime aplikasi 99.9% per bulan.
  • P95 response time endpoint JSON di bawah 300 ms untuk read dan 500 ms untuk write.
  • Error rate frontend fetch di bawah 1% dari total event interaktif.
  • 0 temuan kritis SQL injection, XSS tersimpan, atau CSRF pada audit internal.

Tracking Plan

  • track_page_view pada homepage, kategori, dan product detail.
  • track_filter_applied saat user mengubah kategori, sort, atau price range.
  • track_add_to_cart saat item berhasil masuk cart.
  • track_cart_updated saat quantity berubah atau item dihapus.
  • track_begin_checkout saat user masuk checkout.
  • track_purchase_completed saat order berhasil dibuat.
  • track_admin_order_status_changed saat staff memperbarui status order.

Technical Needs

  • Native PHP 8.2+ tanpa framework dengan custom MVC dari nol.
  • MySQL 8+ dengan PDO dan prepared statements untuk semua query.
  • Redis atau file-based cache ringan untuk session dan optional cache katalog.
  • Nginx atau Apache dengan routing rewrite ke front controller index.php.
  • Composer hanya untuk autoload PSR-4 dan dependency ringan bila diperlukan, bukan framework.
  • PHP OPcache aktif di environment produksi.
  • Front-end memakai HTML5, CSS3, dan Vanilla JavaScript ES6+.

Integration Points

  • Payment gateway seperti Midtrans atau Xendit untuk checkout pembayaran.
  • Email service seperti SendGrid atau Mailgun untuk notifikasi order dan recovery cart.
  • Object storage seperti S3-compatible storage untuk gambar produk.
  • Google Analytics 4 atau Plausible untuk event analytics.
  • WhatsApp click-to-chat atau notifikasi order internal untuk operasi cepat.

Data Storage & Privacy

  • Password disimpan dengan hashing kuat dan tidak pernah dalam plaintext.
  • Token CSRF bersifat per-session atau per-form dan divalidasi di server.
  • Data pelanggan hanya menyimpan atribut yang diperlukan untuk fulfillment.
  • Semua output HTML yang berasal dari user harus disanitasi dengan htmlspecialchars.
  • Kebijakan retensi log dan data order harus jelas untuk kepatuhan privasi seperti GDPR atau CCPA bila relevan.

Scalability & Performance

  • Semua endpoint interaktif memakai respons JSON kecil dan payload yang efisien.
  • Query produk dan order harus diindeks pada kolom yang sering difilter seperti category_id, user_id, status, dan created_at.
  • Gambar produk dioptimalkan dengan ukuran responsif, lazy loading, dan format modern seperti WebP.
  • GSAP dan Lenis hanya diinisialisasi pada halaman yang memerlukannya untuk menghindari overhead global.

Potential Challenges

  • Risiko kode spaghetti pada Native PHP, mitigasi dengan struktur folder MVC yang ketat, service class terpisah, dan convention dokumentasi.
  • Risiko animasi berlebihan membuat performa menurun, mitigasi dengan budget animasi, lazy initialization, dan reduced motion mode.
  • Risiko sinkronisasi cart antara guest dan user login, mitigasi dengan strategi merge cart yang jelas saat autentikasi.
  • Risiko data inconsistency pada stok saat transaksi bersamaan, mitigasi dengan transaksi database dan locking selektif.
  • Risiko keamanan endpoint internal API, mitigasi dengan CSRF token, auth guard, input validation, dan rate limiting sederhana.

Team & resourcing - Small team - 1 Senior PHP engineer, 1 frontend engineer, 1 UI/UX designer, part-time QA/PM.

Phase 1: Arsitektur dan Fondasi · Weeks 1–2

  • Struktur custom MVC Native PHP 8.2+
  • Front controller, router, base controller, dan PDO singleton
  • Skema database awal untuk users, products, categories, carts, orders, dan order_items
  • Design system dasar storefront dan admin
  • Setup environment, OPcache, error logging, dan autoloading

Phase 2: Storefront dan Cart API · Weeks 3–5

  • Homepage, katalog, detail produk, dan halaman cart
  • Internal API JSON untuk add to cart, update quantity, remove item, dan filter produk
  • Lenis dan GSAP integration untuk scroll, reveal, dan feedback interaktif
  • Session cart untuk guest dan user cart merge logic
  • Validasi server-side, sanitasi output, dan CSRF protection

Phase 3: Admin Dashboard dan Operasional · Weeks 6–7

  • Dashboard admin bento grid dengan sidebar inovatif
  • CRUD produk, kategori, stok, dan manajemen order
  • Filter order, detail order, dan update status
  • Role-based access control untuk admin dan staff
  • Audit log dasar untuk perubahan penting

Phase 4: Hardening dan Launch · Weeks 8–9

  • Performance tuning dan image optimization
  • Error handling global, logging, dan recovery flow
  • QA cross-device, accessibility checks, dan reduced motion support
  • Event tracking untuk analytics
  • Staging to production release plan dan checklist launch

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

Build SKENA, a premium local-brand e-commerce website and admin dashboard using Native PHP 8.2+ with a custom MVC architecture from scratch, MySQL via PDO prepared statements, and a frontend built with HTML5, CSS3, and Vanilla JavaScript ES6+.

Core product requirements:
Create a clean-slate storefront with a light theme, white and very light gray surfaces, subtle borders, and one elegant accent color for CTAs and interactive states. Implement a modern premium vibe for a youth-oriented local brand. Use Lenis for buttery smooth scroll and GSAP for page transitions, text reveals, section reveals, cart feedback, and micro-interactions. Respect reduced-motion preferences.

Build pages and flows:
Homepage with hero, featured collections, product highlights, and animated storytelling sections.
Product listing page with search, filter, sort, and load-more/infinite pagination without full page reload.
Product detail page with gallery, variants, stock state, sticky CTA on mobile, and quick add to cart.
Cart and checkout flow that never full-reloads for dynamic actions. Add to cart, update quantity, and remove item must use Fetch API to PHP internal JSON endpoints and animate updates with GSAP.
Authentication for customer and admin.
Admin dashboard with a unique bento-grid / subtle glassmorphism visual system and an innovative floating/context-aware sidebar with magnetic hover and animated expand/collapse.

Backend architecture requirements:
Use a front controller at public/index.php.
Create a custom router that maps clean URLs to controllers without any framework.
Implement a reusable PDO singleton connection class.
Implement BaseController, Request, Response, Router, and a service layer for cart/order/product logic.
Separate public assets, app logic, config, controllers, models, views, helpers, and storage logs.
Return JSON from internal API endpoints for all interactive storefront actions.

Database model:
Users with roles customer/admin/staff.
Products with categories, price, images, stock, status, and SEO fields.
Categories hierarchical or single-level depending on simplicity.
Orders and order_items with transactional integrity.
Cart and cart_items or session-backed cart for guests, with merge-on-login logic.
Include indexes on category_id, user_id, status, created_at, and sku.

Security and quality:
Protect against SQL injection with prepared statements only.
Protect against XSS with htmlspecialchars on all rendered output.
Implement CSRF token generation and validation without a framework.
Add session hardening, password_hash/password_verify, role guards, global error handling, structured logging, and basic rate limiting for sensitive endpoints.

Performance:
Optimize images with responsive loading and lazy loading.
Keep JS bundles small and initialize GSAP/Lenis only where needed.
Use OPcache in production and cache repetitive read queries where appropriate.

Deliverables:
Scaffold the full project structure, key controllers, models, views, route definitions, JSON API endpoints, admin UI shell, and sample database migrations/schema SQL. Make the result production-minded, clean, and easy to extend.

Business Idea

Bertindaklah sebagai Senior Product Manager, Lead UI/UX Designer, dan Senior Native PHP Backend Architect. Tugas Anda adalah membuat Product Requirements Document (PRD) dan Technical Architecture Document yang sangat detail, komprehensif, dan siap dieksekusi untuk proyek e-commerce brand lokal bernama "SKENA". KONTEKS & REQUIREMENT STRICT: 1. BRAND & UI/UX STOREFRONT: - Nama Brand: SKENA (Vibe lokal, premium, youth culture). - Tema: Light theme, minimalis, "clean slate" (dominan putih, abu-abu sangat muda, garis tipis/subtle borders). - Accent Color: Tentukan 1 warna accent yang elegan dan kontras (misal: Electric Blue, Matcha Green, atau Vibrant Orange) untuk CTA dan elemen interaktif. - Animasi: FULL ANIMATION. Wajib menggunakan GSAP (ScrollTrigger, text reveals, page transitions) dan Lenis (buttery smooth scroll). Micro-interactions di setiap elemen. 2. ADMIN DASHBOARD PANEL: - UI/UX: Sangat unik, modern, dan "berbeda dari yang lain" (jangan gunakan template admin standar seperti AdminLTE). Gunakan konsep Bento Grid atau Glassmorphism subtle. - SIDEBAR: Harus inovatif dan beda dari yang lain (misal: floating sidebar, magnetic hover effect, atau contextual sidebar yang berubah bentuk). Gunakan accent color dengan bijak agar tidak melelahkan mata. 3. TECH STACK (SANGAT STRICT): - Backend: VANILLA PHP (Native PHP 8.2+). TANPA FRAMEWORK APAPUN (No CodeIgniter, No Laravel, No Symfony). Wajib menggunakan Custom MVC architecture dari nol. - Database: MySQL (Wajib menggunakan PDO dengan Prepared Statements). - Frontend: HTML5, CSS3 (Vanilla/SCSS), Vanilla JavaScript (ES6+). 4. INTEGRASI & ZERO ERROR STRATEGY: - Karena menggunakan Lenis & GSAP, halaman TIDAK BOLEH melakukan full-reload saat interaksi dinamis (Add to Cart, Filter). - Vanilla PHP harus bertindak sebagai internal API (mengembalikan JSON) untuk interaksi dinamis, agar Vanilla JS bisa menggunakan Fetch API dan menganimasikan hasilnya dengan GSAP tanpa merusak smooth scroll Lenis. TOLONG BUAT PRD DENGAN STRUKTUR BERIKUT: 1. Executive Summary & Design System: - Visi produk, palet warna "clean slate" + accent, tipografi, dan aturan main animasi (kapan menggunakan GSAP, kapan menggunakan CSS transitions). 2. Technical Architecture (Native PHP Focus): - Jelaskan struktur folder Custom MVC yang rapi untuk mencegah spaghetti code. - Jelaskan logika Custom Router (bagaimana menangani URL tanpa framework). - Berikan contoh snippet kode untuk: Koneksi PDO Singleton, Custom Router sederhana, dan Base Controller. 3. Database Schema Design: - Rancang relasi tabel MySQL (Users, Products, Categories, Orders, Order_Items, Cart) yang efisien. 4. Frontend-Backend Integration Strategy (Crucial): - Jelaskan alur data saat user klik "Add to Cart". Bagaimana Vanilla JS mengirim data ke PHP, PHP memproses dan return JSON, dan JS menganimasikan update cart menggunakan GSAP tanpa reload page. 5. Admin Dashboard UI/UX Concept: - Detail konsep visual dashboard. - Jelaskan secara spesifik bagaimana desain Sidebar yang "beda dari yang lain" tersebut bekerja (interaksi, hover state, animasi saat expand/collapse). 6. Security & Error Handling (Native PHP): - Bagaimana mencegah SQL Injection (PDO), XSS (htmlspecialchars), dan CSRF (Custom token generator) tanpa bantuan framework. - Strategi global error handling di Vanilla PHP. 7. Performance Optimization: - Cara menjaga performa tetap tinggi meskipun menggunakan GSAP & Lenis (Lazy loading, will-change, image optimization, PHP OPcache). 8. Development Phases & Milestones: - Pembagian sprint dari setup arsitektur, database, backend API, frontend animasi, hingga admin panel. Gunakan bahasa Indonesia yang profesional, teknis, dan sangat detail. Pastikan tidak ada celah logika antara arsitektur Vanilla PHP dan kebutuhan animasi frontend.

Make My PRD

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

    PRD: Bertindaklah sebagai Senior Product Manager