Interactive DemoCase Study

The engineering system behind this portfolio: a monorepo with shared UI, CI budgets, and E2E tests.

  • Monorepo: 5 apps + shared packages for UI and configs.
  • Lighthouse CI budgets for performance + accessibility.
  • Playwright E2E suite covering critical navigation flows.
  • Bilingual UX (EN/ES) + reduced-motion friendly interactions.
Monorepo

5 apps · 3 packages

Quality

Tests + budgets

E2E

Playwright suite

UX

EN/ES + a11y

anthony@geekslab ~zsh
~
Press Enter or scroll to continue

Role

Lead Developer & Architect

Timeline

2024 — Present

Core Tech

Next.js 16, React 19, Turborepo

# The Challenge

Modern web development is often constrained by "safe" choices. GeeksLab was born from a necessity to break things. I needed a sandbox to test high-performance architectures, experimental UI patterns (like this portfolio), and bleeding-edge libraries before deploying them to production client environments.

# The Architecture

Built on a Monorepo structure using Turborepo, allowing shared UI libraries across multiple internal tools.

  • → Zero-Runtime CSSUsing Tailwind v4 for maximum performance.
  • → React Server ComponentsNext.js 16 App Router with streaming and suspense.
  • → Edge ComputingMiddleware logic on Vercel Edge for sub-millisecond routing.
~/geekslab

$ tree -L 2 (simplified)

├── apps/
│   ├── main-hub/     # Main portfolio
│   ├── lab/          # R&D experiments
│   └── nexastore/    # E-commerce demo
├── packages/
│   ├── ui/           # Shared components
│   ├── config/       # ESLint, TS configs
│   └── types/        # Shared types
└── turbo.json        # Pipeline config

Quality budgets (CI enforced)

  • LCP≤ 2.5s
  • CLS≤ 0.1
  • TBT≤ 300ms
  • Accessibility score≥ 0.9
View lighthouserc.json

cd ../next_project

NexaStore →

Next up: NexaStore, a production-style e-commerce demo (catalog → cart → checkout).