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.
npm inpm run devnpm run build