GoatBase

• 

  The landing page

• 

  Multi athlete comparison

Inspiration

I wanted to settle sports debates with data. From barbershops to podcasts, comparing athletes across eras and disciplines is often emotional and biased. GOATBase was born to bring structured intelligence and dynamic analysis to the conversation—cross-sport, cross-era, and crowd-discussed.

What it does

GOATBase is a modular sports intelligence platform that compares legendary athletes across different sports like basketball, tennis, F1, and MMA. It fetches and formats athlete data from the Sonar API and visualizes it across key GOAT metrics, career stats, and cultural impact—all through a clean, interactive interface. Users can: Search and compare athletes from different sports View data-driven GOAT scores, timelines, accolades, and rivalries Get smart, auto-generated career comparisons via Sonar API Explore multi-athlete comparisons (MVP built for 2-Athlete comparisons)

How I built it

Frontend Vite + React 18 + TypeScript Tailwind CSS + HeroUI for modular design Recharts for GOAT metric visualization Framer Motion for smooth UI transitions

Backend Node.js + Express.js Supabase for athlete data storage Sonar API integration for smart comparisons and data enrichment Request limiting middleware to support SaaS-like free tier

Architecture RESTful API to fetch comparison data

Frontend consumes /api/compare?athletes=athlete1,athlete2 and renders structured profiles

Challenges I ran into

Structuring a universal athlete schema that works across vastly different sports Cleaning and formatting third-party Sonar API responses into usable front-end blocks Managing async API loading states for dynamic comparison rendering Debugging CORS, TypeScript type conflicts, and mismatched frontend/backend data expectations

Accomplishments that I'm proud of

Fully functioning MVP with real-time athlete comparison Seamless Sonar API integration with structured data formatting Scalable backend with free-tier rate limiting Clean, responsive dashboard UI that feels like a SaaS product

What I learned

How to design universal data schemas for athlete modeling Sonar API's potential for auto-generating knowledge graphs and sports intelligence TypeScript enforcement is both a challenge and a blessing in cross-stack communication The power of modular React design patterns in scaling UI fast

What's next for GoatBase

Expand multi-athlete comparison (3+ athletes) Launch user profiles and saved comparisons Introduce paid tiers with premium analytics and advanced stats Integrate AI-generated video/voice legacy summaries Build a community voting and leaderboard system

Built With

• express.js
• framer
• heroui
• javascript
• node.js
• perplexity)
• postgresql
• postman
• react
• recharts
• render
• rest
• sonar
• supabase
• tailwind
• typescript
• vercel
• vite