Pokémon Champions Calc

English | Español

English

Pokémon Champions Calc is a personal, non-commercial progressive web application for browsing Pokémon data and calculating competitive statistics from stat-point allocation, alignment, and nature selections.

This project is presented as a technical portfolio project. It is an unofficial fan-made project and is not affiliated with, endorsed by, sponsored by, or connected to Nintendo, The Pokémon Company, Game Freak, or any other rights holder.

The frontend consumes a separate Datamon REST API. The backend is not included in this repository.

Project Status

This repository is maintained for personal learning, experimentation, and portfolio demonstration. It is not an official Pokémon product and is not intended for commercial use.

Features

• Dashboard landing page.
• Pokédex search, filters, pagination, and Pokémon cards.
• Pokémon detail pages with base stats, abilities, forms, moves, and type effectiveness.
• Competitive stat calculator with Pokémon, nature, alignment, and stat-point selection.
• Calculated stats, stat-bump thresholds, and available improvements.
• Responsive mobile-first interface with a dark theme.
• Installable PWA with automatic service-worker updates.

Technical Highlights

• Vue 3 with Composition API and <script setup>.
• TypeScript and Vite.
• Tailwind CSS 4.
• Vue Router 4 with history mode.
• vite-plugin-pwa and Workbox.
• Native fetch integration with a separate REST API.
• Vitest, Vue Test Utils, and Playwright.
• ESLint and Prettier.

Requirements

• Node.js 18 or newer.
• npm compatible with the installed Node.js version.
• A running or deployed Datamon backend instance.

Local Development

Installation

npm install
cp .env.example .env
npm run dev

The development server is available at http://localhost:5173.

Configuration

Set the backend URL through the Vite environment variable:

VITE_API_BASE_URL=http://localhost:8000/api/v1

For production, replace the value with the deployed backend URL before building the application. VITE_* variables are embedded into the client bundle at build time and must not contain secrets.

Scripts

Command	Purpose
npm run dev	Start the development server.
npm run build	Run the type-check and create the production build in dist/.
npm run preview	Serve the generated production build locally.
npm test	Run the Vitest test suite.
npm run test:watch	Run Vitest in watch mode.
npm run e2e	Run Playwright end-to-end tests.
npm run lint	Run ESLint.
npm run format	Format files with Prettier.

API Endpoints

The frontend uses VITE_API_BASE_URL as the API prefix and consumes these routes:

Method	Endpoint	Purpose
GET	/pokemons/list	Paginated Pokémon catalog with filters.
GET	/pokemons/:id	Full Pokémon detail.
GET	/pokemons/types	Available Pokémon types.
GET	/pokemons/generations	Available generations.
GET	/natures	Available Pokémon natures.
POST	/calculate	Calculate competitive statistics.

HTTP integration is centralized in src/services/api.ts, which also maps backend responses to frontend domain types.

Project Structure

src/
├── components/   Reusable interface components
├── composables/  Reusable state and application logic
├── data/         Static frontend data
├── router/       Routes and parameter validation
├── services/     API integration
├── types/        TypeScript domain types
└── views/        Route-level views

tests/
├── components/   Component tests
├── e2e/          End-to-end flows
└── unit/         Unit tests for logic and services

The application does not use a global store. State stays close to the relevant views, while shared behavior is encapsulated in composables.

Main Routes

Route	View
/	Dashboard
/calculator	Competitive stat calculator
/pokedex	Pokédex
/pokedex/:id	Pokémon detail

The calculator accepts ?pokemon=<id> to preselect a Pokémon from the detail view.

Production and PWA

Build and preview the production bundle with:

npm run build
npm run preview

The production output is generated in dist/. The service worker uses these policies:

• Network-only requests for the API.
• Cache-first behavior for static assets such as JavaScript, CSS, SVG, PNG, and fonts.
• App-shell precaching.

Because Vue Router uses history mode, the production server must redirect unknown routes to index.html. Without this fallback, directly opening /pokedex or /calculator may return a 404.

Verification

Run the following checks before publishing changes:

npm run lint
npm test
npm run build

Generated artifacts, local dependencies, environment files, and local tool metadata are excluded through .gitignore.

Data Sources and Attribution

The frontend uses data and image references delivered by the separate Datamon backend and may display external asset URLs provided by that service.

Public availability does not automatically mean that every dataset, description, name, image, or trademark can be redistributed without restrictions. External sources and assets must be reviewed under their own terms.

Intellectual Property Notice

Pokémon and related names, characters, designs, trademarks, and other intellectual property are owned by their respective rights holders. This repository does not claim ownership of them and does not grant permission to use them outside the rights provided by the applicable owners or source licenses.

External image URLs are retained as source references where present. This repository does not claim ownership of those images or grant a license to them.

If a rights holder or source maintainer believes that content in this repository should be removed or corrected, please open an issue or contact the repository owner so it can be reviewed promptly.

License

The original application code is proprietary and may not be reused without permission. No license in this repository grants rights to Pokémon-related intellectual property, third-party datasets, descriptions, images, or trademarks.

Vue, Vite, Tailwind CSS, and the other dependencies remain subject to their own licenses. Before reusing the original application code, review the repository's licensing terms and dependency notices. No third-party content should be assumed to be covered by an open-source license merely because the project uses open-source dependencies.

Disclaimer

This is an independent portfolio project created for educational and demonstration purposes. It is provided without warranty and should not be treated as an official source of Pokémon data or game rules.

Español

Pokémon Champions Calc es una aplicación web progresiva personal y no comercial para consultar datos de Pokémon y calcular estadísticas competitivas a partir de la distribución de puntos, la alineación y la naturaleza seleccionadas.

Este proyecto se presenta como parte de un portafolio técnico. Es un proyecto de fans no oficial y no está afiliado, respaldado, patrocinado ni conectado con Nintendo, The Pokémon Company, Game Freak ni ningún otro titular de derechos.

El frontend consume una API REST independiente llamada Datamon. El backend no forma parte de este repositorio.

Estado del Proyecto

Este repositorio se mantiene para aprendizaje personal, experimentación y demostración de habilidades técnicas. No es un producto oficial de Pokémon ni está destinado a uso comercial.

Funcionalidades

• Página principal con dashboard.
• Búsqueda, filtros, paginación y tarjetas de Pokémon en la Pokédex.
• Vistas de detalle con estadísticas base, habilidades, formas, movimientos y efectividades por tipo.
• Calculadora de estadísticas competitivas con selección de Pokémon, naturaleza, alineación y puntos de estadística.
• Visualización de estadísticas calculadas, umbrales de mejoras y mejoras disponibles.
• Interfaz responsive mobile-first con tema oscuro.
• PWA instalable con actualización automática del service worker.

Aspectos Técnicos

• Vue 3 con Composition API y <script setup>.
• TypeScript y Vite.
• Tailwind CSS 4.
• Vue Router 4 con history mode.
• vite-plugin-pwa y Workbox.
• Integración nativa con fetch hacia una API REST independiente.
• Vitest, Vue Test Utils y Playwright.
• ESLint y Prettier.

Requisitos

• Node.js 18 o superior.
• npm compatible con la versión de Node.js instalada.
• Una instancia disponible del backend Datamon.

Desarrollo Local

Instalación

npm install
cp .env.example .env
npm run dev

El servidor de desarrollo estará disponible en http://localhost:5173.

Configuración

Configura la URL del backend mediante la variable de entorno de Vite:

VITE_API_BASE_URL=http://localhost:8000/api/v1

Para producción, reemplaza el valor por la URL del backend desplegado antes de compilar la aplicación. Las variables VITE_* se incorporan al bundle durante el build y no deben contener secretos.

Scripts

Comando	Uso
npm run dev	Inicia el servidor de desarrollo.
npm run build	Ejecuta el type-check y genera el build de producción en dist/.
npm run preview	Sirve localmente el build de producción generado.
npm test	Ejecuta la suite de tests con Vitest.
npm run test:watch	Ejecuta Vitest en modo watch.
npm run e2e	Ejecuta los tests end-to-end con Playwright.
npm run lint	Ejecuta ESLint.
npm run format	Formatea los archivos con Prettier.

Endpoints de la API

El frontend utiliza VITE_API_BASE_URL como prefijo y consume estas rutas:

Método	Endpoint	Propósito
GET	/pokemons/list	Catálogo paginado de Pokémon con filtros.
GET	/pokemons/:id	Detalle completo de un Pokémon.
GET	/pokemons/types	Tipos de Pokémon disponibles.
GET	/pokemons/generations	Generaciones disponibles.
GET	/natures	Naturalezas de Pokémon disponibles.
POST	/calculate	Calcula las estadísticas competitivas.

La integración HTTP está centralizada en src/services/api.ts, que también transforma las respuestas del backend a los tipos de dominio del frontend.

Estructura del Proyecto

src/
├── components/   Componentes reutilizables de interfaz
├── composables/  Estado y lógica reutilizable
├── data/         Datos estáticos del frontend
├── router/       Rutas y validación de parámetros
├── services/     Integración con la API
├── types/        Tipos TypeScript del dominio
└── views/        Vistas asociadas a las rutas

tests/
├── components/   Tests de componentes
├── e2e/          Flujos end-to-end
└── unit/         Tests unitarios de lógica y servicios

La aplicación no utiliza un store global. El estado se mantiene cerca de las vistas correspondientes y el comportamiento compartido se encapsula en composables.

Rutas Principales

Ruta	Vista
/	Dashboard
/calculator	Calculadora de estadísticas competitivas
/pokedex	Pokédex
/pokedex/:id	Detalle de Pokémon

La calculadora acepta ?pokemon=<id> para preseleccionar un Pokémon desde la vista de detalle.

Producción y PWA

Genera y sirve el bundle de producción con:

npm run build
npm run preview

El resultado de producción se genera en dist/. El service worker utiliza estas políticas:

• Solicitudes de red sin cache para la API.
• Estrategia cache-first para assets estáticos como JavaScript, CSS, SVG, PNG y fuentes.
• Precarga del app shell.

Como Vue Router utiliza history mode, el servidor de producción debe redirigir las rutas desconocidas a index.html. Sin este fallback, abrir directamente /pokedex o /calculator puede devolver un 404.

Verificación

Ejecuta estas comprobaciones antes de publicar cambios:

npm run lint
npm test
npm run build

Los artefactos generados, las dependencias locales, los archivos de entorno y la metadata local de herramientas están excluidos mediante .gitignore.

Fuentes de Datos y Atribución

El frontend utiliza datos y referencias de imágenes entregados por el backend independiente Datamon y puede mostrar URLs externas de assets proporcionadas por ese servicio.

Que una fuente sea pública no significa automáticamente que todos sus datasets, descripciones, nombres, imágenes o marcas puedan redistribuirse sin restricciones. Las fuentes y assets externos deben revisarse según sus propios términos.

Aviso de Propiedad Intelectual

Pokémon y los nombres, personajes, diseños, marcas y demás propiedad intelectual relacionada pertenecen a sus respectivos titulares de derechos. Este repositorio no reclama su propiedad ni concede permiso para utilizarlos fuera de los derechos otorgados por los titulares o las licencias aplicables.

Cuando existen, las URLs externas de imágenes se conservan como referencias a las fuentes. Este repositorio no reclama la propiedad de esas imágenes ni concede una licencia sobre ellas.

Si un titular de derechos o responsable de una fuente considera que algún contenido debe eliminarse o corregirse, puede abrir un issue o contactar al propietario del repositorio para revisarlo oportunamente.

Licencia

El código original de la aplicación es propietario y no puede reutilizarse sin autorización. Ninguna licencia de este repositorio concede derechos sobre la propiedad intelectual relacionada con Pokémon, datasets de terceros, descripciones, imágenes o marcas.

Vue, Vite, Tailwind CSS y las demás dependencias están sujetos a sus propias licencias. Antes de reutilizar el código original de la aplicación, deben revisarse los términos de licencia del repositorio y los avisos de sus dependencias. No debe asumirse que el contenido de terceros está cubierto por una licencia de código abierto solo porque el proyecto utiliza dependencias open source.

Descargo de Responsabilidad

Este es un proyecto independiente de portafolio creado con fines educativos y demostrativos. Se proporciona sin garantías y no debe considerarse una fuente oficial de datos de Pokémon ni de reglas de juego.