circle-info
Desarrollo en curso, en breve se publicarán el resto de temas.

Capítulo 12: Proyecto Integrador - Dashboard de Películas

En este capítulo final, crearemos una aplicación completa que integra todo lo aprendido: Fetch, async/await, manipulación del DOM, localStorage y buenas prácticas.

12.1. Descripción del Proyecto

"Movie Dashboard": Una aplicación que:

  • Muestra películas populares desde una API (The Movie Database)

  • Permite buscar películas en vivo

  • Guarda favoritos en localStorage

  • Filtra por géneros

  • Muestra detalles de películas


12.2. Estructura del Proyecto

movie-dashboard/
├── index.html
├── style.css
├── js/
│   ├── app.js          (entrada principal)
│   ├── api.js          (llamadas a la API)
│   ├── storage.js      (gestión de localStorage)
│   └── ui.js           (manipulación del DOM)
└── assets/
    └── spinner.svg

12.3. HTML Base


12.4. Módulos JavaScript

api.js - Llamadas a la API

storage.js - Gestión de localStorage

ui.js - Manipulación del DOM

app.js - Orquestración


12.5. CSS Básico


Resumen del Capítulo

Este proyecto integrador combina:

  • ✅ Fetch API y async/await

  • ✅ Manipulación del DOM (T14)

  • ✅ localStorage para persistencia

  • ✅ Debouncing para búsqueda en vivo

  • ✅ Delegación de eventos

  • ✅ Modularización y buenas prácticas

🎯 Siguientes Pasos

  • Agregar paginación

  • Mostrar detalles completos de películas

  • Agregar rating del usuario

  • Integrar con backend propio

  • Desplegar en Netlify/Vercel


Última actualización

¿Te fue útil?