Una aplicación web completa para explorar superhéroes de Marvel y DC Comics, desarrollada con el stack MEAN (MongoDB, Express.js, React.js, Node.js).

• Frontend: SuperHeroes App
• API: Heroes API

• 📱 Responsive Design - Optimizado para móviles, tablets y desktop
• 🔍 Búsqueda Inteligente - Busca por nombre, biografía o casa editorial
• 🎯 Filtros Dinámicos - Filtra héroes por Marvel o DC
• 📖 Vista Detallada - Información completa de cada superhéroe
• ⚡ Carga Rápida - Optimizado con Vite para máximo rendimiento
• 🎨 Interfaz Moderna - Diseño limpio con Bootstrap 5

• Frontend: React 18 + Vite + Bootstrap 5
• Backend: Node.js + Express.js + MongoDB
• Routing: React Router DOM
• Estado: React Hooks (useState, useEffect)
• API: RESTful API con endpoints CRUD
• Responsive: Mobile-first design
• Optimización: Lazy loading de imágenes

{
 "react": "^18.2.0",
 "react-router-dom": "^6.8.0",
 "bootstrap": "^5.3.0",
 "react-bootstrap": "^2.7.0",
 "vite": "^4.4.5"
}

{
 "node": "^18.0.0",
 "express": "^4.18.0",
 "mongodb": "^5.0.0",
 "mongoose": "^7.0.0",
 "cors": "^2.8.5"
}

• Node.js >= 18.0.0
• npm o yarn
• MongoDB (local o Atlas)

src/
├── assets/ # Recursos estáticos
│ ├── css/ # Estilos CSS
│ └── img/ # Imágenes y logos
├── components/ # Componentes React
│ ├── heroes/ # Lista de héroes
│ ├── heroe/ # Detalle del héroe
│ └── shared/ # Componentes compartidos
│ ├── footer/ # Footer de la aplicación
│ ├── search/ # Componente de búsqueda
│ └── tarjeta/ # Card de héroe
├── routes/ # Configuración de rutas
│ └── Router.jsx # Router principal
├── App.jsx # Componente principal
└── main.jsx # Punto de entrada

{
 "_id": "68adc0afb8b0efbde1543731",
 "nombre": "Spider-Man",
 "bio": "Tras ser mordido por una araña radiactiva...",
 "img": "assets/img/spiderman.svg",
 "aparicion": "1962年08月01日T00:00:00.000Z",
 "casa": "Marvel"
}

La aplicación incluye un sistema de búsqueda avanzado que permite:

• Búsqueda por nombre: "Spider-Man", "Batman"
• Búsqueda por biografía: "araña radiactiva", "vigilante"
• Búsqueda por casa editorial: "Marvel", "DC"
• Búsqueda en tiempo real: Los resultados se actualizan mientras escribes
• Manejo de casos: No distingue entre mayúsculas y minúsculas

• Mobile: < 576px (1 columna)
• Tablet: 576px - 991px (2 columnas)
• Desktop: >= 992px (3 columnas)

• Imágenes optimizadas para diferentes densidades
• Touch-friendly buttons y controles
• Navegación simplificada
• Búsqueda adaptativa

¡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

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

• Marvel & DC Comics por los increíbles personajes
• Bootstrap por el framework CSS
• React Team por la increíble librería
• Vite por la herramienta de desarrollo ultrarrápida
• Vercel por el hosting gratuito

⭐ ¿Te gustó el proyecto? ¡Dale una estrella en GitHub!