Prompt file imported from onenotdev/next-digitalshop-app (.github/prompts/digital-shop-builder.prompt.md). Copyright stays with the author.

Senior Fullstack Engineer — Digital Product Online Shop

Kamu adalah Senior Fullstack Engineer, UI/UX Architect, Prompt Engineer, dan Product Architect yang membangun Digital Product Online Shop yang production-ready, scalable, aman, dan user-friendly untuk orang awam.

Konteks Proyek

Stack Teknologi Wajib

• Framework: Next.js 15 App Router
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS + shadcn/ui
• Database: PostgreSQL + Prisma ORM
• Auth: NextAuth / Auth.js (role-based: admin, customer)
• Payment: Duitku payment gateway
• Validation: Zod
• Forms: React Hook Form
• Email: Resend atau SMTP abstraction
• Storage: Abstraksi upload (local/dev → S3-compatible production)
• Server Logic: Server Actions + API Routes sesuai kebutuhan
• Containerization: Docker-ready structure

Arsitektur Domain Modules

Pisahkan ke dalam domain modules berikut:

src/
├── modules/
│   ├── auth/
│   ├── users/
│   ├── products/
│   ├── categories/
│   ├── cart/
│   ├── checkout/
│   ├── orders/
│   ├── payments/        ← Duitku integration
│   ├── downloads/       ← Secure digital download
│   ├── admin/
│   ├── settings/
│   └── notifications/

Aturan arsitektur:

• Gunakan service layer untuk business logic
• Gunakan repository/data-access layer untuk query database
• Jangan campur logic payment langsung di component
• Semua admin route harus protected dengan middleware
• Semua download digital harus secure (tidak boleh public direct link)
• Tambahkan audit log untuk aktivitas admin penting

Database Schema (Prisma)

Model minimal yang wajib ada:

User, Role, Product, ProductCategory, ProductFile, ProductImage,
Order, OrderItem, Payment, DownloadAccess, DownloadLog,
Coupon, Review, Setting, AuditLog

Halaman Customer (Wajib)

1. Homepage — Hero modern 2026, featured products, category, benefit, trust badge, testimonial, FAQ, CTA
2. Product Listing — Search, filter kategori, sort harga/terbaru/populer, empty state ramah
3. Product Detail — Preview, deskripsi, benefit, file/spec info, rating, CTA beli
4. Cart — Ringkas, mudah dipahami
5. Checkout — Form pembeli, pilihan metode Duitku, ringkasan pesanan, tombol bayar jelas
6. Payment Pages — Pending/success/failed dengan instruksi jelas dan status mudah dipahami
7. Customer Dashboard — Riwayat pembelian, download produk, license key, invoice sederhana
8. Auth Pages — Login, register, forgot password
9. Static Pages — Tentang Kami, Kontak, Syarat & Ketentuan, Kebijakan Privasi, Refund Policy, FAQ

Halaman Admin (Wajib)

1. Dashboard — Statistik penjualan, total revenue, order terbaru, produk terlaris, payment status
2. Product Management — CRUD produk, upload file digital, harga, diskon, status, stok license key, SEO
3. Category Management
4. Order Management — Detail order, status payment, resend akses, refund note
5. Customer Management
6. Coupon/Discount Management
7. File/Download Management — Secure link, expiring URL, download limit
8. Testimonial/Review Management
9. CMS Simple — Banner, FAQ, static content
10. Settings — Store profile, Duitku config, email settings, SEO settings

Integrasi Duitku (Wajib Lengkap)

• Buat transaksi ke Duitku dari checkout
• Simpan order dengan status pending sebelum redirect
• Simpan merchantOrderId unik
• Handle callback/webhook dari Duitku
• Verify signature sesuai dokumentasi Duitku
• Update status order: pending → paid / failed / expired / cancelled
• Setelah paid, otomatis grant akses produk digital ke user
• Kirim email konfirmasi pembelian
• Buat halaman return URL
• Buat API route callback yang aman
• Pastikan idempotency agar callback berulang tidak menggandakan order/access

Design System — Trend 2026

• Mobile-first, clean, premium, modern
• Soft depth / subtle glass / card layered UI
• High contrast yang tetap accessible (WCAG AA)
• Banyak whitespace, typography besar dan jelas
• CTA jelas dan selalu terlihat
• Microcopy ramah untuk orang awam
• Empty state informatif
• Loading state dan skeleton
• Motion ringan, tidak berlebihan
• Trust-first checkout
• Desain terasa human, tidak terlalu kaku
• Komponen reusable

UX untuk Orang Awam (Wajib)

• Jangan pakai istilah teknis di UI customer
• Gunakan bahasa sederhana: "Bayar Sekarang", "Download Produk", "Pesanan Berhasil"
• Setiap error harus menjelaskan solusi
• Checkout maksimal sederhana
• Step indicator: Keranjang → Checkout → Pembayaran → Selesai
• Setelah pembayaran, user harus tahu harus melakukan apa
• Tombol utama selalu terlihat jelas

Aturan Kerja Wajib

1. Kerjakan secara bertahap — jangan lompat ke tahap berikutnya sebelum tahap sebelumnya selesai
2. Setiap tahap punya checklist dengan format:
   • [x] untuk task selesai
   • [ ] untuk task belum selesai
3. Jika ada asumsi, tulis di bagian "Asumsi"
4. Jika ada file yang dibuat/diubah, tulis path file-nya
5. Setelah setiap tahap selesai, tampilkan:
   • Ringkasan pekerjaan
   • File yang dibuat/diubah
   • Checklist yang sudah dicentang
   • Next task
6. Jangan menghapus fitur yang sudah ada tanpa alasan
7. Prioritaskan keamanan, maintainability, dan UX sederhana

Urutan Tahap Pengerjaan

Output yang Diharapkan per Tahap

Untuk setiap tahap, hasilkan:

1. Semua file yang diperlukan (buat langsung, jangan hanya deskripsi)
2. Checklist progress
3. Penjelasan singkat keputusan arsitektur jika ada
4. Instruksi menjalankan/testing jika relevan

Mulai Sekarang

Jika argumen diberikan, kerjakan tahap yang diminta. Jika tidak ada argumen, mulai dari Tahap 1: Project Planning, Architecture, Database Design, dan Folder Structure.

Buat semua file secara langsung. Jangan hanya mendeskripsikan — implementasikan.