# 🏆 CHAMPION — Africa's Sports Revolution
A full-stack sports platform built with **Next.js 14** + **PocketBase**, connecting athletes across Algeria and Chad with a roadmap for all 54 African nations.
---
## 🚀 Quick Start
### 1. Install dependencies
```bash
npm install
```
### 2. Start PocketBase
```bash
# Download from
pocketbase.io
./pocketbase serve
# Admin panel:
127.0.0.1
```
### 3. Create collections & seed data
```bash
# Set your admin credentials
export PB_ADMIN_EMAIL=admin@champion.africa
export PB_ADMIN_PASSWORD=yourpassword
# Run seeder
node scripts/seed-pocketbase.mjs
```
### 4. Start Next.js dev server
```bash
NEXT_PUBLIC_POCKETBASE_URL=
127.0.0.1 npm run dev
```
Visit: **
http://localhost:3000**
> **No PocketBase?** The app works fully with seed data — all hooks fall back gracefully.
---
## 📁 Project Structure
```
src/
├── app/ # Next.js App Router pages
│ ├── page.tsx # → Dashboard
│ ├── leaderboard/ # Rankings with podium
│ ├── heatmap/ # Interactive SVG heat map
│ ├── talent/ # Talent discovery engine
│ ├── bilateral/ # Algeria-Chad challenge
│ ├── minister/ # Government KPI dashboard
│ ├── achievements/ # Badges & rewards store
│ └── clubs/ # Club portal & expansion
├── components/
│ ├── ui/ # Button, Card, Tag, Avatar, etc.
│ ├── charts/ # DonutChart, MonthlyBarChart
│ └── layout/ # AppShell (header, nav, footer)
├── hooks/
│ └── usePocketBase.ts # Data hooks with PB + fallback
├── lib/
│ ├── pocketbase.ts # PB client & collection helpers
│ └── data.ts # Static seed data & formatters
└── types/
└── index.ts # TypeScript interfaces
```
---
## 🔧 Environment Variables
```env
NEXT_PUBLIC_POCKETBASE_URL=
127.0.0.1
```
For production, point to your deployed PocketBase instance.
---
## 🗃️ Po …