Uses

Tools, hardware, and software I use daily as a Principal Frontend Architect. Opinionated list — everything here earns its place.

Editor & Terminal

VS CodePrimary editor. Extensions: ESLint, Prettier, GitLens, Tailwind IntelliSense.

Claude CodeAI-assisted engineering — production-grade development, architecture brainstorming, code review, and security issue detection. Saves hours every week.

GhosttyPrimary terminal. Fast, native, minimal config.

iTerm2 + ZshSecondary terminal. Oh My Zsh, Powerlevel10k theme.

WarpOccasional use for its AI autocomplete and block-based UX.

Development

Node.js + nvmNode v24 enforced via .nvmrc + engines field. nvm for version management across projects.

pnpmDefault package manager. Faster installs, strict dependency resolution.

Docker DesktopLocal containerisation for services that shouldn't pollute the host.

TurboRepoMonorepo build system. Used on enterprise B2B platform for managing frontend and BFF packages.

Single-spaMicro-frontend orchestration framework. Used alongside Module Federation on enterprise engagements.

StorybookComponent development and visual testing. Used for building and documenting component libraries.

BrunoPrimary API testing client. Git-friendly, local-first.

PostmanSecondary API client for complex request flows and shared collections.

React DevTools + Redux DevToolsBoth installed as browser extensions — Chrome and Firefox.

SonarQubeStatic analysis and code quality gates on CI pipelines.

NginxReverse proxy and static asset serving in containerised deployments.

CI & Observability

GitHub ActionsPrimary CI pipeline — lint, test, build, deploy on PR and merge.

JenkinsCI orchestration on enterprise engagements with self-hosted infrastructure.

Google Cloud BuildBuild and deploy pipelines on GCP-hosted projects.

New Relic / Datadog / DynatraceAPM and infrastructure monitoring. Tool choice is client-driven; comfortable across all three.

SentryFrontend error tracking and release health monitoring.

Google Analytics + GTMWeb analytics and tag management for product and marketing instrumentation.

Design & Diagramming

FigmaDesign review, component annotation, and quick mockups during architecture conversations.

MiroArchitecture diagrams, system design, and whiteboarding during client and team sessions.

ExcalidrawArchitecture and sequence diagrams. Fast, whiteboard-style, easy to share.

Mermaid (in Markdown)For diagrams that live in the repo alongside ADRs and architecture docs.

Hardware

MacBook Pro M4Office machine. Fast builds, long battery, runs iOS simulators natively.

MacBook Air M3Personal machine. Lightweight daily driver.

Mac Mini (M-series)Home AI lab and personal server. Always-on for experiments and local model runs.

ViewSonic 27"External display. Extended desktop and screen sharing in calls.

LG 2K 27"Second external display. Dual-monitor setup for deep work sessions.

Huion TabletWriting pad for sketching architecture diagrams and annotating designs.

Productivity

ObsidianArchitecture notes, meeting prep, personal knowledge base. Local-first, markdown-native.

Microsoft TeamsOffice communication and client calls. Daily driver.

Google MeetVideo calls for external collaborators and cross-org sessions.

BitwardenPassword management. Open-source, self-hostable, non-negotiable.

This Site

Next.js 16 (App Router)Framework. React Server Components, file-based routing, Vercel-native.

Tailwind CSS v4Styling. Design tokens in globals.css, utilities for layout.

MDX + gray-matterBlog and work content. Write in markdown, drop in React components when needed.

ShikiSyntax highlighting in code blocks. Works in RSC, best-in-class output.

VercelHosting. Preview URLs per branch, zero-config Next.js deploy.