Rol
Ejercicio de ingeniería
Arquitectura, testing, refactoring
Demo en vivo
AcmeDashboard: de un tutorial guiado a un ejercicio riguroso de ingeniería.
Una app full-stack de facturación y gestión de clientes construida para explorar los desafíos técnicos que los tutoriales omiten: migración ORM, testing robusto, refactoring de arquitectura, accesibilidad y patrones modernos de React 19.
Tipo
Caso demo en vivo
App full-stack de facturas/clientes
Estado
En vivo, código disponible
App externa, código público
Stack
Next.js + Drizzle
React 19, TypeScript, Auth.js
Evidencia
75 tests, migración ORM
Server Actions, patrones React 19
Licencia
MIT
Proyecto open source de ejercicio
Mapa de rutas
CRUD estándar, rigurosamente implementado.
La aplicación incluye los flujos esenciales de negocio, construidos con accesibilidad, tipado seguro y validación en cada límite.
- 01 Acceso: Público
Login
Autenticación basada en credenciales usando Auth.js. Middleware en el edge protege el dashboard.
Ruta: /login - 02 Acceso: Protegido
Dashboard
Resumen con gráfico de ingresos, tarjetas resumen y últimas facturas extraídas con Drizzle ORM.
Ruta: /dashboard - 03 Acceso: Protegido
Facturas
CRUD completo para facturas con búsqueda, paginación y validación de servidor con Zod.
Ruta: /dashboard/invoices - 04 Acceso: Protegido
Clientes
Flujo de gestión de clientes, reemplazando la vista de solo lectura del tutorial por un CRUD completo.
Ruta: /dashboard/customers
Enfoque de Ingeniería
El trabajo deliberado detrás de la UI.
Más allá de la base del tutorial, este repositorio representa un trabajo independiente para resolver retos arquitectónicos, de testing y estructurales en apps web modernas.
definitions.ts tipado seguro
# Tipos en tiempo de compilación
Expect> // Asegura que los tipos sincronicen con BD - 01 lib/db/schema.ts
Migración de Datos
Reemplazo de SQL nativo por Drizzle ORM. Esquema y tipos son derivados y verificados en compilación.
- 02 Vitest + RTL
Testing
75 tests validando interacción de formularios, envíos asíncronos, estados de carga y accesibilidad.
- 03 useActionState
Patrones React 19
Uso de useActionState, useFormStatus y Server Actions para mutaciones y manejo de estado.
- 04 app/ui/common/
Abstracción de UI
Más de 25 componentes reutilizables y 3 custom hooks consumidos por facturas y clientes.
- 05 TrackedToast
Notificaciones
Sistema flash basado en cookies que asegura exactamente un toast por mutación.
- 06 ARIA + Teclado
Accesibilidad
Regiones live de ARIA, diálogos navegables por teclado, etiquetas para lectores de pantalla.
Arquitectura
Server Components y mutaciones en React 19.
La obtención de datos se realiza directamente en el servidor vía Drizzle. Las mutaciones fluyen exclusivamente a través de Server Actions validados por Zod, usando características de React 19 para gestionar estados de carga y ciclo de vida de formularios sin librerías de terceros.
La autenticación aprovecha el middleware de Next.js en el edge para proteger rutas, levantando el entorno Node.js únicamente al verificar credenciales con la base de datos.
architecture.md request flow
Navegador
-> Middleware (Auth Edge)
-> Server Components (Lectura)
-> Drizzle ORM (PostgreSQL)
Envío de Formulario
-> Server Actions (Mutación)
-> Validación Zod
-> Escritura BD + Flash Cookies
-> Redirección a VistaEvidencia del código
Donde las afirmaciones se encuentran con el código.
El repositorio proporciona ejemplos concretos de cómo probar UIs asíncronas, implementar notificaciones flash basadas en cookies y garantizar tipado estricto en toda la pila.
Arquitectura
Las mutaciones fluyen por Server Actions con validación estricta de servidor y feedback consistente.
Fuente
app/lib/actions/*
export async function createInvoice(
prevState: State,
formData: FormData
) {
// Validar con Zod antes de acceder a la BD
// Escribir en BD vía Drizzle
// Establecer cookies flash para notificar
// Redirigir al tener éxito
}Lectura
Muestra un patrón de mutación resiliente que reemplaza fetch manuales por Server Actions de React 19.
Testing
El comportamiento observable se valida en lugar del estado interno del componente.
Fuente
tests/components/*
// Ejecución de suite de tests
pnpm test
pnpm test:coverage
75 tests a través de 10 archivos
Cobertura: ~85% en las métricasLectura
Demuestra habilidad para probar UI interactiva compleja, incluyendo toasts, diálogos y estados de carga.
Seguridad
La autenticación se divide en runtimes para proteger rutas eficientemente.
Fuente
auth.config.ts, auth.ts
auth.config.ts (Edge):
// Protege cada petición
// Redirige no autenticados
auth.ts (Node):
// Valida credenciales
// Consulta la BD con bcryptLectura
El middleware edge asegura que la BD se mantenga fuera del ciclo de petición para usuarios sin autenticar.
Límites
Un ejercicio, no un producto.
AcmeDashboard existe para demostrar prácticas de ingeniería, estrategias de testing y arquitectura moderna. No está diseñado como una aplicación de producción.
Diseñado para
- Explorar y resolver problemas reales de ingeniería omitidos por tutoriales típicos.
- Demostrar patrones modernos de React 19 (Server Actions, useActionState, useFormStatus).
- Exhibir estrategias robustas de testing para UIs interactivas con Vitest y RTL.
- Implementar accesibilidad como restricción central de diseño y no como un añadido posterior.
No diseñado para
- Ser utilizado como una herramienta real de facturación en producción.
- Procesar pagos reales o almacenar datos personales sensibles.
- Embeber la aplicación en vivo dentro del sitio de YGBStudio.
Estado del demo
Demo público en vivo con credenciales demo. La app está pensada para inspección, walkthroughs, enseñanza y revisión de portafolio.
No apto para producción
Esta es una demostración técnica y no debe ser usada para procesar facturas reales ni manejar datos empresariales sensibles.
Si te gusta lo que ves
Siempre estoy abierto a trabajo interesante. Saluda.
Estudio independiente. Open source.