Artabrian Weekend
Un fin de semana de torneos de juegos de cartas coleccionables en el Pazo do Monte, en Ferrol. Desde 2024 diseño y desarrollo su web y dirijo la identidad gráfica de cada edición.
- Desarrollo front-end y dirección de arte
- 2024 – actualidad
- Artabrian Nights, asociación sin ánimo de lucro
- React 19 • Vite • Material UI • JavaScript
Contexto
El Artabrian Weekend reúne cada marzo en Ferrol los Main Events de varios juegos de cartas coleccionables —Magic: The Gathering, Star Wars: Unlimited, One Piece y Riftbound, entre otros— en un mismo espacio y un mismo fin de semana, con un máximo de 64 jugadores por evento principal.
El reto no era solo comunicar una cita del calendario, sino guiar a cada participante hasta la información que necesitaba en segundos: el juego correcto, el torneo adecuado, el horario, los premios y el paso para inscribirse. Además, la web tenía que adaptarse con facilidad a cada edición, sin fricción para el equipo organizador.
Mi papel
- Diseño y desarrollo de la web desde la primera versión hasta la actual, con foco en la claridad de la información y la velocidad de uso.
- Rediseño de la identidad de Artabrian Nights y construcción de un sistema gráfico reusable para cada edición.
- Diseño de carteles por juego, creación de contenido para redes y gestión de la comunicación por WhatsApp, con la coordinación del resto del equipo.
- Otro miembro del equipo se encarga del despliegue en Vercel y del mantenimiento técnico de la web en producción.
La web: de Angular a React
La primera versión, de 2025, la desarrollé con Angular y Tailwind CSS. Para la edición de 2026 la reescribí en React 19 con Vite, Material UI, React Router y CSS Modules, en JavaScript, para ganar más flexibilidad y un mejor control visual.
La clave de la reescritura fue transformar la web en un sistema basado en datos. Cada juego tiene su propio archivo JSON con los torneos, y un único componente, Tournament, genera todas las páginas a partir de esos datos. Lo que cambia entre juegos —color, fondo, ruta, cartel y formulario de inscripción— vive en una configuración centralizada.
El resultado es muy claro: añadir un torneo consiste en sumar una entrada a un JSON; añadir un juego entero implica un JSON, una configuración y una página mínima como esta:
import Tournament from "../../components/tournament/tournament";
import magicEvents from "../../data/json/magicJson/mtg.json";
export default function MagicTheGathering() {
return (
<Tournament
events={magicEvents}
tcgId="mtg"
description="Elige tu formato favorito de Magic…"
/>
);
}{
"id": "mtg-team-trios",
"game": "mtg",
"name": "TEAM TRIOS",
"day": "viernes",
"hour": "16:30",
"details": [ … ],
"rewards": [ … ]
}Las páginas de cada juego se cargan en diferido (React.lazy), así que quien entra a Magic no descarga el código de One Piece. La web se despliega en Vercel desde la rama main mediante GitHub Actions, mientras el trabajo diario sigue desarrollándose en develop.
La identidad
La identidad parte del logotipo, una luna sobre una estrella de cuatro puntas, y de un sistema visual común para los carteles: titular en palo seco muy pesado, fechas separadas por puntos, información en bloques con contorno y un grabado de fondo con la figura encapuchada entre lunas.
Cada juego tiene su propia tinta —oro para Magic, rojo para Star Wars— sobre el mismo negro, de modo que cada cartel funciona por sí solo y también como parte de una serie coherente.
Resultados
- 720+
- +30 %
- 1.000+
- 140 kg
Una participación equivale a un jugador en un torneo: quien juega varios días cuenta varias veces. En 2026 llegaron jugadores de Galicia, de otras comunidades y también de Portugal, Alemania y Francia.
Qué haría distinto
En una próxima edición, haría más directo el recorrido hasta la inscripción: ayudaría a comparar torneos y horarios y dejaría más claro el siguiente paso. También llevaría más información variable del evento a la configuración, para actualizarla sin tocar los componentes.