Creator: Zihan Zhang

iMovie is a react application used TMDB APIs, and "i" sounds like "love" in Chinese.

This project is the continuous assignment of module "Web App Development 2" in South East Technological University. Thanks for my lecturer: Rosanne Birney. Her instuction inspired me a lot during my react learning.

• New react-context file: menuContext
• A new header with menu and a simple footer
• Glassmorphism CSS Style
• Swiper component
• YouTuBe videos links
• Default images if fetching fails
• Pagination and Sorting (by name + by time)
• FavoriteIcon presentation optimization
• Full caching support (useQuery / useQueries)
• Responsive UI
• New and updated views:
  • Movie raleted pages (3 list + 1 detail)
  • TV related pages (1 list + 1 detail)
  • People related pages (1 list + 1 detail)
  • Account favorite movies page
• New Material UI components
  • Avator
  • Chip
  • Custom Rating
  • Menu

I used npm to manage packages in this project, and uploaded the package.json file. Enter npm install to install all the dependencies demanded. If you already have a react-app, please enter the commands as follows and install these packages:

1. Material UI - npm install @mui/material @emotion/react @emotion/styled
2. React Router - npm install react-router-dom
3. React Query - npm install react-query
4. Swiper JS - npm install swiper

After installing all packages, use npm start to run this project.

Open http://localhost:3000 to view it in your browser.

Notice: API Key is necessary to run successfully. A file .env in root folder should be created by custom. The content in the file is like:

REACT_APP_TMDB_KEY = <<Your_TMDB_API>>
FAST_REFRESH = false

In this project, TMDB API is used to get necessary data. Here is the list of API endpoints that used in this project.

• Movies
  • Movie details - /movie/{movie_id}
  • Movie credits - /movie/{movie_id}/credits
  • Popular movie list - /movie/popular
  • Top rated movie list - /movie/top_rated
  • Upcoming movie list - /movie/upcoming
• TV
  • TV details - /tv/{tv_id}
  • TV credits - /tv/{tv_id}/credits
  • Popular TV list - /tv/popular
• People
  • People details - /person/{person_id}
  • Popular people list - /person/popular
• Genres
  • Movie genres - /genre/movie/list
  • TV genres - /genre/tv/list

• / - display the home page
• /movie - display all popular movies
• /movie/:id - display a particular movie
• /movie/upcoming - display all upcoming movies
• /movie/top-rated - display all top-ratd movies
• /tv - display all popular TV series
• /tv/:id - display a particular TV series
• /people - display all popular people
• /people/:id - display a particular person
• /account/favourite - display the favorurite movies of the user

Essentially, the main aspect of glassmorphism is a semi-transparent background, with a sublime shadow and border. This is an example image.

Glassmorphism is used in homepage, you can check the code in movieBackdrop file, it's in src/components/movieBackdrop/.

I get some help from CodePen https://codepen.io/ and this is a blog introduces glassmorphism: https://www.freecodecamp.org/news/glassmorphism-how-to-create-a-glass-card-in-figma/

Swiper - the most modern mobile touch slider. This is its website: https://swiperjs.com/.

I used Swiper in homepage and myfavorite page. You can check the code in movieList file, it's in src/components/movieList/.

React Query - Performant and powerful data synchronization for React.

Fetch, cache and update data in your React and React Native applications all without touching any "global state". This is its website: https://react-query-v3.tanstack.com/

The useQueries hook can be used to fetch a variable number of queries. I used it in homepage. Here is the part of codes:

const results = useQueries([
  { queryKey: ['popularMovies1', { page: 1 }], queryFn: getPopularMovies },
  { queryKey: ['topRatedMovies1', { page: 1 }], queryFn: getTopRatedMovies },
  { queryKey: ['upComingMovies1', { page: 1 }], queryFn: getUpcoming },
  { queryKey: ['popularTV1', { page: 1 }], queryFn: getPopularTV },
]);