MS3 Movie collection

Movie collection is a website with movies based on books where people can find movies by books of different genres. That gives the opportunity to compare movie and book story. Movies have a link to watch them or link to buy a book for reading. Users also can share their favourite movies and books.

Live Website: here.

Table of Contents

User Experience 

Features

Database schema

Technologies

Testing

Deployment

Bugs

Credits

UX

This project is created for people who want to watch high quality movies based on books. Usually books inspire on good and deep movies. It’s also interesting for booklovers to look at a book story from a different angle and compare it with movie adaptation.

User Stories

As a user I want to:

• Navigate through the website easily and clearly.
• Have an opportunity to view movies without registering an account.
• Get detailed information about each movie.
• Register and login to the website.
• Edit personal information when logged in.
• Add my own movies to the collection.
• Edit movies added by me.
• Delete movies added by me.
• Have an overview only on movies added by me.
• Filter movies by different categories.
• Search movies by name.

Additionaliy as an admin user I want to:

• Edit any movie in the collection.
• Delete any movie in the collection.
• Add movie categories.
• Delete movie categories.
• Have access to add affiliate links to each movie left by users, and earn money from those links.

Strategy

The goal is to create a good quality list of movies to quickly find a suitable movie or book, to advertise books for people of all ages who like movies and books.

Scope

Features that should be in the project:

• Navbar with menu and logo
• Home page with several recently added movies sorted by time added
• Movies page with movie collection
• Movie category filter
• Search bar where movies can be found by category and by name with freetext
• Separate page for each movie with its details
• Sign In/Sign Up pages
• Add movie page for users who are logged in
• Edit movie page for users who are logged in
• Profile page where logged in user can edit personal information and view movies added by him.
• Admin user role that can add/delete movie categories and edit/delete any movie in the collection.
• Movie categories page that can be accessed only by admin
• Modal information messages for any changes on the website to communicate with a user
• Log out functonality

Structure

All pages have a fixed navbar with main menu, logo and username of a user that is currently logged in.

The website has:

• A Home page with a banner, welcome message and recently added movies for all users
• A Movies page with all movies which can be filtered by category and movie name for all users
• Page with movie information for every movie in the list for all users
• Sign in and sign up pages for all users
• Profile page with user’s information and user’s movies where user can edit them.
• Add and edit movie page for registered users
• Manage categories page for the user Admin
• Edit, delete movie buttons
• Log out button

Skeleton

Mockup of the website was created in "Balsamiq Wireframes".

Surface

The design of website based on material design base colors color style. For readability of the site a simple white background and black text were chosen. Colors for home page and buttons:

• #26c6da cyan lighten-1 - for buttons
• #00acc1 cyan darken-1 - for buttons
• #ffa726 orange lighten-1 - for main menu

Background image on home page is taken from here. To keep the design clean no other colors were used because of a lot of colorfull movie images.

Logo of the website in the navigation menu is created by Darya.

The font-family Tahoma, Verdana, sans-serif is used on the website because it has a narrower body, smaller counters, much tighter letter spacing, and a more complete Unicode character set.

Database

MongoDB was used for this project and schema design was created.

Features

Existing Features

• Each page has a responsive and fixed to the top navigation menu. Menu items become active on currenlty opened pages. There is a logo in the center of navigation bar and a logged in username on the right.
• Home page has:
  • Background image with a website title.
  • Welcome message.
  • Three recently added movies.
• Movies page has:
  • List of all movie cards with images. Cards are clickable and all movie details can be revealed.
  • Search box where movies can be searched by category or title with freetext
  • Filter movies by category.
• Separate page for each movie with full information.
• Pages with sign in and sign up forms.
• All flash messages coming from Flask open in pop up window.
• Confirmation modals before deleting any information or updating user personal information.
• The password field uses Werkzeug to hash the password on entry and confirm password is validated using Javascript.
• On mobile devices navigation bar menu transforms into a hamburger vertical menu.

Signed in users have access to:

• Profile page with user’s information and user’s added movies. There is opportunity to update information and manage movies (edit, delete) on separate movie pages.
• Add movie form with input fields: movie name, category name, year, duration, description, movie link, book link, movie image link.
• Edit movie page to update movie information.
• Log out button

Admin user have access to:

• Manage categories page to add or delete movie categories.
• Manage all movies on the website to edit or delete them.

Features left to implement

• Footer with contact information so it is possible to contact developer
• Forgot password functionality
• Share movies in social networks
• Leave review to the movie
• Rate/Like movie

Technologies

Database

MongoDB

Languages used:

HTML5 - for basic content and structure of the site.
CSS3 - for design.
Javascript - logic for the game.
Python - for writing the scripts to render all the different templates using flask and connecting to mongodb.

Frameworks and libraries used:

MaterializeCSS- for creating the responsive structure of the website, layout and design.
Flask - a python web framework.
PyMongo - python tool for use with Mongo DB.
JQuery - for making the site interactive.
Font Awesome - for using icons.
Google Fonts - for font of the website.
Balsamiq - for creating the wireframe.

Tools and Other Resources used:

Github - for version control and store the code for the project.
Gitpod - for writing the code for the website and push it to Github.
Heroku – for deployment the project.
Werkzeug - for verifying the hashed password and username.
Dbdiagram - tool to draw database relationship diagrams and flow quickly using just keyboard.
Mockup generator - for testing responsive website on various devices.
W3 Schools - for HTML, CSS, JS, Python tips.
Stackoverflow - for finding answers on questions.
Webformatter - for beautifying HTML, CSS, Javascript codes.
Datetime - for manipulating dates and times.
Regular expression- matching operations similar to those found in Perl.

Codes used:

Some of the code was taken from the sources:

• Stackoverflow - for setting a “created_by” field in all movies when changing username, for updating profile page, for styling movie cards and etc.
• Onlinepngtools – for creating transparent logo for the project.
• CodeInstitute course – to custom code for Materialize select validation.
• Blog Teclado - for flashing messages with Flask in modal.
• Blog ImageKit - for loading of images that may not exist.

Testing

Testing of all features was done manually. There is a table with features and actions taken to test them below.

Admin

Testing screenshots

Desktop

Navigation bar

Home

Movies

Movie details

Add movie

Edit movie

Delete movie

Profile

Sign in

Sign up

Manage Categories

Mobile

Navigation bar

Home

Movies

Movie details

Add movie

Edit movie

Delete movie

Profile

Sign in

Sign up

Manage Categories

Validators

The following online validators have been used for checking the code for any errors or warnings:

• W3C HTML Validator;   There are no warnings or errors.

• W3C CSS Validator;   There is 1 error and warnings connected to external libraries (MaterializeCSS, Awesome, hover.css) that I cannot access.

• JShint looks good:  

• Flake8 libary was used to reformat Python and follow PEP8 coding standards. You can run it with a follwing command in the terminal in the root directory of the project:

python -m flake8

Lighthouse testing was made in Chrome browser developer tools. 

• Desktop Lighthouse Report:

• Mobile Lighthouse Report:  

After testing the website with Mobile Lighthouse it was made improvement in CSS style to load CSS asynchronously.

The site was tested across different browsers and screen sized to validate responsiveness and browser compatibility. Browsers:

• Chrome
• Microsoft Edge
• Safari
• Firefox
• Opera.

It was also tested on mobile devices such as

• iPhone Xs
• iPhone 7
• iPhone 11
• Xiaomi Redmi Note 9  

Deployment

For testing purposes you can use my database, here are the configuration variables:

MONGO_DBNAME: myProject3
MONGO_URI: mongodb+srv://DaBel:[email protected]/myProject3?retryWrites=true&w=majority
SECRET_KEY: <generated_key>

You can generate the key here.

Heroku

Steps for deploying the website to Heroku hosting platform:

• Fork this repository to your Github account
• Create an account on Heroku for remote installation.
• Login to Heroku, open Heroku Dashboard and Click New -> Create new app
• Enter appropriate app name and select the region closest to you.
• Open Deploy tab and select Github as Deployment method. Connect your forked repository using the options below.
• Go to the Settings tab, click Reveal Config Vars in Config Vars section.
• Add the following configuration variables:

IP : 0.0.0.0 
PORT : 5000
MONGO_DBNAME: <your_db_name>
SECRET_KEY:  <yout_db_secret_key>
MONGO_URI: <your_db_uri>

• Head back to the Deploy tab in Heroku. Scroll down to Automatic deploys, click on Enable Automatic Deploys and Deploy Branch.
• In Manual deploy section click Deploy Brach.
• Go to Activity tab to keep track when the app will be deoployed.
• After the app is deployed click Open App to open the website.

Gitpod

• Fork this repository to your Github account
• Create an acoount on Gitpod
• Open the forked repository using Gitpod like so: https://gitpod.io#<your_repository_url>
• In Gitpod create env.py file in the root directory with the following content:

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "<yout_db_secret_key>")
os.environ.setdefault("MONGO_URI", "<your_db_uri>")
os.environ.setdefault("MONGO_DBNAME", "<your_db_name>")

• Install project dependencies by running the following command in terminal:

pip install -r requirements.txt

• Start the app by typing following command:

python app.py

• Click Open Browser in pop up message at bottom right corner.

Bugs

During testing the project several bugs were fixed. Clicking on "Edit" button on Movie page the page was opening without logo of the website. To fix it I changed the path to logo image:"../../static/images/logo-icon.png".

Next bug was deleting random movie with a modal because of all delete modals had one id for all movies. It was fixed by adding unique id for each delete modal.

Other bug was on the Profile page with "Update" button. It didn't matter what it was chosen in confirming question, YES or NO, the information was updated in any case. The problem was solved by changing NO option from html tag "button" to "a" and href - on data-target with help of stackoverflow.com.

Next fixed bug was discovered with mentor when user updated any movie information, field "created by" became empty. Proplem was in code in file app.py. We should overwrite field "created_by" in db in app.route edit movie.

Credits

Contents

All content is written by developer Darya Belarusik.

Media

Images for background, movie cards were taken from:

pngtree - private Cinema Advertising Background that provides images for commrecial use.
LitHub - for background image on home page.

Logo of the website in navigation menu is created by Darya.

Acknowledgements

Movies by books – inspiration for list of movies based on books.

Inspiration for this project was received from:

• Other code institute students' projects.
• Help of the mentor, slack and my husband.