02 · Aplicación web · 2026 — actualidad
Chronia Timeline
Líneas de tiempo estructuradas para entender la historia viendo qué pasaba a la vez.
- 4
- Niveles: época, etapa, suceso e hito
- IA
- Asistente que propone y previsualiza cambios
- MCP
- Conector para Claude y ChatGPT
- PDF · Excel
- Importación y exportación
Contexto
Una cronología siempre es incompleta: cuenta una parte de la historia con el criterio de su autor. La literatura, el arte, la ciencia o la política no se entienden aisladas, y para dar sentido a los acontecimientos hace falta una visión de conjunto.
Chronia no es un lienzo donde se colocan elementos sueltos. Cada acontecimiento vive en una estructura de cuatro niveles, y esa estructura es la que permite superponer cronologías de distintos autores y ver qué ocurría a la vez en cada área.
Mi rol
Diseño y desarrollo full stack
- Chronia es un producto que diseño y desarrollo por completo: el editor, el modelo de datos, la API, la integración con IA y el despliegue.
- La parte más exigente es el editor, que coloca cientos de eventos según sus fechas y su nivel sin que se solapen, con zoom y arrastre fluidos.
- También he construido el servidor MCP y su servidor de autorización OAuth 2.1, para que un asistente pueda leer y modificar los timelines de un usuario con su permiso.
El producto
Qué hace, parte por parte
01 / 04
Una estructura de cuatro niveles
Las épocas contienen etapas, las etapas contienen sucesos y los hitos marcan momentos concretos. Cada nivel se dibuja en su propia franja y hereda el color de su época, de modo que la jerarquía se lee de un vistazo.
- Fechas antes y después de Cristo, exactas o aproximadas
- Colores, etiquetas e importancia por evento
- Descripciones, imágenes, documentos y ubicación
02 / 04
Un editor que aguanta cronologías grandes
El lienzo se recorre con zoom y arrastre, y cada evento se coloca solo según sus fechas. Cuando la información crece, el árbol de eventos permite buscar, plegar ramas y mostrar u ocultar cada elemento, y los filtros dejan solo lo importante.
- Zoom y arrastre, con autoguardado mientras se edita
- Árbol con toda la jerarquía y buscador
- Filtros por importancia, etiquetas y ubicación
03 / 04
Asistente de IA con vista previa
El asistente genera las etapas de una época, rellena descripciones o convierte un PDF de apuntes en un timeline. Nada se aplica directamente: los cambios se previsualizan sobre el timeline y el usuario decide si los acepta.
- Conversación guardada por timeline
- Importación de PDF con instrucciones
- Coste de uso visible para el usuario
04 / 04
Publicar, compartir y exportar
Una cronología se publica con un enlace y cualquiera la explora sin cuenta o la duplica en su espacio para completarla. Todos los datos se exportan a Excel, se editan allí y se vuelven a cargar; el timeline sale en PDF listo para imprimir.
- Galería de timelines públicos
- Excel de ida y vuelta
- PDF multipágina para montar como mural
Y además
- Comparación de varias cronologías en el mismo eje
- Reproducción automática del timeline
- Mapa con la ubicación de los eventos
- Cinco temas visuales
Arquitectura
Cómo está construido
- Frontend
- React 19 con Vite y React Router. El estado vive en hooks propios para el layout, la interacción y la exportación del timeline.
- Backend
- Express con arquitectura hexagonal: dominio, casos de uso, controladores e infraestructura separados.
- Datos
- MongoDB con los eventos embebidos en el documento de cada timeline y control de versiones optimista: una versión antigua recibe un conflicto y el editor recarga.
- Autenticación
- Firebase Auth con Google. El token viaja como Bearer en cada petición a la API.
- Conector MCP
- Servidor MCP remoto con su propio servidor OAuth 2.1 (PKCE, registro dinámico de clientes y rotación de tokens). Las propuestas de un asistente no cambian nada hasta que el usuario las confirma.
- React 19
- Vite
- React Router
- Node.js
- Express
- MongoDB
- Firebase Auth
- AWS S3
- MCP
- OAuth 2.1
Siguiente proyecto
OurMap
Un mapa de recuerdos de viaje para parejas, amigos y familia.