My Milestone 3 project for the Code Institute, is a Movie Review site, where registered users can submit a review of their favourite movies.

The project has been deployed to Heroku and can been seen here.

• User Experience (UX)
• User Stories
• Design
• Colour Scheme
• Typography
• Imagery
• Wireframes
• Features
• Technologies Used
• Frameworks Used
• Database Schema
• Testing
• Code Verification
• Lighthouse
• Speed Test
• Cross-Browser
• Responsive Testing
• Testing User Stories
• Further Testing
• Features Left To Implement
• Bugs
• Deployment
• Heroku
• Forking the GitHub Repository
• Making a Local Clone
• Credits
• Code
• Content
• Media
• Acknowledgements

• User Stories
• First Time Visitor Goals
1. As a First Time Visitor, I want to see which movies people rate highly.
2. As a First Time Visitor, I want to read reviews about movies I have not seen.
3. As a First Time Visitor, I want to create an account and submit my own review.
• Returning Visitor Goals
1. As a Returning Visitor, I want to see if others have reviewed the same movie.
2. As a Returning Visitor, I want to see which movies people are rating the highest.
• Design
• Colour Scheme
• I tried the theme the site like Netflix. The background image and carousel helped me achieve this.
• Typography
• The Poppins font is the main font used throughout this project with Sans-Serif as the fallback in case for any reason the font isn't being imported into the site correctly.
• Imagery
• Most of the images used in this site are input by a registered user. Upon creating a review, the user is asked to input the URL to their chosen image. Once the review has been submitted, the image will appear in the Home page carousel.
• Wireframes
• Project Wireframe - View
• Target Audience
• Users of all ages.
• Movie fans.
• Movie critics.

• Responsive on all device sizes.
• Interactivity for users.
• Carousel on loop.
• Users can create an account and leave their own movie review.
• Users can edit or delete their own reviews.
• Ability to read reviews left by other registered users.
• Ability to edit Profile page details.

• HTML5
• CSS3
• JavaScript
• Python

1. Bootstrap 4
• Bootstrap was used to assist with the responsiveness and styling of the website.
2. Flask
• Backend Python micro-framework.
3. MongoDB
• NoSQL database that is used to store data.
4. Google Fonts
• Google Fonts was used to import the 'Poppins' font into my project.
5. Font Awesome
• Font Awesome was used for the star rating widget.
6. jQuery
• jQuery is a dependency of the Bootstrap framework and helps with responsive design.
7. Owl-Carousel
• Used to create a touch enabled, responsive carousel slider.
8. VS Code
• The Code Editor used for this project.
9. Git
• Git was used for version control.
10. GitHub
• GitHub is used to store the projects code after being pushed from Git.
11. GitHub Desktop
• Used to commit and push changes to GitHub.
12. Balsamiq
• Balsamiq was used to create the wireframes during the design process.
13. Chrome DevTools
• Essential tools for debugging code.

The database consists of two collections ('users' and 'reviews') with a GridFS bucket (fs.chunks and fs.files).

A visual representation of the database can be seen below.

The W3C HTML Validator, W3C CSS Validator, JSHint and ExtendsClass services were used to validate code to ensure there were no syntax errors in the project.

• W3C HTML Validator - Results
• W3C CSS Validator - Results
• JSHint - Results
• Python Validator - Results

Performance of the site was analysed by Lighthouse. Here are the results.

Site speed test was performed by GTMetrix. Here are the results.

This project was tested with all major browsers and displayed as expected. Results can be seen here.

• Google Chrome
• Firefox
• Safari
• Opera
• Microsoft Edge
• Tor
• IE11

Responsive testing was carried out with Chrome Dev Tools. The results for some popular devices can be seen below.

• Galaxy Fold(280px)
• iPhone SE(320px)
• iPhone X(375px)
• Pixel 2 XL(411px)
• Surface Duo(540px)
• iPad(768px)
• iPad Pro(1024px)

• First Time Visitor Goals
1. As a First Time Visitor, I want to see which movies people rate highly.
1. Upon entering the site, users are presented with a carousel which loops through recently added reviews left by registered users. Also, once logged in, you can check out the Reviews page, which will list all the reviews left on the site.
2. As a First Time Visitor, I want to read reviews about movies I have not seen.
1. The carousel will loop through all reviews left by registered users. Individual reviews can be read, whether the user is registered or not, by clicking the Read Review button.
2. Once a user is registered, they can view the Reviews page which will display all reviews on a single page.
• Returning Visitor Goals
1. As a Returning Visitor, I want to see if others have reviewed the same movie.
1. Once logged in, the user can check whether anyone else has registered a review on the same movie as them on the Review page.
2. As a Returning Visitor, I want to see which movies people are rating the highest.
1. As part of the carousel, the reviewed score is shown also. The carousel is on a loop so each review left on the site will be shown along with the rating given.
2. Each review will display the reviewers rating. The user can check these out on the Review page.

• The application was personally tested on a variety of devices such as Desktop, Laptop, Surface Pro 6, iPad Air 2 & iPhone X.
• All testing was undertaken offline using VS Code in a Python Virtual Environment (venv).
• Family members and friends were asked to navigate the application and leave a review. Everyone who tested, confirmed the site was simple to navigate and to leave a review.

• I would love to implement the TMDB API so that users can search via the API for their movie review. This would pull the movie posters into the application too.

When building the carousel, I had an <a> as parent to multiple <div>, which worked fine, but failed validation. I did this so that the movie poster and title would be linked to the review. I removed it and stuck with the Read Review button.

To deploy this project to Heroku, the following steps were taken...

1. From the VS Code terminal, I created a requirements.txt and Procfile using the following commands:



pip3 freeze --local > requirements.txt

echo web: python run.py > Procfile

2. I then committed these files to GitHub.
3. Next, I logged into my Heroku account and created a new app named "movie-review-ms3".
4. I then located the Deploy tab and selected GitHub as the Deployment Method.
5. Once I authenticated my GitHub account, I selected my repository.
6. Then, I went to Settings and clicked the Reveal Config Vars button.
7. I then entered the following information...

Key	Value
IP	0.0.0.0
PORT	5000
SECRET_KEY	<app_secret_key>
MONGO_URI	mongodb+srv://USERNAME:[email protected]/movie?retryWrites=true&w=majority&ssl=true&ssl_cert_reqs=CERT_NONE
MONGO_DBNAME	movie

8. Next, I went back to the Deploy tab and selected Enable Automatic Deploys.
9. I then ensured the "main" branch was selected under Manual Deploy, and clicked the Deploy Branch button.
10. Shortly after, I recieved a message informing me that my site had been deployed sucessfully.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository.
2. At the top of the Repository, just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository.
2. Under the repository name, click "Clone or download"
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.



$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.



$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY    
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

• Bootstrap 4: Bootstrap Library used throughout the project to make site responsive.
• Owl-Carousel for the touch enabled, responsive carousel.

• All content was written by the developer.

• The Logo was downloaded from https://imgbin.com/
• The background image was downloaded from Neflix - Microsoft Store.

• My work colleagues at SG World, for their insightful feedback/pointers and also for my paid subscription to Pluralsight.
• Code Institute, Pluralsight, Udemy and YouTube for their extremely good course materials.
• The wonderfully helpful Code Institute Slack community.