Astro Movies
Para estudiar un proyecto Astro real con View Transitions y consumo de la API de TMDB.
App de base de datos de películas hecha con Astro para demostrar las View Transitions.
Notas y contexto
Qué es
Astro Movies es un proyecto de demostración creado por Maximiliano Firtman (GitHub Charca) que reproduce una pequeña base de datos de películas tipo IMDb. Está construido con Astro y consume los datos de la API de TMDB (The Movie Database). Su objetivo principal es enseñar la API de View Transitions de Astro, que permite navegar entre páginas con animaciones fluidas sin renunciar a la arquitectura multipágina (MPA). El demo en vivo está desplegado en Cloudflare Pages.
Para qué sirve
- Ver un ejemplo realista de View Transitions aplicadas a una navegación multipágina con Astro.
- Aprender a integrar una API externa (TMDB) en un sitio Astro.
- Usar el código como punto de partida o referencia para tu propia app de catálogo o galería.
- Experimentar con el flujo de despliegue de Astro en Cloudflare Pages.
Cuándo usarlo
Es ideal cuando estás aprendiendo Astro y quieres ver cómo se montan las View Transitions en un caso de uso concreto en lugar de en un ejemplo mínimo. También sirve como plantilla informal si vas a construir una galería o catálogo que consuma una API. No es un producto terminado ni una librería: es material didáctico. Si buscas otras muestras del mismo autor, existen variantes como astro-blog-view-transitions o astro-photo-gallery.
Ejemplo
Para arrancarlo en local necesitas una clave de la API de TMDB:
git clone https://github.com/Charca/astro-movies.git
cd astro-movies
npm install
cp .env.example .env # añade tu TMDB API Key en el .env
npm run dev # servidor local en localhost:3000Para generar la versión de producción y previsualizarla:
npm run build # genera el sitio en ./dist/
npm run preview # previsualiza el build antes de desplegarPuntos clave
- Demuestra la API de View Transitions de Astro en una navegación multipágina real.
- Integra la API de TMDB para obtener listados y fichas de películas.
- Usa Tailwind CSS para el estilo y está desplegado en Cloudflare Pages.
- Demo en vivo disponible para probarlo sin instalar nada.
Ten en cuenta
Requiere registrarte en TMDB y obtener una API Key para ejecutarlo en local. El repositorio no incluye un archivo de licencia explícito, así que conviene contactar al autor antes de reutilizar el código en un proyecto comercial. Al tratarse de una demo, su mantenimiento es esporádico y la información más actualizada sobre View Transitions está en la documentación oficial de Astro.