🔍 Digital Pokédex

Aplicación web interactiva de Pokédex desarrollada con React que permite explorar el universo Pokémon de manera intuitiva. Incluye búsqueda inteligente, filtrado por tipos, paginación dinámica y sistema de autenticación con una interfaz moderna y responsiva.

🌟 Características

• 🎯 Búsqueda inteligente por nombre de Pokémon con autocompletado
• 🏷️ Filtrado por tipos para explorar categorías específicas
• 📄 Paginación dinámica con navegación intuitiva
• 🔐 Sistema de autenticación con rutas protegidas
• 📱 Diseño responsivo que se adapta a todos los dispositivos
• ⚡ Gestión de estado eficiente con Redux
• 🎨 UI moderna desarrollada con Tailwind CSS
• 🔄 Datos en tiempo real consumidos desde PokéAPI
• 📊 Información detallada de cada Pokémon (stats, tipos, habilidades)
• 🖼️ Imágenes oficiales de alta calidad

🚀 Demo en Vivo

🔗 https://00006-digital-pokedex.netlify.app

🛠️ Tecnologías Utilizadas

• React 17 - Biblioteca principal para UI
• Redux - Gestión de estado global
• React Router DOM - Navegación y rutas
• Tailwind CSS - Framework de estilos
• Axios - Cliente HTTP para API
• PokéAPI - Fuente de datos de Pokémon
• PostCSS - Procesamiento de CSS

📁 Estructura del Proyecto

00006-digital-pokedex/
├── public/
│   ├── index.html
│   ├── pokebola.png          # Favicon
│   └── manifest.json
├── src/
│   ├── components/
│   │   ├── Login.jsx          # Componente de autenticación
│   │   ├── Pokedex.jsx        # Vista principal del Pokédex
│   │   ├── PokedexInfo.jsx    # Información detallada
│   │   ├── PokemonCard.jsx    # Tarjeta individual
│   │   ├── ProtectedRoutes.jsx # Rutas protegidas
│   │   └── Search.jsx         # Barra de búsqueda
│   ├── images/
│   │   ├── headerPokedex.png
│   │   ├── footer-login.png
│   │   └── pokedex.png
│   ├── redux/
│   │   └── index.jsx          # Store de Redux
│   ├── styles/
│   │   └── style-info.css
│   ├── App.js                 # Componente principal
│   ├── index.js              # Punto de entrada
│   └── pokemons.json         # Datos locales
├── package.json
├── tailwind.config.js
└── README.md

🎨 Características de Diseño

🏠 Página de Login

• Interfaz de bienvenida con temática Pokémon
• Formulario de entrada de usuario
• Validación de campos
• Redirección automática al Pokédex

🔍 Vista Principal del Pokédex

• Header con imagen temática
• Barra de búsqueda inteligente
• Selector de filtros por tipo
• Grid responsivo de tarjetas Pokémon
• Paginación con navegación numérica

🃏 Tarjetas de Pokémon

• Imagen oficial de alta calidad
• Información de tipos con colores temáticos
• Estadísticas básicas (HP, Ataque, Defensa, Velocidad)
• Efectos hover suaves
• Enlace a vista detallada

📊 Vista de Información Detallada

• Estadísticas completas del Pokémon
• Información de habilidades
• Datos de altura y peso
• Navegación de regreso

🚀 Instalación y Uso

1. Clona el repositorio:

   git clone https://github.com/FROSTYLAN/00006-digital-pokedex.git

2. Navega al directorio:

   cd 00006-digital-pokedex

3. Instala las dependencias:

   npm install

4. Inicia el servidor de desarrollo:

   npm start

5. Abre tu navegador en:

   http://localhost:3000
   

📱 Responsividad

El diseño está optimizado para:

• 💻 Desktop - Experiencia completa con grid de múltiples columnas
• 📱 Mobile - Adaptación fluida con navegación táctil
• 📟 Tablet - Diseño intermedio optimizado

🎯 Funcionalidades Principales

🔐 Autenticación

• Sistema de login simple
• Rutas protegidas con React Router
• Persistencia de sesión con Redux

🔍 Búsqueda y Filtrado

• Búsqueda por nombre en tiempo real
• Filtrado por tipos de Pokémon
• Resultados instantáneos

📄 Paginación

• Navegación por páginas numeradas
• Límite de 16 Pokémon por página
• Controles de navegación anterior/siguiente

📊 Información Detallada

• Vista completa de cada Pokémon
• Estadísticas y características
• Imágenes oficiales de alta resolución

🔧 Scripts Disponibles

npm start

Inicia la aplicación en modo desarrollo.
Abre http://localhost:3000 en tu navegador.

npm test

Ejecuta las pruebas en modo interactivo.

npm run build

Construye la aplicación para producción en la carpeta build.
Optimiza el build para el mejor rendimiento.

npm run eject

Nota: Esta es una operación irreversible.
Expone todas las configuraciones de Create React App.

🎯 Objetivos del Proyecto

• Practicar React Hooks y gestión de estado
• Implementar Redux para estado global
• Dominar consumo de APIs con Axios
• Crear interfaces responsivas con Tailwind CSS
• Desarrollar rutas protegidas con React Router
• Implementar paginación y filtrado de datos

🔧 Posibles Mejoras

• Añadir modo oscuro
• Implementar favoritos de usuario
• Agregar más filtros (generación, región)
• Incluir información de evoluciones
• Añadir sonidos de Pokémon
• Implementar comparador de Pokémon
• Agregar animaciones más avanzadas
• Incluir información de movimientos

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

🤝 Contribuciones

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

👨‍💻 Autor

Charles Castillo (FROSTYLAN)

• GitHub: https://github.com/FROSTYLAN
• LinkedIn: https://linkedin.com/in/charles-castillo-772968234

🙏 Agradecimientos

• PokéAPI por proporcionar los datos de Pokémon
• The Pokémon Company por las imágenes oficiales
• Create React App por la configuración inicial
• Tailwind CSS por el framework de estilos

---

⭐ ¡No olvides dar una estrella al proyecto si te gustó!

🔗 ¡Explora el mundo Pokémon y atrapa la información de todos!