Vibe Coding SDLC Bible Part 2: Design & Architecture

Daftar Isi — Part 2: Design & Architecture

Mengapa Design Dulu? — Code tanpa design = technical debt
Database Schema (ERD) — Tabel, relasi, indeks
Prisma Schema — Type-safe database dengan ORM
API Endpoint Design — RESTful routes, request/response format
UI Wireframes dengan AI — Dari deskripsi ke visual
Component Architecture — Atomic design, reusable components
State Management — Server state vs client state
Security Architecture — Auth, authz, input validation, CORS
Architecture Decision Records — Dokumentasi keputusan
Checklist & Ringkasan

🏗

1. Mengapa Design Dulu?

Kode tanpa arsitektur = bangunan tanpa fondasi. Pasti runtuh.

Banyak developer (terutama yang baru mengenal Vibe Coding) langsung melompat ke coding: "AI bisa generate semua, kenapa repot design?" Jawabannya: AI sangat baik menghasilkan kode untuk satu file, tapi tidak bisa menjaga konsistensi arsitektur di seluruh project. Tanpa design upfront, Anda mendapat: database schema yang harus di-refactor 3x, API endpoints yang tidak konsisten, components yang duplikat, dan security holes di mana-mana. 2-3 jam design upfront menghemat 20-30 jam refactoring.

🗄

2. Database Schema Design (ERD)

Tabel, kolom, tipe data, relasi, indeks — fondasi data layer

Entity Relationship Diagram — TaskFlow

💾

3. Prisma Schema — Type-Safe Database

Schema-as-code: define database, auto-generate types, auto-migration

prisma/schema.prisma — Database Schema

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

enum Role {
  ADMIN
  MEMBER
}

enum TaskStatus {
  TODO
  IN_PROGRESS
  REVIEW
  DONE
}

model User {
  id        String    @id @default(uuid())
  email     String    @unique
  name      String
  avatarUrl String?
  role      Role      @default(MEMBER)
  teamId    String?
  team      Team?     @relation(fields: [teamId], references: [id])
  tasks     Task[]    @relation("assignee")
  timeLogs  TimeLog[]
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
}

model Team {
  id        String   @id @default(uuid())
  name      String
  ownerId   String
  members   User[]
  boards    Board[]
  createdAt DateTime @default(now())
}

model Board {
  id      String @id @default(uuid())
  name    String
  teamId  String
  team    Team   @relation(fields: [teamId], references: [id])
  columns Json   @default("[\"Todo\",\"In Progress\",\"Done\"]")
  tasks   Task[]
}

model Task {
  id          String     @id @default(uuid())
  title       String
  description String?
  status      TaskStatus @default(TODO)
  position    Int        @default(0)
  assigneeId  String?
  assignee    User?      @relation("assignee", fields: [assigneeId], references: [id])
  boardId     String
  board       Board      @relation(fields: [boardId], references: [id])
  timeLogs    TimeLog[]
  dueDate     DateTime?
  createdAt   DateTime   @default(now())
  updatedAt   DateTime   @updatedAt

  @@index([boardId, status])
  @@index([assigneeId])
}

model TimeLog {
  id        String   @id @default(uuid())
  taskId    String
  task      Task     @relation(fields: [taskId], references: [id])
  userId    String
  user      User     @relation(fields: [userId], references: [id])
  startTime DateTime @default(now())
  endTime   DateTime?
  duration  Int?     // in seconds, computed on stop

  @@index([taskId])
  @@index([userId, startTime])
}

Pro Tip: Setelah menulis schema, jalankan npx prisma generate untuk auto-generate TypeScript types. Lalu npx prisma db push untuk sync ke database. Prisma menjadi single source of truth untuk tipe data di seluruh project.

🌐

4. API Endpoint Design

RESTful routes, request/response format, error handling standard

Method	Endpoint	Description	Auth	Request Body	Response
GET	/api/boards	List boards in team	Required	-	{data: Board[]}
GET	/api/boards/[id]	Get board with tasks	Required	-	{data: Board + Task[]}
POST	/api/tasks	Create new task	Required	{title, boardId, status?}	{data: Task}
PATCH	/api/tasks/[id]	Update task (status, assignee)	Required	{status?, assigneeId?}	{data: Task}
DELETE	/api/tasks/[id]	Delete task	Admin only	-	{success: true}
POST	/api/time/start	Start timer on task	Required	{taskId}	{data: TimeLog}
POST	/api/time/stop	Stop running timer	Required	{timeLogId}	{data: TimeLog}
GET	/api/reports/weekly	Weekly summary report	Admin only	-	{data: WeeklyReport}

src/lib/api-response.ts — Standard Response Format

// Standard API response format — SEMUA endpoint pakai ini
type ApiResponse<T> = {
  data: T | null;
  error: string | null;
  meta?: {
    page?: number;
    total?: number;
    timestamp: string;
  };
};

// Success
return NextResponse.json({
  data: task,
  error: null,
  meta: { timestamp: new Date().toISOString() }
});

// Error
return NextResponse.json({
  data: null,
  error: "Task not found",
  meta: { timestamp: new Date().toISOString() }
}, { status: 404 });

🎨

5. UI Wireframes dengan AI

Dari deskripsi teks ke layout visual — tanpa Figma

Dalam Vibe Coding, Anda tidak perlu buat mockup pixel-perfect di Figma. Cukup deskripsi terstruktur dari setiap halaman yang akan dikonversi ke kode oleh AI. Yang penting: jelaskan layout, komponen, dan interaksi.

wireframes.md — Deskripsi UI per Halaman

## Page: Dashboard (/dashboard)
Layout: Sidebar (left, 240px) + Main Content (right, fluid)

Sidebar:
- Logo + app name (top)
- Navigation: Dashboard, Boards, Reports, Settings
- Team members list (avatars + online status)
- "Invite Member" button (bottom)

Main Content:
- Header: page title + user avatar dropdown (right)
- Stats cards row: Total Tasks | In Progress | Completed | Hours This Week
- Recent Activity feed (last 10 actions)
- Quick-add task form (floating action button, bottom-right)

## Page: Board View (/boards/[id])
Layout: Full-width kanban board

Header: Board name (editable) + filter dropdown + "Add Column" button
Columns: Horizontal scrollable. Each column:
  - Column header (name + task count + "+" add button)
  - Task cards (draggable): title, assignee avatar, due date, timer button
  - Drag-drop between columns updates task status
Task Card Detail: Click card opens slide-out panel:
  - Title (editable), Description (rich text), Status, Assignee
  - Time logs history, Comments (Phase 2), Subtasks (Phase 2)

🧩

6. Component Architecture

Atomic Design: atoms, molecules, organisms, templates, pages

Level	Examples	Reusability
Atoms	Button, Input, Avatar, Badge, Spinner	Used everywhere, 100% generic
Molecules	TaskCard, TimeTracker, StatCard, UserPill	Domain-specific but reusable
Organisms	KanbanColumn, Sidebar, ReportTable, TaskDetailPanel	Page sections, composed from molecules
Templates	DashboardLayout, AuthLayout, BoardLayout	Page structures without data
Pages	/dashboard, /boards/[id], /reports, /settings	Unique, data-connected

🔒

7. Security Architecture

Auth, authorization, input validation, CORS, rate limiting — bukan afterthought

Layer	Implementation	Where
Authentication	NextAuth.js v5: Google OAuth + email/password	Middleware + API routes
Authorization	Role-based: ADMIN can delete, MEMBER can edit own tasks only	API route handlers
Input Validation	Zod schemas on EVERY endpoint + form	Server Actions + API routes
SQL Injection	Prisma ORM (parameterized queries by default)	All DB queries
XSS Prevention	React default escaping + DOMPurify for rich text	All rendered content
CSRF	NextAuth built-in CSRF tokens	All mutations
Rate Limiting	100 req/min per user, 10 req/min for auth endpoints	Middleware
Headers	Helmet: X-Frame-Options, CSP, HSTS, Referrer-Policy	next.config.js
Secrets	Environment variables only. Never hardcode. .env.local gitignored.	Vercel env config

📝

8. Architecture Decision Records (ADR)

Dokumentasi MENGAPA keputusan diambil — bukan hanya APA

docs/adr/001-next-js-over-remix.md

# ADR-001: Next.js 15 over Remix for Frontend Framework

Status: Accepted
Date: 2026-03-15
Context:
We need a React-based fullstack framework. Options: Next.js 15, Remix, SvelteKit.

Decision:
Next.js 15 with App Router.

Reasons:
1. Largest ecosystem and community support
2. Best AI coding assistant support (most training data)
3. Vercel deployment is zero-config
4. Server Actions reduce API boilerplate
5. Team has prior Next.js experience

Consequences:
- Locked to React ecosystem (acceptable)
- Vercel hosting recommended (acceptable for MVP)
- App Router learning curve (manageable)

✅

9. Checklist & Ringkasan

Deliverables yang harus selesai sebelum mulai implementation

#	Deliverable	File	Time
1	ERD (entity relationship diagram)	docs/erd.md atau SVG	20 min
2	Prisma schema complete	prisma/schema.prisma	30 min
3	API endpoint table	docs/api-design.md	20 min
4	Standard response format	src/lib/api-response.ts	10 min
5	UI wireframes (text descriptions)	docs/wireframes.md	30 min
6	Component tree	docs/components.md	15 min
7	Security architecture	In CLAUDE.md + docs/security.md	15 min
8	ADR for major decisions	docs/adr/*.md	20 min
TOTAL			~2.5 hours

💻

Next: Part 3 — Implementation (Vibe Coding in Action)

Sekarang kita CODING! Prompt patterns untuk code generation, building feature by feature, code review dengan AI, Git workflow, dan live coding demo: dari Prisma schema ke working kanban board.

SDLC

Tech Review Desk — Vibe Coding SDLC Bible

Sumber: Prisma docs, Next.js 15 docs, OWASP Top 10, Atomic Design (Brad Frost), ADR methodology.

rominur@gmail.com • t.me/Jekardah_AI