Qué es
RocaTeamUp ayuda a organizar fútbol sala amateur. Ligas y temporadas, calendario de partidos, confirmaciones y reservas (un número fijo de plazas por partido), un tablón de partidos abiertos donde los jugadores encuentran partido y solicitan unirse, perfiles de jugador con foto y escudos de equipo, y rankings — goles, MVPs, tarjetas, clasificación de equipos. Está en producción en rocateamup.com, con su propia API en api.rocateamup.com.
Arquitectura
El backend es FastAPI + SQLAlchemy sobre MySQL, organizado en routers → services → models para que la lógica de negocio viva en una capa, no en los handlers HTTP. El frontend es React 19 + TypeScript, con el acceso a datos oculto tras una interfaz IDataService y una implementación ApiDataService — así los componentes dependen del contrato, no de fetch. Esa costura es la que permite intercambiar datos simulados y reales, y testear la UI sin servidor.
Seguridad por defecto
OWASP no es una lista que se pega al final. Las consultas pasan por parámetros de SQLAlchemy, nunca por concatenación de strings (A03). El contenido de usuario en los emails salientes se pasa por html.escape antes de tocar una plantilla. Las dependencias se escanean con Trivy y el código con Semgrep (SAST) en CI, de modo que un patrón peligroso rompe el pipeline en vez de llegar a producción.
Internacionalización a escala
RocaTeamUp está en 11 idiomas, incluido árabe con maquetación de derecha a izquierda completa. El idioma se detecta del navegador y se puede cambiar, persistir y reflejar en <html lang> y <html dir> para que el documento entero invierta su dirección — no solo el texto. Las variantes regionales tienen su propia bandera. i18n de verdad, pensada desde el principio.
SEO y rendimiento
Las rutas públicas se prerenderizan a HTML estático para que los buscadores y el primer pintado reciban contenido real, no el cascarón vacío de un SPA. Las fotos de jugador se redimensionan y convierten a WebP en el cliente (Canvas) antes de subir, acotando el peso sin ir al servidor.
Calidad y CI
La app React tiene una suite de tests real (Vitest) con patrones de mocking deliberados, y ambos repos pasan sus escaneos de seguridad en CI. No es cobertura por la cobertura — es poder cambiar cosas rápido sin romper un producto que la gente usa.
Construido con IA, dirigido por mí
FastAPI y React están fuera de mi día a día (Java enterprise). Usé la IA de palanca para moverme rápido por todo el stack — pero la arquitectura, las decisiones de seguridad y cada compromiso fueron míos, para tomarlos y defenderlos. Esa es la diferencia entre entregar con IA y solo escribir prompts.