/web-apps-movies

Movies information sourced from The Movies DB API

Primary LanguageTypeScript

Movie Information App

Overview and purpose

This App was built as a pet project. Building small projects like this one, helped me to learn all the latest versions of React, React Router, Vite, TypeScript, Tailwind and shadcn/ui.

Special thank you to The Movie Database team for providing an awesome API to query movies and TV series. This API is the main driver behind the scenes and helped me to build this App.

This App is hosted at OpenApps - Movies. To see more pet projects like this one, visit OpenApps.

Technology Used

Cloning this repository

To clone this repository and play with the code, you will need to supply your own TMDB API key, which you can get from the TMDB API site.

Your API key must the be placed in a file called .env.local like this:

VITE_CIPHER_KEY=<your_secret>
VITE_API_KEY=<encripted_TMDB_API_key>

The CIPHER_KEY is used to decrypt the API key, so you will need to encrypt your API key before entering it into the .env.local file.

This App has a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

  • Configure the top-level parserOptions property like this:
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}
  • Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
  • Optionally add plugin:@typescript-eslint/stylistic-type-checked
  • Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list