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.
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:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
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
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@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 theextends
list