All projects

Cinemaddict

A service for movie buffs. Detailed information about the hottest new releases, the ability to choose and create your own viewing list, film discussions, and much more.Users can browse the list of movies, sort by rating and comments. Select and create their own watchlist. View detailed information about a movie and comment. The statistics page displays genre ratings and the user's rating for the most popular genre.

Project description

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.

Project build

The finished project is created in the - "dist" folder.

  • Before building and running the project, install dependencies with the command: npm i
  • Build production (ready for hosting): npm run build
  • Run the project locally in Dev mode: npm start