CineAtlas

Aplicación web interactiva para explorar películas recientes usando la API de TheMovieDB. Permite buscar, filtrar, ordenar, consultar detalles de cada película y ver su trailer directamente en el modal.

Ver aplicación en vivo: https://pamelavazquez-dev.github.io/CineAtlas/

---

Capturas de pantalla

Página principal

Modal de película

---

Funcionalidades

• Catálogo de hasta 100 películas recientes cargadas desde TheMovieDB.
• Vista inicial limitada a 15 películas, con botón Cargar más.
• Buscador con debounce e historial de las últimas búsquedas.
• Filtros por puntuación mínima y género.
• Ordenación por películas más nuevas, más/menos populares y mayor/menor puntuación.
• Modal con título, fecha, puntuación, sinopsis, póster y trailer embebido.
• Gráfica doughnut de géneros con Chart.js.
• Modo claro/oscuro persistido en localStorage.
• Diseño responsive para escritorio, tablet y móvil.
• API key separada de los archivos versionados.

---

Configuración de la API key

Local

El proyecto no sube la API key al repositorio. Para ejecutarlo en local:

1. Duplica js/config.local.example.js.
2. Renombra la copia a js/config.local.js.
3. Añade tu key de TheMovieDB:

window.CINEATLAS_CONFIG = {
    TMDB_API_KEY: "tu_api_key"
};

js/config.local.js está incluido en .gitignore.

Vercel

Este proyecto no usa Vite. Para desplegarlo en Vercel:

1. Entra en Project Settings > Environment Variables.
2. Crea una variable llamada TMDB_API_KEY.
3. Pega tu API key como valor.
4. Despliega normalmente.

Durante el build, npm run build genera dist/js/config.local.js con esa variable. El directorio de salida configurado para Vercel es dist.

---

Tecnologías utilizadas

• JavaScript ES6+ con módulos
• TheMovieDB API
• Chart.js
• HTML5 semántico
• CSS3 con variables, Flexbox y Grid
• localStorage

---

Estructura del proyecto

CineAtlas/
├── index.html
├── README.md
├── .gitignore
├── .env.example
├── package.json
├── vercel.json
├── scripts/
│   └── build.js
├── styles/
│   └── style.css
├── js/
│   ├── api.js
│   ├── charts.js
│   ├── config.js
│   ├── config.local.example.js
│   ├── main.js
│   ├── modal.js
│   ├── movie.js
│   └── storage.js
└── assets/
    └── img/
        ├── logo.webp
        ├── no-poster.webp
        └── capturas/
            ├── inicio_catalogo.png
            └── modal_pelicula.png

---

Autora

Pamela Vázquez Rueda
Proyecto Integrador · JavaScript Avanzado · 2026