Skip to main content

​
Get Started in 5 Minutes

This guide will help you set up Popcorn Vision locally and browse movies and TV shows in no time.
1

Clone the Repository

First, clone the Popcorn Vision repository to your local machine:
git clone https://github.com/fachryafrz/popcorn-vision.git
cd popcorn-vision
Fork First? If you plan to contribute, fork the repository on GitHub first, then clone your fork instead.
2

Install Dependencies

Popcorn Vision uses pnpm as its package manager. Install the dependencies:
pnpm install
The project specifies [email protected] in package.json. If you don’t have pnpm installed, run:
npm install -g [email protected]
3

Set Up Environment Variables

Copy the example environment file and configure your API credentials:
cp .env.example .env
Now, open .env and add your TMDB API credentials:
.env
# API
API_URL="https://api.themoviedb.org/3"
API_KEY="your_api_key_here"
API_READ="your_read_access_token_here"

# IMAGE URLs (pre-configured, no changes needed)
NEXT_PUBLIC_API_IMAGE_45="https://image.tmdb.org/t/p/w45"
NEXT_PUBLIC_API_IMAGE_92="https://image.tmdb.org/t/p/w92"
# ... (other image sizes are already set)

# Google Analytics (optional)
GA_MEASUREMENT_ID=""

​
Getting Your TMDB API Credentials

  1. Go to The Movie Database (TMDB)
  2. Create a free account or sign in
  3. Navigate to Settings → API
  4. Request an API key by selecting “Developer”
  5. Fill out the application form (choose “Website” or “Personal” for type)
  6. Copy your API Key (v3 auth) and API Read Access Token (v4 auth)
  7. Paste them into your .env file
Keep your API keys secure! Never commit your .env file to version control. The .gitignore file already excludes it.
4

Start the Development Server

Launch the Next.js development server:
pnpm dev
You should see output similar to:
▲ Next.js 14.2.35
- Local:        http://localhost:3000
- Environments: .env

✓ Ready in 2.5s
5

Access the Application

Open your browser and navigate to:
http://localhost:3000
You’ll see the Popcorn Vision homepage with:
  • Hero Slider: Featuring trending movies/TV shows
  • Now Playing: Currently available content
  • Upcoming: Future releases
  • Top Rated: Highly-rated content
  • Trending: What’s popular this week
  • Genre Sections: Horror, Comedy, Sci-Fi, and more
Popcorn Vision Homepage

​
What’s Next?

Now that you have Popcorn Vision running, here’s what you can explore:

Browse Movies

Explore the extensive movie database with detailed information, trailers, and cast details

Discover TV Shows

Track your favorite series with season and episode information

Use Advanced Search

Filter content by genre, release date, streaming platform, actors, and more

Login with TMDB

Authenticate to save favorites, create watchlists, and rate content

​
Code Overview

Here’s how the homepage fetches and displays content:
src/app/page.js
import { axios } from "@/lib/axios";
import FilmSlider from "@/components/Film/Slider";
import Trending from "@/components/Film/Trending";

export default async function Home({ type = "movie" }) {
  // Fetch trending content
  const trending = await axios
    .get(`/trending/${type}/week`)
    .then((r) => r.data.results);

  // Fetch now playing
  const nowPlaying = await axios
    .get(`/discover/${type}`, {
      params: {
        region: "US",
        include_adult: false,
        sort_by: "popularity.desc",
      },
    })
    .then((r) => r.data);

  return (
    <div>
      <FilmSlider films={nowPlaying} title="Now Playing" />
      <Trending film={trending[0]} type={type} />
    </div>
  );
}
The axios instance is pre-configured with TMDB API credentials:
src/lib/axios.js
import Axios from "axios";

export const axios = Axios.create({
  baseURL: process.env.API_URL,
  params: { api_key: process.env.API_KEY },
  adapter: "fetch",
  fetchOptions: {
    next: { revalidate: 3600 }, // Cache for 1 hour
  },
});

​
Troubleshooting

  • Verify your API_KEY and API_READ tokens are correct in .env
  • Ensure you’ve copied .env.example to .env
  • Check that your TMDB API key is active (newly created keys are instant)
  • Restart the dev server after changing environment variables
The image URLs in .env are pre-configured. If images aren’t loading:
  • Check your internet connection
  • Verify the TMDB API is responding correctly
  • Open browser DevTools and check the Network tab for 404 errors
Install pnpm globally:
npm install -g [email protected]
Or use npx:
npx [email protected] install
For detailed installation instructions and advanced configuration, see the Installation Guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us