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!
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.
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.
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
.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.cd
to to the project folder, and install the project dependencies with your package manager of choice e.g npm install
for npm.npm run dev
.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.
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.
If you find this project helpful, you can:
<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.