Una aplicación web interactiva diseñada para fanáticos de los cómics que permite explorar información detallada de cientos de personajes, combinando estética clásica de cómic con una experiencia moderna, fluida y responsive.

🚀 Link del Proyecto: https://superhero-profile-app.vercel.app/

• 📑 Índice
• 🔍 Descripción
• 🛠️ Tecnologías Utilizadas
• 🚀 Características
  • 📸 Galería del Sistema
• 📂 Estructura del Proyecto
• 📡 API y Endpoints
  • Mapeo de Datos (Endpoints de Información)
  • Lógica de Implementación (api.js)
• 📥 Cómo ejecutar el proyecto
• 🤝 Contribuir
• ⚖️ Licencia
• 👥 Autor

SuperHero Profile App es una central de consulta visual inspirada en los sistemas de inteligencia de los universos de cómics. Presenta información compleja de forma clara, atractiva y accesible, con un diseño oscuro y acentos rojos que refuerzan la identidad visual del proyecto.

Volver al índice ▲

• HTML5 & CSS3 — Estructura semántica y animaciones personalizadas.
• Tailwind CSS — Framework principal para diseño responsive y utilidades visuales.
• JavaScript (Vanilla) — Consumo de API, lógica de paginación y manipulación dinámica del DOM.

Volver al índice ▲

• 🔌 Consumo de API Externa: Integración con la Akabab Superhero API.
• 🧾 Ficha Técnica Detallada: Modal tipo “Archivo Confidencial” con biometría y estadísticas.
• 📱 Diseño Responsive: Optimización para móviles, tablets y desktops.
• 🌓 Selector de Temas (Dark/Light): Aunque el diseño fue concebido originalmente para una experiencia Dark, se ha integrado un selector de modo claro por requerimientos técnicos del proyecto.
• 🧪 Entorno de Pruebas: Se incluye un archivo especial para testear la adaptabilidad del diseño en diferentes resoluciones. (preview_c.html)

Volver al índice ▲

Volver al índice ▲

📂superhero-profile-app/
├── 📂css/
│   └── styles.css
├── 📂js/
│   ├── api.js
│   ├── config.js
│   ├── frases.js
│   ├── modal.js
│   ├── pagination.js
│   ├── state.js
│   └── ui.js
├── index.html        <-- Main Entry
├── preview_c.html    <-- Testing Responsivo
└── README.md

Volver al índice ▲

El proyecto consume la Akabab Superhero API, optimiza el rendimiento mediante una estrategia de Cache Global. En lugar de realizar peticiones repetitivas al servidor, los datos se descargan una sola vez y se gestionan localmente en allHeroesCache.

GET /all.json
Devuelve la lista completa de héroes con estadísticas, biografía, apariencia y recursos visuales.

De cada objeto retornado por la API, la aplicación extrae y renderiza dinámicamente:

• images/: Se utilizan las versiones .sm o .md para las tarjetas y el modal de perfil.

• powerstats/: Atributos numéricos (Intelligence, Strength, Speed, Durability, Power, Combat) para generar las barras de nivel.

• appearance/: Datos físicos como gender, race y height/weight.

• biography/: Información de trasfondo como fullName, placeOfBirth y publisher.

Se utilizan funciones asíncronas para garantizar una experiencia de usuario fluida:

getAllHeroes(): Centraliza la descarga inicial y almacena los datos en un caché local (allHeroesCache).

searchHeroes(query): Realiza un filtrado dinámico sobre los datos cacheados para una búsqueda instantánea.

getHeroById(id): Recupera la información específica de un héroe para alimentar el modal de detalles.

// Fragmento de la lógica de caché implementada
async function getAllHeroes() {
  if (allHeroesCache.length > 0) return allHeroesCache;

  try {
    const response = await fetch(BASE_URL);
    if (!response.ok) throw new Error("Error al cargar la base de datos");
    allHeroesCache = await response.json();
    return allHeroesCache;
  } catch (error) {
    console.error("Error en la API:", error);
    return [];
  }
}

Volver al índice ▲

1. Clonar el repositorio:

git clone https://github.com/magamahe/superhero-profile-app.git

2. Ingresar al proyecto:

cd superhero-profile-app

3. Abrir el archivo:

index.html

(No requiere servidor ni instalación adicional)

Volver al índice ▲

Proyecto académico. Si deseas colaborar:

1. Forkear el repositorio.
2. Crear una rama nueva:

git checkout -b feature/nueva-funcionalidad

3. Realizar cambios y commit.
4. Push y Pull Request.

Volver al índice ▲

Este proyecto se distribuye bajo la Licencia MIT.

Volver al índice ▲

Martínez Herrero, María Gabriela