Skip to main content

Fullstack — Interview Questions

Common questions with model answers. Use the language switcher (top-right) for Bahasa Indonesia.

End-to-end design​

Walk me through how you would build a "create order" feature​

  1. Schema — orders table with id (uuid), user_id, status, total, created_at, plus order_items. Migration scripted in Prisma/Knex.
  2. API — POST /orders accepting an Idempotency-Key header. Validate input server-side (zod / class-validator). Write inside a DB transaction.
  3. Frontend — form built with react-hook-form + a schema validator (same schema reused on both sides if possible). Disable submit while in flight, show error from server response.
  4. Auth — endpoint requires an authenticated user; verify token in middleware.
  5. Idempotency — server stores the response for each Idempotency-Key; retries return the same response.
  6. Telemetry — log the order creation with a request ID; emit a metric; alert on error rate.

Where should sensitive logic live in a Next.js app?​

Anything that touches secrets (API keys, direct DB credentials) belongs in a Server Component, route handler (app/api/...), or a server-only utility. The import 'server-only' directive enforces this — if you accidentally import a server module from a client component, the build fails.

Client-side vs server-side validation​

Both — client for UX (instant feedback, fewer round trips), server for security and correctness (the API can be called by anyone). Share a schema between the two when you can (zod/yup/valibot).

For browser apps, HttpOnly cookies with Secure and SameSite=Lax/Strict are safer than localStorage:

  • HttpOnly → JS can't read it → XSS can't steal it.
  • SameSite → mitigates CSRF.
  • localStorage → readable from any script on the origin (XSS-leakable). Also leaks via dev tools, browser extensions.

Data and schema​

How do you avoid the N+1 problem with Prisma / Sequelize / TypeORM?​

Eager-load the relation in the parent query:

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

Result: one query for users, one batched query for all their posts (instead of N+1).

How would you handle a zero-downtime schema change (adding a NOT NULL column)?​

Expand and contract:

  1. Expand — add the column as nullable (or with a default). Backward-compatible.
  2. Backfill — run a batched job to populate it for existing rows.
  3. Ship code that writes to the new column.
  4. Switch reads to the new column once backfill is complete.
  5. Contract — in a later release, enforce NOT NULL, remove old paths.

No service downtime; old and new code coexist briefly.

Optimistic vs pessimistic UI updates​

  • Optimistic — update the UI immediately, assume the server will accept it. Reconcile on response/error. Snappy, but you must handle rollback.
  • Pessimistic — wait for the server. Simpler, but feels slower for chatty UIs.

For high-frequency interactions (likes, todo toggles, real-time dashboards driven by WebSockets), optimistic updates win.

Deployment & ops​

Walk me through your CI/CD setup​

In recent projects:

  • CI runs on every PR — lint, type-check, unit tests, build artifact.
  • PR previews — deploy to a preview environment so designers/QA can review.
  • CD — merging to main builds and deploys to staging automatically; production gate is manual approval.
  • Migrations — run as a step before the new app starts, with expand-and-contract for risky changes.
  • Smoke test — a small post-deploy check that hits /health and a few critical paths.

How do you handle environment configuration?​

.env files only for local dev. In hosted environments, secrets come from the platform's secret manager (Vercel env vars, AWS Secrets Manager, etc.). Never commit secrets.

Behavioral​

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

Pharmacy System Web App (2023). A pharmacy needed to manage sales, inventory, suppliers, purchase orders, and transaction reports. I built it with Next.js, Shadcn UI, and PostgreSQL — schema design, API routes, frontend, deployment. The biggest win was turning a fragmented manual workflow (separate spreadsheets per concern) into a single dashboard with real-time stock tracking and a simplified PO workflow.

Tell me about a time you had to choose between fast and right​

On the e-sign rewrite from vanilla HTML/CSS/JS to Next.js, we hit a tight deadline. Instead of rewriting the whole flow at once, I split it: ship the new architecture first with feature parity, then incrementally migrate styling and add tests. We got to 100% unit test coverage on the new modules over the following sprints, without blocking the launch.

Behavioral (Bahasa Indonesia)​

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 tadinya 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.

Ready to test yourself?​

Head over to the Quiz — 10 questions spanning frontend, backend, and the wiring between them.