FULLSTACK DEVELOPER
CHEATSHEET
1. Mindset Utama
Pahami alur end-to-end: UI → API → DB → Deployment → Monitoring.
Fokus pada clean architecture, modularity, dan scalability.
Automasi sebanyak mungkin: testing, linting, CI/CD, build pipeline.
🌐 FRONTEND
2. HTML/CSS Dasar
Gunakan semantic tag (header, main, section, footer).
Optimasi: <img loading="lazy">, <meta viewport>.
CSS: Flexbox & Grid untuk layout, media query untuk responsif.
Gunakan CSS variables atau utility-first (Tailwind) untuk konsistensi.
3. JavaScript Modern
ES6+: destructuring, spread, template literals, arrow functions.
Module system (import/export).
Async/Await untuk request API.
DOM: querySelector, addEventListener, classList.
4. Frontend Framework (React/[Link])
Struktur umum:
src/components/
src/pages/ atau src/app/
src/hooks/
src/lib/
src/utils/
State management:
Client state: Context, Zustand, Redux Toolkit.
o
o
Server state: TanStack Query, SWR.
Prinsip: pisahkan UI dan logic (hooks).
Optimasi: memoization (useMemo, useCallback, [Link]), lazy-loading,
code splitting.
🔧 BACKEND
5. API Design
Gunakan pola konsisten: /api/v1/resource/:id.
Method: GET (read), POST (create), PUT/PATCH (update), DELETE
(delete).
Struktur response:
{ "success": true, "data": {}, "message": "" }
Implementasikan pagination, filtering, search.
Validasi input (Joi/Zod/Validator).
6. Authentication & Security
JWT (stateless), refresh token, RBAC.
Hash password (bcrypt/argon2).
Rate limit, CORS, secure headers.
Hindari SQL injection (prepared statements).
7. Database
SQL (PostgreSQL/MySQL)
Kuasai SELECT, JOIN, GROUP BY, HAVING.
Optimasi index, hindari N+1 query.
Gunakan transaction untuk operasi penting.
NoSQL (MongoDB)
Desain schema berdasarkan akses data.
Cocok untuk event, log, atau document fleksibel.
ORM:
Prisma, Eloquent, Sequelize, TypeORM, SQLAlchemy.
⚙️DEVOPS UNTUK
FULLSTACK
8. Docker & Deployment
Gunakan Dockerfile multi-stage build.
Semua config via environment variables.
Docker Compose untuk multi-service (backend + frontend + DB + Redis).
Deployment menggunakan:
VPS (Ubuntu + Docker)
o
o
GitHub Actions CI/CD
o
o
Kubernetes (Deployment, Service, Ingress)
9. CI/CD
Pipeline standar:
1.
Install dependencies
2.
3.
Lint
4.
5.
Test
6.
7.
Build artifact
8.
9.
Deploy otomatis
Gunakan GitHub Actions / GitLab CI.
10.
10. Monitoring & Logging
Monitoring: Prometheus, Grafana.
Logging: JSON structured logs (Loki, ELK).
Metrics penting: request per second, error rate, latency, DB slow query.
🧱 ARCHITECTURE &
PATTERNS
11. Clean Architecture
Controller → Service → Repository → Database ↑ Middleware
Controller: parsing request.
Service: business logic.
Repository: akses database.
Middleware: auth, validation, logging.
12. System Design Dasar
Load balancer (nginx/traefik).
CDN untuk asset (Cloudflare).
Cache layer (Redis).
Message broker (RabbitMQ/Kafka) untuk task async.
Horizontal scaling > vertical scaling.
Stateless API (menyimpan session di Redis).
🧪 TESTING
13. Testing Strategy
Frontend: Jest + Testing Library, Cypress.
Backend: unit test + integration test (supertest/pytest).
Mock service eksternal, gunakan test DB terpisah.
🔨 TOOLS WAJIB FULLSTACK
VSCode (+ Prettier, ESLint).
Git, GitHub/GitLab.
Docker Desktop.
Postman/Insomnia.
Browser DevTools.
DB Tools: TablePlus, DBeaver.
Monitoring tools (Grafana, Prometheus).
💡 BEST PRACTICES
Gunakan commit convention (feat:, fix:, refactor:).
Dokumentasikan API dengan Swagger/OpenAPI.
Pisahkan environment: dev, staging, prod.
Buat error handler global.
Tulis kode yang mudah dibaca dan mudah dites.
Fokus pada value: fitur harus memberikan dampak bisnis, bukan hanya
"jalan".