Ghibli Movies
April 2025
A responsive movie catalog built with Next.js and Tailwind CSS, using live movie data from the TMDB API.
Overview
Ghibli Movies is a responsive movie catalog web app that displays Studio Ghibli movies using live data from The Movie Database (TMDB) API.
The project was built to practice API integration, dynamic routing, responsive UI development, and component-based architecture using modern frontend tools.
The Challenge
The main goal was to create a clean and responsive catalog experience while working with external movie data.
The application needed to fetch data from the TMDB API, display a list of movies in a visually organized way, and provide individual detail pages with more information about each title.
Solution
I built the application with Next.js and styled the interface with Tailwind CSS, using a mobile-first approach to keep the layout responsive across different screen sizes.
The project includes dynamic movie pages where each movie has its own route with details such as title, poster, synopsis, release date, rating, and genres.
Key Features
- Live movie data fetched from the TMDB API
- Responsive movie grid with posters, titles, and overview text
- Dynamic movie detail pages
- Movie information including synopsis, release date, rating, and genres
- Component-based structure for better organization and scalability
Pages
/movies— Movie catalog with titles, posters, and overview/movies/[id]— Dynamic movie detail page with synopsis, release date, rating, and genres
Technologies
- Next.js
- Tailwind CSS
- TMDB API
- React
- Vercel
Results
The project demonstrates API integration, dynamic routing, UI responsiveness, and component-based development using a modern frontend stack.
It also helped reinforce good practices for organizing components, handling external data, and building clean interfaces for content-driven applications.