✦ React Pokemon Type Roster Lab

A practical React roster lab powered by PokeAPI with Pokemon search, six-slot team planning, type coverage, weaknesses, stat profiles, and local saves.

✨ Idea

React Pokemon Type Roster Lab turns PokeAPI into a small team-planning workspace: search Pokemon by name or ID, fill up to six roster slots, inspect base stats and abilities, map offensive type coverage, expose defensive weak spots, and keep the roster in localStorage.

⚙️ Stack

• React 19 + TypeScript 6
• Vite 8
• Tailwind CSS 4 via @tailwindcss/vite
• Lucide React for icons
• PokeAPI REST endpoints

🔌 API

The app uses public PokeAPI endpoints:

• GET /api/v2/pokemon/{name-or-id}
• GET /api/v2/type/{name-or-id}

Type damage relations from the type endpoint power the roster coverage, weakness, resistance, and immunity analysis.

📁 Project Structure

react-pokemon-type-roster-lab/
|-- public/
|   `-- favicon.svg
|-- src/
|   |-- components/
|   |   |-- EndpointPanel.tsx
|   |   |-- LabHeader.tsx
|   |   |-- PokemonDossier.tsx
|   |   |-- QuickPickBar.tsx
|   |   |-- RosterRail.tsx
|   |   `-- TypeMatrix.tsx
|   |-- lib/
|   |   |-- pokeApi.ts
|   |   |-- savedRoster.ts
|   |   `-- typeStyles.ts
|   |-- App.tsx
|   |-- index.css
|   `-- main.tsx
|-- LICENSE
|-- package.json
|-- vercel.json
`-- README.md

🚀 Run

npm install
npm run dev

🧪 Checks

npm run lint
npm run build

▲ Deploy

📄 License

MIT License. See LICENSE.