BEST-PRACTICES DOCS

CLEAN-CODE

Nama Variabel yang Bermakna
Description: Gunakan nama yang menjelaskan maksud, bukan singkatan misterius.
Example: 
// ❌
const d = 30
// ✅
const daysSinceLastLogin = 30
Output: Kode langsung dipahami
Fungsi Kecil (Single Responsibility)
Description: Setiap fungsi hanya melakukan satu hal dengan baik.
Example: 
// ❌
function processAndSave(data) { ... }
// ✅
function validate(data) { ... }
function save(data) { ... }
Output: Mudah diuji dan dipelihara
Hindari Magic Numbers
Description: Ganti angka mentah dengan konstanta bernama.
Example: 
// ❌
if (user.age > 17)
// ✅
const MINIMUM_ADULT_AGE = 18
if (user.age >= MINIMUM_ADULT_AGE)
Output: Makna jelas
Komentar Menjelaskan 'Kenapa', bukan 'Apa'
Description: Kode yang baik sudah menjelaskan apa yang dilakukan.
Example: 
// ❌
// set x ke 5
let x = 5
// ✅
// Batas throttle agar tidak membanjiri API
const THROTTLE_LIMIT = 5
Output: Komentar bernilai
Gunakan Early Return
Description: Kurangi nesting dengan validasi di awal dan return cepat.
Example: 
// ❌
function getData(user) {
  if (user) {
    if (user.active) {
      return user.data
    }
  }
}
// ✅
function getData(user) {
  if (!user || !user.active) return null
  return user.data
}
Output: Kode rata, mudah dibaca

SOLID-PRINCIPLES

S - Single Responsibility
Description: Kelas / modul hanya punya satu alasan untuk berubah.
Example: 
class UserRepository { ... }
class EmailService { ... }
Output: Pemisahan tanggung jawab
O - Open/Closed
Description: Terbuka untuk ekstensi, tertutup untuk modifikasi.
Example: 
class Discount {
  getDiscount() { return 0 }
}
class SeasonalDiscount extends Discount {
  getDiscount() { return 10 }
}
Output: Tambah diskon tanpa ubah kode lama
L - Liskov Substitution
Description: Subclass harus bisa menggantikan parent class tanpa mengubah perilaku.
Example: 
function printArea(shape: Shape) {
  console.log(shape.area())
}
Output: Setiap turunan Shape aman dipakai
I - Interface Segregation
Description: Jangan paksa client mengimplementasi method yang tidak dipakai.
Example: 
interface Printer { print() }
interface Scanner { scan() }
class AllInOne implements Printer, Scanner {}
Output: Interface terpisah
D - Dependency Inversion
Description: Modul tingkat tinggi tidak bergantung pada modul tingkat rendah, tapi pada abstraksi.
Example: 
class Service {
  constructor(private repo: Repository) {}
}
Output: Ganti database tanpa ubah Service

DESIGN-PATTERNS

Module Pattern
Description: Enkapsulasi kode dalam modul ES6/CommonJS.
Example: 
export function helper() { ... }
Output: Kode terisolasi
Singleton
Description: Satu instance untuk seluruh aplikasi (Prisma client).
Example: 
import { PrismaClient } from '@prisma/client'
export const prisma = new PrismaClient()
Output: Satu koneksi database
Repository Pattern
Description: Abstraksi akses data di balik interface.
Example: 
class UserRepo {
  async findById(id) { ... }
}
Output: Ganti ORM tanpa ubah service
Observer / Pub-Sub
Description: Objek memberi tahu subscriber ketika terjadi perubahan.
Example: 
eventEmitter.on('order.placed', sendEmail)
eventEmitter.emit('order.placed', order)
Output: Reaksi terpisah dari pemicu

GIT-BEST-PRACTICES

Conventional Commits
Description: Format commit: type(scope): message.
Example: 
feat(auth): add login with Google
fix(cart): resolve zero quantity bug
Output: Changelog otomatis
Branch Naming Convention
Description: Nama cabang: type/description.
Example: 
feature/user-profile
bugfix/login-error
chore/update-deps
Output: CI/CD terpicu tepat
Commit Kecil & Fokus
Description: Satu commit satu perubahan logis.
Example: 
git commit -m 'add email validation'
git commit -m 'style: format with prettier'
Output: Mudah di-review & revert
Pull Request Template
Description: Gunakan template PR untuk konsistensi.
Example: 
## Deskripsi

## Cara Test

## Screenshot
Output: Informasi lengkap

SECURITY-BEST-PRACTICES

Jangan Commit Secret
Description: Simpan semua kredensial di environment variable.
Example: 
# .env
DATABASE_URL=postgres://...
# jangan commit .env
Output: Kredensial aman
Validasi Input Pengguna
Description: Selalu validasi & sanitasi input dari client.
Example: 
import { z } from 'zod'
const schema = z.object({ email: z.string().email() })
schema.parse(req.body)
Output: Input aman diproses
HTTPS Everywhere
Description: Semua komunikasi harus melalui HTTPS.
Example: 
vercel.json: { "headers": [...] }
Output: Data terenkripsi
CORS yang Ketat
Description: Batasi origin yang boleh mengakses API.
Example: 
Access-Control-Allow-Origin: https://appkamu.com
Output: Hanya domainmu

ACCESSIBILITY

Gunakan Semantic HTML
Description: Gunakan <header>, <main>, <nav>, <footer>.
Example: 
<header><h1>Logo</h1><nav>...</nav></header>
Output: Screen reader paham struktur
Alt pada Gambar
Description: Setiap gambar harus punya alt yang deskriptif.
Example: 
<img src="chart.png" alt="Grafik penjualan kuartal 3" />
Output: Dibaca screen reader
Label pada Form
Description: Semua input harus memiliki label.
Example: 
<label htmlFor="email">Email</label>
<input id="email" type="email" />
Output: Terhubung dengan input
Kontras Warna Cukup
Description: Rasio kontras minimal 4.5:1 untuk teks normal.
Example: 
Warna teks #333 di atas background #fff → rasio 12.6:1
Output: Terbaca oleh semua

PERFORMANCE

Lazy Loading Komponen
Description: Gunakan dynamic import untuk komponen berat.
Example: 
const Heavy = dynamic(() => import('./Heavy'))
Output: Bundle lebih kecil
Optimasi Gambar
Description: Gunakan format modern (WebP) dan resize sesuai kebutuhan.
Example: 
next/image secara otomatis mengoptimasi
Output: Page load cepat
Caching Data
Description: Cache fetch atau database query yang jarang berubah.
Example: 
fetch(url, { next: { revalidate: 3600 } })
Output: Respons instan
Hindari Bundle Berlebih
Description: Analisis bundle dengan @next/bundle-analyzer.
Example: 
const withBundleAnalyzer = require('@next/bundle-analyzer')()
Output: Hapus library tidak terpakai

SOFT-SKILLS

Komunikasi yang Jelas
Description: Tulis pesan commit, deskripsi PR, dan komentar yang informatif.
Example: 
PR: 'Menambahkan validasi email pada form registrasi'
Output: Tim langsung paham
Pair Programming
Description: Kerjakan masalah rumit bersama-sama.
Example: 
Satu menulis kode, satu meninjau langsung
Output: Bug lebih sedikit
Terima Feedback
Description: Code review adalah sarana belajar, bukan kritik pribadi.
Example: 
'Oh iya, ternary ini bisa dibuat lebih jelas, terima kasih masukannya'
Output: Tim tumbuh bersama

FOLDER-STRUCTURE

Feature-based Structure
Description: Kelompokkan berdasarkan fitur: user, product, order.
Example: 
src/features/user/components/
src/features/user/hooks/
Output: Navigasi cepat
Pisahkan Server & Client
Description: Server component di root, client component di subfolder.
Example: 
app/page.tsx (server)
app/ui/button.tsx ('use client')
Output: Batas jelas

NAMING-CONVENTIONS

camelCase untuk Variabel & Fungsi
Description: let userName = 'ridho'
Example: 
function getUserById(id: string) {}
Output: Konsisten
PascalCase untuk Komponen & Class
Description: export default function UserProfile() {}
Example: 
class DatabaseConnection {}
Output: Mudah dikenali
UPPER_CASE untuk Konstanta
Description: const API_TIMEOUT = 5000
Example: 
const MAX_RETRY_ATTEMPTS = 3
Output: Konstanta global

CODE-REVIEW

Review dengan Empati
Description: Fokus pada kode, bukan orangnya. Beri saran, bukan perintah.
Example: 
'Mungkin kita bisa...' daripada 'Harusnya...'
Output: Tim nyaman
Cek Tes Terlebih Dahulu
Description: Pastikan semua test lulus sebelum review logic.
Example: 
pnpm test -- --coverage
Output: Kualitas terjaga