A movie database project featuring a carousel with upcoming releases, top-rated movies, and a search field for the desired film. It also includes a movie details page showing the main information about the movie and its cast. All of this is integrated with the TMDB API.
The project is built with React, along with TailwindCSS, Shadcn/ui, React Router, and React Query. Special mention goes to React Query, which optimizes repeated calls through its caching mechanism. For more information about it, check out the documentation.
Comparison of requests using react-query
First API call:
Same call with cache:
- Project Structure
- Eslint Configuration
- Configure Tailwind and shadcn/ui
- Default Layout
- Components
- Header
- Background Carousel for Latest Released Movies
- Search Form
- Movie List
- Pagination
- Pages
- Home
- Movie Details
- Page Navigation
After cloning the project, navigate to the project directory and install the project dependencies using your package manager.
| pnpm | pnpm install |
| yarn | yarn install |
| npm | npm install |
Create an environment variables file named .env.local and add the following environment variables:
VITE_API_READ_ACCESS_TOKEN=
VITE_BASE_TMDB_URL=
VITE_IMG_BASE_URL=
An API Key must be configured for authorization to access the APIs.
With the environment variables set and the packages installed, simply run the following command:
| pnpm | pnpm dev |
| yarn | yarn dev |
| npm | npm run dev |