robole / now-showing

Preview movies showing in theaters in your country

Now Showing

Preview movies showing in movie theaters in your country

Browse the catalogue of movies that are showing in movies theaters (cinemas) to decide what movie (film) you want to see. The data is provided by TMDB.

Try the demo out!

Features

1. The most recent 20 movies in movie theaters are displayed as a list of cards.
2. Each card shows the key info for each movie: title, tagline, rating, number of votes, release date, duration, age certification, genres, directed by, star actors, and description.
3. Ratings are colour coded for quick identification, a rating that is:
   • Greater than or equal 8 is coloured gold,
   • Less than 8 and greater than or equal to 6.5 is coloured silver,
   • Less than 6.5 and greater than or equal to 5.5 is coloured bronze,
   • Less than 5.5 is coloured dark brown.
4. You can click a "Show More" button to show the next most recent 20 movies if more are available.
5. The list of movies can be sorted by rating, duration and release date in ascending and descending order. They are sorted by rating (highest first) by default.
6. The list of movies can be filtered by rating, duration, votes, and release date.
7. You can view the trailers quickly for each movie in a pop-up custom video player. Videos are sourced from YouTube but some of the cruft from YouTube is blocked. If there is more than one trailer for a movie, you can cycle through them.
8. The video player has keyboard support for all actions:
   • Spacebar: Play/pause,
   • Right arrow: Previous video,
   • Left arrow: Next video,
   • Up arrow: Increase volumne,
   • Down arrow: Decrease volumne.
   • Esc: Close video player.
9. It has a button in the header that shows which country and language is currently selected. You can change the country and language, and the selections are stored in the browser (in localStorage), so they are available the next time you visit the app. The default language is English, and the default country is Ireland.

The data is sourced from the TMDB API v3. This API has no rate limiting.

Why?

I made this because I wanted a better way to decide which movie I would like to see in a movie theater. I found that existing solutions fell short of my expectations.

Existing solutions

IMDB has an "In Theaters" page, which only shows the movies that are opening this week. I would rather see all of the movies that are showing. You need to go to the "Showtimes" page to see all the movies, and it only shows the bare minimum info: movie title, rank, and a cover image! It does show more info as a tooltip when you hover over it, but you may not stumble upon this. In any case, the tooltip is super slow to load! 🤦

IMDB - Showtimes

TMDB has a "Now Playing Movies" page, which shows a list of movies with the basic info: title, release date, and a cover image.

TMDB - Now Playing Movies

To run the project

1. Sign up to TMDB, then go to https://www.themoviedb.org/settings/api to create an API key.
2. Clone this project.
3. Create a new file called .env and add it to the project root folder. This is where we will store the API key. This follows Vite's conventions for environment variables. Add the variable VITE_API_KEY=123 replacing "123" with your actual API key.
4. Go to the command-line, cd to to the project folder, and install the project dependencies with your package manager of choice e.g npm install for npm.
5. Now, you can start the local server -- npm run dev.

Testing

Unit tests are written with Vitest and can be found in the test/unit folder. You can run npm run test on the command-line to run the tests.

Deploy the project

If you want to deploy this as a public website, keep in mind that environment variables are used in the build process. So, the TMDB API key could be found by someone who inspects the source code in the browser.

In this case, it is not that big a deal that other people can see the API key, since there is no rate limiting on the API. Generally though, you would protect the key by moving the API calls into serverless functions or a small backend.

To build the project, you can run npm run build and the generated files will be put into the dist folder. You can grab this folder and upload to your favourite hosting service. Netlify and Vercel have free accounts with generous limits and straightforward deployment.

Gratitude

If you find this project helpful, you can:

1. Sponsor me or buy me a coffee on ko-fi. 💸🌈
2. Star the repo to help others find it. 🌟

Notes on API

1. It is preferable to provide a value in the form of <language>-<country> for the language query param because it provides more localized results. For example, pt-BR gives Brazilian Portuguese results which has alternative data to Portuguese results such as a title of Megatubarão 2 instead of Meg 2. See docs for language reference for more info.