Pokédex++

A rebuild of my 2023 ITP-216 final project. The original was a Flask app. This one has Next.js 14, Supabase, two sklearn ML models, and a retro pixel aesthetic.

Live: pokedexpp.vercel.app
Repo: github.com/jleo28/pokedex-plus

---

What it does

• Pokédex — Browse all 386 Gen 1–3 Pokémon with type/gen/legendary filters and search. Each detail page shows stats, type effectiveness, evolution chain, and similar Pokémon.
• Team Builder — Build a party of 6 with drag-to-reorder (keyboard accessible), type coverage matrix, defensive weakness summary, and stat radar. Teams are shareable via URL.
• Compare — Side-by-side stat comparison of any two Pokémon.
• ML Lab — Two trained models with feature importance charts, residual plots, and learning curves. Interactive predictor: dial in six stats and get a BST estimate + legendary probability.
• Submit — Invent a Pokémon, get it judged by the models, see it in the community gallery.
• Day/Night theme — Day palette is warm paper; Night palette collapses to DMG green monochrome. Optional CRT scanline overlay.

Tech stack

Layer	Choice
Framework	Next.js 14 App Router (TypeScript)
Styling	CSS Modules, no Tailwind
Database	Supabase (Postgres + RLS)
ML inference	Vercel Python Runtime (api/predict.py)
ML training	scikit-learn 1.4 RandomForest (scripts/train-models.py)
Drag-drop	@dnd-kit/core + @dnd-kit/sortable
Charts	recharts
Data source	PokéAPI (Gen 1–3, fetched once, committed to data/pokemon.json)
Fonts	Press Start 2P (local WOFF2), IBM Plex Mono, Inter
Deploy	Vercel (Node + Python runtimes)

Local dev setup

1. Clone and install

git clone https://github.com/jleo28/pokedex-plus.git
cd pokedex-plus
npm install

2. Environment variables

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

3. Database

Run supabase/migrations/001_initial_schema.sql in your Supabase SQL editor. This creates the four tables (pokemon, evolutions, user_submissions, predictions_log) with RLS policies.

4. Seed Supabase

npx tsx scripts/seed-supabase.ts

Pokémon data is already in data/pokemon.json. Sprites are in public/sprites/, cries in public/cries/.

5. Run

npm run dev
# → http://localhost:3000

Regenerating data (optional)

npx tsx scripts/fetch-pokemon.ts     # re-fetch from PokéAPI
npx tsx scripts/download-assets.ts   # re-download sprites + cries
python scripts/train-models.py       # re-train models (requires Python + scikit-learn)

ML models

Two RandomForest models trained on all 386 Gen 1–3 Pokémon:

• BST Regressor — predicts Base Stat Total from height, weight, generation, and type. R² ≈ 0.59 cross-validated. Height is the strongest feature by a wide margin, which I didn't expect.
• Legendary Classifier — classifies legendary status from the six base stats only. F1 ≈ 0.83. Class imbalance is severe (15/386 legendaries), so recall matters more than accuracy here.

Models are pickled to api/models/ and served via api/predict.py on Vercel's Python runtime. Cold start is ~20s. Warm requests are under 100ms.

Project history

The original version was built for USC ITP-216 (Intro to Machine Learning) in Spring 2023 — a Flask app with a basic Pokédex, a stat predictor, and a team builder that didn't quite work. This is a full rewrite.

Credits

• Pokémon data and sprites: PokéAPI
• Not affiliated with Nintendo, Game Freak, or The Pokémon Company.

License

MIT