PRD — Enterprise React Portfolio (Backend Developer Edition)

1. Overview

Website ini adalah aplikasi portofolio interaktif berbasis React yang dirancang untuk seorang Backend Developer dengan 3+ tahun pengalaman di industri perbankan (Java Spring Boot). Aplikasi ini dibangun dengan prinsip Enterprise-Grade: memiliki struktur folder yang scalable, keamanan yang ketat dari kerentanan web (OWASP), dan performa rendering tingkat tinggi.

Tujuan utama sistem ini adalah menampilkan rekam jejak penyelesaian masalah berskala enterprise (keamanan, skalabilitas, microservices), memamerkan keahlian sekunder di bidang Mobile dan Frontend Development, serta menyediakan sistem Admin (CMS) mandiri untuk mengelola konten.

2. Tech Stack & Infrastructure

Sistem mengadopsi ekosistem React modern dengan pendekatan Server-Side Rendering (SSR) dan Static Site Generation (SSG) untuk performa maksimal.

Framework: Next.js (App Router).
Styling & UI: Tailwind CSS + Framer Motion (untuk animasi transisi DOM yang dioptimalkan oleh GPU).
Backend / API: Next.js Server Actions & Route Handlers.
Database & ORM: PostgreSQL + Prisma ORM.
Image Storage: Cloudinary.
Security & Validation: Zod (validasi skema End-to-End), bcryptjs (Hashing).
Deployment: Vercel (Frontend & Server Actions), Neon.tech/Supabase (Database).

3. Core Features

3.1. Public View (Visitor)

Hero Section: Sapaan pembuka dengan copywriting yang menyoroti pengalaman enterprise (contoh: "Building Secure, Scalable, Enterprise-Grade Systems. 3+ Years in Banking Tech."). Dilengkapi animasi reveal dan tombol CTA menuju resume/kontak.
Experience & Timeline: Garis waktu (timeline) interaktif yang menceritakan evolusi karir di industri perbankan dan pencapaian utama.
Tech Stack Showcase: Menampilkan logo/ikon teknologi yang dikuasai, dikategorikan menjadi: Enterprise Backend (Java, Spring Boot, Kafka), Database & Infra, Frontend, dan Mobile.
Projects & Case Studies: Galeri karya dengan fitur Filter Kategori (Semua, Backend, Frontend, Mobile).
- Khusus Backend: Menampilkan gambar thumbnail berupa Diagram Arsitektur Sistem, dengan metrik dampak (misal: "Meningkatkan performa API 40%").
- Khusus Mobile/Frontend: Menampilkan UI screenshot.
Contact Section: Formulir bagi pengunjung (Rekruiter/Klien) untuk mengirimkan penawaran kerja.

3.2. Admin Dashboard (CMS)

Secure Authentication: Halaman login rahasia (/admin/login) menggunakan Email dan Password tunggal.
Project Management: Fitur CRUD (Create, Read, Update, Delete) portofolio dan studi kasus.
Skill Management: Fitur CRUD untuk menambah/menghapus tech stack.
Message Inbox: Halaman untuk membaca dan menghapus pesan masuk dari pengunjung.

4. Enterprise-Grade Folder Structure

Untuk memastikan kode mudah dipelihara dan diuji, aplikasi menggunakan arsitektur berbasis fitur (Feature-Driven Architecture).

src/
├── app/                  # Next.js App Router (Definisi rute publik & admin)
├── core/                 # Konfigurasi inti sistem & infrastruktur
│   ├── security/         # Middleware auth, session management
│   ├── db/               # Prisma client & koneksi database
│   └── error-handling/   # Global error boundaries
├── features/             # Domain bisnis utama (Vertical Slicing)
│   ├── projects/         # Komponen UI, Server Actions (CRUD), & Zod Schema
│   ├── skills/           # Domain keahlian/tech stack
│   ├── messages/         # Domain inbox & kontak pengunjung
│   └── auth/             # Domain autentikasi admin
├── shared/               # Kode global (Reusability)
│   ├── components/       # UI dasar (Button, Input, Modal)
│   ├── lib/              # Utility functions (cn, formatDate)
│   └── types/            # Global TypeScript interfaces
└── public/               # Asset statis

5. System Architecture & Database Schema

Data Flow (Server Actions)

sequenceDiagram
    participant Client as React Client
    participant Server as Next.js Server Actions
    participant Validation as Zod Schema Validation
    participant Cloud as Cloudinary
    participant DB as PostgreSQL (Prisma)

    Client->>Server: Submit FormData (Tambah Proyek)
    Server->>Validation: Validasi Tipe Data & Sanitasi Input
    Validation-->>Server: Data Valid
    Server->>Cloud: Upload Image Buffer
    Cloud-->>Server: Return Secure Image URL
    Server->>DB: Eksekusi Query (Prisma Create)
    DB-->>Server: Konfirmasi Sukses
    Server->>Client: revalidatePath('/') & Tampilkan Success Toast

Entity Relationship Diagram (ERD)

erDiagram
    users {
        uuid id PK
        string email
        string password_hash
        string name
    }
    projects {
        uuid id PK
        string title
        string slug
        text description
        string image_url
        string repo_url
        string live_url
        string category
        boolean is_published
        datetime created_at
    }
    skills {
        uuid id PK
        string name
        string icon_name
        string category
    }
    project_skills {
        uuid project_id FK
        uuid skill_id FK
    }
    messages {
        uuid id PK
        string sender_name
        string sender_email
        text content
        boolean is_read
        datetime created_at
    }

    projects ||--o{ project_skills : "uses"
    skills ||--o{ project_skills : "applied in"

6. Enterprise Security Standards

Authentication & Session Management: Menggunakan HTTP-Only, Secure, SameSite Cookies untuk sesi Admin. Password di-hash menggunakan bcrypt.
Input Validation (XSS/SQLi Prevention): Semua input divalidasi ganda di Client dan Server menggunakan Zod. Prisma ORM mencegah SQL Injection.
Data Protection: Penerapan Rate Limiting pada endpoint kontak untuk mencegah Spam/DDoS, serta implementasi Content Security Policy (CSP).

7. Performance Optimization Strategy

Standar performa yang harus dicapai adalah Lighthouse Score 95+:

React Server Components (RSC): Meminimalisir pengiriman JavaScript ke klien.
Code Splitting & Lazy Loading: Gambar dan komponen berat (seperti diagram) dimuat secara asinkron.
Image Optimization: Wajib menggunakan tag <Image> dari Next.js untuk format WebP/AVIF dan resizing dinamis.

8. Typography & Design Constraints

Konsep Visual: Clean, High Contrast, Minimalist Enterprise. Mendukung Dark/Light Mode.
Font Stack:
- Sans: Geist Mono, ui-monospace, monospace (Teks paragraf dan antarmuka).
- Serif: serif (Elemen dekoratif/kutipan).
- Mono: JetBrains Mono, monospace (Metrik angka, badge teknologi, code snippet).
Animasi: Berbasis opacity dan transform untuk performa 60fps. Fokus pada Reveal on Scroll. Hindari animasi yang menggeser layout (memicu Reflow).

7.0 KiB Raw Blame History