- Rol
- Desarrollo: front end, sistema de contenido e integración de donaciones
- Estado
- Fuera de línea
- Stack
- React, Vite, JavaScript, CSS
El encargo
Una campaña sin fines de lucro necesitaba un sitio bilingüe para recaudar fondos tras el terremoto en Venezuela. Iba a estar activo un mes y giraba en torno al básquetbol.
Qué construí
Lo hice en React con Vite: estética pixel art de básquetbol, un video en loop en la portada, textos en español e inglés desde un solo archivo de contenido, un marcador donde cada donación suma un enceste y un feed que muestra las donaciones recientes de a una. Las donaciones pasan por un embed de Zeffy en la misma página.
Funcionalidades
- Español e inglés, según el navegador y recordando la elección
- Marcador con encestes, vidas impactadas y total donado
- Feed de donaciones en vivo en una esquina, con un ritmo que nunca las amontona
- Todos los textos en un solo archivo
- Marcos pixel art dibujados en SVG que se redibujan al cambiar de tamaño
- Embed de donaciones de Zeffy
Desafíos
Problema. El sitio tenía que estar listo en pocas semanas para una campaña de un mes.
Solución. Un build chico en React con todos los textos en un archivo, así los cambios de copy nunca tocaban los componentes.
Problema. Las esquinas pixel art tenían que mantener una línea continua alrededor de cajas redondeadas de cualquier tamaño.
Solución. Cada caja dibuja su borde como un path SVG y lo vuelve a dibujar cuando cambia de tamaño.
Conclusión
El sitio se bajó cuando terminó el mes, así que estas capturas vienen de un build local.
