Buscá tus películas favoritas en tiempo real. Una SPA liviana en JavaScript puro que consume la API de TMDb para explorar el catálogo de películas populares.
- Sobre el proyecto
- Demo
- Funcionalidades
- Instalación
- Cómo está construido
- Recursos útiles
- Seguridad
- Autor
Es viernes a la noche y no sabés qué película ver. Abrís cuatro pestañas distintas, cada una con un catálogo diferente y ninguna búsqueda que realmente filtre mientras escribís.
MovieTime resuelve ese momento puntual: un buscador liviano, sin frameworks, que trae el catálogo de populares de TMDb y te deja filtrarlo en tiempo real, con paginación y feedback visual inmediato. Lo construí para dominar de punta a punta el consumo de APIs REST, la manipulación del DOM y el manejo de estado sin librerías — la base sobre la que después construí todo lo demás.
Fue uno de mis primeros proyectos como programador, y lo sigo manteniendo tal cual está porque me gusta poder mirar atrás y ver de dónde salí.
| 🔍 | Búsqueda en tiempo real que filtra el listado mientras escribís |
| 🖼️ | Tarjetas de película con póster, título y rating (vote average) |
| ⏭️ | Paginación (anterior / siguiente) sobre el catálogo de populares |
| 🔔 | Notificaciones toast (éxito / error) con Toastify |
| 👀 | El título de la pestaña cambia para llamar la atención cuando salís de la página |
# Cloná el repositorio
git clone https://github.com/Juanma-Alvarado/MovieTime.git
cd MovieTime
# Conseguí tu propia API key gratuita en https://www.themoviedb.org/settings/api
cp .env.example .env
# pegá tu key en .env, después generá config.js a partir de ella (ver Seguridad)
./generate-config.sh
# Serví el proyecto con cualquier servidor estático, por ejemplo:
npx serve .
# o simplemente abrí index.html en el navegador- HTML5 + CSS3 — estructura y estilos, sin frameworks de UI.
- JavaScript (ES6+) — fetch a la API, renderizado dinámico del DOM, filtrado de búsqueda.
- TMDb API — fuente de datos de películas.
- Toastify JS — notificaciones no bloqueantes.
Este proyecto es 100% frontend (sin backend), así que la API key de TMDb siempre va a ser visible para cualquiera que abra las devtools del navegador — TMDb no ofrece restricción de key por dominio (a diferencia de, por ejemplo, Google Maps), así que no hay forma de ocultarla del todo sin agregar un servidor intermedio.
Por eso la key vive en .env (gitignored, nunca se commitea) y config.js se genera a partir de ella:
- En local, con
./generate-config.sh. - En Netlify, en cada deploy, a partir de la variable de entorno
TMDB_API_KEYconfigurada en el dashboard del sitio (vernetlify.toml).
Así la key nunca queda escrita en el historial de git a futuro, y se trata como una key de demo, de solo lectura, regenerable desde el dashboard de TMDb sin tocar el resto del código.
Juan Manuel Alvarado — Data Analyst Jr. & Data Scientist Jr. GitHub · Portfolio