Aplicación web para crear historias de Instagram personalizadas con dimensiones 1080 × 1920 píxeles, ideal para comunicados, avisos y contenido informativo de la Delegación de Estudiantes de Derecho ULL.
- ✨ Fondo personalizado: Color morado característico (#5a048b)
- 📋 Plantillas predefinidas: Módulos listos para usar (Comunicado, Evento, Aviso Simple)
- 📝 Edición de contenido: Solo editas el texto, el diseño ya está optimizado
- 🔤 Control de texto: Tamaño de fuente ajustable y alineación (izquierda/centro/derecha)
- 🎨 Decoraciones mejoradas: Patrones de puzzle, ondas, círculos y anillos
- 🖼️ Imágenes con alineación: Centra imágenes horizontal y verticalmente con un clic
- 🎭 Ilustraciones SVG: Añade ilustraciones vectoriales de bancos públicos (unDraw, Storyset, etc.)
- 💎 Exportación de alta calidad: PNG con escala 3x para máxima resolución
- 📏 Dimensiones exactas: 1080 × 1920 píxeles (formato de historia de Instagram)
- 🔄 Arrastrar y soltar: Reposiciona elementos fácilmente en el preview
- 👁️ Preview en tiempo real: Visualiza cambios instantáneamente
- Node.js (versión 16 o superior)
- npm o yarn
# Instalar dependencias
npm install# Iniciar servidor de desarrollo
npm run devLa aplicación estará disponible en http://localhost:5173
# Generar build optimizado
npm run build- Asegúrate de que el repositorio esté en GitHub
- Verifica que el campo
baseenvite.config.tscoincida con el nombre de tu repositorio
# Deploy automático a GitHub Pages
npm run deployEsto generará el build y lo publicará en la rama gh-pages automáticamente.
- Ve a la configuración de tu repositorio en GitHub
- Navega a
Settings>Pages - En
Source, selecciona la ramagh-pagesy la carpeta/ (root) - Guarda los cambios
Tu aplicación estará disponible en: https://alejandro-diazro.github.io/ull-instagram/
-
Selecciona una plantilla en la sección "Plantillas de Módulos":
- 📋 Comunicado Importante: Para avisos oficiales (título + contenido)
- 🎉 Evento/Actividad: Para eventos y actividades (título dorado + información)
- 📝 Aviso Simple: Para mensajes directos (una sola caja de texto grande)
-
Edita el contenido en la sección "Contenido de Módulos":
- Título/Encabezado: Texto principal (ej: "IMPORTANTE", "¡FIESTA!")
- Contenido Principal: Información detallada
- Los cambios se aplican automáticamente a todos los módulos del mismo tipo
Cada elemento de texto tiene controles completos:
- Tamaño de fuente: Desliza el control (16px - 100px)
- Alineación: Selecciona izquierda ⬅️, centro
↔️ o derecha ➡️ - Posición: Arrastra el texto en el preview
- Subir imagen: Haz clic en "📷 Añadir Imagen"
- Redimensionar: Usa el deslizador de tamaño (100px - 800px)
- Alinear horizontalmente:
- ⬅️ Izquierda
↔️ Centro- ➡️ Derecha
- Alinear verticalmente:
- ⬆️ Arriba
↕️ Centro- ⬇️ Abajo
- Posición manual: Arrastra la imagen en el preview
Añade patrones decorativos que aparecen detrás del contenido:
- 🧩 Puzzle: Añade 8 piezas de puzzle aleatorias (como en la imagen de ejemplo)
- 🌊 Onda: Patrón de ondas decorativas
- ⚪ Círculo: Círculos sólidos
- ⭕ Anillo: Aros decorativos
Añade ilustraciones vectoriales de bancos públicos:
-
Encuentra una ilustración en:
-
Obtén la URL del SVG:
- Descarga el SVG
- Súbelo a GitHub, imgbb.com o similar
- Copia la URL directa del archivo
-
Añádelo en la app:
- Pega la URL en el campo "Ilustración SVG"
- Haz clic en ➕
- La ilustración aparecerá como decoración de fondo
📚 Ver SVG_RESOURCES.md para más detalles sobre bancos de ilustraciones.
- Haz clic en el botón "🗑️" en cualquier elemento de la lista
- Para borrar todo: usa el botón "🗑️ Borrar Todo" al final del panel
- Haz clic en "💾 Descargar Historia (Alta Calidad)"
- La imagen se descargará en formato PNG con resolución 3x (máxima calidad)
- La imagen final tendrá exactamente 1080×1920 píxeles
Edita el archivo src/App.tsx y modifica la línea:
const [backgroundColor] = useState('#5a048b');El preview muestra las dimensiones reales (1080×1920) escaladas a 1:4 para mejor visualización. Para ajustar esto, modifica los estilos en src/App.css en la clase .story-preview.
ull-instagram/
├── src/
│ ├── App.tsx # Componente principal
│ ├── App.css # Estilos de la aplicación
│ ├── types.ts # Definiciones de tipos TypeScript
│ ├── main.tsx # Punto de entrada
│ └── index.css # Estilos globales
├── public/ # Archivos estáticos
├── index.html # HTML principal
├── vite.config.ts # Configuración de Vite
├── tsconfig.json # Configuración de TypeScript
└── package.json # Dependencias y scripts
- React 19 - Librería de interfaz de usuario
- TypeScript - Tipado estático
- Vite - Build tool y dev server
- html2canvas - Conversión de DOM a imagen
- CSS3 - Estilos y diseño responsive
- Las imágenes se cargan y almacenan en memoria (base64)
- El preview muestra una escala reducida (1:4) para mejor visualización
- La exportación genera imágenes a resolución completa (1080×1920)
- Los elementos se pueden superponer libremente
Si deseas contribuir al proyecto:
- Haz un fork del repositorio
- Crea una rama para tu feature (
git checkout -b feature/nueva-funcionalidad) - Haz commit de tus cambios (
git commit -am 'Añade nueva funcionalidad') - Push a la rama (
git push origin feature/nueva-funcionalidad) - Crea un Pull Request
Este proyecto está bajo la Licencia MIT.
Delegación de Estudiantes de Derecho - Universidad de La Laguna
Instagram: @delederechoull
¿Necesitas ayuda? Abre un issue en el repositorio o contacta con la delegación.