Descripción
Contexto general
Portal público del paciente construido con Astro 7 (SSG) y TailwindCSS 4. Permite a los pacientes consultar servicios, profesionales y establecimientos, registrarse, iniciar sesión y gestionar sus citas médicas en línea. Consumo de dos microservicios del backend (Auth y Citas) con client-side fetching en vanilla TypeScript. Autenticación con JWT en localStorage + refresh token en cookie HttpOnly, con silent refresh y retry automático. Design system Hallmark modern-minimal con tokens OKLCH, fuentes self-hosted (Outfit + Instrument Serif). Despliegue con Docker (nginx:alpine) y CI/CD automatizado con Woodpecker CI en aaPanel.
Motivación
Por qué lo construí
Ofrecer a los pacientes un portal público 24/7 donde puedan consultar servicios, profesionales y sedes sin necesidad de contactar al call center.
Digitalizar el agendamiento de citas médicas con un flujo guiado: selección de sede, servicio, profesional, fecha y hora — con auto-fill desde query params para navegación contextual.
Permitir el registro y login de pacientes en línea usando su número de identificación (cédula), con JWT y silent refresh automático.
Mantener consistencia visual con el sistema principal (PlanetMedic) usando el mismo design system Hallmark y la misma paleta de brand.
Características
Lo que destaca
Astro 7 SSG con client-side fetching en vanilla TypeScript — sin framework JS adicional, sin React, Vue ni islands.
Autenticación con JWT en localStorage + refresh token en cookie HttpOnly separada (portal_refresh_token) para evitar colisión con el frontend Angular en localhost.
Silent refresh con retry: cuando una petición recibe 401, se limpia el token, se renueva vía cookie y se reintenta automáticamente.
Auto-fill del formulario de agendamiento vía query params (id_profesional, id_establecimiento, id_servicio) desde las páginas de profesionales y servicios.
Design system Hallmark modern-minimal con tokens OKLCH, macroestructura Split Studio para marketing y auth, fuentes self-hosted en .woff2.
CI/CD con Woodpecker CI: build automático en push a main, despliegue con Docker Compose (nginx:alpine) y proxy reverso en aaPanel con SSL.