Una aplicación web interactiva para crear equipos Pokémon, gestionar borradores y simular batallas entre equipos
Construida con React, Vite y tecnologías modernas de desarrollo web
🗂️ Navegación Rápida (Click para expandir)
⚠️ Importante: Asegúrate de tener las versiones correctas instaladas
# 🔍 Verificar versiones instaladas
node --version # ✅ v18.0.0 o superior
npm --version # ✅ v8.0.0 o superior|
📥 1. Clonar Repositorio git clone https://github.com/JulioCesar97DB/pokemon.git
cd pokemon📦 2. Instalar Dependencias # Con npm (recomendado)
npm install
# Con yarn (alternativo)
yarn install |
🚀 3. Ejecutar Desarrollo npm run dev
# 🌐 http://localhost:5173🏗️ 4. Build Producción npm run build
# 📁 Archivos en carpeta 'dist' |
| 🚀 Script | 📝 Comando | 📖 Descripción |
|---|---|---|
| 🔥 Development | npm run dev |
Servidor con hot reload y modo desarrollo |
| 🏗️ Build | npm run build |
Build optimizado para producción |
| 👀 Preview | npm run preview |
Preview local del build de producción |
| 🔍 Lint | npm run lint |
Análisis de código con ESLint |
| 🧪 Test | npm test |
Tests en modo watch (desarrollo) |
| ✅ Test Run | npm run test:run |
Ejecutar todos los tests una vez |
💡 Tip: Usa
npm run devpara desarrollo diario ynpm run buildantes de deploy
🚀 Frontend Core (Click para ver detalles)
| 🎯 Dependencia | 📊 Versión | 🎨 Propósito |
|---|---|---|
| ⚛️ React | 19.1.0 |
Framework principal de UI |
| 🌐 React DOM | 19.1.0 |
Renderizado en el DOM |
| ⚡ Vite | 6.3.5 |
Build tool y dev server ultrarrápido |
| 🛤️ React Router DOM | 7.6.2 |
Enrutamiento client-side |
| 🎨 TailwindCSS | 4.1.10 |
Framework CSS utility-first |
🗄️ Estado y Datos (Click para ver detalles)
| 🎯 Dependencia | 📊 Versión | 🎨 Propósito |
|---|---|---|
| 🐻 Zustand | 5.0.5 |
Manejo de estado global simple |
| 🔄 TanStack Query | 5.80.7 |
Cache y sincronización de datos |
🎨 UI/UX (Click para ver detalles)
| 🎯 Dependencia | 📊 Versión | 🎨 Propósito |
|---|---|---|
| 🎯 Lucide React | 0.517.0 |
Iconografía moderna y consistente |
| 🔔 Sonner | 2.0.5 |
Sistema de notificaciones toast |
| 🎪 @dnd-kit/core | 6.3.1 |
Funcionalidad drag and drop |
| 📋 @dnd-kit/sortable | 10.0.0 |
Elementos ordenables |
| 🔧 @dnd-kit/utilities | 3.2.2 |
Utilidades para DnD |
🧪 Desarrollo y Testing (Click para ver detalles)
| 🎯 Dependencia | 📊 Versión | 🎨 Propósito |
|---|---|---|
| 🔍 ESLint | 9.25.0 |
Linting y calidad de código |
| 🧪 Vitest | 3.2.4 |
Framework de testing moderno |
| 🎭 Testing Library | 16.3.0 |
Utilidades de testing para React |
| 📝 TypeScript Types | 19.1.2 |
Tipado para desarrollo |
Datos completos de Pokémon desde la API oficial
- Arquitectura de Componentes: Basada en React con componentes funcionales
- Client-Side Rendering (CSR): Aplicación SPA (Single Page Application)
- Arquitectura en Capas: Separación clara entre presentación, lógica de negocio y servicios
- Modular: Organización por features y responsabilidades
pokemon/
├── public/ # Archivos estáticos
│ └── pokemon.svg # Logo de la aplicación
├── src/
│ ├── components/ # Componentes UI por feature
│ │ ├── combat/ # 🥊 Componentes de batalla
│ │ │ ├── BattleArena.jsx # Arena de combate
│ │ │ ├── BattleResults.jsx # Resultados de batalla
│ │ │ ├── TeamCard.jsx # Tarjeta de equipo
│ │ │ └── TeamSelector.jsx # Selector de equipos
│ │ ├── commons/ # 🔧 Componentes reutilizables
│ │ │ ├── Pagination.jsx # Paginación
│ │ │ └── PokemonTypeBadge.jsx # Badge de tipos
│ │ ├── Home/ # 🏠 Componentes de página principal
│ │ │ ├── PokemonCard.jsx # Tarjeta de Pokémon
│ │ │ ├── PokemonList.jsx # Lista de Pokémon
│ │ │ └── StatBar.jsx # Barra de estadísticas
│ │ ├── teams/ # 👥 Componentes de gestión de equipos
│ │ │ ├── DraftsGrid.jsx # Grid de borradores
│ │ │ ├── PageHeader.jsx # Encabezado de página
│ │ │ ├── PokemonTeamList.jsx # Lista de equipos
│ │ │ ├── TeamBuilder.jsx # Constructor de equipos
│ │ │ ├── TeamPokemonList.jsx # Lista de Pokémon en equipo
│ │ │ └── TeamsGrid.jsx # Grid de equipos
│ │ └── ui/ # 🎨 Componentes de interfaz base
│ │ ├── CustomAlert.jsx # Alertas personalizadas
│ │ ├── ErrorAlert.jsx # Alertas de error
│ │ ├── LoadingSpinner.jsx # Spinner de carga
│ │ ├── Navbar.jsx # Navegación principal
│ │ └── TeamsSidebar.jsx # Sidebar de equipos
│ ├── hooks/ # 🎣 Custom hooks (lógica reutilizable)
│ │ ├── useAutoSave.js # Guardado automático
│ │ ├── usePokemon.js # Lógica de datos Pokémon
│ │ ├── usePokemonPagination.js # Manejo de paginación
│ │ ├── useTeamEditor.js # Lógica de edición de equipos
│ │ └── __tests__/ # Tests de hooks
│ ├── layouts/ # 📐 Layouts de página
│ │ ├── MainLayout.jsx # Layout principal
│ │ └── TeamsLayout.jsx # Layout de equipos
│ ├── pages/ # 📄 Páginas principales
│ │ ├── HomePage.jsx # Página de inicio
│ │ ├── Combat/
│ │ │ └── CombatPage.jsx # Página de combate
│ │ └── Teams/
│ │ ├── DraftsPage.jsx # Página de borradores
│ │ ├── NewTeam.jsx # Página nuevo equipo
│ │ └── TeamsPage.jsx # Página de equipos
│ ├── router/ # 🛤️ Configuración de rutas
│ │ └── router.js # Definición de rutas
│ ├── services/ # 🌐 Capa de servicios (API calls)
│ │ └── pokemonService.js # Servicio PokéAPI
│ ├── store/ # 🗄️ Estado global (Zustand)
│ │ └── teamsStore.js # Store de equipos
│ ├── tests/ # 🧪 Tests de aplicación
│ │ ├── battleUtils.test.js # Tests de utilidades de batalla
│ │ ├── PokemonTypeBadge.test.jsx # Tests de componentes
│ │ └── setup.js # Configuración de tests
│ └── utils/ # 🔧 Utilidades y helpers
│ └── battleUtils.js # Lógica de batallas
├── eslint.config.js # Configuración ESLint
├── index.html # HTML principal
├── package.json # Dependencias y scripts
├── vite.config.js # Configuración Vite
└── vitest.config.js # Configuración Vitest
La aplicación maneja los datos siguiendo un flujo unidireccional claro: Los datos provienen de la PokéAPI externa, pasan por la capa de servicios donde se transforman y normalizan, luego son gestionados por TanStack Query para el caching y sincronización. Los componentes React consumen estos datos y las interacciones del usuario activan cambios en el store de Zustand, que a su vez se persiste en el almacenamiento local del navegador. Este flujo asegura que los datos estén siempre sincronizados y disponibles offline.
|
|
🧩 1. Component Composition Pattern
🎯 Objetivo: Crear interfaces complejas combinando componentes simples
Este patrón permite crear interfaces complejas combinando componentes más simples. En el proyecto, los layouts principales como MainLayout envuelven componentes específicos como PokemonList, que a su vez contiene PokemonCard y Pagination.
✅ Beneficios:
- 🔄 Reutilización máxima de código
- 🛠️ Mantenimiento simplificado
- 📦 Responsabilidad específica por componente
- 🔧 Flexibilidad en diferentes contextos
🎣 2. Custom Hooks Pattern
🎯 Objetivo: Encapsular lógica de negocio reutilizable
Los hooks personalizados encapsulan la lógica compleja y la hacen reutilizable. El proyecto implementa hooks especializados:
- 🔍 usePokemon: Manejo inteligente de datos de Pokémon
- 📄 usePokemonPagination: Lógica de navegación entre páginas
- ⚙️ useTeamEditor: Construcción y edición de equipos
- 💾 useAutoSave: Guardado automático en tiempo real
✅ Beneficios:
- 🎯 Separación clara entre lógica y presentación
- 🔄 Reutilización de funcionalidades complejas
- 🧪 Testing más sencillo de lógica aislada
🌐 3. Service Layer Pattern
🎯 Objetivo: Abstraer comunicaciones con APIs externas
La capa de servicios actúa como intermediario entre la aplicación y las APIs externas. El pokemonService centraliza todas las operaciones:
- 🔄 Transformación automática de datos
- 📏 Normalización de respuestas
- 🛡️ Manejo centralizado de errores
- 📊 Optimización de peticiones
✅ Beneficios:
- 🔒 Encapsulación de lógica de API
- 🔄 Facilidad para cambiar fuentes de datos
- 🛠️ Mantenimiento centralizado
🐻 4. State Management Pattern (Zustand)
🎯 Objetivo: Gestión eficiente del estado global
Implementa un store centralizado para el estado global de la aplicación. El teamsStore maneja:
- 👥 Todos los equipos de Pokémon
- 📝 Borradores en progreso
- 📊 Estadísticas de batalla
- 💾 Persistencia automática en localStorage
✅ Beneficios:
- 🎯 Estado predecible y centralizado
- 💾 Persistencia automática
- 🚀 Performance optimizada
- 🔄 Sincronización entre componentes
📚 5. Repository Pattern
🎯 Objetivo: Abstraer el acceso a datos
Este patrón proporciona una interfaz uniforme para obtener información de Pokémon:
- 🔄 Transformación consistente de datos de PokéAPI
- 🛡️ Manejo robusto de errores
- 📏 Normalización de información
- 🎯 Interfaz unificada para componentes
✅ Beneficios:
- 🔒 Abstracción de fuentes de datos
- 🧪 Testing simplificado
- 🔄 Flexibilidad para múltiples fuentes
👁️ 6. Observer Pattern
🎯 Objetivo: Reactividad automática de datos
Implementado através de React Query, permite suscripción a cambios de datos:
- 🔄 Actualización automática de componentes
- ⚡ Invalidación reactiva de cache
- 🎯 Sincronización entre múltiples componentes
- 📊 Optimización de peticiones HTTP
✅ Beneficios:
- 🔄 Coherencia automática de datos
- ⚡ Performance optimizada
- 🎯 Experiencia de usuario fluida
🏭 7. Factory Pattern
🎯 Objetivo: Creación consistente de objetos complejos
Utilizado para la creación de equipos y batallas con estructura garantizada:
- 🆔 IDs únicos automáticos
- 📅 Timestamps de creación
- 🏗️ Estructura de datos consistente
- ✅ Validación automática de propiedades
✅ Beneficios:
- 🔒 Integridad de datos garantizada
- 🛠️ Mantenimiento simplificado
- 🎯 Creación de objetos predecible
La aplicación está optimizada para:
- Desktop (1024px+) - Experiencia completa con grids y sidebar
- Tablet (768px-1023px) - Layouts adaptados con navegación colapsable
- Mobile (320px-767px) - Interfaz touch-friendly con navegación móvil
La aplicación utiliza un sistema de breakpoints estándar de TailwindCSS para garantizar una experiencia consistente en todos los dispositivos. El diseño se adapta progresivamente desde móviles pequeños (320px) hasta pantallas ultra anchas (1536px+). En móviles se prioriza la navegación vertical y botones grandes para facilitar la interacción táctil. En tablets se implementan layouts de dos columnas y navegación colapsable. En desktop se aprovecha el espacio disponible con grids complejos, sidebar fijo y múltiples columnas de información.
El proyecto se integra con la PokéAPI oficial para obtener información completa y actualizada de Pokémon. Se utilizan principalmente tres endpoints: el endpoint de lista paginada para la exploración general, el endpoint de detalles específicos para información completa de cada Pokémon, y el endpoint de especies para datos adicionales como descripciones y características especiales.
La aplicación consume y procesa diversos tipos de datos de la PokéAPI. Se obtiene la lista completa de Pokémon con sistema de paginación eficiente, detalles completos incluyendo estadísticas de combate, tipos, habilidades y movimientos. También se descargan múltiples variantes de sprites incluyendo versiones frontales, traseras y shiny. Las estadísticas de combate como HP, Attack, Defense y Speed son fundamentales para el sistema de batallas, mientras que la información de tipos se utiliza para calcular efectividad y crear estrategias de equipo.
La aplicación implementa una estrategia de cache inteligente usando React Query. Los datos se consideran frescos durante 5 minutos y se mantienen en cache por 10 minutos. Si una petición falla, el sistema reintenta automáticamente hasta 3 veces antes de mostrar un error. Para mejorar la experiencia del usuario, el cache no se actualiza automáticamente cuando la ventana recupera el foco, evitando peticiones innecesarias. Esta configuración optimiza el rendimiento y reduce la carga en la API externa.
|
|
|
🌐 Frontend Evolution
|
🏗️ Arquitectura
|
🚀 Performance
|
|
|
|
|
- Estructura de Código: Excelente organización por features
- Separación de Responsabilidades: Hooks, servicios y componentes bien definidos
- Estado Global: Zustand es perfecto para este caso de uso
- Caching: TanStack Query optimiza las peticiones HTTP
- Styling: TailwindCSS proporciona consistency y rapidez
Implementación de TypeScript: Comenzar con la migración gradual a TypeScript, empezando por los componentes nuevos y tipos básicos. Esto mejorará significativamente la experiencia de desarrollo y reducirá errores en tiempo de ejecución.
Optimización de Performance: Implementar React.memo en componentes que renderizan listas grandes como PokemonCard para evitar renderizados innecesarios. Esto mejorará considerablemente la fluidez de la interfaz.
Error Boundaries: Añadir componentes de manejo de errores para evitar que fallos en componentes específicos afecten toda la aplicación. Esto mejorará la robustez y experiencia del usuario.
Ampliación de Tests: Incrementar la cobertura de tests unitarios, especialmente en componentes críticos como el sistema de batallas y la gestión de equipos.
React Router Data APIs: Migrar a las nuevas APIs de datos de React Router v7 para mejorar la carga de datos y el rendimiento general de las páginas.
Suspense Implementation: Implementar Suspense para mejorar la experiencia de carga, mostrando skeleton loaders más sofisticados mientras se cargan los datos.
Lazy Loading Optimization: Optimizar el bundle implementando carga diferida de componentes pesados como la página de combate, reduciendo el tiempo de carga inicial.
Progressive Web App: Implementar Service Worker para funcionalidad offline y mejorar la experiencia en dispositivos móviles.
Migración a Next.js: Considerar la migración a Next.js 14 con App Router para aprovechar Server-Side Rendering y mejorar el SEO y rendimiento inicial.
Type-Safe APIs: Implementar tRPC para APIs completamente tipadas, eliminando la posibilidad de errores de tipo entre frontend y backend.
Base de Datos: Integrar una base de datos con Prisma para persistencia robusta de equipos, estadísticas de usuario y funcionalidades sociales.
Arquitectura Escalable: Evaluar la implementación de micro-frontends si el proyecto crece significativamente en funcionalidades y equipo de desarrollo.
- Performance: Lighthouse score > 90
- Accessibility: WCAG 2.1 AA compliance
- Bundle Size: < 500KB gzipped
- Loading Time: < 3s on 3G
- Core Web Vitals: Green scores
- Test Coverage: > 80%
- User Satisfaction: > 4.5/5 stars
Para Desarrollo: Se recomienda el uso de extensiones específicas de VS Code como TailwindCSS IntelliSense para autocompletado de clases, TypeScript para mejor tipado, Prettier para formateo automático y ESLint para análisis de código. También son esenciales las herramientas de desarrollo del navegador como React Developer Tools, TanStack Query Devtools y Zustand Devtools para debugging efectivo.
Para Producción: En ambiente de producción se sugiere implementar herramientas de monitoreo como Sentry para tracking de errores y LogRocket para sesiones de usuario. Para analytics se recomienda Google Analytics 4 o Mixpanel para entender el comportamiento de los usuarios. Para performance, herramientas como Web Vitals y Lighthouse CI ayudan a mantener métricas óptimas de rendimiento.
- React 19: React Docs
- TanStack Query: TanStack Query Docs
- Zustand: Zustand GitHub
- TailwindCSS: Tailwind Docs
- Vite: Vite Guide
- Testing: Testing Library
|
1️⃣ Fork # Fork el repositorio
# desde GitHub |
2️⃣ Branch git checkout -b
feature/nueva-feature |
3️⃣ Commit git commit -m
'✨ Añadir nueva feature' |
4️⃣ Pull Request # Abre un PR
# desde GitHub |
