"Montage" is a movie-sharing platform established to provide information about movies and help people find their interested movies. Users could search, view, like, rate, comment on, and receive recommendations about movies.
CPSC 455
Team Members:
Andy Huang, q9h2b
Aure Ma, q1c3b
Ziyue Hu, x5g3b
Hongtao Zhu, e0g3b
GitHub Repository:
https://github.com/MonsieurRadiant/Montage/tree/main
Projection Description:
The project “Montage” is a website made for general movie audiences. It is a website that stores titles, posters, descriptions, ratings, other information such as genres of different movies and preferences of different users. In this website, users could rate, review, and search movies based on categories. The website also provides functionalities such as notification of upcoming movies. Information about movies would be uploaded(added) and edited by the manager of the website. Users would then be able to interact with this data by providing their rating and reviews of different movies.
If time is enough, additional functionalities such as unique recommendation of movies based upon user preferences would be added.
Project Task Requirements:
Minimal Requirements:
-Users can view the titles, posters, and descriptions of different movies.:white_check_mark:
-Users can post reviews to a movie.:white_check_mark:
-Users can rate a movie.:white_check_mark:
-Users can search movies based on a movie title.:white_check_mark:
Standard Requirement:
-Users can sign up and log in with username and password.:white_check_mark:
-Users can set up their personal preferences.:white_check_mark:
-Users can search movies based on the general information of the movie, such as categories and rating.:white_check_mark:
-The manager of the website can upload new movies.:white_check_mark:
-The manager of the website can edit information of movies.:white_check_mark:
Stretch Requirement:
-Users can get notification of the upcoming movies they selected.:x:
-Users can get recommendation of movies based upon their personal preferences stored in the website.:white_check_mark:
Division of minimal requirements:
-Users can view the titles, posters, and descriptions of different movies.
1. Titles, posters and descriptions are stored and can be read from database.
2. User interface is built to display this information.
3. Data can be loaded onto the website from database.
-Users can post reviews to a movie.
1. The database of reviews for different movies is established.
2. Users can write reviews with a user interface.
3. The reviews can be sent to the server and stored in database.
4. Reviews in the database can be fetched onto the website.
Technologies from unit 1-5:
Unit 1 – HTML, CSS, JS:
Both the client and server ends are mainly written with JavaScript and all components are written in JSX which is basically HTML in react app. Using JSX rather than HTML helps separate our functionalities into different components in separated files and since JSX will convert everything into a string before rendering, this prevents injection attacks such as XXS attacks. All of our components are then arranged and decorated with separated CSS files.
Unit 2 – React & Redux:
Our client end app is a react app made up of functional components written in JSX. We use hooks and states to control our components and functionalities. Upon this, almost all of our states are managed in redux reducer stores and are modified by calling actions. By doing so, we make sure that all our data are immutable and achieved unidirectional data flows.
Unit 3 – Node & Express:
Our server end is built with Express and all requests are achieved and managed with NodeJS. We use REST-based HTTP methods (such as GET, PUT, POST, DELETE, and PATCH) to send requests and asynchronously achieve operations in the server (most operations are manipulation of data in the database).
Unit 4 – NoSQL with MongoDB:
All our data, such as the information of movies, and information of users are stored in accordance with its specific model in MongoDB. We fetch and manipulate these data in our server with asynchronous NoSQL queries. By doing so, we provide high data availability and fault tolerance and greater flexibility of our data.
Unit 5 – Release Engineering:
The structure of our repository is monorepo which makes two ends (client and server) easier to interact with each other and avoid diamond dependencies. In the branch we deploy our app, we use GitHub actions to automatically test whether our app can be built before deployment (Continuous Integration) and automatically deploy it to Heroku if it is deployable (Continuous Deployment). By doing so, we make sure that we have a branch of a stable and deployable version of our app and all changes to it can be automatically presented to the user.
Above and Beyond:
We believe our search and recommendation functionality goes beyond the requirement of this course. Our search functionality uses regex (regular expression) to provide complex search functionalities that allow users to search based on a movie's title, rate, genre and year. Our recommendation functionality could recommend users movies they more likely would be interested in through an algorithm based on the genres of users' favourite movies. Moreover, our recommendation functionality would not recommend movies that have been recommended in the past 7 days or are in users' favourite movie list.
Further Improvement:
The further improvement of this application aims to finish the incomplete stretch requirement to allow users to get notifications of the upcoming movies they selected. We also plan to further improve the user interface so it is more user-friendly and add more functionalities such as allowing users to provide descriptions for different movies to encourage more user-generated content on the website.
Contributions:
Andy Huang: Andy achieved Login and Signup functionalities for both the front and back end. He also engaged in constructing the navbar component and hamburger menu, and contributed a lot to the decoration of the user interface.
Aure Ma: Aure helped take the user information from the back end and store it in the front end reducer. She also helped in constructing the user profile page.
Edward Hu: Edward achieved comment and rate functionalities for both the front and back end and constructed the persist store for user information. He constructed the search functionality in the back end and helped improve the recommendation algorithm. He also provided a lot of help in the construction of many components such as uploading and debugging a lot of them.
Ronnie Zhu: Ronnie achieved view, recommend, upload, edit movies, and set up user personal preferences for both the front and back end. He also constructed the front end of search functionality and navbar, and engaged in a lot of user interface construction and debugging. He is the main uploader of the different movies on the website.
Sketched Prototypes:
User Login:
Recommendation:
Movie Information, rating, and review:
