🏟️ Stadium Frontend

Frontend de la plataforma Stadium para la asignatura ADSW — Universidad Politécnica de Madrid.

Aplicación SPA construida con React + TypeScript + Vite que consume la API REST del backend.

🏗️ Arquitectura

El proyecto sigue una arquitectura por capas inspirada en MVVM (Model-View-ViewModel):

src/
├── api/              # Capa de Servicios — clientes HTTP (axios)
├── types/            # Capa de Modelo — interfaces TypeScript (mirror de DTOs del backend)
├── hooks/            # Capa ViewModel — custom hooks con React Query (lógica de negocio)
├── context/          # Estado global — AuthContext (JWT + sesión)
├── router/           # Enrutamiento SPA — React Router con guardas
├── components/
│   ├── ui/           # Componentes reutilizables (Button, Input, Card, Badge, Spinner)
│   └── layout/       # Layout de la app (Navbar, MainLayout)
├── pages/            # Capa Vista — páginas por funcionalidad
│   ├── Home/
│   ├── Login/
│   ├── Register/
│   ├── Dashboard/
│   ├── Profile/
│   ├── JarUpload/
│   ├── ValidationResults/
│   ├── AdminUsers/        # (Admin only)
│   ├── AdminTemplates/    # (Admin only)
│   ├── VerifyEmail/
│   ├── PasswordReset/
│   └── NotFound/
├── utils/
└── assets/

🚀 Comenzar

Requisitos previos

• Node.js >= 20
• npm >= 10
• Backend stadium_back corriendo en http://localhost:8080

Desarrollo local

# Instalar dependencias
npm install

# Arrancar en modo desarrollo (puerto 3000)
npm run dev

Build de producción

npm run build
npm run preview

🐳 Docker

Build de la imagen

docker build -t stadium_front .

Docker Compose (stack completo)

docker compose up -d

Esto levanta:

• Frontend → http://localhost:3000
• Backend → http://localhost:8080
• PostgreSQL → puerto 5432

🔐 Funcionalidades

Funcionalidad	Ruta	Rol requerido
Home	/	Público
Login	/login	Público
Registro	/register	Público
Verificación email	/verify-email	Público
Reset contraseña	/password-reset	Público
Dashboard	/dashboard	Autenticado
Perfil	/profile	Autenticado
Subir JAR	/jar	Autenticado
Validación JAR	/validation	Autenticado
Gestión usuarios	/admin/users	Admin
Gestión templates	/admin/templates	Admin

🛠️ Stack tecnológico

• React 19 + TypeScript — UI con tipado fuerte
• Vite — Bundler ultrarrápido
• Tailwind CSS v4 — Estilos utility-first
• React Router v7 — Enrutamiento SPA con guardas
• TanStack React Query — Cache y estado del servidor
• Axios — Cliente HTTP con interceptores JWT
• React Hot Toast — Notificaciones
• React Icons — Iconografía

📄 Licencia

MIT License — ver LICENSE.