🚀 SvelteKit 5 StarterKit

Production-ready starter kit untuk aplikasi web berbasis SvelteKit 5 dengan Runes. Template lengkap yang bisa langsung dipakai sebagai fondasi proyek baru.

✨ Features

• 🔐 Authentication — Register, Login, Logout, Forgot Password (Lucia v3 + Argon2id)
• 🛡️ Role-Based Access Control (RBAC) — 4 default roles: super_admin, admin, editor, viewer
• 🎨 Theme Manager — 5 color presets, Dark/Light/System mode, persist di localStorage
• ⚙️ Web Settings Manager — App name, logo, maintenance mode, SEO meta
• 👥 User Management — CRUD users, assign roles, search & filter
• 📊 Dashboard — Analytics widgets, recent activity
• 📱 Multi-Device — Responsive sidebar (desktop) / drawer (mobile)
• 🧩 Custom UI Components — Button, Input, Modal, Toast, Card, Badge, Avatar, DataTable

🛠 Tech Stack

Layer	Technology
Framework	SvelteKit 5 (Runes)
Language	TypeScript
Styling	Tailwind CSS v4 + CSS Variables
Database	SQLite (default) / MySQL / PostgreSQL
ORM	Drizzle ORM
Auth	Lucia v3 + Oslo
UI	Custom components (shadcn-inspired)

🏁 Quick Start

1. Clone & Install

git clone <this-repo>
cd SvelteKit_StarterWeb
npm install

2. Setup Environment

cp .env.example .env
# Edit .env sesuai kebutuhan

3. Run Dev Server

npm run dev

Database akan otomatis di-seed pada request pertama.

4. Default Login

Email:    [email protected]
Password: admin123

📁 Folder Structure

src/
├── lib/
│   ├── components/
│   │   ├── ui/          # Button, Input, Modal, Toast, Card, Badge, Avatar
│   │   ├── layout/      # Sidebar, Navbar, PageHeader
│   │   └── auth/        # PermissionGuard
│   ├── stores/          # Rune-based: theme, toast, sidebar, device
│   ├── server/
│   │   ├── auth.ts      # Session management, password hashing
│   │   ├── db/          # Drizzle ORM + Schema
│   │   ├── permissions.ts
│   │   ├── email.ts     # Stub (replace with real service)
│   │   └── seed.ts      # Auto-seed default data
│   ├── utils/           # Client-side permission checks
│   └── types/           # TypeScript type definitions
├── routes/
│   ├── (auth)/          # Login, Register, Forgot Password
│   ├── (app)/           # Protected: Dashboard, Profile, Settings, Admin
│   └── logout/
└── hooks.server.ts      # Session validation + auto-seed

🎨 Theme Customization

Ganti Preset

Buka /settings/theme → pilih warna preset → selesai.

Custom CSS Variables

Edit src/app.css:

:root {
  --color-primary: 220 90% 56%;      /* HSL values */
  --color-secondary: 260 60% 55%;
  --color-accent: 170 70% 45%;
}

Tambah Preset Baru

Edit src/lib/stores/theme.svelte.ts:

export const themePresets = [
  // ... existing presets
  {
    id: 'my-theme',
    name: 'My Custom Theme',
    colors: {
      primary: '180 80% 45%',
      primaryHover: '180 80% 38%',
      // ...
    }
  }
];

🛡️ Permission System

Server-side Check

// Di +page.server.ts atau +server.ts
import { hasPermission } from '$lib/server/permissions';

const canDelete = await hasPermission(userId, 'users:delete');

Client-side Guard

<script>
  import PermissionGuard from '$lib/components/auth/PermissionGuard.svelte';
</script>

<PermissionGuard requires="users:delete" userPermissions={data.permissions}>
  <button>Delete User</button>
</PermissionGuard>

Default Roles

Role	Permissions
super_admin	ALL
admin	users (CRU), settings (RU), dashboard, profile
editor	users (R), dashboard, profile
viewer	dashboard, profile

🗄️ Database Switch

SQLite (Default - Development)

DATABASE_URL=./data/app.db

MySQL (Shared Hosting)

npm install mysql2
npm install drizzle-orm/mysql-core

Update src/lib/server/db/index.ts dengan MySQL adapter.

PostgreSQL (Dedicated Server)

npm install pg
npm install drizzle-orm/pg-core

Update src/lib/server/db/index.ts dengan PostgreSQL adapter.

Schema Drizzle tetap sama — hanya adapter yang berubah.

📋 Extending the Starter

Tambah Page Baru

1. Buat folder di src/routes/(app)/your-page/
2. Tambah +page.svelte dan +page.server.ts (jika butuh server logic)
3. Tambah nav item di src/routes/(app)/+layout.svelte

Tambah Permission Baru

1. Edit DEFAULT_PERMISSIONS di src/lib/server/seed.ts
2. Edit DEFAULT_ROLES untuk assign permission ke role
3. Hapus file database → restart → auto-seed ulang

Ganti Email Provider

Edit src/lib/server/email.ts — replace sendEmail() dengan implementasi Nodemailer/Resend/SendGrid.

📄 License

MIT — Free to use for any project.