IMDB Trailers - Anticipated Movies

A Next.js application that displays anticipated movies with their trailers from IMDB.

Features

• 🎬 Browse anticipated movies with beautiful card-based UI
• ▶️ Watch trailers in fullscreen mode
• 📱 Responsive design for all screen sizes
• 🎨 IMDB-inspired dark theme
• ⚡ Fast loading with Next.js App Router
• 🔍 Only shows movies with available trailers

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Font: Inter (Google Fonts)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser.

Building for Production

npm run build
npm start

API Integration

The application directly fetches movie data from IMDB's GraphQL API at https://api.graphql.imdb.com/. No backend server is required.

GraphQL Query

The app uses the Trl_PopularTitlesTrailers query to fetch the most anticipated movies with trailers for the next year.

Trailer Video URLs

Trailers are loaded using the following URL pattern:

https://imdb-video.media-imdb.com/mc/{videoId}/{videoId}_1080p.mp4

Project Structure

├── app/
│   ├── api/
│   │   └── trailers/
│   │       └── route.ts      # API route to fetch trailers from IMDB
│   ├── globals.css           # Global styles
│   ├── layout.tsx            # Root layout
│   └── page.tsx              # Main page
├── components/
│   └── MovieCard.tsx         # Movie card component with fullscreen video player
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── README.md

How It Works

1. The API route (/api/trailers) sends a GraphQL request to IMDB's API
2. Fetches the most anticipated movies with trailers for the next year
3. Filters out movies without trailers (videoId is null)
4. Returns the data to the frontend
5. The frontend displays movies in a responsive grid
6. Click "Watch Trailer" or the play button to open fullscreen video player

Deployment

This application is ready to be deployed on Vercel:

1. Push your code to a Git repository
2. Import the project in Vercel
3. Deploy!

License

MIT