01. Pengenalan Proyek

Ringkasan

Selamat datang di T3 Stack Single-App Boilerplate — fondasi aplikasi web siap produksi dan berstandar enterprise yang dirancang khusus untuk memotong pekerjaan setup berulang pada aplikasi tunggal (Single-Tenant), Dasbor Admin, CRM, portal internal perusahaan, serta aplikasi berbasis AI.

Dibangun di atas Next.js 15 (App Router), tRPC v11, Prisma ORM, NextAuth.js, dan Tailwind CSS, boilerplate ini menyediakan modul infrastruktur yang sudah dikonfigurasi langsung, meliputi Otentikasi, Dynamic RBAC, Payment Gateways (Midtrans & Stripe), Multi-Provider Cloud Storage (R2/Supabase/Cloudinary), Multi-LLM AI Adapters, Live Theme Builder, Cookie-based i18n, Rate Limiting Keamanan, Log Aktivitas Audit Trail, dan Manajemen SEO.

Cara Kerja

Arsitektur aplikasi ini mengikuti filosofi T3 Stack: keamanan tipe data (*end-to-end type safety*) penuh dari layer database MySQL hingga ke komponen tampilan client.

mermaid

graph TD
    Client["Client (Browser / React 19)"] -->|Query & Mutasi Type-Safe| tRPC["Server Router tRPC v11"]
    tRPC -->|RBAC Guard & Rate Limiter| Middleware["Middleware & Pengaman Keamanan"]
    Middleware -->|Prisma Client| DB[("Database MySQL")]
    tRPC -->|Adapter Pihak Ketiga| External["Midtrans / Stripe / R2 / Gemini / Groq"]

Sorotan Arsitektur Utama

Desain Utama Server: Mengutamakan React Server Components (RSC) Next.js 15 dan rute App Router untuk performa tinggi serta kemudahan indeksasi SEO.

Layer API Terpadu: Kontrak RPC berbasis tipe data otomatis powered by tRPC v11 tanpa perlu membuat endpoint REST atau definisi tipe manual.

Keamanan Granular: RBAC guard berbasis konteks yang mengecek peran pengguna secara otomatis di database Prisma sebelum mengeksekusi aksi sensitif.

Konfigurasi

Aplikasi membutuhkan konfigurasi awal environment variables (DATABASE_URL, NEXTAUTH_SECRET) dan inisialisasi basis data (prisma db push atau prisma db seed).

Kategori Pengaturan	Lokasi Konfigurasi	Pengaturan Utama
Database	`.env`	`DATABASE_URL="mysql://user:pass@host:3306/db"`
Otentikasi	`src/server/auth/config.ts`	Credentials Provider & Google OAuth
App Settings	Admin GUI (`/settings`)	Nama Aplikasi, Logo URL, Landing Page Toggle
Sistem Tema	Admin GUI (`/settings/theme`)	Warna, Font, Radius Sudut, Kerapatan Layout

Cara Penggunaan

Panduan Langkah Awal

Clone atau unduh repositori proyek.

Install dependensi proyek:

bash

   pnpm install

Salin file konfigurasi environment:

bash

   cp .env.example .env

Sinkronkan skema database & jalankan seed data awal:

bash

   pnpm prisma db push
   pnpm prisma db seed

Jalankan server pengembangan lokal:

bash

   pnpm dev

Berkas Terkait

src/app/page.tsx — Blueprint halaman utama landing page

src/app/layout.tsx — Layout HTML utama, theme provider, dan analytics scripts loader

src/server/auth/config.ts — Konfigurasi otentikasi NextAuth

src/server/api/root.ts — Definisi root router tRPC

prisma/schema.prisma — Definisi skema model database

Tabel Database Terkait

AppSettings — Pengaturan global aplikasi dan sakelar fitur

User — Data pengguna dan penyimpan kredensial

Role & Permission — Tabel matriks peran dan izin hak akses (RBAC)

Catatan & Petunjuk

NOTE

Boilerplate ini dikonfigurasi sebagai fondasi Single-App (Single-Tenant). Sangat ideal untuk proyek internal perusahaan, aplikasi klien white-label, atau SaaS produk tunggal.

TIP

Jalankan perintah pnpm typecheck kapan saja untuk memverifikasi bahwa perubahan Anda mempertahankan 100% keamanan tipe data TypeScript di seluruh layer.