Quiricocho – Plataforma para gestionar jugadores de FIFA

---

Una aplicación moderna para gestionar jugadores de FIFA con datos desde 2015 hasta 2023.
Crea, edita, filtra y analiza jugadores con estadísticas completas y timeline de habilidades.

---

Características principales

🧍‍♂️ Gestión de Jugadores CRUD completo con +100 habilidades FIFA 8 categorías organizadas (Ataque, Defensa, etc.) Posiciones múltiples y especiales Datos físicos y financieros 🔎 Búsqueda Inteligente Filtros por nombre, club, posición Versiones FIFA 15–23 Ordenamiento y paginación

📊 Análisis Visual Timeline de evolución Gráficos radar Colores por nivel Comparativas de progreso 💾 Gestión de Datos Exportación/Importación CSV Backup y sincronización Traits interactivos Ratings con estrellas

🔐 Seguridad Autenticación JWT Roles de usuario Validaciones completas Protección de rutas

Tecnologías utilizadas

Node.js Runtime Backend	Angular Framework Frontend	MySQL 8 Base de Datos	Docker Contenedores
Express.js Framework Backend	TypeScript Lenguaje	Sequelize ORM Database	Nginx Web Server
SASS Estilos	Chart.js Gráficos	Git Control de versiones	npm Gestión de paquetes

Instalación

Prerrequisitos

• 🐳 Docker y Docker Compose instalados
• 🔧 Git para clonar el repositorio

---

Instalación rápida

1. Clonar el repositorio

git clone https://github.com/D3PA/quiricocho-webapp.git

cd quiricocho-webapp

2. Configurar variables de entorno

cd backend
cp ../sample.env .env

# El archivo sample.env ya incluye todas las variables configuradas y listas para usar

3. Levantar los servicios con Docker

docker-compose up -d --build

# ⚠️ La primera vez que levantes la aplicación, usar --build
# para asegurarse de que las imágenes se construyan correctamente.
# En ejecuciones posteriores, docker-compose up -d es suficiente.

# Ver estado de los servicios
docker-compose ps

# Ver logs en tiempo real  
docker-compose logs -f

# Reiniciar servicios
docker-compose restart

# Detener servicios
docker-compose down

# Reconstruir imágenes
docker-compose build --no-cache

4. Acceder a la aplicación

Servicio	URL
🌐 Frontend	http://localhost:4200
🔧 Backend API	http://localhost:3000
📚 Swagger docs	http://localhost:3000/api-docs
🗄️ MySQL	localhost:3306

Usuarios predefinidos

Usuario	Email	Password	Permisos
Administrador	[email protected]	admin123	✅ Ver, crear y editar jugadores + Importación CSV
Usuario regular	[email protected]	rodri123	✅ Ver y crear jugadores

Decisiones técnicas y funcionales

🔧 Problemas y soluciones implementadas

Problema con Imágenes de Jugadores

• Problema: Las imágenes de Sofifa estaban bloqueadas por políticas CORS.
• Solución temporal: Se implementó un sistema mixto de imágenes:
  • Jugadores top: 11 jugadores tienen imágenes locales personalizadas.
  • Resto de jugadores: Imagen por defecto genérica (assets/images/players/default-player.png).
• Nota importante: El sistema está preparado para soportar imágenes personalizadas.
  • Los jugadores top como Messi, Ronaldo, Mbappé, etc. ya cuentan con sus imágenes reales, demostrando que la arquitectura soporta imágenes específicas por jugador.

---

🏗️ Arquitectura preparada para imágenes

• El campo player_face_url ya existe en el modelo de jugadores.
• El frontend está diseñado para mostrar imágenes desde URLs externas o locales.
• Jugadores con imágenes especiales:
  Messi, Ronaldo, Mbappé, Lewandowski, De Bruyne, Van Dijk, Neymar, Benzema, Oblak, Hazard, De Gea.

Cómo implementar imágenes reales en el futuro:

1. Configurar un servidor de imágenes sin restricciones CORS.
2. Actualizar las URLs en la base de datos (player_face_url).
3. El frontend mostrará automáticamente las nuevas imágenes.

Demo

videodemo.mp4