(title of project)

View project here

(introduction of the site)

User Experience (UX)

The Audience

The intended audience for this project is individuals ...

User Objectives

My Objectives

User Stories

The intended type of users which this website is targeted for are ...

1. As a user, I want to be able to ... so ...

Design

• Colour Scheme

• Typography

• Imagery

• Wireframes

  Home Page

  Master Wireframes

  • Master Wireframes - View

Database Mapping

The database was designed using an online tool called DB Diagram. The tables where mapped depending on the field requirements.

Database Design - Mapping

Features

The features that will be utilised in this project will be as follows:

Existing Features

Site Features

Features Left to Implement

Technologies Used

Programming Languages Used

• HTML5
  • HTML5 was used to structure and present content on my website.
• CSS3
  • CSS3 was used to provide my website with style.
• JavaScript
  • JavaScript was used to make the site interactive.
• Python
  • Python was used as the backend language to access and parse data.

Databases, Frameworks, Libraries, Programs and Templates Used

Databases

1. DB Diagram
   • Online tool to design the database.
2. Mongodb:
   • Database which stores the data to be recalled onto the website.

Frameworks

1. Bootstrap:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. JQuery Core 3.6.0:
   • JQuery library was implemented to use features within Materialize
3. EmailJS
   • Using emailJS service to send emails from the contact modal

Library

1. Google Fonts:
   • Google fonts were used to import the font into the style.css file which is used on all pages throughout the project.
2. Font Awesome 5.13.3:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
3. Hover 5.15.3
   • Hover effects used for the animation on hovering over links and buttons.

Programs

1. Google Chrome:
   • Default browser used to visually display the build process as well as utilising Chrome Dev Tools to assist where needed.
2. GitHub:
   • GitHub is used to store the code of the project after being pushed from GitPod.
3. GitPod:
   • A cloud development environment that allows us to create the website.
4. Visual Studio Code
   • Code editing software was used to replace GitPod as the free license expired due to over 50 hours useage.
5. GitHub Desktop:
   • A tool that allows you to interact with GitHub from the desktop
6. Grammerly:
   • Online tool which assists with the English grammar.
7. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.
8. RandomKeygen:
   • A tool to randomly generate a password.
9. Heroku:
   • A platform as a service (PaaS) that enables me to deploy my website in the cloud.

Templates

1. Github Template:
   • A template which has the preinstalled tools that will get us started.

Testing

...

Validation

On code completion, I ensured my code was validated with no snytax errors. I used W3C Markup Validator for HTML5, W3C CSS Validator for CSS3 to ensure my code is W3C Compliant. I used JSHint to helps to detect errors and potential problems in your JavaScript code. I also used PEP8 Online to validate my python scripts

Results

Page	Initial Errors	Resolved Errors	Error Notes
index.html	Initial Errors	Resolved Errors	...

or use this template

HTML - W3C Markup Validator

CSS - W3C CSS Validator - Results

JS - JSHint - Results

Python - PEP8 Online - Results

Further Testing

User Stories Testing from User Experience (UX) Section - View Results

Functionality and Usability Testing - View Results

Browser and Responsive Testing

Known Issues

Deployment

Making a Deployment

The project was deployed to Heroku and connected to GitHub pages using the following method:

1. To direct Heroku which application and dependencies are required to run the app being developed, create a requirements file.
   • In the terminal, enter "pip3 freeze --local > requirements.txt"
2. Install the Procfile file as that what Heroku looks for to know which files run the app and how to.
   • In the terminal, enter echo web: python app.py>Procfile
   • Note: In the Procfile, there could be a blank line automatically created, go into the file, remove the blank line and save it again.
3. In Heroku Dashboard, click on 'New', then click on 'Create new app'.
4. Providing it with a unique name and changing the region to 'Europe' (or whatever region you are in). Then click on 'Create app'.
5. In 'Deployment method' click on 'GitHub', Ensuring your GitHub username is visible, either search for your repository or type in exactly how your repository is spelt in GitHub. When it finds your Repository, it will be visible and you would click on 'Connect'
6. Scroll to the top of the page and click on 'Settings'.
7. Scroll down till you are in 'Config Vars' section and since we hide the environment variables. It would need to be added into Heroku manually. You would need to add the following: IP, PORT, SECRET_KEY, MONGO_URI and MONGO_DBNAME, ensuring you putting the same values as you did in the env.py file
8. Going back to the terminal within GitPod. Commit and push the files that were created.
9. Once successfully pushed into GitHub, go back to Heroku and click on 'Enable Automatic Deployment' and then 'Deploy Branch'.
10. Once completed, a 'View' button would appear meaning the app has been deployed and successfully connected to Github.
11. As Heroku is now connected to Github, for the remaining for project, upload your files into GitHub and it would automatically sync with Heroku.

Making a Clone

I had to get the SSH key from the repository which allowed me to clone the repository to my local hard drive. The method which I used to clone the project was via the terminal as well as Github Desktop. I was able to connect my Github repository and clone my files through this method.

Step 1 - Method 1 (Steps taken in VSCode)

1. Open your IDE and open up the Terminal
2. Inside your terminal type git clone git@github.com:adnanmuhtadi/milestone-project-3.git
   • This would clone what is in github to your computer and so now modification to the files can happen on your local machine
3. Inside your terminal type git status
   • To see what changes have been made
4. Type git -a
   • To add all the files that you have worked on to the stage
5. Type git commit -m "add notes here"
   • To add a message to files you are about to push to the servers
6. Type git push
   • To upload to the remote repository

Step 1 - Method 2

1. Open the repository that needs to be cloned.
2. On the top-right side of the page, above the files, you will see a button 'Code' with an arrow point down.
3. Once clicked, a drop-down would appear which would give me the option 'Open with GitHub Desktop' (as I had already pre-installed GitHub Desktop previously).
4. Once clicked, it would automatically open the application and request where for it to be saved.

Step 2 - Create Env.py

1. Create a new file in the dictory called 'env.py'
   • In the terminal type in git touch env.py
2. Inside the env.py file you will need to add the following:

# Python env code to set all defaults

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "yourkeyhere")
os.environ.setdefault("MONGO_URI", "yourmongouriaddress")
os.environ.setdefault("MONGO_DBNAME", "yourdatabasename")

3. Need to install the project requirements from the requirements.txt file.
   • In the terminal type in pip3 install -r requirements.txt
4. log into MongoDB to create your database and the tables
   • Mapping of database available Here
5. Within the app.py file, scroll to the bottom of the page and change the code from

# This tells the application where and how to run.
if __name__ == "__main__":
    app.run(host=os.environ.get("IP"),
            port=int(os.environ.get("PORT")),
            debug=False)

To

# This tells the application where and how to run.
if __name__ == "__main__":
    app.run(host=os.environ.get("IP"),
            port=int(os.environ.get("PORT")),
            debug=True)

6. In the terminal, type in python3 app.py to run the application.

Credits

Content

Code

Media

Acknowledgements