This repository contains a basic routing application for movie search and storage, utilizing the themoviedb.org API for movie data retrieval.
Note
The project is set up for automatic deployment to GitHub Pages using GitHub Actions by JamesIves (GitHub Pages Deployment Action). The deployment action is configured to push production-ready code into the gh-pages branch.
The backend of this application utilizes the version 3 of The Movie Database (TMDB) API to fetch movie-related data.
Base URL: https://api.themoviedb.org/3
GET /trending/movie/{time_window}
| Parameter | Type | Description |
|---|---|---|
| time_window | string | Time window for trending movies. Default: day |
GET search/movie
| Parameter | Type | Description |
|---|---|---|
| query | string | Search query for movie titles |
| year | string | Filter movies by release year |
GET movie/{movie_id}
| Parameter | Type | Description |
|---|---|---|
| movie_id | int32 | Unique ID of the movie |
GET /movie/{movie_id}/credits
| Parameter | Type | Description |
|---|---|---|
| movie_id | int32 | Unique ID of the movie |
GET /movie/{movie_id}/reviews
| Parameter | Type | Description |
|---|---|---|
| movie_id | int32 | Unique ID of the movie |
This application consists of the following routes. If a user attempts to access a non-existent route, they will be redirected to the home page.
| Route | Component | Description |
|---|---|---|
/ |
Home | Home page with a list of popular movies |
/movies |
Movies | Page for movie search by keyword |
/movies/:movieId |
MovieDetails | Detailed information about a specific movie |
/movies/:movieId/cast |
Cast | Information about the cast of a specific movie |
/movies/:movieId/reviews |
Reviews | Information about the reviews for a specific movie |
Asynchronous JavaScript code loading has been implemented for the application routes using React.lazy() and <Suspense>. This allows for better performance and optimized resource utilization during navigation.
Tanstack Query is used in this project for data fetching and state management. It provides a simple and concise API for declarative data fetching, automatic caching, and invalidation. Tanstack Query simplifies handling loading, error, and success states, making the codebase more maintainable and efficient.
Below is an example of how Tanstack Query is used in the application:
// Importing necessary modules
import { useQuery } from 'react-query';
import { fetchTrendingData } from './api';
// Example usage in the Home component
const { isPending, isError, data, error } = useQuery({
queryKey: ['trending'],
queryFn: fetchTrendingData,
});
// Handling loading state
if (isPending) {
return <Loader />;
}
// Handling error state
if (isError) {
return <AlertDestructive message={error.message} />;
}In the above example, useQuery hook from Tanstack Query is used to fetch trending movie data asynchronously. It provides states like isPending, isError, data, and error to handle different scenarios such as loading, error, and success.
Styling for this project is achieved using the shadcn/ui library for UI components and Tailwind CSS for utility-based styling.
In this project, the following components from the shadcn/ui library are utilized:
- Alert: Used for displaying informative or error messages to users.
- Badge: Employed for indicating status or labeling elements with small, contextual notifications.
- Button: Utilized for interactive elements such as buttons that trigger actions or navigation.
- Card: Used for displaying content in a structured and visually appealing manner.
- Input: Employed for capturing user input through forms or search fields.
- Navigation Menu: Utilized for creating navigation menus or sidebars for easy access to different sections of the application.
Tailwind CSS is used for utility-based styling throughout the project. This includes defining styles for layout, typography, colors, and more by applying utility classes directly to HTML elements.
By combining shadcn/ui for UI components and Tailwind CSS for utility-based styling, this project benefits from a streamlined development process, allowing for faster iteration and consistent design patterns throughout the application.
Typography for this project is handled using the non.geist package, which allows for the usage of Vercel's Geist Sans and Geist Mono typefaces in non-Next.js projects.
The non.geist package provides easy access to Vercel's typefaces, Geist Sans and Geist Mono, for projects outside of the Next.js ecosystem. It simplifies the process of using these typefaces by eliminating the need to manually manage assets or dependencies.
To use Geist Sans font in the project, the following import statement is used:
import 'non.geist';To use Geist Mono font specifically, the following import statement is used:
import 'non.geist/mono';The decision to use non.geist is driven by the need for simplicity and convenience. While it's relatively straightforward to implement font faces using CSS, managing fonts as dependencies can add complexity to the project setup. non.geist simplifies this process, providing a hassle-free solution for incorporating Vercel's typefaces into non-Next.js projects.
This package offers a convenient alternative for developers who prefer the flexibility and ease of managing fonts through a package rather than manually handling font assets and dependencies.
