This is an assignment project in an in-depth JavaScript course. Generally speaking, I was tasked with creating a version of a movie database application that meets the requirements a user would expect when visiting a similar service. The solution is built with React, React Query, and Axios. As for the API, the application uses The Movie Database (TMDb) API (https://www.themoviedb.org/). The challenge here was to reuse my components as much as possible. For more information, please check out the "Documentation" section further down in this README file.
Checkout the solution:
⭐ Solution URL: https://mi-mbmovie.netlify.app/
- React - JS library
- Vite - Frontend tooling
- TMDb - API
- Tanstack React Query - State management
Structure of the data flow in the application is as follows:
App -> Pages -> Sections -> Components
The sections are responsible for setting the main layout of a specific section on the page and handle the fetch query depending on what properties it has. Then it will pass down the data to other components that displays the data accordingly.
Section name should reflect what kind of layout that is being used:
<GridMovies>
<GridActors>
<MenuGenres>
<ListMovies>
<GridRecentVisited>
GridMovies uses 4 properties:url identifier option useRelated
url: string : Define the base-url
Identifier: string: Can be an ID or something uniq to construct the endpoint.
Option: string[] : (Optional) Is being used to construct endpoint
useRelated: boolean : This is used for selecting between endpoints that are specific and endpoints with a general fetch request.
Components CAN handle:
- Its own Interfaces
GridButtons use 2 properties, id and title/name.
This component is designed for genre buttons and contains a grid system that will display the buttons in a certain order.
ImageAvatar use 3 properties:
data- Contains the datasetdisplayData- If text data as "name" and "character" should be displayed with the avatar.size- Size of the image in the avatar
ListPagination use 5 properties:
page- Handles the what page is being clickedtotal_pages- How many pages the dataset containsid_param- specific id to construct reload urlgenre_param- Specific categorytype- Where is the pagination being used
OptionButtons is designed to be a generic component to be used in different scenarios.
ListPagination use 5 properties:
handleClickOption- (data: string, localStorage: boolean) => void. Returns a function calldata- What the button set will contain for information
The folder Interface will contain all GLOBAL interfaces for the main data that is collected from the API.
Actors
Genres
Movie
Movies
Types in this case imports all the interfaces to construct the types for the returning data from the API where the endpoint is similar. Example of this is movieActorType and allRelatedActorMovieType.