FantaF1

FantaF1 is a web app/PWA dedicated to a private Formula 1 2026 fantasy league. The project allows a small group of participants to submit predictions before each race weekend, follow the season's progress, consult results, live standings, history, highlights, and advanced analytics, transforming a game among enthusiasts into a complete and structured digital platform. The app is designed around the race weekend. Each round of the season can include different gates, such as Qualifying, Sprint, and Race. Players submit their predictions before the lock, while the admin can manage results, predictions received offline, users, roles, and weekends. After real results are entered, FantaF1 automatically calculates scores and updates the league standings. The dashboard offers a comprehensive view of the championship: season calendar, interactive weekend strip, next GP, countdown to the next session, Weekend Pulse, live standings, player predictions, scoring rules, and in-depth sections. The Weekend Pulse shows the status of the current session, such as free practice, Sprint Qualifying, Sprint, Qualifying, or Race, with a countdown and visual progress. An important part of the project is transparency towards players. After the lock, the “Player Predictions” section shows who predicted what, with a dedicated fallback for those who did not communicate their predictions. Real standings allow consulting results by weekend, by gate, and seasonal cumulative, while the history collects concluded weekends and highlights emphasize key moments of the season. FantaF1 also includes an analytics section designed to track participant performance over time: averages, trends, gap from the leader, and KPIs per player. The goal is not just to calculate points, but to make the league's evolution visible and create a more engaging experience for those who follow Formula 1 throughout the season. The admin console allows managing results for each gate, manually entering predictions received offline, locking predictions at the correct time, administering users and roles, and keeping the weekend configuration updated. Admin mutations are server-protected and never rely solely on the client. From a UX perspective, FantaF1 has a dark-mode-first identity inspired by Formula 1 branding: F1 red, gold accents, custom racing fonts, glassmorphism cards, premium animations, and a mobile-first layout. The dashboard uses a dynamic background linked to the selected GP, with crossfades when changing circuits and a calibrated overlay to maintain readability without losing visual impact. The project includes light and dark themes, locally saved preference, an anti-flash script before the first paint, dynamic meta theme-color, desktop sidebar, mobile header, installable PWA, and a custom F1 car-shaped “back to top” button. Every visual detail is designed to make the experience consistent with the racing world. The technical architecture is based on TanStack Start, React 19, TypeScript, TanStack Router, TanStack Query, and server functions. The backend uses a PostgreSQL database with Row Level Security, email and Google OAuth authentication, roles managed in a dedicated table, and protected server functions for admin operations. Deployment is edge-oriented, and the app is designed as an installable PWA on desktop, iOS, and Android. FantaF1 represents a complete project in the sport/fantasy domain: it combines game logic, scoring rules, a real-time dashboard, an admin console, persistent data, security, premium UI, PWA, and a strong product identity. It is one of the most recognizable projects in the portfolio because it combines a personal passion for Formula 1, full-stack development, UX care, and the management of a real-world use case.