All projects

CinemaGuide

Interactive film catalog based on kinopoisk-APIUsers of this app can search for movies and add them to their favorites so they don't forget to watch interesting films.

Project description

The app's main page is a convenient dashboard where users can select a random movie and browse a list of top films by IMDb rating.

On a separate page, users can browse a list of existing film genres, select one, and then go to the page with films related to that genre.

The movie page structure by genre: movie cards filtered by genre; by default, the first 10 films are sorted by rating. Scrolling loads the next 10 films (until the list is exhausted).

Clicking on a movie card takes users to its page. It features a detailed description of the film, a button to view the trailer, and a button to add or remove the film from the favorites list.

Adding a movie to favorites is only available to authorized users. The authorization form is opened by clicking the "Login" button in the site header or by attempting to add a movie to favorites (if the user is not yet authorized). Additionally, after authorization, the user gains access to an account page with personal information and a list of movies they've added to their favorites.

The user can also search for a movie by title by clicking the search field in the navigation section.

Responsive layout (Desktop, Tablet, Mobile).

Preloaders for situations requiring asynchronous actions: authorization, loading the movie list, loading a movie, and more, are designed in the Skeleton style.

Project build

  • Before building and running the project, install dependencies with the command: npm i
  • Running the project locally in Dev mode: npm run dev
  • Building a production project (ready for hosting): npm run build