After loading the app, the list displays a maximum of 5 movie cards. To view the remaining movies, tap the "Show more" button. Tapping this button displays the next 5 movies, or the remaining movies if there are fewer than 5. Once all movie cards have been displayed, the "Show more" button disappears.
On the main screen, two movie cards are displayed in the "Top rated movies" and "Most commented" sections. The "Top rated movies" section displays the highest-rated movies, while the "Most commented" section displays the most-commented movies. If all movies have the same rating or the same number of comments, two random movies are selected.
Movie cards are available in two versions: standard (on the main screen, in the "Top rated movies" and "Most commented" blocks) and extended (a pop-up with a description of the movie).
Movie cards are available in two versions: standard (on the main screen, in the "Top rated movies" and "Most commented" blocks) and extended (a pop-up with a movie description). To add a new comment, the user enters the comment text and selects an emotion (one of the following: smile, sleeping, puke, or angry). The author's name is randomly generated on the server and is not transmitted from the client. User-entered data is screened. Submitting the form is done by pressing Ctrl/Command + Enter. The user can delete any comment by clicking the "Delete" button in the comment block.
External libraries: 'Chart.JS' - for displaying statistics. 'Moment' - for date formatting. 'He' - for secure user input (protection from malicious code).
The project used: MVC, Observer, Adapter patterns.
The project is configured to build JavaScript modules using Webpack.
The finished project is created in the - "dist" folder.
npm inpm run buildnpm start