System Design

Microservices Architecture Showcase

The site itself is a portfolio artifact: independently deployed services coordinated in containers.

Architecture

Microservices Diagram of this site

Select a node to highlight component relationships and responsibilities.

externaledgebackenddataHTTPSHTTPHTTPHTTPHTTPSQLSQLSQLreverse-proxygatewayweb-frontendprofile-apitimeline-apievent-apipostgres

reverse-proxy

Upstream public reverse proxy that receives internet traffic and forwards only allowed paths into this stack.

Internet access is controlled by the upstream reverse-proxy; gateway/routes are internal to this app.

Request Flows

  • Page load: Browser -> reverse-proxy -> gateway -> web-frontend
  • Data fetch: web-frontend -> gateway -> profile/timeline APIs
  • Timeline scrub: Browser -> reverse-proxy -> gateway -> event-api -> postgres rollup

Legend: HTTPS (external ingress), HTTP (internal request/response), SQL (persistent storage).

Service Inventory

Components

reverse-proxy

Stack: External reverse proxy

Public ingress in front of this app stack

web-frontend

Stack: Next.js

Portfolio UI, timeline, and architecture pages

gateway

Stack: Nginx

Internal gateway routing frontend and API traffic

profile-api

Stack: Fastify + PostgreSQL

Profile, competencies, and technology data

timeline-api

Stack: Fastify + PostgreSQL

Career timeline events and highlights

event-api

Stack: Fastify + PostgreSQL

Captures and aggregates page analytics

postgres

Stack: PostgreSQL 16

Persistent storage