how.its.built
Cómo está hecho este sitio
Un sistema pequeño en producción, con restricciones reales: un front end en Next.js, una API en NestJS y unos pocos hábitos de ingeniería deliberados. Todo lo que sigue describe lo que realmente corre aquí.
Arquitectura
Desplázate hacia los lados para ver todo el diagrama.
- Browser, cliente
- Vercel, servicio, Next.js 16, next-intl
- NestJS API, servicio, Prisma
- MongoDB, datos
- Firebase Storage, datos
- SendGrid, externo
- Anthropic, externo, Claude Haiku 5.5
- Browser → Vercel: Páginas RSC e ISR
- Browser → NestJS API: Chat, salud
- Vercel → NestJS API: Lecturas en caché
- NestJS API → MongoDB: Prisma
- NestJS API → Firebase Storage: Imágenes
- NestJS API → SendGrid: Notificaciones
- NestJS API → Anthropic: AndroAI
Stack
Frontend
Next.js
React.js
TypeScript
Tailwind CSS
Framer Motion
TanStack Query
Zustand
Zod
Backend y datos
Nest.js
Prisma
MongoDB
Firebase
IA
Claude
Entrega y calidad
Vercel
GitHub Actions
Vitest
Playwright
Yarn
Prácticas
PRs pequeños y apilados
Los cambios salen como pull requests pequeños y apilados, y cada uno se revisa de forma independiente.
Lighthouse y axe en cada preview
Cada preview de Vercel recibe una corrida de Lighthouse y un chequeo de accesibilidad con axe, reportados como estados del commit.
Los tests e2e no pueden escribir en producción
Los contextos de Playwright abortan toda petición de escritura salvo que se habiliten de forma explícita, así un test nunca modifica datos reales.
Estático primero, refrescado en segundo plano
Las páginas se prerenderizan y se revalidan con ISR: los visitantes reciben HTML en caché y el contenido se mantiene al día.
Analítica que filtra bots
Las visitas se cuentan sin cookies, y se filtran los crawlers y los navegadores automatizados de pruebas para que los números reflejen personas.
IA con fuentes y presupuesto diario
El asistente AndroAI responde con los datos de este portafolio, cita los proyectos a los que se refiere y se detiene al llegar a un tope diario de gasto en USD.
CORS apto para previews
La API valida los orígenes permitidos por patrón, así los previews de despliegue pueden usarla y cualquier otro origen queda bloqueado.
Test de paridad de traducciones
Un test unitario falla cuando los mensajes en inglés y español se desalinean en claves o en placeholders.
Salud en vivo
Tu navegador hace tres pings a la API ahora mismo y muestra la mediana del tiempo de ida y vuelta.
Consultando la API
Enviando 3 peticiones.
Lighthouse
Puntajes de Lighthouse de la página de inicio con perfil móvil.