Cada agosto, la Vila de Gràcia de Barcelona se convierte en algo que hay que ver para creer: 23 calles y plazas compiten por superarse con meses de trabajo artesanal, y durante ocho días hay castellers, correfocs, talleres y conciertos por todo el barrio. Llevamos veinte años viviendo aquí. Esta fiesta es la razón por la que la mitad de nuestros amigos sabe dónde está nuestro estudio, y nos dio una restricción de producto muy concreta: crear para personas que ya están fuera, con el móvil en la mano, buscando qué hacer después. La guía tenía que responder rápido sin convertir el carácter de la festa en una lista de actos anónimos, así que el programa, el mapa y las historias de las calles debían pertenecer al mismo sitio pequeño.
Proyecto propio. Fiestas de Gràcia es una guía no oficial hecha por Clutch Developer — sin afiliación con la Fundació Festa Major de Gràcia ni con el Distrito. El programa oficial está en barcelona.cat/fmgracia. La guía no oficial está en fiestasdegracia.com.
El problema
El programa oficial es un PDF cuidadosamente diseñado con muchísima información. Va muy bien cuando estás planificando en casa, pero se vuelve incómodo el sábado por la noche, cuando estás en una calle abarrotada y quieres responder una pregunta sencilla: ¿qué hay ahora mismo y qué queda cerca de mí? Un PDF no permite filtrar por día, categoría o lugar, ni integra el mapa en la misma decisión. En el móvil, el usuario necesita un camino corto desde la pregunta hasta el acto: elegir un día, acotar la categoría, buscar un nombre o un lugar y abrir las indicaciones o el contexto de la calle. Teníamos una fecha fija de inicio y un presupuesto pequeño de proyecto de tarde, así que el alcance debía mantenerse concentrado: convertir el programa en una guía rápida y legible sin fingir que sustituía a la comunicación oficial.
- Los 134 actos, filtrables por día, categoría y lugar — con accesos directos a la agenda de hoy y a los actos que están ocurriendo ahora durante la fiesta.
- Un mapa en vivo de las 23 calles y plazas engalanadas, los espacios de la fiesta, las zonas peatonales y las rutas prácticas por el barrio.
- Perfiles de las calles con la historia de cada comisión, contexto local, su Instagram y una entrada directa al mapa.
- Un ranking de aplausos — cada visitante recibe 3 aplausos 👏 para repartir entre sus calles favoritas, con el inicio de sesión para vincular este pequeño juego a personas reales.
- Catalán, castellano e inglés. No hace falta app ni registro para leer el programa. Es gratis.
El stack, porque lo vas a preguntar
- Front: HTML/CSS/JavaScript escritos a mano, con URLs reales para el programa, el mapa y las páginas de calles, de modo que cada visitante pueda compartir un destino útil.
- Mapa: Leaflet con tiles de CARTO/OpenStreetMap, usado para conectar las calles engalanadas y los espacios de la fiesta con el mismo programa filtrable.
- Aplausos: estado de inicio de sesión y del ranking respaldado por Supabase, con verificación por email y opciones de Google y Apple para la regla de 3 aplausos por persona.
- Entrega: una pequeña superficie web estática en Netlify, con contenido en catalán, castellano e inglés, analítica condicionada al consentimiento y sin paso de instalación desde una tienda de apps. Mantener estas piezas juntas hizo que la guía cargara rápido, fuera fácil de compartir y se pudiera actualizar mientras cambiaba el programa.
Todo pasó del PDF del Distrito a producción en menos de una semana de tardes, en vivo antes del primer día. La decisión de entrega importante fue detenernos en la respuesta útil: consultar el programa, filtrarlo, ver las calles en un mapa y abrir el contexto local. El visitante no necesita aprender un sistema nuevo ni crear una cuenta; la guía aparece cuando surge la pregunta y después se aparta. Así, un producto pequeño y limitado en el tiempo tiene más posibilidades de usarse que una guía mayor que llega después del momento. Es el mismo enfoque que aplicamos en los sitios web que construimos para clientes: publicar mientras la respuesta todavía importa, mantener visible el alcance y dejar que el producto se gane su siguiente función con el uso real.