Cinema Movie website using React and Styled-Components

by React

Cinema Movie

Go to website – Link

Project Description

  • Cafe Milk, a cafe.

Features

Features that I would like to introduce.

Feature Description
Resposive This website works with any window sizes. It is divided into mobile size, tablet size, and desktop size.
Filters Users can find movies by genre. If you change the genre in the filter, a new API is requested.
Recommended Movie It recommends a movie randomly from the filtered movie list.
Selected Item When a user clicks on a movie, information about the movie is displayed.
Movie by imgs Lists fetched movies as movie posts.
Movie by lists Lists fetched movies as movie texts.
Search Query Search for movie titles in Input. When requesting the api, we use useDebounce to prevent loading a lot of data.
Dark Mode Dark mode added. Since this website was originally designed to be dark, it doesn’t make much of a difference, but it’s included as a feature.
See Movies More Request more related movie lists from the server. It is recommended to load 20 movie data in one request because loading a lot of data at once will overload the speed.

Technology Used

Installation

  1. Clone the repo
git clone https://github.com/SunilPark1129/re-cinema-movie.git
  1. Install all dependencies
npm install

Dependencies I have installed :axios react-router-dom styled components font awesome

  1. run the website
npm start

Self-improvement

In the past, while creating a website, I took note of the parts that could be improved or that were difficult at the time to develop the website. So I updated the old website with reference to this note for self-development. My Old Site – Link

  • I need to improve the naming of files and folders so that other developers can see and understand their meaning at once.
    • Elements are written with related names to indicate what they mean. I’ve been studying a lot, but I think I still need to study more.
  • I need to learn more about which folder to put the files in.
    • Compared to the past, I’m much better at organizing folders, but I need to study more.
  • I need to make more reusable React Hooks and UI components of repetitive coding.
    • Repetitive coding is reused through components to optimize repeated coding.
  • In order to improve website speed, I should become more proficient in the usage of useState, useEffect, and rendering.
    • In the previous version, 60 movie lists were loaded at a time, which overloaded the performance of both the client and server side. So, I reduced the request limit to 20. In addition, I optimized the performance by using useState and useEffect in each component.

Project Status

Completed

GitHub

View Github