Pokémon Team Builder

July 10, 2025 · View on GitHub

MIT License TailwindCSS PostCSS Frontend Node.js npm ESLint Stylelint Build with Vite JSDoc

A modular, offline-capable team-building tool for Pokémon Red, Blue, and Yellow. Built for accuracy, accessibility, and long-term expansion.

📄 License

This project is licensed under the MIT License.

  • ✅ Use, copy, modify, merge, publish, distribute
  • ✅ No attribution required (but appreciated)
  • ❌ No warranty included — use at your own risk

⚠️ Pokémon Sprite Usage

All Pokémon names, images, and data are © Nintendo, Game Freak, and The Pokémon Company.

This project references publicly available sprite assets hosted by the PokeAPI sprite repository for educational and fan use only.

This project does not distribute or claim ownership of any Pokémon intellectual property.

🛠 Tech Stack

  • Frontend: HTML + Vanilla JS (modules), Tailwind CSS
  • Bundler: Vite
  • Linting: ESLint, Stylelint (Tailwind-aware), HTMLHint
  • Accessibility: axe-core CLI

Version Information

  • Tailwind CSS: 3.4.17
  • PostCSS: 8.5.5
  • ESLint: 9.28.0

📦 Prerequisites

  • Node.js: 22.16.0
  • NPM: 10.9.2
  • Git CLI
  • Optionally: VS Code with ESLint, Tailwind extensions

🖥 Browser Support

This project targets the last 2 versions of:

  • Chrome
  • Firefox
  • Safari
  • Edge

Defined via Browserslist for PostCSS and future compatibility tooling.

⚙️ Getting Started

  1. Clone the Repository
git clone https://github.com/jennifert/pokemon-builder-public.git
cd pokemon-builder
  1. Download Sprites Locally

Sprites are not bundled with this project due to copyright.

Instead, download them manually from the PokeAPI sprites repo:

git clone https://github.com/PokeAPI/sprites.git

Then copy the following folders into your local project directory. Please note generation-ii is for future:

sprites/sprites/pokemon/versions/generation-i
sprites/sprites/pokemon/versions/generation-ii

Paste them under:

pokemon-builder/public/img/

You should now have:

pokemon-builder/public/img/generation-i
pokemon-builder/public/img/generation-ii
  1. Install Dependencies
npm install
  1. Start Development Server
npm run dev
  1. Open in Browser
http://localhost:5173

📁 Project Structure (Summary)

├── index.html  
├── src/  
│   ├── js/       – Core logic modules  
│   └── css/      – Tailwind styles  
├── public/       – Static assets (data, sprites)  
├── docs/         – JSDoc output  
├── config/       – ESLint, Tailwind, PostCSS configs  
├── package.json  
└── README.md

🔍 View full folder structure ›

📜 NPM Scripts

CommandDescription
npm run devStart local Vite server
npm run buildCreate production build
npm run previewPreview production build
npm run lint:jsRun ESLint on JS files
npm run lint:jsFixAuto-fix lint issues in JS
npm run lint:cssRun Stylelint on CSS
npm run lint:htmlRun HTMLHint on index.html
npm run a11y:devRun axe-core against dev URL
npm run a11y:prodRun axe-core against built site
npm run docsRun JSDoc to create documentation from JS

📘 Documentation

🧩 Code Design Notes

Some variables like parsedDexID and showObtainable may appear unused in certain modules (e.g. fetch.js) but are included intentionally for modular consistency or future extension.

// eslint-disable-next-line no-unused-vars
let parsedDexID = parseInt(dexId);

// eslint-disable-next-line no-unused-vars
let showObtainable = true;

These lines are preserved because:

  • They match the data contract across modules or views
  • Related logic may live in another file (e.g., filtering, state management)
  • They are reserved for future enhancements (like toggling unobtainables or formatting dex IDs)

Rather than removing them (and risking regression or inconsistency), they’re explicitly retained with eslint-disable-next-line for clarity and long-term maintainability.

📌 TODO Highlights

  • Improve type effectiveness formatting (2×, 0.5×, etc.)
  • Add Pokédex view using serebiiDex URLs
  • Offline-first support (PWA optional)
  • Gen 2 support after Gen 1 polish
  • Team suggestion logic (future AI assist)
  • Support Gen 2+ once Gen 1 is finalized

🧪 JSDoc Reference

This project uses JSDoc to generate documentation from code comments.

To regenerate documentation locally:

npm run docs

This will populate the /docs folder with up-to-date HTML documentation.

📖 How it's structured:

  • Each JS module (like party.js, team.js) includes detailed descriptions, parameters, and return types
  • Comments follow the JSDoc standard

:gem: Acknowledgments

This project would not be possible without these fantastic community resources: