Demo en vivo

AgentWellnessCenter: una app lúdica para un hábito de ingeniería serio.

Un demo de reservas y administración para agentes de IA ficticios, construido para mostrar cómo YGBStudio convierte desarrollo asistido por IA en software acotado y revisable: specs claras, rutas protegidas, validación, persistencia, tests, documentación y despliegue edge.

Probar demo Ver código

Rol

Build founder-led

Producto, arquitectura, docs, validación

Tipo

Caso demo en vivo

Entrega asistida por IA y estructura de app

Estado

En vivo, código disponible

App externa, código público

Stack

Next.js + Workers

TypeScript, React, Cloudflare D1

Evidencia

Specs, tests, docs

Validación y notas de despliegue

Licencia

MIT

Proyecto open source de YGBStudio

Mapa de rutas

Una app pequeña con límites reales de aplicación.

El demo en vivo es compacto a propósito, pero ejercita rutas de producto que hacen visible la arquitectura: reserva pública, confirmación, login, páginas admin protegidas y escrituras con guardrails.

  1. 01 Acceso: Público

    Reserva pública

    Visitantes eligen agentes, dolencias, terapias y detalles de cita con datos semilla.

    Ruta: /booking
  2. 02 Acceso: Público

    Confirmación

    El flujo de reserva termina en un estado de confirmación, no en un formulario suelto.

    Ruta: /booking/confirmation
  3. 03 Acceso: Admin

    Login

    Un login con JWT para admin/staff protege las rutas operativas de navegación pública.

    Ruta: /login
  4. 04 Acceso: Protegido

    Dashboard

    Usuarios autenticados entran a un shell admin compacto para revisar la operación.

    Ruta: /dashboard
  5. 05 Acceso: Protegido

    Gestión

    Las rutas admin exponen registros, escrituras del servidor y guardrails de conflicto.

    Ruta: /agents

Entrega asistida por IA

El proceso es parte del demo.

AgentWellnessCenter no es solo un walkthrough de app. Documenta la disciplina de trabajo alrededor de la entrega asistida por IA: definir intención, escribir la spec, planear la fase, validar el resultado y dejar contexto suficiente para el siguiente cambio.

delivery-loop.md entrega revisable 
# ciclo de entrega asistida por IA
intencion -> specs -> plan -> validacion
validacion -> implementacion
implementacion -> tests + docs
docs -> siguiente fase acotada
  1. 01 mission.md

    Intención

    El trabajo empieza con el propósito de producto y la tesis técnica que debe demostrar.

  2. 02 specs/

    Specs

    Requisitos, decisiones de stack y carpetas por fase mantienen el trabajo acotado e inspeccionable.

  3. 03 plan.md

    Plan

    Cada fase convierte ambigüedad en una ruta concreta antes de tocar código.

  4. 04 validation.md

    Validación

    Los criterios de finalización se nombran antes de implementar, para que "listo" tenga evidencia visible.

  5. 05 app/ + lib/

    Implementación

    Rutas, límites de datos, helpers de auth y UI se mantienen en zonas de responsabilidad claras.

  6. 06 Vitest

    Tests

    Checks unitarios y de integración protegen validación, datos y expectativas de UI.

  7. 07 docs/

    Docs

    Notas de arquitectura, API/datos, auth, despliegue y operaciones hacen que el demo sea enseñable.

Arquitectura

Pequeña para inspeccionar, estructurada para confiar.

La app separa páginas públicas, páginas protegidas, route handlers, validación y persistencia para que el demo siga siendo fácil de explicar sin fingir que es más grande de lo que es.

Ese equilibrio es el punto: un proyecto compacto también puede mostrar cómo YGBStudio piensa en mantenibilidad, handoff y límites con mentalidad de producción.

architecture.md request flow 
Browser
  -> Next.js App Router
  -> paginas publicas + paginas protegidas
  -> route handlers
  -> QueryService
  -> AppDatabase interface
  -> Cloudflare D1 runtime
  -> ruta de tests compatible con SQLite

Evidencia del código

Donde las afirmaciones se encuentran con el código.

El repositorio respalda el caso con artefactos concretos: specs, límites de datos, checks de auth, validación, tests y notas de despliegue.

Specs

El repositorio trata las especificaciones como plano de control para el trabajo asistido por IA.

Fuente

specs/mission.md, specs/tech-stack.md, specs/roadmap.md

specs/
  mission.md
  tech-stack.md
  roadmap.md
  phase-*/
    requirements.md
    plan.md
    validation.md

Lectura

Los artefactos de planificación muestran cómo una petición vaga se convierte en trabajo acotado y verificable.

Arquitectura

La lógica de negocio pasa por un límite de datos estrecho en vez de conectar cada página directamente al almacenamiento.

Fuente

lib/query-service.ts, lib/database/*

Route handler
  -> QueryService
  -> AppDatabase
  -> D1 adapter
  -> SQLite test adapter

Lectura

La app sigue siendo modesta, pero usa un límite con mentalidad de producción: las rutas se enfocan en comportamiento y la persistencia puede cambiar entre tests y Workers.

Protección

La experiencia admin está protegida tanto en rutas como en operaciones de escritura.

Fuente

middleware.ts, app/api/auth/*, app/api/*

Sin sesión -> /login?from=...
Admin o staff -> shell protegido
Write APIs -> checks de auth del servidor
Deletes con citas -> conflicto 409

Lectura

Esto muestra la diferencia entre un guard visual y un límite de aplicación que protege mutaciones del servidor.

Entrega

La app está desplegada en edge, no solo presentada como mock local de portafolio.

Fuente

open-next.config.ts, wrangler.toml, docs/cloudflare-workers-deployment.md

Next.js App Router
OpenNext Cloudflare
Workers Static Assets
Cloudflare D1 binding
Wrangler preview and deploy scripts

Lectura

El despliegue importa: visitantes pueden probar la app y desarrolladores pueden inspeccionar cómo se construye, valida y entrega.

Límites

Premisa lúdica, límites claros.

AgentWellnessCenter es una clínica ficticia para agentes de IA. Su valor está en el proceso de ingeniería visible y la app desplegada, no en el dominio simulado de cuidado.

Diseñado para

  • Mostrar cómo YGBStudio estructura entrega asistida por IA con specs, planes, validación y docs.
  • Demostrar una app full-stack compacta con flujos públicos y protegidos.
  • Enseñar patrones de trabajo con agentes de código mediante una superficie lúdica y evidencia técnica concreta.
  • Dar a clientes, colaboradores y revisores técnicos una app funcional que puedan probar antes de leer el código.

No diseñado para

  • Proveer consejos médicos, de bienestar, terapia o atención clínica.
  • Reemplazar los casos de herramientas reutilizables en Proyectos.
  • Prometer madurez de producción que el alcance documentado no promete.
  • 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.

Aviso de salud

Esto no es un producto médico, de bienestar, terapia o atención clínica. Es un demo ficticio de software.

Si te gusta lo que ves

Siempre estoy abierto a trabajo interesante. Saluda.

Escríbeme Ver GitHub

Estudio independiente. Open source.