Lewati ke konten utama

Fullstack — Pertanyaan Interview

Pertanyaan umum beserta contoh jawaban. Gunakan language switcher (kanan atas) untuk English.

Desain end-to-end​

Walk-through fitur "buat order"​

  1. Schema — tabel orders dengan id (uuid), user_id, status, total, created_at, plus order_items. Migration ditulis di Prisma/Knex.
  2. API — POST /orders menerima header Idempotency-Key. Validasi input di sisi server (zod / class-validator). Tulis di dalam DB transaction.
  3. Frontend — form pakai react-hook-form + schema validator (kalau bisa, schema sama dipakai di kedua sisi). Disable submit saat in-flight, tampilkan error dari server.
  4. Auth — endpoint mewajibkan user terautentikasi; verify token di middleware.
  5. Idempotency — server menyimpan response untuk tiap Idempotency-Key; retry mengembalikan response yang sama.
  6. Telemetry — log pembuatan order dengan request ID; emit metric; alert untuk error rate.

Di mana logic sensitif sebaiknya hidup di Next.js?​

Apa pun yang menyentuh secret (API key, credential DB langsung) ada di Server Component, route handler (app/api/...), atau utility server-only. Direktif import 'server-only' menegakkan ini — jika sengaja diimport dari client component, build gagal.

Validasi client vs server​

Keduanya — client untuk UX (feedback cepat, sedikit round trip), server untuk security & correctness (API bisa dipanggil siapa saja). Share schema antara keduanya kalau memungkinkan (zod/yup/valibot).

Untuk aplikasi browser, HttpOnly cookie dengan Secure dan SameSite=Lax/Strict lebih aman dibanding localStorage:

  • HttpOnly → JS tidak bisa baca → XSS tidak bisa mencuri.
  • SameSite → menahan CSRF.
  • localStorage → bisa dibaca script di origin yang sama (XSS-leakable). Juga bocor lewat dev tools, browser extension.

Data dan schema​

Bagaimana menghindari N+1 dengan Prisma / Sequelize / TypeORM?​

Eager-load relasi di query parent:

// Prisma
const users = await prisma.user.findMany({
  include: {posts: true},
});

Hasilnya: satu query untuk user, satu query batched untuk semua post — bukan N+1.

Bagaimana menangani perubahan schema tanpa downtime (menambah kolom NOT NULL)?​

Expand and contract:

  1. Expand — tambah kolom dengan default atau nullable dulu. Backward-compatible.
  2. Backfill — jalankan job batched untuk mengisi baris lama.
  3. Ship code yang menulis ke kolom baru.
  4. Pindahkan read ke kolom baru setelah backfill selesai.
  5. Contract — di rilis berikutnya, tegakkan NOT NULL, hapus path lama.

Tanpa downtime; code lama & baru bisa coexist sebentar.

Optimistic vs pessimistic update​

  • Optimistic — update UI langsung, asumsikan server akan menerima. Reconcile di response/error. Cepat terasa, tapi harus handle rollback.
  • Pessimistic — tunggu server. Lebih sederhana, tapi terasa lambat untuk UI yang chatty.

Untuk interaksi frekuensi tinggi (like, toggle todo, dashboard real-time via WebSocket), optimistic menang.

Deployment & ops​

CI/CD pipeline kamu seperti apa?​

Di project terkini:

  • CI jalan tiap PR — lint, type-check, unit test, build artifact.
  • PR preview — deploy ke preview environment untuk review designer/QA.
  • CD — merge ke main build & deploy ke staging otomatis; production butuh approval manual.
  • Migration — dijalankan sebagai step sebelum app baru start, dengan expand-and-contract untuk perubahan risky.
  • Smoke test — pengecekan singkat post-deploy ke /health dan beberapa path kritis.

Konfigurasi environment?​

.env hanya untuk local dev. Di hosted environment, secret diambil dari secret manager (Vercel env vars, AWS Secrets Manager, dll). Jangan pernah commit secret.

Behavioral​

Ceritakan project fullstack yang kamu pegang dari awal sampai akhir​

Pharmacy System Web App (2023). Apotek butuh aplikasi untuk mengelola penjualan, inventory, supplier, purchase order, dan laporan transaksi. Saya bangun dengan Next.js, Shadcn UI, dan PostgreSQL — desain schema, API route, frontend, sampai deployment. Win terbesarnya: workflow manual yang tersebar di banyak spreadsheet jadi satu dashboard dengan tracking stok real-time dan PO workflow yang lebih simpel.

Pernah harus memilih antara cepat dan benar?​

Saat rewrite project e-sign dari vanilla HTML/CSS/JS ke Next.js, deadlinenya ketat. Daripada rewrite seluruh flow sekaligus, saya pecah: ship arsitektur baru dengan feature parity dulu, lalu migrasi styling dan tambah test bertahap. Beberapa sprint kemudian kita mencapai 100% unit test coverage di modul baru tanpa harus menunda launch.

Behavioral (English)​

Tell me about a fullstack project you owned end-to-end​

Pharmacy System Web App (2023). Built with Next.js, Shadcn UI, PostgreSQL. Turned a fragmented manual workflow into a single dashboard with real-time stock tracking.

Siap menguji diri?​

Lanjut ke Kuis — 10 pertanyaan dari kedua sisi stack.