Fuego Abierto Web
Fuego Abierto Web is the public face of the Fuego Abierto GelSoft ecosystem: a portal that combines a public landing page — active tournaments, league, hall of fame, and contact — with a private, JWT-protected player area. Players can register via email and password or Google OAuth, and access a personal profile showing their military rank (from Recruit to Field Marshal), a progress bar toward the next promotion, match/win/loss stats and W/L ratio, active teams, enrolled tournaments, and match history. The site consumes the REST API of the Fuego Abierto NestJS backend, persisting the session on the client and automatically logging out when the token expires.
Technologies used:
Front End:
Built with React 19, TypeScript, and Vite, styled with Tailwind CSS v4 under a brutalist military aesthetic in red and black. Authentication state is managed with Zustand and localStorage persistence, while registration and login forms use React Hook Form with Zod validation. Navigation combines public and private routes with React Router v7, guarding the player section. HTTP communication runs through a centralized Axios client with automatic retries (axios-retry) on network or server errors, an interceptor that injects the JWT token into every request and handles session expiry, and toast notifications with Sonner. It integrates social login with @react-oauth/google, iconography via lucide-react, and IntersectionObserver-based reveal animations for the public sections.
Axios
React
TypeScript
Vite
Tailwind
Back End:
This repository is a pure client with no backend of its own: it consumes the REST API of the Fuego Abierto GelSoft management system (NestJS, TypeORM, MySQL), authenticating via JWT against the register, login, and Google login endpoints, and reusing the same rank, team, tournament, and stats business logic already exposed by that service.
- none