React Beauty Flags
React Beauty Flags es una librería React que proporciona más de 250 banderas SVG artesanales — de países a ciudades — diseñadas para aportar color y estilo a interfaces modernas.
Nacida de la frustración con alternativas aburridas o sobrecomplicadas, se centra en la simplicidad, la armonía visual y la experiencia del desarrollador.
Motivación
Tras reutilizar banderas en decenas de proyectos, me di cuenta de que las soluciones existentes eran demasiado pesadas o carecían de consistencia de diseño. Inspirado en la estética limpia y lúdica de Duolingo, decidí diseñar un conjunto que quedara genial en cualquier UI moderna y fuera amigable para desarrolladores.
“Quería algo elegante para portfolios pero suficientemente sencillo para pasar a producción.”
El resultado es una librería con más de 1.000 descargas (¡y creciendo!) en NPM, con gran adopción entre desarrolladores centrados en UI y entusiastas del open source.
Destacados
- +250 Banderas Artesanales - Países, ciudades y símbolos diseñados en Figma.
- Ligero y Rápido - Sin dependencias externas, SVGs optimizados.
- Personalizable - Soporte de utilidades Tailwind para bordes, sombras y radio.
- Búsqueda y Filtrado - Experiencia de búsqueda integrada con URLs compartibles.
- Preparado para TypeScript - Completamente tipado, autocompletado en el IDE.
Detalles Técnicos
Para desarrolladores y mentes curiosas
🧰 Stack Tecnológico
| Herramienta | Propósito |
|---|---|
| React | Librería principal para renderizar componentes |
| TypeScript | Tipado estático y fiabilidad del código |
| Tailwind CSS | Estilos utility-first para el sitio de demo |
| Figma API | Obtener y sincronizar diseños vectoriales de banderas |
| svgo | Optimización de SVG para carga rápida |
| GitHub Actions | CI/CD automatizado para build y publicación en NPM |
⚙️ Scripts de Automatización
get-figma.ts - Obtiene SVGs de Figma vía API y los almacena localmente.
build-flags.ts - Optimiza SVGs con svgo, genera componentes React y enums.
check-flags.ts - Valida la consistencia de banderas y los metadatos faltantes.
🚀 Flujo CI/CD
Cada push a main lanza GitHub Actions para:
- Obtener las últimas banderas de Figma
- Construir y optimizar los assets
- Publicar una nueva versión del paquete en NPM
- Desplegar el sitio de demo en Vercel automáticamente
Este flujo garantiza que la librería esté siempre actualizada y se despliega en menos de 2 minutos.
Vista del Sitio Web
El sitio oficial — construido con Next.js y TailwindCSS — muestra todas las banderas con filtrado en vivo, vistas previas y copia de código instantánea. Cada bandera incluye:
- Personalización interactiva (radio, borde, sombra)
- Copiar al portapapeles con clases Tailwind predefinidas
- Deep-linking vía URL para compartir fácilmente
Aprendizajes e Impacto
Construir React Beauty Flags reforzó mi interés en las herramientas para desarrolladores y el diseño centrado en DX. Automatizar pipelines de assets con TypeScript y APIs de Figma mejoró mi flujo de trabajo, ahorrando más de 10 horas de actualizaciones manuales de banderas por versión.
El proyecto también generó colaboraciones de otros desarrolladores, que contribuyeron con diseños y nuevos scripts.
Los pequeños detalles hacen el software delicioso — y las banderas, sorprendentemente, son uno de ellos.
Planes Futuros
- Añadir banderas de organizaciones mundiales y eventos
- Ampliar las funciones de utilidad (paletas de colores, correspondencia de códigos)
- Añadir analíticas sobre el uso de banderas
- Mejorar los metadatos de accesibilidad
Enlaces
