CineTeca

Tu Biblioteca Personal de Películas

Descubre, organiza y gestiona tus películas favoritas con CineTeca.
Conecta con la API de TMDB y crea listas personalizadas de tus películas preferidas.

Ver Demo • Reportar Bug • Solicitar Característica

Dashboard principal con películas populares

Inicio de Sesión Autenticación OAuth con TMDB	Búsqueda Avanzada Encuentra películas al instante
Crear Listas Listas personalizadas	Gestión de Listas Administra tus colecciones
Editar Listas Modifica fácilmente	Agregar Películas Añade a tus listas

• Navegador web moderno (Chrome, Firefox, Safari, Edge)
• API Key de TMDB (gratuita)
• Servidor HTTP local para desarrollo

1. Crear cuenta en The Movie Database
2. Ir a Configuración → API
3. Solicitar API Key (seleccionar "Developer")
4. Copiar la API Key generada

# Clonar el repositorio
git clone https://github.com/bvelastegui/cineteca.git
cd cineteca

# Opción 1: Python 3 (recomendado)
python3 -m http.server 8000

# Opción 2: Node.js
npx http-server -p 8000

# Opción 3: PHP
php -S localhost:8000

# Abrir en el navegador
# http://localhost:8000

Nota: Usa un servidor HTTP local en lugar de abrir index.html directamente para evitar problemas con CORS y módulos ES6.

Frontend	API & Storage	Deployment

• Vanilla JavaScript: Aplicación sin frameworks, usando JavaScript puro con ES6+ Modules, async/await
• Arquitectura Modular: Código organizado siguiendo el patrón ETL (Extract-Transform-Load)
• Sin Dependencias: No requiere npm, webpack, o bundlers
• Responsive Design: Compatible con móviles, tablets y desktop

cineteca/
├── assets/
│   └── img/
│       ├── logo.svg
│       └── landing/          # Screenshots de la app
├── js/
│   ├── core/                 # Núcleo de la aplicación
│   │   ├── auth.js          # Sistema de autenticación OAuth
│   │   ├── cache.js         # Sistema de caché con TTL
│   │   └── dom.js           # Utilidades DOM
│   ├── peliculas/           # Módulo de películas
│   │   ├── api.js           # API de TMDB
│   │   ├── normalizador.js  # Adaptador ETL
│   │   └── renderizador.js  # Renderizado de UI
│   ├── listas/              # Módulo de listas
│   │   ├── api.js
│   │   ├── normalizador.js
│   │   └── renderizador.js
│   └── config/
│       └── constantes.js    # Constantes globales
├── index.html               # Landing page
├── login.html               # Página de autenticación
├── home.html                # Dashboard principal
└── README.md

El proyecto implementa el patrón ETL (Extract-Transform-Load):

1. Extract: Los datos se obtienen de la API de TMDB
2. Transform: Los adaptadores/normalizadores convierten los datos (inglés → español)
3. Load: Los datos transformados se cargan en la UI y localStorage

• Flujo OAuth completo con TMDB
• Persistencia de sesión (localStorage/sessionStorage)
• Gestión segura de cierre de sesión
• Validación de sesión activa

• Visualización de películas populares
• Sistema de paginación
• Loading spinners y estados de carga
• Sistema de tabs (Populares / Listas)

• Búsqueda en tiempo real con debounce
• Paginación de resultados
• Filtrado por género
• Detección de películas duplicadas

• Crear listas personalizadas
• Ver todas las listas del usuario
• Editar listas (nombre y descripción)
• Eliminar listas completas
• Agregar/eliminar películas de listas
• Modals de confirmación

• Bootstrap Toasts para notificaciones
• Placeholders para imágenes
• Sistema de caché inteligente (TTL 1h)
• Landing page con galería de screenshots

• Filtros avanzados por fecha de estreno
• Búsqueda por actor y director
• Ordenamiento personalizado de resultados
• Sistema de favoritos y watchlist
• Modo oscuro/claro
• Compartir listas con otros usuarios

// TTL de 1 hora por defecto
// Namespacing automático
// Limpieza automática de datos expirados
// Manejo de QuotaExceededError

const cache = new CacheService('movies_');
cache.set('popular', data, 60); // 60 minutos TTL
const cached = cache.get('popular');

┌─────────────────────────────────────────┐
│          Capa de Presentación           │
│        (HTML + Renderizadores)          │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│        Capa de Normalizadores           │
│        (Patrón ETL - Transform)         │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│            Capa de API                  │
│    (Comunicación con TMDB - Extract)    │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│          Capa de Caché/Storage          │
│      (localStorage - Load/Persist)      │
└─────────────────────────────────────────┘

• OBJETIVO.md: Objetivos detallados y división de tareas
• INSTRUCTIONS.md: Instrucciones de la asignatura

Bryan Velastegui @bvelastegui

Evelyn Morocho @evelyn18m

Este proyecto está licenciado bajo la MIT License - ver LICENSE para más detalles.

Este proyecto fue desarrollado como parte de un proyecto final de la asignatura de Desarrollo de Software con fines educativos.

• Información de películas proporcionada por The Movie Database (TMDB) API
• TMDB API está sujeta a sus propios términos de servicio
• Este proyecto no está respaldado ni certificado por TMDB

• TMDB API Documentation
• Bootstrap 5 Documentation
• MDN Web Docs - JavaScript
• GitHub Pages Documentation