---

Cinema Critic

Cinema Critic is my first personal project. This Single-page application boasts a front-end constructed exclusively with Vanilla JS, HTML, and CSS. Originally, the back-end was based on a service solution from back4app, which utilizes MongoDB as its database. I have since transitioned the back-end to Python/Django with PostgreSQL as the database. You can find the backend repository here.

Description

Cinema Critic offers you detailed information about any movie or series you are interested in. Explore the cast and crew, discover the runtime, read captivating descriptions, and more. Above all, don't forget to create an account and share your thoughts and opinions by leaving reviews for your favorite movies and series. Rate the films, write detailed critiques, and engage in discussions with fellow movie enthusiasts.

Visit Cinema Critic here and be sure to register and leave a review for your favorite movie or series.

---

Main Features

• User authentication system with dynamic username/email/password validation during registration and relevant error messages.

         

• Fully customizable profile page for a personalized user experience.

                 

• Efficient filtration system that allows easy discovery of movies or series based on user preferences.

         

• Movie details page, including all the information about certain movie/series, its trailer and all the reviews given by users.

             

  After new review was submitted, the movie rating dynamically changed from 7.33 to 8.00

  

• Search bar with movie/series suggestions that appear as you type more than one letter.

  

• Popular page, ranking the most visited movies/series.

  

• 'Add to watchlist' button for bookmarking selected movies/series, adding them to the user's "Watchlist," which can be accessed from the user page.

  Non-bookmarked movie button looks like this

  

  After we bookmark it, it looks like this

  

  Each user can access his watchlist in his profile, it looks like this

  

• 'Add review' functionality that enables users to review movies/series, providing a score from 1 to 10 and an optional comment, which we saw earlier. Each user can find their reviews in the "My Reviews" section on the user page, similarly to user's Watchlist.

  

• Ranking system where each movie/series has its own score, based on the arithmetic mean of all user reviews. The scoring system is dynamic, instantly updating the movie/series rating upon creating, editing, or deleting a review.

     

• Pop-up notifications for successful creation, editing, or deletion of a review.

         

• Custom admin panel/monitoring system for efficient management and Administrator/Moderator roles, with additional permissions.

  Administrators and Moderators are allowed to Create Movies and Series

  Now lets hop in the administrator account and check some of the perks to it.

  

  Movie creation form

  

  Newly created movie, which was just created. As you can see there are edit/delte buttons beneath it, they are only visible to Moderators and Administrators.

  

  Administrators are able to edit another users' data, there are 2 ways to do that, one is by accessing their profile, and the other is by doing it via the admin pannel, which we are going to check later.

  

  For the sake of the showcase, we are going to edit the first and the last name of a user.

  

  Here's the same user with updated first name and last name.

  

  Now lets look at the admin pannel.

     

• Fully responsive design for a seamless user experience across all devices.

                         

---

Technology Stack

The main client application is built using Vanilla JS, utilizing limited external libraries for routing, templating, bundling. This approach allowed us to practice and apply core JavaScript concepts effectively.

• Templating engine

  I used lit-html as the templating engine due to its lightweight, simplicity, and speed. Having prior experience with the library made it a comfortable choice.

• Routing

  For client-side routing in the Single Page Application, I selected a simple and straightforward router that fulfilled the requirement.

• Bundler

  Webpack served as the primary bundler, although I utilized it at a basic level, employing "npx webpack" for the job.

• Deployment

  To deploy the client, I leveraged Firebase for its user-friendly interface and ease of use.