Code Institute Milestone Project 3 - My Favourite Actors

Click here to see live project.

My Favourite Actors

Aim of this project is to create a data base of favourite actors, allowing users to share their passion for cinematography.

Table of Content

1. User experience
   • User Stories
   • Design
   • Wireframe
2. Features
   • Existing Features
3. Technologies Used
   • Technologies
   • Languages
   • MongoDB
   • Frameworks
   • Libraries
4. Testing
5. Deployment Begining
   • GitHub
   • Heroku
6. Credits

User Experience

User Stories

• First Time Visitor Goals

  1. As a First Time Visitor, I want to be able to navigate the application with ease and register my account.
  2. As a First Time Visitor, I want to find the list of actors and some basic information about them.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to log into my already created account.
  2. As a Returning Visitor, I want to be able search the app for actors.
  3. As a Returning Visitor, I want to be able to add new actors to the data base.

Design

Since the aim of the site is to find information I decided to keep it as plain and simple as possible. As the front page displays pictures of my top 3 favourite actors, I have chosen pictures that are in dark colors to match the all grey character of this app.

Colour

• Colour palette used for this project was taken from Materialize.

• Colors used for this project are shades of grey.

Typography

• Font Prompt was used throughout the project.

• Materialize icons were used throughout the project.

Wireframe

• Wireframe was developed using Figma.

• Files saved from Figma, were converted from .fig into .jpg file with use of Filestar application.

• Wireframe of this application can be seen in the documentation folder in this project in .jpg file.

Top

Features

This single page application allows users to navigate easily between the game and all it's features:

Existing Features

• Home - takes user to the home page of this application.

• Actors - allows users to view the data base.

• Sign Up - allows new user to register account.

• Login - allows user to log into their account.

Logged in menu

(only seen when user is already logged in)

• Add - allows user to add new entries to the data base.

• Logout - allows user to log out of their account.

Top

Technologies Used

Technologies

• Figma

  • to provide wireframe.

• Filestar

  • to convert the wireframe file from .fig to .jpg.

• Materialize

  • to provide icons to the app.

• Google Fonts

  • to provide free font to the app.

• Freeformatter

  • to beautify the HTML code.

• W3C Validator

  • to validate HTML code.

• Beautify Tools

  • to validate JavaScript code by input.

• Jigsaw W3C Validator

  • to validate CSS code by input.

• Am I responsive

  • to test mobile devices responsiveness of my app.

• Techsini

  • to create this project mockup, of which image is placed at the very top of this readme file.

• JQuery

  • DOM manipulation to initiate the interactive functions from Materialize.

• Flask

  • framework used for the project.

• Jinja

  • templating for Python functionalities.

• Werkzeug

  • Web Server Gateway Interface web application library.

• Heroku

  • to be build/run/operate this app in the cloud.

• MongoDB

  • database used for the project.

Languages

• HTML5
• CSS3
• JavaScript
• Python

MongoDB Database

users collection

actors collection

Top

Testing

General

I have performed a testing of this app and all of its functionalities. Also, all features within this README file were tested.

• The CSS code was tested using Jigsaw and produced no errors.

• The HTML code was tested using W3C Validator and produced no errors.

• The JavaScript was tested using Beautify Tools and produced some minor errors.

Testing User Stories

• First Time Visitor Goals

  1. As a First Time Visitor I can navigate via the menu to the available and clearly marked pages, and register my account on the signup page.
  2. As a First Time Visitor I can see the site is easy to navigate either via a computer or via a mobile screen by using the navbar and the side navbar.

• Returning Visitor Goals

  1. As a Returning Visitor I don't need to log back into the site, since I have the cookie session saved.
  2. As a Returning Visitor I can easily search the database for entries.
  3. As a Returning Visitor I can check the actors in the database and edit/delete them.

Additional Testing

All testing performed via the app deployed to Heroku (on my-favourite-actors.herokuapp.com/home)

• Base template and home page (base.html and home.html)

  1. When clicking on the logo in the navbar, user is being taken to the home page.
  2. All the links in the navbar take the user into the correct section of the application.
  3. Flash messages are being displayed when user is registering new account/login in/login out/editing the database entries or deleting them.
  4. The images of the top 3 favourite actors are displayed with the Show More button that take user to relevant entries when clicked
  5. The Show More button located at each of the recent entries take user to relevant entry when clicked.
  6. Links in the footer take user to relevant websites when clicked and open in the new tab.

• Login and Signup page (signup.html and login.html)

  1. When user is first entering the page, the "Add" and "Logout" button are no visible
  2. When user creates new account, flash message is displayed informing about successful operation.
  3. Flash message is also displayed when user has successfully logged in.
  4. When user is logged in, the option to add entry and to logout become visible.

• Add entry, edit entry and delete entry pages (add_actor.html and edit_actor.html):

  1. User is able to edit existing entry in the database.
  2. User is able to add new entry to the database.
  3. User is able to delete entry from the database.
  4. Each of the above operations triggers the flash message being displayed.
  5. The filmography button takes user to Wikipedia page that displays actor's work and opens in new tab.

• Search entries (search.html):

  1. User is able to search the database using the name of the actor.
  2. The entry displayed upon completion of the search operation, allows user to look into the entry in order to view it, edit it or delete it.

Further Testing

• I tested the project using Chrome only. For some reason, when I use Mozilla or Firefox, my laptop is freezing which makes it very difficult to open applications.

• I asked friend to test the application using the other two mentioned browsers and he reported no issues.

• Friends and family were asked to play with the application and no issues were reported apart from few typos.

Deployment

Creating this project

• I have used the cloud-based IDE Gitpod and GitHub as a free git repository hosting.

• As first step, I have installed the Gitpod extension for Chrome browser that I use.

• Next, I created the repository on Github using the gitpod template provided by the Code Institute.

• Then, I clicked on "Gitpod" button, which opened workspace in Gitpod, where I created my project.

• Once in Gitpod, the following commands were used while developing this project:

  • "git add (file name)" - to add files for staging.
  • "git status" - to see what is the current status of directory and staging area.
  • "git commit -m "(description of action taken)" - to commit changes along with short comment of what was done.
  • "git push" - to push commits to Github.
  • "python3 -m http.server" - to open ports allowing me to view the current state of the website in Chrome.

Github pages

• Log in to Github and find the repository.

• At the top of the repository (not in the header of the whole page) find the "Settings" button with a cogwheel icon and click on it.

• Scroll down to "Github Pages" section.

• Click on dropdown called "None" and select "Master Branch".

• Click save next to it and wait for the page to refresh automatically. You will be taken back to the top of the settings page.

• Scroll back down again to "Github Pages" section and find the link of now published page.

Heroku

• To deploy the app using Heroku, go through the following steps:

  1. Use pip3 freeze > requirements.txt to create a list of the dependencies.

  2. Create a Procfile by running this command on the CLI: echo web: python app.py > Procfile

  3. Run git add ., git commit -m, and git push, to push the project files to your GitHub repository.

  4. Navigate to Heroku, log in and create a new app by clicking on the 'New' and 'Create New App'. Enter your app name and select your region and create app.

  5. Under the 'Deploy' tab, select 'GitHub - Connect to GitHub'.

  6. Enter your repository's name in the input field, and connect once found.

  7. To set your environment variables navigate to the 'Settings' tab and scroll down to 'reveal config vars'

  8. Add the config vars:

  Key	Value
  IP	0.0.0.0
  PORT	5000
  MONGO_DBNAME	<database_name>
  MONGO_URI	mongodb+srv://<username>:<password>@cluster0.ar4ah.mongodb.net/<database_name>?retryWrites=true&w=majority
  SECRET_KEY	<Your secret Key>

  9. Navigate to the 'Deploy' tab. To enable automatic deployment, scroll down to the 'Automatic Deploys' section.

  10. Choose your GitHub branch and enable automatic deployment.

Running project locally

• In order to run this project locally, follow the below steps:

  • Click on the link to this project's repository in GitHub (you must be logged into your own Github account).
  • Click on the dropdown menu Code button located next to green "Gitpod" button.
  • Click on "Open with GitHub Desktop" to clone and open the repository locally.
  • Click on the "Choose" option and navigate to the local path where the cloned repository should be located.
  • Click "Clone".

• For more details on how to clone repository in Github see here.

Top

Credits

Content

• As mentioned above, the font and icons were sourced externaly.

• Images used on the homepage were sourced from relevant wikipedia sites.

Acknowledgements

• My Mentor Aaron, for help, valuable inputs and inspirations.

• Code Institue's Tutors, for help on resolving issues.

• My family and friends, for testing and advice.

• Stackoverflow, Slack and Github communities for feedback and troubleshoot throughout.

• All developers and coders I have followed on YouTube.

Top