Next.js Premium Full-Stack E-Commerce Script with Midtrans & Supabase

Welcome to the ultimate, production-ready Full-Stack Next.js E-Commerce solution! Built with modern web development standards using the Next.js App Router, this script delivers lightning-fast performance, premium glassmorphism visuals, and complete responsiveness across all mobile devices and tablets.
It comes fully integrated with Midtrans Payment Gateway (with automated webhook status updates) and Supabase (PostgreSQL), making it the perfect turnkey solution for launching an online store or selling directly to your development clients!

## Key Features & Functionalities

1. Customer Portal & Premium Shopping Experience

• Dynamic Product Catalog: Clean grid layout with instant live search and robust product filtering by shopping category.
• 100% SEO Optimized & Googlebot Ready: Automatically generates dynamic server-side metadata (Title, Description, OpenGraph, Canonical URLs). It embeds JSON-LD Schema.org structured data (Product, CollectionPage, ItemList) for rich search snippets and provides automated dynamic sitemap.xml and static robots.txt architectures.
• Advanced Shopping Cart & Checkout: Add/remove items with real-time PostgreSQL database sync and automated live stock validation during checkout.
• Address Book Management: Customers can save multiple shipping addresses and easily configure a default primary address.
• Midtrans Payment Gateway (Snap Pop-up): Supports automated billing and payment pop-ups via Bank Transfers/Virtual Accounts, E-Wallets (GoPay, ShopeePay), Credit Cards, and Retail Stores (Alfamart, Indomaret).
• Order Tracking System: Users can monitor their order status through structural pipelines: PENDING, PAID, PROCESSING, SHIPPED (with tracking number), and DELIVERED.
• Review & Rating System: Customers can submit 1-5 star ratings and reviews, thoroughly sanitized via server-side XSS security walls.

2. Powerful Administrator Control Panel

• Advanced Sales Analytics: Features interactive, high-performance custom SVG charts (no bloated external charting libraries) with toggles for This Month, This Year, and All Time.
• Global Real-Time Metrics: Instantly tracks Total Revenue, Transaction Volume, and Average Order Value (AOV) with dynamic tooltips.
• Product & Category Management: Seamlessly handle SKUs, weights (in grams), comparison strike-through pricing, and multi-image uploads synced to Supabase Storage.
• Order Fulfillment: Direct management of buyer transactions and one-click shipping courier tracking number inputs.
• User Management & Permanent Cascade Delete: Modify user roles dynamically. The Admin can permanently delete accounts; the script automatically cascades and completely erases associated Midtrans logs, addresses, carts, and reviews without breaking foreign key constraints.

3. Bulletproof Production Security

• Separated Portals & NextAuth.js: Powered by fast NextAuth JWT strategies. Admin accounts are strictly locked to /admin/login and barred from regular customer logins, and vice versa.
• Bot Protection & Brute-Force Rate Limiting: The login flow is protected by Google reCAPTCHA v2. Strict client-IP rate limiters block suspicious automated attempts within 29 milliseconds.
• Account Enumeration Mitigation: Generic error messages ("The email or password you entered is incorrect.") prevent hackers from mapping registered emails.
• Content Security Policy (CSP): Strict configuration rules inside next.config.js ensure only trusted scripts (Google, Supabase, Midtrans) execute.
• Automated SMTP Webhook Notifications: Fires interactive HTML invoice emails upon successful payments (PAID) and notifies customers if payment windows lapse (EXPIRED/CANCELLED), automatically restoring the product stocks to the digital shelves.

## Core Technical Stack

• Framework: Next.js (App Router)
• Styling: Tailwind CSS & Shadcn/UI
• Database: PostgreSQL via Supabase
• ORM: Prisma Client
• Authentication: NextAuth.js
• Payment Engine: Midtrans SDK (Snap & Server Webhooks)
• Mailing Protocol: Nodemailer (SMTP)

## What's Included in the Package?

• Full Next.js Project Source Code (Clean & Highly Modular Architecture)
• Prisma Schema and Database Seed Files (npm run db:seed configures an instant admin testing account)
• Comprehensive Step-by-Step Setup & Installation Guide (Local and Vercel Deployment)
• Source Code License Agreement

Note to Buyers: This code is sold under a Commercial Single-Use License. Uploading this code to a public repository (GitHub/GitLab) is strictly prohibited—always utilize private repositories.

Key Features & Functionalities

• Next.js App Router Architecture: Built using the latest Next.js development standards for blistering performance, rapid server-side rendering, and production-grade code optimization.
• Premium Responsive UI: Implements a modern, visually striking glassmorphism design with fluid transitions and vibrant accent palettes that are 100% responsive across smartphones, tablets, and desktops.
• Midtrans Payment Gateway Integration: Native integration with the Midtrans Snap pop-up interface, allowing customers to easily checkout using Virtual Accounts, GoPay, ShopeePay, Credit Cards, or retail stores like Alfamart and Indomaret.
• Automated Payment Webhooks: Built with a secure server-to-server webhook system that updates order statuses automatically to PAID, EXPIRED, or CANCELLED in real-time right after transaction completions.
• Supabase PostgreSQL & Prisma ORM: Utilizes a reliable cloud database ecosystem through Supabase combined with type-safe query parameters driven by the Prisma Client engine.
• 100% Core SEO Optimization: Features an automatic dynamic metadata generator combined with structured JSON-LD Schema.org rich snippets (Product, CollectionPage, and ItemList) to rank higher on Google search results.
• Dynamic Sitemap & Robots Architecture: Fully automated dynamic sitemap.xml and static robots.txt rendering pipelines to guarantee efficient search engine bot crawling.
• Advanced Admin Dashboard: Includes custom high-performance sales trend analytical graphs using native SVG curve drawings instead of heavy, slow external third-party charting libraries.
• Global Real-Time Business Analytics: Administrators can immediately track critical operational metrics such as Total Net Revenue, overall Transaction Volume, and Average Order Value (AOV) via interactive tooltips.
• Comprehensive Address Book Management: Empowers standard customers to register multiple shipping destinations and easily specify an active "Primary / Default Address".
• Visual Password Strength Indicator: Registration form embeds an interactive password validator requiring combinations of cases, numerals, and special characters before allowing sign-ups.
• Google reCAPTCHA v2 Integration: Secure bot protection on authentication screens utilizing the popular "I'm not a robot" checkbox, validated strictly via backend API calls.
• Brute-Force Rate Limiting Shield: Client-IP frequency limiting configurations intercept and isolate suspicious, hyper-repetitive login or review submissions within 29 milliseconds.
• Strict Authentication Separation: Powered by fast NextAuth.js JWT token keys. Back-office administrative accounts are locked to /admin/login and blocked from regular customer areas, and vice versa.
• Permanent Cascade Account Deletion: Admin panel lets you safely remove user profiles; system automatically cleans associated order histories, cart files, address records, and reviews without violating database constraints.
• Automated SMTP Mail Notifications: Automatically dispatches clean HTML invoices upon payment verifications, and dispatches automated stock restoration notices to the digital shelves if payment windows expire.
• Rapid Database Seeding Script: Comes equipped with ready-to-run database seeds (npm run db:seed) to generate an instant operational admin testing profile and mock storefront inventories.

System & Software Requirements

1. Local Development Environment

• Node.js: Version 18.x or higher (Latest LTS version is highly recommended for optimal performance).
• Package Manager: npm (bundled automatically with Node.js installation) or alternative package managers like yarn / pnpm to manage project dependencies.
• Text Editor / IDE: Visual Studio Code (VS Code) is strongly recommended for full JavaScript and TypeScript IntelliSense support.
• Operating System: Compatible with Windows 10/11, macOS, or modern Linux distributions (e.g., Ubuntu/Debian).

2. Database & Cloud Services

• Database Engine: PostgreSQL compatible database.
• Database Hosting: A free-tier cloud account on Supabase is highly recommended to host your remote PostgreSQL database and manage media assets seamlessly via Supabase Storage.

3. Third-Party API Accounts & Credentials

To fully unlock and execute the production-grade features of this script, you will need to register for the following free or commercial provider credentials (all step-by-step processes are fully covered in the setup guide):

• Payment Gateway: A Midtrans merchant account (supports both Sandbox environment for safe testing simulation and Live/Production environment for receiving real monetary transactions).
• Bot Security: A Google reCAPTCHA v2 admin key configuration (Site Key and Secret Key) to secure your login forms from automated spam.
• Email Dispatch (SMTP): Access to an active SMTP server provider (such as Gmail SMTP, Mailtrap for local sandbox simulation, Brevo, or Mailgun) to dispatch automated HTML invoices and unique user verification tokens.
• Social Authentication (Optional): A Google Cloud Console account to configure OAuth 2.0 Client Credentials if you want to enable instant single sign-on via Gmail for your customers.

4. Production Deployment Hosting

• Vercel Account: A free or team account on Vercel is highly recommended for instant, frictionless, and zero-configuration hosting deployment of this modern Next.js App Router codebase.

Quick Setup Guide

A detailed step-by-step setup guide document is included in the package. Here is a quick summary to get your application running:

1. Install Dependencies: Extract the project zip, open your terminal in the root folder, and run:

   <code>npm install</code>
   

2. Database Setup: Create a free Supabase (PostgreSQL) project and copy the connection strings from Project Settings > Database.
3. Environment Configuration: Duplicate .env.example to .env and fill in your Supabase database URLs, a random 32-character NEXTAUTH_SECRET, and local host URLs.
4. Push Schema & Seed Data: Run these commands to build database tables and instantly generate sample products alongside a working admin account:

   <code>npx prisma db push
   npm run db:seed</code>
   

   (Admin Credential: [email protected] | Password: Admin@12345)

5. Configure Payment Gateway: Add your Midtrans Sandbox/Production API keys to your .env file. Set your Payment Notification URL in the Midtrans dashboard configuration to:
   https://[YOUR_DOMAIN]/api/webhook/midtrans
6. Setup Security & Mail: Add your Google reCAPTCHA v2 keys and your provider's SMTP credentials to activate secure bot-protected logins and automated HTML email invoices.
7. Run Locally: Launch the development server using:

   <code>npm run dev</code>
   

   Access the store front at http://localhost:3000 and the management control panel at /admin.

8. Production Deployment: Push the codebase to a private GitHub repository and import it into Vercel. Copy all .env variables into Vercel's environment variables tab and hit deploy!