Muzire Motion

Sell motion design learning and assets from one dark, polished hub.

Muzire Motion is a personal brand commerce platform for a smartphone-based motion designer who teaches Alight Motion, sells project templates, and offers premium account access. It combines content marketing, gated learning, package-based access control, and payments into one responsive web app that helps visitors discover work, buy access, and track progress.

Business Goals

  • Reach a 4% to 6% landing-page-to-purchase conversion rate within 90 days of launch.
  • Increase average order value by 20% within 6 months through bundled packages and upsells.
  • Reduce manual payment follow-up time by 60% by moving confirmations into a single admin workflow.
  • Achieve at least 25% of monthly purchases through iPaymu within the first 3 months.
  • Grow returning customer rate to 30% within 6 months through dashboard access and package entitlements.

User Goals

  • Let visitors quickly see proof of skill through a polished portfolio and short course previews.
  • Help users buy the right package in under 3 minutes on mobile.
  • Give students a clear lesson path with progress tracking and certificate access.
  • Allow buyers to instantly access unlocked courses and templates from one dashboard.
  • Make manual and gateway payments easy to complete and verify without confusion.

Non-Goals

  • No native mobile app in the first release.
  • No direct in-app video file hosting; lessons use embeds only.
  • No marketplace for third-party creators or multi-vendor payouts.
  • No community forum, chat system, or social feed beyond external WhatsApp links.

Ari, 28, solo creator and teacher - Ari manages the brand, uploads content, confirms payments, and updates site information from a secure admin area. He needs a simple way to sell courses and templates without maintaining a separate commerce stack.

Ari, 28, solo creator and teacher

  • As a creator, I want to edit course, template, and portfolio content myself, so that I can keep the site current without developer help.
  • As a creator, I want to confirm manual payments and see all transactions in one place, so that I can grant access quickly.
  • As a creator, I want to update payment instructions and WhatsApp contacts from the admin panel, so that buyers always see the latest information.

Nisa, 19, student buyer - Nisa discovers the brand on mobile, watches portfolio examples, and wants to buy a course or template package with minimal friction. She needs a clear explanation of what is included and how to pay.

Nisa, 19, student buyer

  • As a buyer, I want to preview course and template content before paying, so that I can trust the product quality.
  • As a buyer, I want to choose between manual transfer and iPaymu, so that I can use the payment method that fits me best.
  • As a buyer, I want access to my purchased items from a dashboard, so that I can return later without searching again.

Dimas, 34, returning customer - Dimas already owns a package and comes back for new lessons, extra templates, or a certificate after finishing a course. He values fast access and a clean learning flow.

Dimas, 34, returning customer

  • As a returning customer, I want the site to recognize my active packages, so that I can open unlocked content directly.
  • As a returning customer, I want to see progress and completed lessons, so that I know what remains before certification.
  • As a returning customer, I want to download my certificate after finishing a course, so that I can showcase my achievement.

Content Marketing and Landing Experience · High priority

  • Present the brand, portfolio, course summary, and template previews in a minimal dark landing page optimized for trust and conversion.
  • Show a hero section with a placeholder 3D cube component, brand tagline, and two primary CTAs for courses and templates.
  • Render portfolio as a horizontal marquee with image and video previews, split into Teacher and Student sections.
  • Show course modules with the first three modules expanded and remaining modules summarized as locked previews.
  • Show a template marketplace preview grid with media thumbnails and a clear link to the full listing page.
  • Include a WhatsApp community CTA that uses a configurable admin-controlled URL.

Courses and Learning Flow · High priority

  • Support course detail browsing, lesson playback, completion tracking, and certificate generation after completion.
  • Display course cover media, description, pricing, and package requirement on the course detail page.
  • Provide module accordions and a lesson player page with embedded video playback and lesson completion controls.
  • Track user progress per course in a user_course_progress record and update progress percentage as lessons are completed.
  • Unlock the certificate download action only when course progress reaches 100 percent.
  • Generate the certificate on the client from an HTML template using html2canvas and jsPDF.

Packages, Entitlements, and Checkout · High priority

  • Sell access through packages that unlock specific courses, templates, or all-access bundles, with clear pricing and gated access logic.
  • Support package definitions with original price, discount price, and active discount state.
  • Link package items to specific course IDs or template IDs, or allow all-access flags for courses and templates.
  • Redirect locked users to a package selection page that shows what each package unlocks and whether they already own access.
  • Create a dual-mode payment page with manual transfer and iPaymu checkout flows.
  • Grant access automatically when a transaction is confirmed and the package is active.

Payments and Transaction Management · High priority

  • Handle both manual confirmation and iPaymu gateway payments using one transaction model and one admin review flow.
  • Generate a unique 6-digit transaction ID for each checkout attempt.
  • For manual transfer, create a pending transaction and open WhatsApp with a prefilled confirmation message.
  • For iPaymu, create the transaction first, call the server-side payment API, store the reference ID, and redirect to the hosted payment page.
  • Receive and verify iPaymu callbacks server-side, then update transaction status to confirmed or failed.
  • Allow admin users to confirm or reject pending manual transactions and automatically create user package entitlements on confirmation.

Admin and Site Settings · Medium priority

  • Provide a secure admin panel to manage the business, update content, and control visible site settings without code changes.
  • Restrict admin routes to profiles with role set to admin using server-side checks and row-level security.
  • Provide CRUD for courses, modules, materials, templates, portfolio items, and packages.
  • Allow editing of site name, logo, social links, WhatsApp links, hero text, bank and e-wallet details, and QRIS image URL.
  • Persist editable settings in a key-value table and reflect changes immediately on public pages.
  • Show transaction lists with status, payment method, and reference details for support and auditing.

First Visit to Purchase

  • User lands on the dark hero section and sees the brand promise within 3 seconds.
  • User scrolls through social proof, portfolio, and course/template previews.
  • User taps a CTA and reaches either a course detail page or template marketplace in under 2 clicks.
  • User selects a package or item and sees access rules before checkout.
  • User completes payment via manual transfer or iPaymu in under 3 minutes on mobile.
  • User returns to the dashboard and sees owned access, progress, and transaction status.

1. Discover the Brand

  • The homepage establishes credibility with a motion-focused hero, a portfolio marquee, and concise product explanations.
  • Load the hero with a reserved Hero3DCube placeholder and a subtle animated introduction.
  • Use lightweight motion with reduced-motion fallback for accessibility.
  • Keep the first meaningful content visible quickly on mobile to support fast scanning.

2. Explore Products

  • Visitors browse courses, templates, and portfolio samples with consistent media previews.
  • Use one shared media preview component for image and video URLs everywhere.
  • Lazy-load embeds and defer heavy iframe rendering until interaction or visibility.
  • Show pricing, tags, and locked state clearly before the user clicks through.

3. Choose Access

  • If content is locked, the site routes users to package selection with visible unlock rules and discount badges where relevant.
  • Show packages with discount pricing, original strikethrough pricing, and included items.
  • If the user already owns access, replace purchase friction with a direct open button.
  • Validate package compatibility server-side to prevent unauthorized access.

4. Pay and Confirm

  • Users pay by transfer or iPaymu, and the system records the transaction consistently for admin review or automatic confirmation.
  • Manual flow opens WhatsApp with the transaction ID embedded in the message.
  • iPaymu flow calls a server route, creates the transaction first, and redirects to the gateway page.
  • Show a payment status refresh action to handle delayed callbacks or slow bank review.

5. Learn and Collect Certificate

  • After access is granted, the learner watches lessons, marks progress, and downloads a certificate upon completion.
  • Track lesson completion and recalculate progress per course and user.
  • Unlock the certificate button only at 100 percent completion.
  • Handle incomplete or skipped lessons gracefully by preserving progress state across sessions.

Power User and Edge Case Support

  • Admin editing of all site content, payment instructions, and community links from one panel.
  • Automatic entitlement logic for direct package items and all-access packages.
  • Discount badge rendering for items included in active discounted packages.
  • Responsive progress tracking and certificate export on mobile browsers.
  • Role-based protection for admin content and secure callback handling for payment webhooks.
  • Infinite-scroll or pagination for large catalogs and transaction lists.

Visual, Accessibility, and Performance Principles

  • Dark developer-tool aesthetic with thin borders, restrained color accents, and generous spacing.
  • Monospace metadata labels for tags such as price, duration, and category.
  • Subtle scroll reveal, hover lift, marquee motion, and skeleton loading using Framer Motion.
  • Respect prefers-reduced-motion and keep motion lightweight on low-end devices.
  • Use semantic HTML, clear focus states, and strong color contrast for accessibility.
  • Use optimized image handling, lazy-loaded embeds, and cached public pages for speed.

Nisa finds Muzire Motion on mobile and immediately understands what the brand offers because the homepage feels polished, focused, and credible. She watches a few portfolio previews, reads the first module breakdown, and sees exactly which package unlocks the course and templates she wants.

At checkout, she chooses iPaymu because it is faster for her than a manual transfer. The transaction is created, she is redirected to the payment page, and a callback confirms the order without any back-and-forth with the creator.

After payment, her dashboard shows the purchased package, the unlocked course, and her progress as she completes lessons. When she reaches 100 percent, she downloads her certificate instantly, which gives her a finished outcome and gives the business a smoother, lower-touch sales and support process.

User-Centric Metrics

  • At least 70% of first-time visitors understand the core offer within 30 seconds, measured by landing-page engagement.
  • At least 40% of course buyers complete the first lesson within 24 hours of purchase.
  • At least 60% of logged-in buyers visit the dashboard again within 14 days.
  • Certificate completion rate reaches 80% for users who finish 90% or more of course lessons.
  • Payment confusion support requests stay below 5% of all orders.

Business Metrics

  • Landing-page-to-checkout conversion reaches 4% to 6% within 90 days.
  • Returning customer rate reaches 30% within 6 months.
  • Average order value increases by 20% through bundles and package upsells within 6 months.
  • At least 25% of monthly transactions come through iPaymu within 3 months.
  • Manual confirmation workload drops by 60% after admin and webhook automation are in place.

Technical Metrics

  • Public pages maintain 99.9% uptime monthly.
  • P95 response time for public content stays below 300 ms for cached pages.
  • Payment callback processing completes within 10 seconds of receipt in normal conditions.
  • No exposed client-side secrets and zero critical authentication or RLS policy violations in production.

Tracking Plan

  • Track landing page view and CTA click for courses and templates.
  • Track portfolio item impression, hover, and media play initiation.
  • Track package selection, checkout start, and payment method choice.
  • Track manual payment submission and WhatsApp handoff.
  • Track iPaymu redirect creation, callback success, and failure states.
  • Track lesson completion, progress percentage updates, and certificate download.
  • Track admin transaction confirmation and rejected transaction actions.

Technical Needs

  • Next.js App Router with TypeScript and Tailwind CSS for the frontend and server actions.
  • Supabase Postgres with Auth, Storage, and row-level security for data and access control.
  • Vercel deployment with environment-based secrets and serverless API routes.
  • Framer Motion for page transitions, micro-interactions, and scroll animation.
  • html2canvas and jsPDF for client-side certificate generation from an HTML template.
  • Zod validation on every form submission and server action.
  • Rate limiting and anti-spam protection on transaction submission endpoints.

Integration Points

  • Supabase Auth with email/password and Google OAuth.
  • Supabase Storage buckets for thumbnails, portfolio images, and site assets.
  • iPaymu create-payment API and callback/webhook verification.
  • WhatsApp deep links for manual payment confirmation and community access.
  • Google Fonts for Mozilla Headline, Inter, and JetBrains Mono.

Data Storage & Privacy

  • Store only media URLs for videos and do not upload lesson videos to the database or storage.
  • Keep payment secrets and iPaymu credentials server-side only in Vercel environment variables.
  • Apply row-level security to all tables and require owner or admin access where appropriate.
  • Minimize personal data to email, username, and transactional history required for access control.
  • Provide deletion and export paths for profile and progress data to support privacy requests where applicable.

Scalability & Performance

  • Cache public content such as courses, templates, and portfolio items using ISR or server-side caching.
  • Lazy-load embedded videos and defer offscreen media to reduce mobile bandwidth use.
  • Paginate transactions and long content lists to keep admin screens fast.
  • Use indexed foreign keys and status fields on access and payment tables for fast entitlement checks.

Potential Challenges

  • iPaymu webhook delivery may be delayed or fail; mitigate with a status refresh button and idempotent callback handling.
  • Manual payment spam could create noisy transactions; mitigate with rate limiting and per-user duplicate detection.
  • RLS policies may accidentally block legitimate admin actions; mitigate by testing policies against each role before release.
  • Certificate generation on low-end mobile devices may be slow; mitigate by using a simple HTML template and lightweight assets.
  • Embedded video providers may have inconsistent playback behavior; mitigate by supporting YouTube and Vimeo only and testing lazy-load behavior carefully.

Team & resourcing - Small team - 2 engineers, 1 designer, part-time PM, and optional QA support during launch.

Phase 1: MVP Foundation · Weeks 1-3

  • Next.js project scaffold with Tailwind, TypeScript, and App Router.
  • Supabase schema, RLS policies, auth, storage buckets, and seed settings.
  • Public landing page, portfolio preview, course preview, and template preview.
  • Basic admin shell and reusable media preview component.

Phase 2: Commerce and Access · Weeks 4-6

  • Package catalog, entitlement logic, and locked access routing.
  • Checkout flow with manual transfer and transaction creation.
  • Admin transaction review flow with confirm and reject actions.
  • Dashboard with owned packages, status history, and sign-out.

Phase 3: Learning and Payments · Weeks 7-9

  • Course detail page, lesson player, module accordion, and progress tracking.
  • Certificate generation flow using html2canvas and jsPDF.
  • iPaymu server integration, callback endpoint, and payment status refresh.
  • Performance polish, loading states, and reduced-motion support.

Phase 4: Launch Hardening · Weeks 10-11

  • Expanded CRUD for courses, templates, portfolio, packages, modules, and materials.
  • Site settings editor for branding, payment info, WhatsApp links, and QRIS URL.
  • Analytics events, rate limiting, validation hardening, and production deployment.
  • README, .env.example, GitHub-ready repo structure, and Vercel launch checklist.

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

Build a full-stack web app called Muzire Motion for a personal motion design brand. Use Next.js App Router, TypeScript, Tailwind CSS, Supabase (Postgres, Auth, RLS, Storage), Vercel, and Framer Motion. Create a dark minimal motion.dev-inspired UI with Mozilla Headline for headings, Inter for body, and JetBrains Mono for metadata tags. Support mobile-first responsive design and prefers-reduced-motion.

Core features:
1. Landing page with hero, placeholder Hero3DCube component, CTA buttons for Lihat Course and Lihat Template, portfolio marquee slider with image or video previews, course explanation with first 3 modules expanded, template marketplace preview, and WhatsApp community CTA.
2. Shared MediaPreview component that accepts image or video URLs and is reused across portfolio, templates, and courses.
3. Course detail page with cover media, description, price/package requirement, and accordion modules with lessons.
4. Course player page with embedded video lesson playback, sidebar lesson list, mark-as-completed controls, progress bar stored in user_course_progress, and a client-side certificate download button unlocked at 100 percent using html2canvas and jsPDF from an HTML certificate template.
5. Template marketplace with free/premium filters and locked access handling.
6. Portfolio gallery page filtered by Guru or Murid.
7. User dashboard showing profile, owned packages, unlocked links, transaction history, and sign out.
8. Package selection and checkout flow with transaction IDs, manual transfer confirmation via WhatsApp, and iPaymu payment mode using server-side API routes or server actions.
9. Admin dashboard at /dashboard/admin restricted to profiles.role = admin, with CRUD for portfolio items, templates, courses, modules, materials, packages, transaction moderation, and editable site_settings.

Data model in Supabase:
profiles(id, email, username, role, created_at)
courses
modules
materials
templates
portfolio_items
packages
package_items
user_packages
transactions(id as 6-digit unique code, user_id, package_id(s), total_price, payment_method, status, ipaymu_reference_id, created_at, confirmed_by, confirmed_at)
user_course_progress
site_settings

Requirements:
- Enable RLS on all tables with explicit policies for public read, owner-only user data, and admin-only writes.
- Use Supabase Auth with email/password and Google OAuth.
- Use Supabase Storage buckets named thumbnails, portfolio-images, and site-assets for images only.
- Never upload videos; store only YouTube or Vimeo URLs.
- Use server-side env vars for IPAYMU_VA, IPAYMU_API_KEY, and IPAYMU_MODE.
- Implement iPaymu payment creation and callback verification on the server only.
- Validate all forms with Zod and sanitize text input.
- Add rate limiting to transaction creation and manual payment submission.
- Provide a README, .env.example, GitHub-ready folder structure, and production-ready setup for Vercel.

Build the full scaffold, database migrations, key pages, reusable components, access control, and admin workflows with clean code and realistic sample data.

Business Idea

# Prompt: Build "Muzire Motion" Web Platform ## Project Overview Build a full-stack web application called **Muzire Motion** — a personal brand platform for a self-taught motion designer who creates content using only a smartphone and the app **Alight Motion**. The platform sells **online courses**, **Alight Motion project templates**, and **Alight Motion Premium accounts**. ## Tech Stack (mandatory) - **Frontend**: Next.js (App Router) + TypeScript + Tailwind CSS - **Backend & Database**: Supabase (Postgres + Auth + Row Level Security + Storage for images only, videos via embed) - **Auth**: Supabase Auth — Email/Password + Google OAuth - **Hosting/Deploy**: Vercel - **Version Control**: GitHub (init repo, proper `.gitignore`, `.env.example`) - **PDF Certificate Generation**: Client-side using `html2canvas` + `jsPDF`, rendered from an HTML certificate template - **Media Embeds**: Image URLs and YouTube/Vimeo video URLs both supported (store only the URL in DB, no video file uploads) - **Image Uploads**: Supabase Storage (buckets: `thumbnails`, `portfolio-images`, `site-assets`) - **Animation**: Framer Motion (`framer-motion`) for all text/card motion and page transitions - **Payment Gateway**: iPaymu API (server-side integration, credentials provided separately) ## Design System - **Style Reference**: Follow the visual style of **motion.dev** (Motion animation library website) — a clean, minimal, dark "developer-tool" aesthetic rather than brutalism: generous whitespace, sharp/minimal corners (little to no border-radius, or very subtle), thin 1px borders instead of thick blocky ones, restrained use of color (mostly monochrome dark/white with color used sparingly as accent highlights on interactive elements), small monospace-style labels/tags for metadata (e.g. category, price, duration), subtle grid/dot background patterns, and content organized in clean structured sections with lots of breathing room rather than dense color-blocked cards - **Theme**: Dark mode - **Color Palette**: Base dark background (near-black), white/light gray text, with `#cae619` (lime) and `#3519e6` (blue) used as accent highlights (buttons, active states, links, glow/highlight effects) — add magenta/pink or white as additional accents if needed, but keep the overall palette restrained and let dark + accent contrast do the work - **Typography**: Headlines use **Mozilla Headline** (Google Fonts) — bold/black weight, oversized; body text uses a clean sans-serif (e.g. Inter); small monospace font (e.g. JetBrains Mono) for tags/labels/metadata, matching motion.dev's technical feel - Mobile-first and fully responsive ## Motion & Animation Every text element and card should have subtle intentional motion — fade/slide-in on scroll, hover/tap scale micro-interactions, animated marquee for portfolio slider, animated progress bar, skeleton loading. Use Framer Motion. Respect `prefers-reduced-motion` and keep animations lightweight for mobile performance. ## Landing Page ### 1. Hero Section - Includes a pre-built interactive **3D cube (HTML/CSS/JS)** as a decorative element — reserve a placeholder component `<Hero3DCube />` where this custom code will be inserted later - Brand tagline: motion design created entirely from a smartphone using Alight Motion - CTA buttons: "Lihat Course" and "Lihat Template" ### 2. Portfolio Showcase (Landing) - Horizontal auto-loop marquee slider (infinite scroll/carousel, pauses on hover/touch) of portfolio card thumbnails, animated card entrance on scroll - Each card supports either a **static image URL** (Supabase Storage or external image URL) **or an embedded video URL** (YouTube/Vimeo) — build a shared `<MediaPreview src={url} type="image" | "video" />` component used everywhere media is shown (portfolio, templates, course cover) - Two sub-sections: **Karya Guru (Teacher)** and **Karya Murid (Student)** ### 3. Course Explanation Section - Overview of what the course teaches - List of modules, and for the **first 3 modules only**, show detailed material breakdown (lesson titles inside each module) - Remaining modules shown as locked/preview only ("+X materi lainnya") ### 4. Template Marketplace Preview - Grid layout showing template cards - Each card thumbnail supports **image or video preview** - "Lihat Semua Template" button linking to full marketplace page ### 5. Community CTA - Prominent button: "Gabung Komunitas WhatsApp Gratis" linking to a WhatsApp group URL (configurable from Admin Panel, default admin contact: `wa.me/6287810324253`) ## Course Page & Learning Flow ### Course Detail Page - Cover thumbnail/preview (image or embedded video) - Title, description, price/package requirement - Modules displayed as expandable folders (accordion), each containing a list of materials/lessons ### Course Player Page - Video player (embed) for lesson content - Sidebar with module/material list, mark lessons as completed - **Progress bar** (0–100%) tracked per user per course in Supabase (`user_course_progress` table) - When progress reaches 100%: unlock **"Download Sertifikat PDF"** button - Certificate generated client-side by injecting user name + course name + date into a provided HTML certificate template, rendered to canvas via `html2canvas`, then exported to PDF via `jsPDF` ## Template Marketplace Page - Filter: **Gratis** / **Premium** - Each template card: category tag, title, short description, thumbnail (image/video), "Gunakan Template" button - If premium and user lacks access → redirect to package selection page - If free or user has access → button links to external download/asset link ## Portfolio Page (Full Gallery) - Filter by **Guru** / **Murid** - Each item: category, title, creator name, thumbnail (image/video embed) ## User Dashboard - Display username/email - **List of owned packages**, each with a button linking directly to the course or template pages it unlocks - **Transaction status** list (Pending / Confirmed / Rejected) with transaction ID and date - Sign Out button ## Package & Access System ### Data Model (Supabase) - `packages` table: name, description, price, discount_price (nullable), is_discount_active - `package_items` table: links a package to specific `course_id`(s) and/or `template_id`(s) — OR a boolean flag `unlock_all_courses` / `unlock_all_templates` for "all-access" packages - `user_packages` table: user_id, package_id, status (active/expired), granted_at - `transactions` table: id (6-digit random code, unique), user_id, package_id(s), total_price, `payment_method` (manual/ipaymu), status (pending/confirmed/rejected/failed), `ipaymu_reference_id` (nullable), created_at, confirmed_by (admin, nullable for ipaymu auto-confirm), confirmed_at ### Access Logic - Middleware/hook checks whether the logged-in user's active packages grant access to a given `course_id` or `template_id` (either via direct link or `unlock_all_*` flag) - Discounted packages: display a **"Diskon"** badge on any course/template card that is included in an active discounted package ## Order & Checkout Flow 1. User tries to access a locked course/template → redirected to **Package Selection Page** showing all available packages with prices (discount price shown with strikethrough on original price if applicable) 2. If user already owns a package that unlocks it → show **direct access/checkout button** instead 3. User selects a package → clicks **Checkout** → redirected to **Payment Page** ### Payment Page — Dual Mode - Auto-generated **6-digit random Transaction ID** - Summary: selected package(s) + total price - User chooses one of two payment methods via a toggle/tab (animated switch): **Mode 1 — Manual Transfer** - Step-by-step payment instructions (numbered list) - Payment info: Bank Transfer (account name/number), E-Wallet (OVO/DANA/GoPay), QRIS — all stored as text/URL fields in `site_settings` and editable via Admin Panel (QRIS is an **image embed URL**, not a file upload — admin pastes the QRIS image link and it renders via `<img src>` on the payment page) - **"Saya Sudah Membayar"** button → creates a `transactions` row with `payment_method: 'manual'`, `status: 'pending'`, then opens WhatsApp to `wa.me/6287810324253` (admin contact, configurable via Admin Panel) pre-filled with a message containing the Transaction ID for manual confirmation - Admin manually confirms in Admin Panel → status becomes `confirmed` → access auto-granted **Mode 2 — iPaymu (Payment Gateway)** - On selecting this mode and clicking **"Bayar Sekarang"**, call a Next.js server action/API route that hits the **iPaymu Create Payment API** to generate a payment redirect URL (supports VA, e-wallet, QRIS, credit card — whatever channels iPaymu returns) - Create the `transactions` row first with `payment_method: 'ipaymu'`, `status: 'pending'`, storing the iPaymu `sessionID`/reference ID - Redirect user to the iPaymu-hosted payment page - Handle **iPaymu callback/webhook** (`/api/ipaymu/callback`) — verify the signature, then update the matching `transactions` row to `confirmed` or `failed` based on the callback status; on `confirmed`, auto-create the `user_packages` row to grant access (no manual admin step needed for this mode) - Add a "Cek Status Pembayaran" polling/refresh button on the payment page in case the webhook is delayed - Store iPaymu credentials (`IPAYMU_VA`, `IPAYMU_API_KEY`, `IPAYMU_MODE=sandbox|production`) strictly as server-side environment variables — never expose in client code - Reference iPaymu's official API documentation for the exact request/signature format (`generateSignature` using HMAC SHA256) when implementing Both modes write to the same `transactions` table (with a `payment_method` column) so the Admin Panel transaction list shows all orders regardless of method. ## Admin Panel - Route: `/dashboard/admin`, accessible only to users with `role = 'admin'` in Supabase `profiles` table (role must be set manually via Supabase dashboard — no self-signup as admin, for security) - Protect route with server-side role check (middleware + RLS policy) ### Admin Capabilities - **CRUD**: Portfolio items, Templates, Courses (with modules & materials nested CRUD), Packages - **Transactions**: view pending transactions, manually mark as `confirmed` or `rejected` → on confirm, auto-create `user_packages` row to grant access - **Site Content Management**: edit site name, logo/icon, social media links, WhatsApp community link, WhatsApp admin contact number (default `wa.me/6287810324253`, used for both community button and payment confirmation), hero text, and **payment info** — bank account name/number, e-wallet numbers, and **QRIS as an embed image URL** (admin pastes a link, no file upload) — all stored in `site_settings` and reflected immediately on the Payment Page ## Database Schema Requirements Design normalized Supabase Postgres tables with proper foreign keys and Row Level Security (RLS) policies: - `profiles` (id, email, username, role, created_at) - `courses`, `modules`, `materials` - `templates` - `portfolio_items` - `packages`, `package_items`, `user_packages` - `transactions` - `user_course_progress` - `site_settings` (key-value config for editable site content) ## Security & Best Practices - Enable RLS on all tables; write explicit policies per role (public read for content, owner-only for user data, admin-only for CRUD/write) - Never expose Supabase service role key on client — use it only in server actions/API routes - Validate all forms server-side (zod schema validation) in addition to client-side - Sanitize any user-generated text fields - Store secrets in Vercel environment variables, never commit `.env` - Rate-limit the "Sudah Membayar" action to prevent spam transaction creation ## Performance & Optimization - Use Next.js Image component for all Supabase Storage images - Lazy-load video embeds (only load iframe on interaction/visibility) - Paginate/infinite-scroll long lists (templates, portfolio, transactions) - Cache public content (courses, templates, portfolio) with ISR or Supabase edge caching ## Deliverables Expected from Replit AI 1. Initialized Next.js + TypeScript + Tailwind project 2. Supabase schema (SQL migration file) with RLS policies 3. Full folder structure with all pages/components listed above 4. `.env.example` with required Supabase keys plus `IPAYMU_VA`, `IPAYMU_API_KEY`, `IPAYMU_MODE` 5. GitHub-ready repo structure with README explaining setup & deployment to Vercel

Make My PRD

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