App web · tope salarial de la NBA
The Cap Room
Consulta salarios de la NBA, compara jugadores y prueba cambios entre dos equipos según el convenio colectivo de 2023. Cada regla muestra su cálculo.
- Rol
- Período
- Stack
- Enlaces
En números
44
pruebas del motor, incluidas nóminas un dólar por encima de cada umbral de apron e impuesto
19
reglas verificadas en un solo veredicto detallado
582
jugadores en los datos de estadísticas de la liga, con fecha de corte
9
plantillas cuyos totales calcula el motor y compara con los publicados, al dólar
Antes de ejecutar la app
- En mi computadora etl
/pull_stats.py Un proceso ETL en Python descarga las estadísticas de la liga. stats.nba.com bloquea los servidores en la nube, así que se ejecuta fuera de producción. - En el repo Copia de datos con fecha 582 jugadores, más 9 rosters de equipos.
- Antes de cada build scripts
/validate-data.ts Recalcula el total de cada roster con las reglas de tope salarial del motor. Un dólar de diferencia con el total publicado detiene el build.
- tradeRules.ts
- capsheet.ts
- picks.ts
- constants.ts
Al verificar cada cambio
- Navegador La URL guarda el cambio Cada enlace guarda los detalles del cambio para poder compartirlo y volver a abrirlo.
- API POST /api
/trade Valida el cuerpo de la solicitud, carga las hojas salariales y los picks, y llama a validateTrade./validate - Respuesta Un desglose por regla Indica si el cambio es legal y desglosa cada regla con sus cálculos. El cambio de ejemplo devuelve 19 filas.
La idea
The Cap Room ayuda a evaluar decisiones sobre el tope salarial de la NBA. Puedes consultar salarios por equipo, comparar jugadores por percentil de la liga y verificar cambios entre dos equipos según el convenio colectivo de 2023 (CBA). Cada veredicto muestra las reglas y los cálculos salariales que lo sustentan.
Lo que construí
Construí el motor del CBA en TypeScript puro. Cada import en engine/ apunta a otro archivo del motor, independiente de React, Next.js y las operaciones de entrada y salida. Implementa las reglas de 2023 para igualar salarios y transferir efectivo, incluidos el primer apron de $209,015,000, el margen de $250,000 y el límite anual de $8,495,000 en efectivo por cambios. La API devuelve una fila por regla con los cálculos correspondientes.
La propuesta completa de cada cambio cabe en una URL que se puede compartir. La interfaz usa las mismas rutas REST disponibles a través de curl. En octubre, actualicé la app a Next.js 16 y React 19 y la rediseñé con un tablero de la liga adaptado al teléfono, cambios de ejemplo con su veredicto esperado y búsqueda de jugadores con Cmd-K que ignora los acentos.
Proceso las estadísticas fuera de línea con un flujo ETL en Python y guardo copias con fecha de corte. En cada push a main, CI revisa tipos, lint, pruebas del motor, validación de datos y compilación de producción.
Retos técnicos
-
Desglosar las reglas del CBA
Las reglas del CBA se afectan entre sí. El motor evalúa cada una por separado y devuelve un resultado con sus cálculos. Las restricciones de apron se aplican solo al superar el umbral; una nómina justo en la línea queda por debajo. Las pruebas incluyen nóminas un dólar por encima de cada línea.
-
Datos que tienen que cuadrar
El motor vuelve a calcular el total salarial de cada plantilla cargada y lo compara con el total publicado del equipo. Una diferencia de un dólar hace fallar la compilación y señala cualquier discrepancia entre los datos y el motor.
-
Sincronizar el veredicto con la propuesta
Mover el control de efectivo puede generar varias propuestas por segundo. La validación espera 220 ms, cancela la solicitud anterior y vincula cada respuesta con su propuesta. El último veredicto queda atenuado hasta que llegue el actual, para que una respuesta anterior no valide un cambio más reciente.
Antes y después
| Antes | Después | Fuente | |
|---|---|---|---|
| Framework | Next.js 14, con un aviso de seguridad crítico que no tenía arreglo en 14.x. | Next.js 16 y React 19; npm audit de las dependencias de producción reporta 0. | Commit ee79ff3, 9 de octubre de 2026 |
| Accesibilidad (axe-core) | 6 reglas incumplidas en unos 190 elementos, incluidos texto atenuado y un contraste de 3.6:1 en la etiqueta roja FAIL. | 0 infracciones en 75 ejecuciones de axe-core 4.14, con todas las páginas, paneles y menús abiertos, en anchos de 1440 a 320 px. | Commits 189d4f0 y 24b396f, 9 de octubre de 2026 |
| El tablero de la liga en un teléfono | Una gráfica recortada que se desplazaba de lado. | Barras horizontales que caben en una pantalla de 390 px, con las líneas de tope, impuesto y apron marcadas. | Commit 189d4f0, 9 de octubre de 2026 |
Lo próximo
Cambios entre tres equipos, registros de selecciones del draft para cada equipo y plantillas actualizadas.
Pruébalo
Enfoques compartidos
Separar las reglas de la interfaz
Probar con entornos y datos reales
Siguiente proyecto
