Compartir
Portada de dragoadri.com: mi web personal, por dentro
Proyecto nextjs · fastapimysql

dragoadri.com: mi web personal, por dentro

Mi web personal y banco de pruebas: publicaciones, herramientas, un arcade y un asistente, sobre el mismo backend que mi app.

2 feb 20263 minde lectura
Desde
2025
Publicaciones
75
Herramientas
33
Juegos
30
año
2026
estado
Online

Qué es

dragoadri.com es mi web personal y mi banco de pruebas. Aquí publico proyectos, lecturas, reflexiones, gadgets e intereses, y alrededor han crecido una sección de herramientas, un arcade, una página de servicios, un «Sobre mí» que se usa como una terminal y una zona reservada de acceso restringido.

Tiene cuentas, comentarios, newsletter y avisos de cada publicación nueva en la web, por correo y por Web Push. La portada la preside la Nova, una nube de partículas que cambia de forma: para mí, el alma de la web.

Un paseo por la web

La portada: la Nova, una nube de partículas WebGL que cambia de forma

La portada: la Nova, una nube de partículas WebGL que cambia de forma

El archivo de publicaciones, con la constelación en la cabecera

El archivo de publicaciones, con la constelación en la cabecera

El panel de herramientas

El panel de herramientas

El arcade de juegos

El arcade de juegos

«Sobre mí», una terminal que se usa escribiendo comandos

«Sobre mí», una terminal que se usa escribiendo comandos

La Nova

Partículas WebGL que recorren 11 figuras y la que dibujes tú; se apartan del ratón y ajustan su calidad a cada dispositivo.

Archivo vivo

75 publicaciones con buscador, filtros por etiqueta y una constelación en la cabecera donde cada publicación es un punto de luz.

33 herramientas

Suite de PDF, descargador de medios, encuestas, biblioteca, regex, cron, QR y más. Algunas piden cuenta y tienen cuota diaria.

Arcade de 30 juegos

De Snake y Tetris al ajedrez contra la CPU, con cinco juegos en 3D. Se juega sin cuenta; con ella guardas récord y entras en el ranking.

Drago.AI

Asistente flotante que responde sobre la web y sobre mí con un RAG propio sobre modelos locales, con respaldo en la nube.

10 idiomas

Selector de idioma con traducción automática del contenido: DeepL como motor principal y otro servicio de respaldo.

Arquitectura

El frontend es Next.js 15 con App Router, React 18, TypeScript y Tailwind. No es solo interfaz: tiene cerca de 290 rutas de API propias y habla con MySQL 8 a través de Prisma, cuyo esquema de 103 modelos es la única fuente de verdad de la base de datos.

Al lado vive un backend en FastAPI (Python 3.12, SQLAlchemy asíncrono) bajo /api/v1, que usa esas mismas tablas sin migrarlas nunca. Todo corre en contenedores Docker. La seguridad va por capas: un cortafuegos de aplicación propio, límites de peticiones, un captcha verificado en el servidor y una sesión de administración separada de las cuentas normales.

Las pruebas van con Vitest, pytest y Playwright. Buena parte del mantenimiento lo hago con agentes de programación, siempre con un diseño escrito antes del código.

Un backend para dos clientes

Ese FastAPI no es solo de la web. Mi app móvil DragoTerminal tenía su propio servidor, con PostgreSQL, otra tabla de usuarios y otros secretos. Desde junio de 2026 las dos usan este backend, con MySQL como único motor: los usuarios y contraseñas son los mismos en la web y en la app, y funciones como las encuestas o la biblioteca se diseñan con un contrato común para ambas.

Editar desde la propia página

No hay un CMS aparte. Con la sesión de administrador activa, cada página pública muestra sus controles: edito el texto donde se lee, reordeno secciones, subo imágenes y vídeo, toco los metadatos y publico. Cada guardado deja una versión restaurable, hasta 50 por publicación, y el servidor revisa cada escritura en vez de fiarse de la interfaz. Una publicación entera también se exporta e importa como JSON en un formato propio, PUBSPEC, que es como se ha escrito esta ficha.

Relacionadas por parentesco

Al pie de cada publicación salen tres relacionadas. Antes eran las más recientes de la misma categoría; ahora se puntúan todas. Un enlace escrito a mano en el texto pesa 100, una etiqueta compartida pesa más cuanto más rara es y la categoría cuenta poco a propósito, para que no colonice la lista.

Esos enlaces a mano forman una telaraña de casi cien entre categorías distintas. Por eso la ficha de mi emisora de radiocontrol recomienda el dron y el avión FPV, y no otros tres gadgets.

Un respaldo que se commitea solo

La base de datos manda, pero no es la única copia. Cada minuto, un temporizador lanza un script que lee una marca de agua con una sola consulta: si nada ha cambiado, termina en milisegundos. Si algo cambió, exporta cada publicación a un JSON del repositorio, vuelca las tablas de contenido a SQL, commitea solo esas rutas, sin tocar el trabajo a medias, y hace push. Restaurar es un comando, con modo de prueba y por publicación.

Estado real

El primer commit es de julio de 2025 y hoy suma unos 930 commits de código, sin contar los del respaldo automático. No todo lo que pruebo se queda: construí una red neuronal en 3D para la cabecera del archivo y la retiré en favor de la constelación 2D.

Materiales / Compra

Tienda: Next.js, React, Prisma, FastAPI y SQLAlchemy como base; Three.js y OGL para el WebGL; TipTap para el editor; Shiki para el código; DeepL para traducir; Ollama para los modelos locales del asistente; web-push y Sentry.

Aprendizajes

Una web personal se convierte enseguida en un sistema: usuarios, permisos, avisos, copias. Lo que más me ha servido es una sola fuente de verdad para cada cosa: el esquema en Prisma, los bloques en la base de datos, un único backend para web y app. El error que más caro salió fue el contrario: tres renderizadores para las mismas publicaciones, hasta que lo que veía al editar dejó de coincidir con lo publicado.