Fast Or Nothing Admin Platform

Full-Stack DeveloperDesarrollador Full-Stack2025
AngularTypeScriptREST APIsRBAC

Fast Or Nothing (FON) is a racing organization in Puerto Rico. They run drag races, roll races, time attacks, and drift events across multiple tracks. Their admin platform manages the operational side: events, driver registrations, users, race specs, categories, and tournament configuration.

Why a rebuild

The previous platform was not just outdated -- it was structurally degraded. The admin code mixed product flows, data access, styling, and state handling inside large page-level components. Loose typing, inline styles, and scattered debug code made ordinary changes risky. The UI had the same problem at the product level: navigation was unclear, data-dense screens were flat, and basic operational tasks took too many steps.

Patching was not viable. The old codebase had reached a point where extending it meant working around the structure instead of building on top of it. The decision was a full rebuild: a better admin experience and a cleaner engineering foundation.

Architecture decisions

  • Angular 21 for the frontend -- standalone components, typed models, and feature-based routing replaced the older page-heavy Angular/Ionic structure
  • Design-system foundation -- reusable UI primitives, semantic theme tokens, and documented component rules replaced one-off screen styling
  • Centralized app services -- API access, auth, session state, permissions, notifications, and tenant logic were moved into shared services instead of being repeated across screens
  • Multi-tenant -- FON operates across multiple tracks, each with isolated data and configurable permissions
  • End-to-end authorization -- tenant-aware module access with dynamic permissions across backend and frontend
Admin shell architecture
Angular 21 admin shellstandalone, routed workspace
├── Core servicesauth, API, tenants, notifications
│ ├── Auth + permissions
│ ├── Session state
│ └── Typed API clients
├── Feature modulesevents, users, specs, tournaments
│ ├── Events
│ ├── Registrations
│ └── Tournaments
└── Shared UItables, forms, dialogs, layout
├── Reusable primitives
└── Theme tokens

What changed

The rebuild touched every screen -- events, users, specs, categories, tournaments, registrations. Every module was redesigned with consistent layout patterns, proper data tables, inline actions, and clear navigation hierarchy.

Full scope

The same pattern was applied across the entire platform:

  • Multi-day events with per-day pricing and discount codes with usage tracking
  • Race styles: Drag, Roll Race, 1/4 Mile, Time Attack, Drift
  • Driver registration with capacity enforcement
  • Tournament bracket and scoring configuration
This was a product recovery and a code-quality reset, not a cosmetic reskin. Every module was rebuilt from scratch -- the screenshots above are just two examples from events. The old system was holding the business back. The new one gives the business and the engineering team a platform they can build on.

Fast Or Nothing (FON) es una organizacion de carreras en Puerto Rico. Organizan drag races, roll races, time attacks y drift en multiples pistas. Su plataforma admin gestiona el lado operativo: eventos, registros de pilotos, usuarios, specs de vehiculos, categorias y configuracion de torneos.

Por que reconstruir

La plataforma anterior no solo estaba desactualizada -- estaba estructuralmente degradada. El codigo admin mezclaba flujos de producto, acceso a datos, estilos y manejo de estado dentro de componentes grandes a nivel de pagina. El uso amplio de tipos sueltos, estilos inline y codigo de debug hacia que cambios normales fueran riesgosos. La UI tenia el mismo problema a nivel de producto: la navegacion era confusa, las pantallas con datos densos eran planas y las tareas operativas basicas tomaban demasiados pasos.

Parchear no era viable. El viejo codebase habia llegado a un punto donde extenderlo significaba trabajar alrededor de la estructura en vez de construir encima de ella. La decision fue una reconstruccion completa: una mejor experiencia admin y una base de ingenieria mas limpia.

Decisiones de arquitectura

  • Angular 21 para el frontend -- componentes standalone, modelos tipados y routing por features reemplazaron la estructura anterior mas pesada en paginas de Angular/Ionic
  • Base de design system -- primitivas UI reutilizables, tokens semanticos de tema y reglas de componentes documentadas reemplazaron estilos one-off por pantalla
  • Servicios centralizados de app -- acceso a API, auth, sesion, permisos, notificaciones y logica de tenants se movieron a servicios compartidos en vez de repetirse en cada pantalla
  • Multi-tenant -- FON opera en multiples pistas, cada una con datos aislados y permisos configurables
  • Autorizacion end-to-end -- acceso a modulos con awareness de tenant y permisos dinamicos entre backend y frontend
Arquitectura del shell admin
Shell admin Angular 21workspace standalone con routing
├── Servicios coreauth, API, tenants, notificaciones
│ ├── Auth + permisos
│ ├── Estado de sesion
│ └── Clientes API tipados
├── Modulos por featureeventos, usuarios, specs, torneos
│ ├── Eventos
│ ├── Registros
│ └── Torneos
└── UI compartidatablas, forms, dialogos, layout
├── Primitivas reutilizables
└── Tokens de tema

Que cambio

La reconstruccion toco cada pantalla -- eventos, usuarios, specs, categorias, torneos, registros. Cada modulo fue rediseñado con patrones de layout consistentes, tablas de datos apropiadas, acciones inline y jerarquia de navegacion clara.

Alcance completo

El mismo patron se aplico en toda la plataforma:

  • Eventos multi-dia con precios por dia y codigos de descuento con tracking de uso
  • Estilos de carrera: Drag, Roll Race, 1/4 Milla, Time Attack, Drift
  • Registro de pilotos con control de capacidad
  • Configuracion de brackets y puntuacion de torneos
Esto fue una recuperacion de producto y un reset de calidad de codigo, no un reskin cosmetico. Cada modulo fue reconstruido desde cero -- las capturas de arriba son solo dos ejemplos de eventos. El viejo sistema frenaba al negocio. El nuevo le da al negocio y al equipo de ingenieria una plataforma sobre la cual pueden seguir construyendo.