🪁 LayangKitEdge-First Starter

🪁 Apa itu LayangKit? ​

LayangKit adalah starter template full-stack untuk membangun aplikasi web modern dengan cepat.

Masalah yang Diselesaikan ​

🔄 Cara Kerja LayangKit ​

Terdapat 3 cara menggunakan LayangKit, pilih yang sesuai kebutuhanmu:

Cara 1: Manual Development ​

Setup → Coding → Deploy
  ↓       ↓        ↓
10m    Bebas    10m

Kamu kontrol penuh. Cocok untuk yang suka coding sendiri.

Cara 2: AI Agent Workflow (Recommended ⭐) ​

INIT_AGENT → TASK_AGENT → MANAGER_AGENT
    ↓            ↓             ↓
 Setup     Build Fitur    Manage Change
Project     Otomatis       & Update Docs

Biarkan AI Agents yang kerja. Kamu fokus pada bisnis logic.

Cara 3: Hybrid ​

INIT_AGENT → Manual Coding → TASK_AGENT
    ↓             ↓             ↓
 Setup       Fitur Core    Fitur Tambahan

Setup otomatis, coding manual untuk yang penting, AI untuk sisanya.

✨ Fitur Sudah Termasuk ​

Tidak perlu install apa-apa lagi. Semua sudah siap:

🔐 Authentication (Built-in) ​

• ✅ Register/Login dengan email/password (PBKDF2 hashing)
• ✅ Google OAuth — Login dengan Google
• ✅ Email Verification — Via Resend
• ✅ Password Reset — Complete forgot/reset flow
• ✅ Session Management — HTTP-only cookies dengan Lucia Auth

📁 File Uploads ​

• ✅ Avatar Upload — Auto convert WebP
• ✅ Presigned URLs — Upload langsung ke R2
• ✅ CDN Delivery — Via Cloudflare edge

🎨 UI/UX ​

• ✅ Dark Elegance Theme — Tailwind CSS 4
• ✅ Responsive — Mobile-first design
• ✅ Form Validation — Zod 4.x validation

🛠️ Tech Stack ​

Stack modern yang dipilih dengan cermat untuk produktivitas maksimal:

┌────────────────────────────────────────────────────────────┐
│  Frontend                                                  │
│  ├── SvelteKit 2.x    → Full-stack framework              │
│  ├── Svelte 5         → UI dengan Runes ($state)           │
│  └── Tailwind CSS 4   → CSS-first styling                  │
├────────────────────────────────────────────────────────────┤
│  Backend                                                   │
│  ├── Cloudflare D1    → SQLite at edge (zero setup)        │
│  ├── Drizzle ORM 0.40 → Type-safe SQL                      │
│  └── Lucia Auth       → Session-based auth                 │
├────────────────────────────────────────────────────────────┤
│  Services                                                  │
│  ├── Cloudflare Pages → Edge deployment                    │
│  ├── Cloudflare R2    → File storage                       │
│  └── Resend           → Email delivery                     │
└────────────────────────────────────────────────────────────┘

💰 100% Gratis untuk Project Kecil-Menengah ​

Semua layanan punya free tier yang sangat besar:

Bottom line: Untuk startup, portfolio, side project — ini GRATIS TOTAL dengan limit yang sangat longgar.

🚀 Quick Start (Benar-benar 5 Menit) ​

# 1. Create project dengan npm (lebih cepat!)
npm create layang@latest my-app
cd my-app

# 2. Buat database (satu command)
npx wrangler d1 create my-app-db
# Copy database_id ke wrangler.toml

# 3. Jalankan
npm run db:migrate:local
npm run dev

💡 Baru! Sekarang install lebih mudah dengan npm create layang. Tidak perlu git clone manual!

🎉 Buka http://localhost:5173 — Auth, database, semua berfungsi.

🎯 Pilih Jalurmu ​

🏃 Path A: Cepat Saja (1 jam) ​

Mau langsung punya aplikasi yang jalan?

Getting Started → Build Manual → Deploy
     10m              40m         10m

Lihat Getting Started →

🤖 Path B: AI-Native Development (Recommended) ​

Biarkan AI yang kerja, kamu fokus bisnis logic.

INIT_AGENT (20m) → TASK_AGENT (∞) → Deploy (10m)
  Setup Project    Build Otomatis    Live di Edge

Pelajari AI Agent Workflow →

📚 Path C: Pelajari Dulu (3 jam) ​

Mau paham setiap komponen sebelum coding?

Getting Started → Development Flow → Architecture
     10m              20m              30m

AI Workflow → Deploy
   15m        10m

Mulai dari Getting Started →

📚 Navigasi Dokumentasi ​

Troubleshooting ​

• Database Issues
• Authentication Issues
• Deployment Issues

👉 Langkah Selanjutnya ​

Pilih salah satu untuk memulai:

🔗 Referensi Eksternal ​

• SvelteKit Docs — Framework documentation
• Svelte 5 Runes — Reactive system
• Drizzle ORM — Database ORM
• Cloudflare D1 — Edge database
• Lucia Auth — Authentication
• Tailwind CSS v4 — Styling

Dari zero ke production dalam 5 menit — 100% gratis, 300+ edge locations 🚀

Mulai Sekarang →