Skip to content

ADR-004: Frontend Framework

Context and Problem Statement

The portfolio site is a single-page application presenting personal information, a project showcase, a contact form, and a CV download. A frontend framework was needed that would allow rapid development, a modern component model, and a straightforward deployment as a static bundle served from a container.

Considered Options

  • React + Vite — a component-based UI library paired with a fast build tool. Outputs a static bundle of HTML, JS, and CSS. Large ecosystem, familiar to most frontend developers, and Vite's dev server provides near-instant HMR.

  • Next.js — a React meta-framework with SSR, SSG, and file-based routing. Adds complexity (server runtime or static export configuration) that is unnecessary for a simple portfolio SPA. SSR would require a Node.js server alongside the backend container.

  • Vue + Vite — similar trade-offs to React + Vite. Smaller ecosystem in the context of available component libraries; no personal familiarity advantage over React for this project.

  • Plain HTML / vanilla JS — no framework overhead, maximum simplicity. Practical for very small sites but lacks component reuse, state management, and a productive development experience for a growing portfolio.

Decision Outcome

Chosen option: "React + Vite". The portfolio is a SPA with no requirement for server-side rendering or static site generation per page. React's component model keeps the UI modular and testable (Vitest + React Testing Library). Vite builds fast, and the output is a plain static bundle that nginx serves directly from the frontend container. No additional runtime is needed beyond what is already in the container.

Consequences

  • Good, because the build output is a plain static bundle — no Node.js server process required in production, no SSR complexity.
  • Good, because Vite's dev server with HMR makes local iteration fast, and the same tool handles the production build.
  • Bad, because there is no server-side rendering — the initial HTML delivered to crawlers is minimal, which can affect SEO for dynamically rendered content. For a portfolio this is an acceptable trade-off.
  • Bad, because if the site grows to require dynamic routing with per-page metadata or content fetched at build time, migrating to Next.js would require non-trivial rework.

Page history

Field Value
Last updated —