Menu Close

Cinema Movie website using React and Styled-Components

Cinema Movie website using React and Styled-Components

Cinema Movie

cinema movie

Go to website – Link

Project Description

  • Cafe Milk, a cafe.


Features that I would like to introduce.

Feature Description

This website works with any window sizes. It is divided into mobile size, tablet size, and desktop size.


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

HTML5 CSS3 JavaScript Styled Components React React Router


  1. Clone the repo
git clone
  1. Install all dependencies
npm install

Dependencies I have installed :
styled components
font awesome

  1. run the website
npm start


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


View Source Code
Posted in HTML, React