Pokédex

A fast, installable Pokédex built with React 19 + TypeScript and the PokéAPI — search, compare, and explore Pokémon in PT-BR or EN.

English · Português  |  Live demo

---

About

Pokédex is a single-page web app that consumes the public PokéAPI to search, browse, and deep-dive into all 1025 Pokémon. Beyond the classic Pokédex, it adds a TCG cards explorer (real trading cards, rarity, and market price), a turn-based team battle mini-game, and a TCG deck builder with analytics and legality checks.

The framework-agnostic logic (data services, domain rules, i18n, feature widgets) is shared with the original vanilla build; this branch ports the UI to React 19 + TypeScript (strict). The interface is fully bilingual (PT-BR / EN) — since the PokéAPI has no Portuguese, prose is machine-translated on the fly and cached locally. Ships as an installable PWA with offline support and is deployed on Cloudflare Pages.

Features

• Search by name (substring suggestions) or number, with Prev/Next and keyboard arrows
• Types, base stats (with radar chart), abilities (hidden ones flagged), type weaknesses, and description
• Rich data: base XP, capture rate, happiness, growth, gender ratio, egg groups, hatch cycles, habitat, generation, held items, full move list, encounter locations, and legendary/mythical flags
• Clickable evolution chain (with methods), alternate forms, EV yield, shiny toggle, cry, and random
• Image lightbox with a full sprite gallery (artwork, shiny, animated, front/back)
• Compare up to 4 Pokémon (stat table + radar chart); filter by type and generation with pagination
• Advanced Pokédex explorer (?view=pokedex): sidebar filters + full grid
• TCG cards tab: browse a Pokémon's real trading cards with rarity, market price, and a 3D holo tilt effect (Pokémon TCG API)
• Team battle mini-game: build a team and play a turn-based battle (items, win record)
• Deck builder (?view=deck): assemble TCG decks with charts, a deck-health score, Standard/Expanded legality checks, and meta-deck import
• Bilingual UI (PT-BR / EN); favorites and theme persisted locally
• Download the static image (PNG) and the animated GIF
• Shareable deep links (?pokemon=ID), installable PWA with offline support
• Responsive: single column on mobile, three columns on desktop

The PokéAPI has no Portuguese, so in PT mode the API prose (description, genus, abilities) is machine-translated EN→PT (MyMemory, cached in localStorage); the UI, type names, and finite terms (growth rate, egg groups, habitat) are translated directly.

Tech stack

React 19 · TypeScript · Vite · vite-plugin-pwa · Vitest · Playwright + axe-core · ESLint + Prettier · Supabase (optional) · PokéAPI · Pokémon TCG API. CI (GitHub Actions) runs lint, typecheck, unit tests, and build, plus an E2E job with an automated accessibility audit (fails on any critical WCAG 2 A/AA violation).

Getting started

Requires Node.js 18+.

git clone https://github.com/Franklyn-R-Silva/Pokedex.git
cd Pokedex
npm install
npm run dev

Open the URL printed in the terminal (default http://localhost:5173).

Script	Description
npm run dev	Development server with hot reload
npm run build	Typecheck + production build into dist/
npm run preview	Preview the production build
npm run typecheck	Type-check with tsc --noEmit
npm run test	Run unit tests (Vitest)
npm run test:e2e	Run E2E + accessibility tests (Playwright + axe)
npm run lint	Lint with ESLint
npm run format	Format with Prettier

Project structure

index.html               # Entry point (single #root div, loads src/main.tsx)
src/
  main.tsx               # createRoot + i18n / favorites / modal providers
  App.tsx                # Composition root: state, routing, keyboard nav, SEO sync
  types.ts               # Shared PokéAPI types
  components/            # UI: Header, PokedexDevice, DetailsCard (+ details/),
                         #   cards/, deck/, panels/, auth/, InfoModal, Lightbox…
  context/               # ModalContext, FavoritesContext
  hooks/                 # usePokemon · useSpecies · useTheme · useDeck · useTranslatedText
  services/              # Data & IO
    pokeapi.ts           # fetch + in-memory cache
    sprites.ts           # image/sprite helpers
    storage.ts           # theme & favorites (localStorage)
    translate.ts         # EN→PT machine translation (MyMemory, cached)
  domain/                # pokemonTypes · pokemonInfo · deck (pure logic)
  i18n/                  # t / getLang / setLang / contentLang + PT-BR/EN dicts
  features/              # autocomplete · filter · compare · radar · team · quiz · battle
  styles/                # tokens + per-area CSS (layout, device, cards, deck, …)
  __tests__/*.test.ts    # Vitest (unit)
e2e/app.spec.ts          # Playwright E2E + axe accessibility audit
public/                  # Static assets, PWA icons, 404.html

See ARCHITECTURE.md for details.

Configuration

The app runs with no configuration. The following environment variables are optional and only enable the account/collection features. Copy .env.example to .env (git-ignored) and fill in the values:

Variable	Purpose
VITE_SUPABASE_URL	Supabase project URL (auth + cloud persistence)
VITE_SUPABASE_PUBLISHABLE_KEY	Supabase anon/publishable key — security is enforced by RLS
VITE_POKEMONTCG_KEY	Pokémon TCG API key — raises the request rate limit

Without them, the app falls back to localStorage and public API rate limits. Database schema for the optional backend lives in supabase/migrations/.

Deployment

Deployed on Cloudflare Pages — build command npm run build, output directory dist.

Contributing

Contributions are welcome! Please read the contributing guide for how to set up the project, the coding guidelines, and the pull request checklist. Bug reports and feature ideas are welcome via issues.

This project follows Semantic Versioning; notable changes are recorded in the CHANGELOG.

License

MIT © Franklyn — @Franklyn-R-Silva. Data from the PokéAPI; Pokémon © Nintendo / Game Freak.