Context
I play competitive Gundam TCG and wanted to track my performance across tournaments. Bandai's official TCG+ app shows your event history but offers no analytics—no win rates, no performance trends, no way to analyze matchups against specific opponents.
What started as a personal tool evolved into Haro Tools—a tournament analytics platform for my local community. It's become a side project where I can experiment with technologies and patterns outside my day job.
Problem
The official app shows tournament history but can't answer basic questions like "What's my win rate?" or "How do I perform against this player?" The data exists, but there's no way to surface insights from it.
Privacy was another consideration. I wanted analytics while respecting that not everyone wants their results public. Some players enjoy leaderboards; others prefer privacy.
Solution
Haro Tools is a Next.js web application that syncs with Bandai's API to provide comprehensive tournament analytics. Players connect once, and the system pulls their complete tournament history for analysis.
I built the entire stack—database schema, API architecture, authentication, UI, and deployment. This freedom let me iterate rapidly based on feedback from my local playgroup.
Technical Stack
Built on Next.js 14 with PostgreSQL and Prisma ORM. Authentication through Clerk with Discord integration, which let me beta test with my local community first. The sync process uses server-side caching so subsequent page loads are instant without hitting Bandai's servers unnecessarily.
Throughout development, I used Claude Code as a pair programming partner—discussing architecture, debugging complex queries, and iterating on patterns. This let me move significantly faster than working alone.
Details
Performance Analytics
The dashboard presents key metrics—win rate, total events, overall record, first places, top 8 finishes, average placement. Statistics can be filtered by game, event type, store, or country. Event cards use contextual color coding (gold for first, silver for second, bronze for third, blue for top 8) making patterns immediately visible.
Key Features
Player matchup tracking lets you click any opponent's name to see your complete head-to-head record—useful for tournament prep. Event detail views show match-by-match breakdowns, full standings, and tiebreaker stats. A community leaderboard ranks players by competitive score with privacy controls—players can opt out entirely.
The interface uses a dark theme with contextual color coding (green for wins, red for losses, gold for first place). Animations are subtle—cards fade in sequentially, stats count up on load. The responsive design works from mobile to desktop without compromising usability.
Impact & Iteration
Haro Tools launched in beta to my Discord community and has become essential for our playgroup. The Discord-gated access let me iterate quickly based on direct feedback—feature requests came from people I play with regularly, making prioritization straightforward.
What started as a personal tool has grown beyond tournament tracking. I'm building additional features—card database browser, deck builder, pack opening simulator—expanding it into a complete companion app for Gundam TCG players.
Building Haro Tools outside a corporate environment taught me valuable lessons. Without product managers or stakeholders, I could ship features based purely on user value. Most importantly, it reinforced that the best products come from solving your own problems—the attention to detail comes naturally when you're building something you personally use.