Open Trailer

An open database for movie trailers.

UX
Features
- Existing Features
- Features Left to Implement
Technologies Used
Testing

Deployment
- How to run this project locally
- Heroku Deployment
Credits
Disclaimer

UX

User Goals

The main target audience for Open Trailer are English speaking people with a passion for movies.

User goals are:

Find new movies to watch.
Create new trailers of my favorite movies.
Update trailers already present in the database by adding a quote or choosing a higher quality video.
Eliminate incorrect or offensive content.
Intuitively understand how to use the site.
Use the site from my smartphone as well as my tablet and my laptop.

Open Trailer meets these needs by:

Allowing the user to easily browse the database, by searching for a movie title or simply scrolling down the page.
Being easy to use, as the operations of creating, modifying, and eliminating are all handled in a very similar way so that the user has to learn how to do it only once.
Having a clear and elegant user interface that allows a smooth navigation flow.
Being fully responsive.

Developer Goals

Improve the ability to create responsive design websites through the mobile-first approach.
Improve the ability to make a website interactive using JavaScript and jQuery.
Learn how to create and handle NoSQL databases.
Learn how to connect a database to websites using Python and Flask.
Add a functional and visually attractive website to the developer portfolio.

User Stories

As a visitor to Open Trailer, I want to:

Look for the site when I'm undecided about which movie to watch tonight.
By browsing the site, rediscover a movie that I had forgotten.
Share a movie that I consider underrated with people with my same passion.
Share a movie quote that inspired me.
Returning to the site to find new content uploaded by other users.

Design Choices

Fonts

All fonts are from Google Fonts.

Roboto: Site main font, it was chosen for its clear and straight design.
Piedra: Used to create the logo, it was chosen for its uniqueness.

Icons

All icons are from Feather Icons.

CRUD Operations: Icons are used to manage database operations, with easily recognizable images often used on sites of this type. For example the magnifying glass for "search" and the trash can for "delete".
Navigations Buttons: Icons have also been added to navigation buttons as visual clues to facilitate site navigation.

Colors

Since the site is a collection of trailers, it mainly uses dull colors in order to emphasize the trailer previews.

Off-Black (#2B2D2F): Used as background color for the trailer cards.
Off-White (#f5f5f5): Used as main text color.
LIght gray (#999): Used for input placeholders and icons.
Bright Orange (#D35400): The only bright color, is used to highlight key elements such as the logo and the buttons when the user hovers them with the mouse.

Wireframes

The wireframes were created using Figma and can be found here.

Features

Existing Features

Navbar

Website Logo: If clicked, it takes the user back to the home page.
Search Bar: Allows the user to search the database using movie titles as search keys.
Add-trailer Button: Manage the "Create" operation by loading the appropriate modal, The button text disappears if the user accesses the site from a smartphone in order to leave more space for the search bar.

Site Description

Introduction: Briefly explain how the site works, the introduction text is slightly longer if the user accesses the site from a laptop or desktop in order to take advantage of the larger screen space.
How-to-url.gif: For the less tech-savvy users, the most complex part of creating a trailer is to copy and paste the Youtube URL. This gif shows how to do it in a few simple steps.

Trailer Cards

The content of the database is shown to the user through a list of cards contained in a bootstrap grid, each card has the following content:

Movie Title: In bold, in the card header.
Card Buttons: Manage the "Update" and "Delete" operations by loading the respective modals.
Youtube Video: Are responsive and automatically adapt to the screen size.
Movie Quote: In italics, in the card footer

Add/Edit-Trailer Modal

The "Create" and "Update" operations are managed by the same modal whose attributes are modified by JS functions each time the user clicks on the appropriate button. This has 2 advantages:

Fast updating: Adding or modifying a feature to the modals is a one-time operation, saving time and reducing the risk of making mistakes.
Consistency: Since the two modals are almost identical, the user only needs to learn once to manage both operations (Create and Update).

The input fields present in the modal are the following:

Movie Title: All the words of the inserted text are capitalized by the string.capwords() python method, returning an appropriate format for a movie title. This field can contain a maximum of 85 characters, and a message warns the user if the maximum number of characters has been reached.
Youtube URL: The text entered in this field is validated to check that it has the structure of a youtube URL (non-Youtube URL are rejected). It's also automatically converted into its "embedded" version by a custom python function in order to be ready to be played on the trailer card.
Movie Quote: The only field that can be left empty. It can contain a maximum of 170 characters, as for the title field, a message warns the user if the maximum number of characters has been reached.

Delete-Trailer Modal

This modal is intended to prevent accidental deletion of trailers by asking the user for confirmation before proceeding.

Navigation Buttons

Load-more-trailer Button: Only 12 trailers are loaded when the user lands on the page, each time the user clicks on this button another 12 are loaded. This solution was preferred to pagination to make interaction with the site easier and make the interface cleaner.
Return-to-top Button: Appears as soon as the user starts to scroll down. Clicking this button return the user at the the top of the page. This feature has been added to quickly access the navbar, which is not fixed at the top of the page and consequently is hidden when the user scrolls down.

404 Page

Customized 404 Message: The '0' in 404 is replaced with a film reel image, in keeping with the rest of the site.
Return-to-home Button: The only interactive element of this page.

Features Left to Implement

Multiplatform Support

At present it is only possible to upload videos from Youtube, the next step is to add support to the other 2 major video hosting platforms: Vimeo and Dailymotion.

Category Search

Give the user the ability to add the movie genre to the trailer files in order to make the search by category possible.

Technologies Used

Languages

Libraries

JQuery to simplify DOM manipulation.
Jinja to transfer data from the back-end to the front-end of the project.
PyMongo to allow Python to communicate with MongoDB.
Google Fonts to import the fonts used on the website.
Feather Icons to import the icons used on the website.

Frameworks

Flask to construct and render pages.
Bootstrap to create the responsive design, in particular the grid and the modals.

Services

GitPod was the main IDE in which the project was developed.
Git for version control during the development process.
GitHub to host the project in a remote repository.
Heroku to deploy the project.
MongoDB Atlas hosts the database used in this project.
Chrome DevTools to test responsiveness and quickly debug code.
HTML Validator to test the HTML code.
CSS Validator to test the CSS code.
JSHint to test the JavaScript code.
Python syntax checker to test the Python code.
Autoprefixer to add prefixes in the CSS for cross-browser support.
Figma for wireframing.
Favicon to create the favicon.
BrowserStack to test multiple devices and browsers.
Am I Responsive? to take the screenshot placed at the beginning of this document.

Software

Paint.net to create the 404 Image.
Gif Screen Recorder to create the how-to-url.gif.
Visual Studio Code for testing snippet of JS code.
Spyder for testing snippet of Python code.

Testing

Tested Devices

The website has been successfully tested with the following devices:

| -----------|---------------------------- |------------------------------|  
| Type       | Device                      | Browsers                     |  
| -----------|---------------------------- |------------------------------|  
| Laptop     | Asus FX753VD                | Chrome, Firefox, Edge, Opera |  
| Smartphone | Lenovo Moto G5S Plus        | Chrome, Firefox              |  
| Laptop     | Thinkpad E450               | Firefox                      |  
| Smartphone | Samsung Galaxy A50          | Firefox Focus                |  
| Laptop     | Acer Aspire E15             | Chrome                       |  
| Smartphone | Asus ZenFone 4 Max          | Chrome                       |  
| -----------|---------------------------- |------------------------------|

Simulated Devices

BrowserStack: was used to test the website on the following simulated devices:

| -----------|---------------------------- |----------|  
| Type       | Device                      | Browsers |       
| -----------|---------------------------- |----------|  
| Smartphone | Galaxy Note 9               | Chrome   |  
| Tablet     | Galaxy Tab S6               | Chrome   |  
| Smartphone | iPhone 11                   | Safari   |  
| Tablet     | iPad Pro 11                 | Safari   |  
| Tablet     | iPad Air 2                  | Safari   |  
| -----------|---------------------------- |----------|

Manual Testing

Navbar

Hover on each button, confirm the hover effect works as expected.
Click the site logo, confirm it takes the user to the home page.
Click the Add-Trailer button, confirm it show the Add-Trailer modal.

1.1 Search Bar

Type one or more words and press enter, confirm that the search results are consistent with the input entered.
Type one or more words and click the Magnifying glass button, confirm that the search results are consistent with the input entered.
Repeat the previous steps with different character combinations.

Site Description

Hover the Youtube URL, confirm the hover effect works as expected.
Click the Youtube URL, confirm it open the gif image in a new tab.

3. Trailer Cards

Hover on each button, confirm the hover effect works as expected.
Confirm that the trailer cards are arranged in columns of 1 to 3, depending on the size of the window.
Confirm that the trailer cards are displayed in order from newest to oldest.
Confirm that none of the 3 elements of the card (title, video and quote) overflow from it.
Click the Edit-Trailer button, confirm it shows the Edit-Trailer modal.
Click the Delete-Trailer button, confirm it shows the Delete-Trailer modal.

Add-Trailer Modal

Hover on each button, confirm the hover effect works as expected.
Confirm that the background of the site does not resize by opening and closing the modal.
Confirm that the modal header show "Add a new Trailer"
Confirm that the inputs are empty and show the appropriate placeholders.
Repeat the previous 2 steps after editing a trailer.
Type one or more words in the Movie Title input field, confirm that the first letter of each word is capitalized.
Try to type more than 85 characters in the Movie Title input field, confirm that a message is displayed warning that the maximum number of characters has been reached.
Enter a valid Youtube URL in the Youtube URL field, save the trailer and reopen it with the Edit-Trailer Modal, confirm that the URL has been converted to embedded.
Enter an invalid Youtube URL in the Youtube URL field and click the Save button, confirm that it is rejected.
Try to type more than 170 characters in the Movie Quote input field, confirm that a message is displayed warning that the maximum number of characters has been reached.
Click the Save button without filling in the Movie Title or the Youtube URL fields, confirm that those fields cannot be left empty.
Click the Save button with all mandatory fields filled in, confirm that a new trailer is being created.

Edit-Trailer Modal

Hover on each button, confirm the hover effect works as expected.
Confirm that the background of the site does not resize by opening and closing the modal.
Confirm that the modal header show "Modify "
Confirm that the inputs are empty and show the appropriate texts.
Repeat the previous 2 steps after creating a new trailer.
Add one or more words in the Movie Title input field, confirm that the first letter of each word is capitalized.
Try to type more than 85 characters in the Movie Title input field, confirm that a message is displayed warning that the maximum number of characters has been reached.
Replace the URL in the Youtube URL field with another valid Youtube URL, save the trailer and reopen the modal, confirm that the new URL has been converted to embedded.
Replace the URL in the Youtube URL field with an invalid Youtube URL and click the Save button, confirm that it is rejected.
Try to type more than 170 characters in the Movie Quote input field, confirm that a message is displayed warning that the maximum number of characters has been reached.
Click the Save button without filling in the Movie Title or the Youtube URL fields, confirm that those fields cannot be left empty.
Click the Save button with all mandatory fields filled in, confirm that the changes made are saved.

Delete-Trailer Modal

Hover on each button, confirm the hover effect works as expected.
Confirm that the background of the site does not resize by opening and closing the modal.
Click the Delete Button, confirm that the trailer is actually deleted.

Return-to-top Button

Confirm that the to-top button is not visible when the user is at the top of the page.
Confirm that the button appears when the user scrolls down the page.
Confirm that as the user scrolls the button remains in the same place on the screen.
Click the button, confirm the user is taken smoothly back up to the top of the page.
Confirm that when back up at the top of the page, the button disappears.

Load-more Button

Click the button, confirm that 12 (or less) trailers are loaded.
Confirm that the Load-more Button is not visible when all trailers have been loaded.

404 Page

Enter a deliberately incorrect URL in the address bar, confirm it takes the user to page 404.
Verify that message 404 and the Return Home button are displayed correctly.
Hover on the Return Home button, confirm the hover effect works as expected.
Click the Return Home button, confirm it takes the user to the home page.

Validation Services

The following validation services were used to check the validity of the website code.

HTML Validator was used to test the HTML code.
CSS Validator was used to test the CSS code.
JSHint was used to test the JavaScript code.
Python syntax checker was used to test the Python code.

Bugs Discovered

Problem with Ad blocker

If an Ad blocker is active on the browser, the console throws multiple errors and the site loading is slower.

Problem with unusual Youtube URLs (fixed)

Deployment

How to run this project locally

In case you want to pull the code from my Github repository:

Log in to Github,
Follow this link to the project repository.
In the repository page, click Clone or download ▼.
To clone the repository using HTTPS, under "Clone with HTTPS", click the clipboard icon. To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click Use SSH, then click the clipboard icon.
Open Git Bash.
Change the current working directory to the location where you want the cloned directory to be made.
Type git clone, and then paste the URL you copied in Step 3.
Install all required modules with the command:

pip -r requirements.txt.

Create your own database on MongoDB Atlas or MongoDB running locally on your machine. Call the database "openTrailers", with a collection called "trailers". I also suggest creating a few documents for testing purposes.
Now you need the MONGO_URI to connect the repository to the database, to find the it on Atlas click on "Cluster" -> "Connect" -> "Connect your application"; Here chose the lastest version of Python, you will get a string like the following:

mongodb+srv://my_username:<password>@my_cluster-1hvju.mongodb.net/<dbname>?retryWrites=true&w=majority

Replace with your Atlas password and with "openTrailer".

Create a file called env.py.
Inside the env.py file import os, create a "conection_string" variable and assign it to the MONGO_URI. The final content of your env.py should look like this:

import os

os.environ["connection_string"] = "mongodb+srv://my_username:<password>@my_cluster-1hvju.mongodb.net/<dbname>?retryWrites=true&w=majority"

You can now run the application with the command:

python app.py

You can visit the website at http://127.0.0.1:5000

Heroku Deployment

To deploy the project on heroku, take the following steps:

If not already present, create a requirements.txt file using the command:

pip freeze > requirements.txt

If not already present, create a Procfile with the command:

echo web: python app.py > Procfile

Push the the project to GitHub.
Create a new app on the Heroku website by clicking the "New" button in your dashboard. Give it a name and set the region to the one closest to you, then click the "Create app" button.
From the heroku dashboard of your newly created application, click on "Settings" -> "Reveal Config Vars" and set the following config variabless:

|---------------------------------|
| Key               | Value       |
|------------------ |-------------|
| connection_string | <MONGO_URI> |
| DEBUG             | FALSE       |
| IP                | 0.0.0.0     |
| PORT              | 5000        |
|---------------------------------|

To get the MONGO_URI read the step 10 of the previous section.

Click on "Deploy" -> "Deployment method" and select GitHub. Select the correct repository and click "Connect".
In the "Manual Deployment" section of this page, make sure the master branch is selected and then click "Deploy Branch".
The site is now successfully deployed, click the "Open app" button to visit it.

Credits

Code

To make Youtube videos responsive is from Css-Trick.
To create the Return-to-top Button is from W3Schools.
To create the Load-more Button is from StackOverflow.

Media

The small background image was downloaded from this article.
The large background image was downloaded from this article.
The 404 image was created by the author starting from this icon.

Acknowledgments

I received assistance, feedback and encouragement from my mentor Seun Owonikoko.
I received help and suggestions from Code Institute tutors.
The project code has been reviewed by the Code Institute Slack community.
This project takes inspiration from IMDb.

Disclaimer

The content of this website is provided for educational purposes only.

code-institute-submissions / third-milestone-project-4 Goto Github PK

third-milestone-project-4's Introduction

Table of Contents

UX