Software Engineer · Front-EndSão Paulo, Brazil

Felipe Reducino

I build front-end architecture for a living — design systems, micro-frontends, and the authentication that sits in front of them. The kind of work that disappears when it is done well, and is the first thing anybody notices when it is not.

01 — Why

Why the other half

I spend my days on the front half of the stack — design systems, micro-frontends, and the auth flow that sits in front of 9,500 people. It is work I know well, and it is exactly half of a product. The other half was always somebody else's: a compiled service, a real schema, and the decisions that get made once and then have to hold.

So I started this one from an empty directory. Go and PostgreSQL, no framework and almost no dependencies, with Claude as a pair rather than a tutorial to follow. It is not a to-do app — it has accounts and verified email, roles resolved from the database on every request, a rich-text blog with its own document validator, and a CV that writes itself from the same API.

Seven days. This is what that looked like.

02 — Lab

A design system, running

Pick a brand colour — any colour — and a whole theme is derived from it in OKLCH, mapped back into the sRGB gamut, and audited against WCAG on every change. Where a pairing fails, the system moves the token until it passes and tells you what it changed. Try to make it ship something unreadable.

Acme Consolev2.4

Welcome back

Use the address your team invited. We will never show it to anyone else.

Emailyou@company.com

Forgot password?

ContinueUse SSO

Type scale · 1.25

Aa4 · 2.441rem
Aa3 · 1.953rem
Aa2 · 1.563rem
Aa1 · 1.25rem
Aa0 · 1rem
Aa-1 · 0.8rem

2 sessions active

MacBook · São Paulo, and an iPhone signed in yesterday.

brand oklch(0.86 0.2 128)

backgroundoklch(0.985 0.012 128)
surfaceoklch(0.955 0.012 128)
borderoklch(0.655 0.012 128)
foregroundoklch(0.21 0.012 128)
muted-foregroundoklch(0.535 0.012 128)
brandoklch(0.86 0.2 128)
brand-fgoklch(0.18 0.012 128)
brand-textoklch(0.545 0.143 128)

Contrast audit · WCAG 2.2 AA

5/5 pass, 3 corrected

Body text on background17.05:1foreground on background · needs 4.5:1Pass
Muted text on surface4.52:1muted-foreground on surface · needs 4.5:1CorrectedMuted lightness 0.6 → 0.535
Label on brand fill12.80:1brand-fg on brand · needs 4.5:1Pass
Accent text on background4.55:1brand-text on background · needs 4.5:1CorrectedAccent text lightness 0.86 → 0.545
Input boundary on background3.05:1border on background · needs 3:1CorrectedBorder lightness 0.72 → 0.655

Generated tokens

:root[data-theme="light"] {
  --background: oklch(0.985 0.012 128);
  --surface: oklch(0.955 0.012 128);
  --border: oklch(0.655 0.012 128);
  --foreground: oklch(0.21 0.012 128);
  --muted-foreground: oklch(0.535 0.012 128);
  --brand: oklch(0.86 0.2 128);
  --brand-fg: oklch(0.18 0.012 128);
  --brand-text: oklch(0.545 0.143 128);

  --radius: 10px;
  --space: 8px;
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
}

03 — Skills

What I know

The five groups from my CV, unedited — and one more I am still earning.

Frontend

React.js
Next.js
TypeScript
JavaScript
React Native
Tailwind
Stencil
Web Components
React Query

Architecture

Micro Front-End Architecture
Next.js Multi-Zones
Module Federation
Design Systems
SDKs
White-Label Platforms

Quality

Testing Strategy (Unit / Integration / E2E)
Jest
Vitest
Accessibility
Performance
Clean Architecture
SOLID

Security & Auth

OAuth 2.0 + PKCE
Server-Side Cookies
Secure Integrations
Cyber Security Best Practices

Platform

Vercel
GitHub Actions
GitLab CI
Docker
Kubernetes
Grafana
Prometheus
Datadog
REST APIs
Axios

Learning

newer than the rest, and labelled as such

Go
PostgreSQL
WebGL

04 — Writing

Latest posts

All posts