Watch It

Contents

• Introduction
• UX
• Technologies
• Features
• Deployment
• Credits
• Acknowledgements

Introduction

Portfolio Project 4: Full Stack Frameworks - Code Institue - Deadline 28th January 2022

This is my sumission for CodeInstitue's Project Portfolio Four.
It uses various technologies such as Python, HTML, CSS, Javascript aswell as Django and ElephantSQL which was recently changed as Heroku had changed their terms.
I created this site as I was interested in movies as well as finding new ones to watch as sometimes browsing through the main providers take too long and have no ability to see if people have liked the movie or not.

Demo

A live of the website can be found HERE

UX

As many now rely on the internet to browse and access services, UX has become increasingly important than before.

Strategy

Aims

1. To allow the opportunity for users to create a post of a movie the completely recommend to others
2. To allow un-logged in users to browse through posts and find a movie they may potentially watch
3. To allow users logged in to like posts and visualise the amount of likes on a particular movie
4. To allow users both logged in and out to create a comment on a post to mention why they particually liked the movie
5. To allow users to create a profile to enable them to post a movie
6. To allow users to create a profile page with social links and bio to make it more personable

Target Audience(s)

1. Users who are interested in watching movies
2. Users who like to read and would like to review a synopsis of a movie prior to watching

User Stories

1. As a user I can view the movies recently added whilst not needing to log in
2. As a user I can view each movie more in depth by clicking on it as I may want to read the synopsis prior to committing to watch the movie
3. As a user I can create a profile to be able to post movies I personally like for others to enjoy
4. As a user I can create a profile page and include my social media links
5. As a user I can comment on a post in order to tell other users if I like a movie or not
6. As a user I can like a movie in order to let other users know that a particular movie was liked
7. As a user I can delete my own posts in case I change my mind about a specific movie
8. As a user I can edit my own posts in case I change my mind about a specific movie or perhaps have left out detail or want to upload a new movie poster
9. As a user I can create an account
10. As a user I can edit the settings on my account in case I need a password reset

Scope

It is sometimes more beneficial to develop a website based on the MMP (Minimum Marketable Product). Although unfortuantely as this project requires more advanced concepts aswell as possible time constrains, it may be the case that a MVP (Minimum Viable Product) be created instead. This will allow the basic functions of the website to be implemented whereby time can be more spent on the basics rather than features that our users may potentially never look at.

Whilst using the MVP

• We will create a clear and consise website that will have all the necessary features needed for such a site.
• We will create a site with minimum levels of UX whilst still being intuitive enough for our users.
• We will meet the requirements of our beloved users

Whilst following the MVP model, to meet the user and business goals, our website will include:

• A nav-bar that underlines the specific text currently on in order to enable users to identify where they are to be
• Links to the associated social media pages of the organization
• A registration form in order for users to sign up to the site.
• An add movie form in order for the users to provide their movie recommendations
• An edit movie form in case the user would like to edit anything in particular on the movie posted

Structure of Pages

The page created is structured in a way which is easy recognizable to other web pages in the way it has a navigation bar on the top of the page and a footer at the bottom of the home.html. The navaigation bar is duplicated in each page so that it is easy to navigate to other pages from the main home page. On this, the site it divided up into multiple pages which each own having a function.

• Home: This is the main page where you will find the most recent posts that have been made/posted by other users. Here you will also find the nav bar and footer as well as the frequently asked questions.
• Registration: This is where users will find themselves creating an account to be able to post movie recommendations
• Add Movie: This, once user is logged in allows them to create movie recommendations with the ability to edit the synopsis as well as the image that will be see in the home page.
• Edit Movie: This, once user is logged in and is the correct user that has created the movie post, will be able to delete, edit the content as well as change the image shown in the home.html file
To add to this there are various files such as login, changepassword, edit-profile-page and more which enables the user to make their account their own and personalize.

Wireframes

Technologies

• HTML
• CSS
• Django
• JavaScript
• Jquery (Owl Carousel)

Frameworks & Tools

• Bootstrap v5.2
• Git
• Github
• Balsamiq
• Font Awesome
• Favicon.io
• Unsplash
• Pexels
• imagecompressor (Compressing Images)
• cloudconvert (Converting Images into WebP Format)
• Am I Responsive
• Google Lens
• Owl Carousel

Features

Implemented Features

• Registration Page: Allows users to create a user

• nav-bar: Enables users to navigate around the site easier and in an intuitive way

• Edit Movie Page: Allows logged in users to edit the post that they have made

• FAQ: Allows users a quick look into the frequently asked questions and their answers

• Edit Profile Page: Allows users to create their own profile page which makes the experience more personable

• Movie Detail Page: Allows users to view the movie as well as the synopsis written by the user who has posted said movie

• Comment, Like and Profile Page: Allows users to like, comment and view the profile page of the user that created the movie post

Features left to implement

• Categories for the Movies as they are currently bunched up in the home.html file
• Allow users to add favorites rather than browsing through the movies posts

Performance

Below is the report generated from lighthouse via Chrome DevTools for the Desktop website. Whilst this could be better, precautions I have taken have been to convert images to WEBP to enable a fast load time. Though I don't doubt there there are further changes that need to be made to maximize this.

Deployment

A live demo of the website can be found HERE

1. A new repository was created using 'Code-Instutute-Org/gitpod-full-template'
2. A meaningful name was given to the new repository and 'Create Repository' was selected
3. The repository was then opened on GitHub by clicking the 'Gitpod' button to build the GitPod workspace which would allow me to build and edit the code used to make the Project Name website/application
4. Version control was used throughout the project using the following commands in the terminal.
   • git add . OR git add "file name" - to stage the changes and get them ready for being committed to the local repo.
   • git commit -m "small description of update" - to save the change and commit the change to the local repo
   • git push - to push all committed changes to the GitHub repo associated with the GitPod workspace

Project Deployment

This project was deployed via Heroku by carrying out the following:

1. Create the gitpod repo from the template via the gitpod button in github.
2. Log in to Heroku and create a new app. Or you can create new app within the terminal
3. Create ElephantSQL Account and use url details to link app and database together
4. Complete the config vars section
5. Link Heroku and GitHub accounts together
6. Select the repo (via Heroku) that you want to make an app of and give it a name in Heroku.
7. Click on deploy.

Credits

Code

All code used in this project was taken from the Code Institute lessons, as well as Django's documentation.

Acknowledgements

This website, Watch It was designed and developed in conjunction with the Full Stack Developer Diploma course with specialty in ecommerce at Code Institute. I would like to thank Code Institute as well as the content creators in youtube for Django specifically for getting me through this! More Specifically John Elder with his Django course on Blog Posts.