// AKIRA_YANO_TOMA
arrow_backRETURN_TO_PROJECT_LOGS
// PROJECT_METADATA

Watu

calendar_today
open_in_newwatu.footbally.net →
TanStack StartReact 19Drizzle ORMPostgreSQLBetter AuthParaglide-JSTailwindCSS v4

A high-stakes competitive football prediction platform where users create private arenas, join prediction leagues, and compete in real-time.

watu.footbally.net is a high-stakes, competitive football match prediction platform. Engineered to bring gamification and social competition to football tracking, it enables fans to create private prediction arenas, join custom leagues, and compete against friends with automated score-point calculation.

🏆 Core Gamification Features

1. The Arena UI Design System

  • Features an aggressive, high-contrast, cyberpunk-inspired visual theme (“The Arena UI”) colored in neon greens, vibrant pinks, and cyan blues.
  • Implements custom interactive leaderboards, badge systems, and real-time rank progression graphs.

2. Social Leagues & Match Predictions

  • Allows users to create private prediction rooms, join shared arenas via Room Codes, and submit predictions on upcoming global match results.
  • Includes a dual-code architecture clearly separating Room Codes (for competition access) from Promo Codes (for special FAN passes and VIP tier upgrades).

3. Localization & Live Scoring

  • Fully localized in English and Spanish via Paraglide-JS to serve international leagues and local fan bases natively.
  • Leverages automated sports API syncing to calculate prediction points immediately after matches conclude, dynamically updating standing ladders.

🛠️ Technical Stack & Implementation

⚡ Full-Stack Router & UI

  • Framework: Developed using React 19 and the unified TanStack Start (TanStack Router) framework to coordinate state and API data flows without boilerplate.
  • Styling: Structured using utility variables from Tailwind CSS v4 to construct the high-energy neon design scheme cleanly and performantly.

💾 Relational Data & Security

  • Database: Layered on PostgreSQL using Drizzle ORM to handle relationships between users, prediction logs, scoring records, and room memberships.
  • Authentication: Powered by Better Auth with email verification to secure player scores, prevent multiple account registrations, and manage sessions safely.
  • Hosting: Configured and deployed on Railway utilizing migration workflows to guarantee zero-downtime database updates.