Una aplicación web moderna e interactiva para crear tier lists personalizadas de videojuegos con funcionalidades avanzadas de drag & drop, integración con Steam API y exportación de alta calidad.
🎯 Características • 🚀 Demo • 📦 Instalación • 🎮 Uso • 🤝 Contribuir
Screenshots y GIFs demostrativos próximamente
Interfaz principal de TierList Creator
|
|
🌐 Prueba TierList Creator ahora
No requiere instalación - funciona directamente en tu navegador
| Categoría | Tecnología | Versión | Propósito |
|---|---|---|---|
| ⚛️ Frontend | React | 18.2.0 | Framework principal |
| ⚡ Build Tool | Vite | 5.0.8 | Bundler y dev server |
| 🎯 Drag & Drop | @dnd-kit | 6.0.8+ | Sistema de arrastrar y soltar |
| 🎨 Estilos | CSS3 + Modules | - | Estilos modulares |
| 🔧 Iconos | Lucide React | 0.525.0 | Iconografía moderna |
| 📸 Exportación | html2canvas | 1.4.1 | Generación de imágenes |
| 🛡️ Sanitización | DOMPurify | 3.2.6 | Seguridad XSS |
| 🚀 Deploy | Netlify | - | Hosting y CI/CD |
graph TD
A[React App] --> B[Components]
A --> C[Services]
A --> D[Utils]
B --> E[DraggableItem]
B --> F[TierList]
B --> G[Toolbar]
C --> H[Steam API]
D --> I[File Utils]
D --> J[Templates]
|
🟢 Requerido
|
🔵 Recomendado
|
# 1️⃣ Clona el repositorio
git clone https://github.com/SwonDev/tierlist-creator-swonproject.git
cd tierlist-creator-swonproject
# 2️⃣ Instala las dependencias
npm install
# 3️⃣ Inicia el servidor de desarrollo
npm run dev
# 4️⃣ ¡Abre tu navegador en http://localhost:5173! 🎉# Construir imagen
docker build -t tierlist-creator .
# Ejecutar contenedor
docker run -p 5173:5173 tierlist-creator
|
|
|
|
🔧 Configuración de Steam API
-
Accede a la configuración
Toolbar → ⚙️ Configuración → 🎮 Steam API -
Ingresa tu información
- Steam ID (ej:
76561198000000000) - URL de perfil (ej:
steamcommunity.com/id/tuusuario)
- Steam ID (ej:
-
Selecciona juegos
- ✅ Marca los juegos que quieres incluir
- 🔍 Usa el filtro de búsqueda
- 📚 Importa bibliotecas completas
-
¡Listo!
- Los juegos aparecen automáticamente
- Imágenes en alta calidad
- Metadatos incluidos
| Acción | Windows/Linux | macOS |
|---|---|---|
| Pegar imagen | Ctrl + V |
Cmd + V |
| Deshacer | Ctrl + Z |
Cmd + Z |
| Rehacer | Ctrl + Y |
Cmd + Shift + Z |
| Guardar | Ctrl + S |
Cmd + S |
| Exportar | Ctrl + E |
Cmd + E |
| Ayuda | F1 |
F1 |
|
🚀 Optimizaciones Frontend
|
📊 Métricas de Rendimiento
|
- 🎹 Navegación por teclado completa
- 📢 Screen reader compatible (ARIA labels)
- 🌗 Alto contraste disponible
- 👆 Touch-friendly (44px+ touch targets)
- 🔍 Zoom hasta 200% sin pérdida de funcionalidad
- ⚡ Reduced motion para usuarios sensibles
| Navegador | Versión Mínima | Estado |
|---|---|---|
| Chrome | 90+ | ✅ Totalmente compatible |
| Firefox | 88+ | ✅ Totalmente compatible |
| Safari | 14+ | ✅ Totalmente compatible |
| Edge | 90+ | ✅ Totalmente compatible |
| Mobile Safari | 14+ | ✅ Optimizado |
| Chrome Mobile | 90+ | ✅ Optimizado |
- 📱 Mobile: 320px-768px (touch optimizado)
- 📟 Tablet: 768px-1024px (interacción híbrida)
- 💻 Desktop: 1024px-1440px (funcionalidades completas)
- 🖥️ Large: 1440px+ (layouts expandidos)
🎯 Nuevas Características Planificadas
- 🎲 Plantillas predefinidas (RPGs, FPS, Indie, etc.)
- 🏆 Sistema de logros y estadísticas
- 👥 Tier lists colaborativas en tiempo real
- 🎯 Comparación de tier lists entre usuarios
- 💾 Base de datos en la nube (opcional)
- 🔐 Autenticación de usuarios (Google, Steam, Discord)
- 📱 PWA completa con instalación
- 🌙 Modo oscuro automático
- 🎬 Animaciones avanzadas con Framer Motion
- 🎨 Editor de temas personalizado
- 📐 Layouts alternativos (circular, hexagonal)
- 🔍 Zoom y pan en tier lists grandes
- 🎮 Epic Games Store API
- 🎯 IGDB (Internet Game Database)
- 📺 Twitch integration para streamers
- 📱 Discord bot para compartir
- 🤖 IA para recomendaciones de juegos
- 🎥 Exportación a video (timelapses)
- 🌍 Comunidad global de tier lists
- 📊 Analytics avanzados de tendencias
tierlist-app/
├── public/ # Archivos estáticos
├── src/
│ ├── components/ # Componentes React
│ │ ├── DraggableItem.jsx
│ │ ├── TierList.jsx
│ │ ├── Toolbar.jsx
│ │ └── ...
│ ├── services/ # Servicios (Steam API)
│ ├── utils/ # Utilidades y helpers
│ ├── App.jsx # Componente principal
│ └── main.jsx # Punto de entrada
├── package.json
└── vite.config.js
|
|
# 1️⃣ Fork y clona el repositorio
git clone https://github.com/tu-usuario/tierlist-creator-swonproject.git
cd tierlist-creator-swonproject
# 2️⃣ Instala dependencias
npm install
# 3️⃣ Crea una rama para tu feature
git checkout -b feature/mi-nueva-caracteristica
# 4️⃣ Realiza tus cambios y commitea
git add .
git commit -m "feat: añadir nueva característica increíble"
# 5️⃣ Push a tu fork
git push origin feature/mi-nueva-caracteristica
# 6️⃣ Abre un Pull Request en GitHub! 🎉| Comando | Descripción | Uso |
|---|---|---|
npm run dev |
🚀 Servidor de desarrollo | Desarrollo local |
npm run build |
📦 Build para producción | Deploy |
npm run preview |
👀 Preview del build | Testing pre-deploy |
npm run lint |
🔍 Linter ESLint | Code quality |
npm run lint:fix |
🔧 Auto-fix linting | Corrección automática |
🔍 Cómo reportar un bug efectivamente
Antes de reportar:
- Busca si el issue ya existe
- Reproduce el bug en la última versión
- Verifica que no sea un problema de configuración
Incluye en tu reporte:
- 📝 Descripción clara del problema
- 🔄 Pasos para reproducir el bug
- ✅ Comportamiento esperado vs ❌ actual
- 📸 Screenshots/GIFs si es visual
- 💻 Información del sistema:
- OS: Windows/macOS/Linux
- Navegador: Chrome/Firefox/Safari + versión
- Versión de Node.js
- Versión de la app
🐛 Reportar Bug • 💡 Solicitar Feature
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
Libre para usar, modificar y distribuir ✨
Full Stack Developer & Game Dev Enthusiast
"Creando herramientas que inspiran creatividad en la comunidad gaming"
- 🎮 Gaming Community - Por la pasión compartida por los videojuegos
- ⚛️ React Community - Por las increíbles herramientas y recursos
- 🎨 Design Community - Por la inspiración en UX/UI
- 👥 Open Source Contributors - Por hacer posible el desarrollo colaborativo