A modern movie discovery app built using Next.js 14 with Server-Side Rendering (SSR). The app fetches movie data from the TMDB API to display movies, trailers, and additional media content. It offers a clean and responsive UI with features like search, movie details, and video playback integration.
- Server-Side Rendering (SSR): Fetch movie data on the server before rendering the page, ensuring faster load times and SEO benefits.
- Movie Search: Search for movies by title and filter through categories (popular, top-rated, etc.)
- Responsive Design: Fully responsive layout that works across desktop and mobile devices.
- Video Playback: Integrated YouTube trailers and video previews using
@vidstack/react
. - Movie Details: View detailed information about a movie, including its cast, crew, release date, and overview.
- Smooth UI: Swiper-powered carousels for movie listings and categories.
-
Frontend:
- Next.js 14: React framework for building the app with server-side rendering (SSR) and static site generation (SSG).
- React 18: Library for building UI components.
- Tailwind CSS: Utility-first CSS framework for building responsive designs.
- Swiper: For creating smooth carousels and sliders.
- @vidstack/react: For embedding YouTube videos and other media content.
-
Backend/Service Integration:
- TMDB API: Provides movie data, trailers, and media content.
-
UI/UX:
- React Icons: A library for using icons in the app.
- Date-fns: For handling date formatting and manipulation.
- React Detect Click Outside: For managing UI elements that require click-outside detection.
- TMDB API Documentation
- Next.js Documentation
- Tailwind CSS Documentation
- @vidstack/react Documentation
- React Hook Form Documentation
- Swiper Documentation
- AWS SDK Documentation
Follow the steps below to get your development environment up and running.
- Node.js (v16 or higher)
- NPM or Yarn
git clone https://github.com/esaia/tmdb-movie
cd tmdb-movie
npm install
# or
yarn install
NEXT_PUBLIC_TBDB_API=your_tmdb_api_key_here
NEXT_PUBLIC_TBDB=https://api.themoviedb.org/3
npm run dev
# or
yarn dev
This app leverages Server-Side Rendering (SSR) to fetch movie data from the TMDB API before the page is rendered in the browser. This ensures:
- Faster initial load: Movie data is pre-fetched on the server, reducing client-side rendering time.
- Improved SEO: Since the data is already included in the initial HTML, search engines can index movie details for better visibility.
- Consistent and up-to-date data: Every request fetches fresh movie data directly from the TMDB API.