🌟 Poke Pedrox - La Pokédex Interactiva para Niños

Una aplicación web completa y divertida para explorar el mundo Pokémon, especialmente diseñada para niños. Incluye Pokédex, juegos interactivos, autenticación de usuarios, equipos personalizados y mucho más. ¡Con animaciones, efectos visuales y una interfaz amigable que hace que aprender sobre Pokémon sea toda una aventura!

🔗 Enlace del Proyecto

https://github.com/MauricioBarrientos/Poke_pedro

🎆 Características Principales

🏠 Página Principal

• Lista interactiva de Pokémon con imágenes de alta calidad
• Filtros por tipo para encontrar Pokémon específicos
• Búsqueda inteligente por nombre
• Botones de favoritos con animaciones en cada card
• Animaciones hover que hacen la experiencia más divertida

❤️ Sistema de Favoritos

• Corazones animados para marcar Pokémon favoritos
• Página de favoritos con diseño especial y estrellitas
• Persistencia en la nube - tus favoritos se guardan en tu cuenta
• Contador visual en la navegación

🎰 Generador de Pokémon Sorpresa

• Pokéball interactiva que gira y se anima
• Descubrimiento aleatorio de Pokémon
• Efectos de celebración cuando aparece un Pokémon
• Información completa con descripción del Pokémon

📊 Detalles del Pokémon Mejorados

• Header con gradiente dinámico basado en los tipos del Pokémon
• Galería de imágenes organizada en tabs (Principales, Shiny, Animadas, Artwork, Retro)
• Estadísticas con barras de progreso animadas y colores dinámicos
• Habilidades con iconos y cards modernas
• Cadena de evolución visual con imágenes y enlaces
• Animaciones de entrada progresivas

🔐 Autenticación de Usuarios

• Registro e inicio de sesión con email y contraseña
• Autenticación con Google y Facebook vía Passport.js
• Perfiles de usuario personalizables con avatar y visibilidad pública
• Protección de rutas para contenido exclusivo

🎮 Juegos Interactivos

• Quiz de Pokémon con preguntas sobre tipos, evoluciones y estadísticas
• Juego de Memoria con cartas de Pokémon para emparejar
• Adivinanzas con pistas sobre Pokémon para resolver
• Sistema de puntuaciones y leaderboards globales

🤔 Curiosidades y Historias

• Curiosidades aleatorias sobre el mundo Pokémon
• Historias educativas con moralejas y personajes Pokémon
• Contenido dinámico generado desde el backend

👥 Equipos y Comunidad

• Creación de equipos personalizados de hasta 6 Pokémon
• Perfiles públicos para compartir equipos y logros
• Leaderboards para competir en juegos
• Sistema de logros y niveles de progreso

🎨 Diseño y UX

• Navegación colorida con gradientes y animaciones
• Loading animations divertidas con Pokéballs giratorias
• Efectos de partículas y brillos
• Diseño responsive que funciona en todos los dispositivos
• Sistema de colores basado en tipos de Pokémon

🗺️ Navegación

La aplicación incluye las siguientes páginas:

• 🏠 Inicio (/) - Lista principal de Pokémon con filtros y búsqueda
• 🎲 Sorpresa (/random) - Generador de Pokémon aleatorio
• ❤️ Favoritos (/favorites) - Colección de Pokémon favoritos
• 📦 Objetos (/items) - Catálogo de objetos Pokémon
• 🔍 Detalle (/pokemon/:name) - Información completa de cada Pokémon
• 🎮 Juegos (/games) - Acceso a quiz, memoria y adivinanzas
• 🤔 Curiosidades (/funfacts) - Curiosidades aleatorias sobre Pokémon
• 📖 Historias (/stories) - Historias educativas con Pokémon
• 👥 Equipos (/teams) - Gestión de equipos personalizados
• 🏆 Leaderboards (/leaderboards) - Tablas de puntuaciones globales
• 👤 Perfil (/profile/:id) - Perfiles de usuario con progreso y logros
• 🔑 Login (/login) - Inicio de sesión
• 📝 Registro (/register) - Registro de nuevos usuarios

🚀 Funcionalidades Implementadas

✅ Sistema de favoritos completo con persistencia en la nube ✅ Generador de Pokémon aleatorio ✅ Galería de imágenes mejorada ✅ Estadísticas con barras de progreso ✅ Habilidades con iconos y descripciones ✅ Cadena de evolución visual ✅ Autenticación completa (local, Google, Facebook) ✅ Sistema de perfiles de usuario ✅ Juegos interactivos (Quiz, Memoria, Adivinanzas) ✅ Sistema de puntuaciones y leaderboards ✅ Curiosidades y historias dinámicas ✅ Gestión de equipos personalizados ✅ Sistema de logros y progreso ✅ Animaciones y efectos visuales ✅ Diseño responsive ✅ Loading animations divertidas ✅ Sistema de colores dinámico ✅ API REST completa con backend Node.js

Tecnologías

• Frontend: React, Bootstrap, Framer Motion, React Router DOM.
• Backend: Node.js, Express, MongoDB, JWT, Passport.js (Google/Facebook OAuth).
• Herramientas de desarrollo: Create React App, ESLint, Nodemon.

Instalación

1. Clona el repositorio:

   git clone https://github.com/MauricioBarrientos/Poke_pedro.git
   cd pokemon

2. Configura las variables de entorno: Crea un archivo .env en la raíz del proyecto con:

   MONGODB_URI=mongodb://localhost:27017/poke_pedro
   JWT_SECRET=tu_jwt_secret_aqui
   GOOGLE_CLIENT_ID=tu_google_client_id
   GOOGLE_CLIENT_SECRET=tu_google_client_secret
   FACEBOOK_APP_ID=tu_facebook_app_id
   FACEBOOK_APP_SECRET=tu_facebook_app_secret
   

3. Instala las dependencias del servidor:

   npm install

4. Instala las dependencias del cliente:

   cd client
   npm install
   cd ..

5. Asegúrate de tener MongoDB corriendo localmente o configura una URI externa.

Uso

Para desarrollo:

1. Inicia el servidor backend:

   cd server
   npm run dev

   El servidor estará en http://localhost:3001.

2. En otra terminal, inicia el cliente:

   cd client
   npm start

   El cliente estará en http://localhost:3000.

Para producción:

npm run build
npm start

La aplicación completa estará disponible en http://localhost:3001.

Scripts

Raíz del proyecto

• npm run build: Construye el cliente para producción.
• npm start: Inicia el servidor en producción con el cliente construido.

Servidor (server/)

• npm start: Inicia el servidor en producción.
• npm run dev: Inicia el servidor en modo desarrollo con nodemon.

Cliente (client/)

• npm start: Inicia el cliente en modo desarrollo.
• npm run build: Construye el cliente para producción.
• npm test: Ejecuta las pruebas.

Contribución

1. Haz un fork del 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.

Licencia

Este proyecto está bajo la Licencia ISC.