Code Institute Diploma in Full-Stack Software Development Project 3

You can find the live site here

• User Experience
  • User Stories
  • Design
    • Overall Feel
    • Colour Scheme
    • Imagery
• Wireframes
• Features
  • Current Features
  • Possible Future Features1. Testing
• Database
• Technologies Used
  • Languages
    1. Github Pages
• Testing
• Deployment
  • Deployment through GitHub Pages
  • Forking the Repository
  • Cloning Project
• Credits
  • Acknowledgements

• I want to be able to view dog without having to register and account.
• I want to be able to search for specific dog.
• I want to be able to search for dog that have a specific name,nationaliti and gender.
• I want to have the option to register an account if I want to delete or edit your dog.

• I want to be able to log into my account.
• I want to be able to upload a dog.
• I want to be able to add a dog.
• I want to have ease of access to any dog that I have already uploaded.
• I want to be able to edit or delete any dog that I have already uploaded.

• I want to be able to add new collections to the site.
• I want the new collection to be added to the appropriate site areas.
• I want to be able to delete any collections.

For this project I wanted to have a light colors, the reason for choosing colors is that English bulldogs with their appearance look very scary but their personality is the opposite of appearance and are known if very gentle dogs regardless of their ugly past.

Because the overall theme is light pink, I wanted to go with Materialize color palet because we already use that library. I found the perfect colour scheme in a Materialize: Documentation.

Imagery is an important part of the user experience. Any user that uploads dog has to accompany it with an image. And when browsing the adolt dog and puppy, this image is the main selling point of the dog so it's the prominent feature of the dog card.

Another visual element is the banners on the dig and puppy pages. One some of them, a dog image was best. But for others, a visual element that evoked a feeling was more appropriate. If this site were going into full dog info, the site owner/admin would be in charge of this.

Lastly is the light color. It ties into the nice personality od that personality of a particular breed.

In situation where pictures was to big kvalitet I was using TinyPNG.

Navigation bar at the top of the page,big Logo on the middle and small text below the logo. The home page has a few parts with text. About the Breed, History and Important info around circular images of bread. And Footer part on the end with icon for different social network.

Champion part has same navigation, logo and smala text under logo. The difference is that this page has 6 pictures of dogs. Each dog have a description below pictured.

Pupppy part has same navigation, logo and smala text under logo. The difference is that this page has 6 pictures of puppy. Each dog have a description below pictured.

Contact Page have form for send email.

The navigation menu will help the user move easily across all pages. For the chempion pages, there is a dropdown menu in which all of those pages are held. This stops the navigation from becoming too cluttered.

The navigation buttons update depending on whether a user is logged in, and whether that user is the admin:

As someone who doesn't particularly like to sign up to websites that I don't plan on adding to but like to view, I wanted to to contact breeders for buy puppy or breed his bulldog they are have first contact us and then we will contanat them with breeders. I chose such content because of the better privacy of users and growers.

Searching by name,nationality or gender is an important feature for any dog or puppy website so that was something that I wanted to include. But people who are familiar with that breed in general might be looking for a specific dog based on name so this was also included in the search criteria.

At the moment, the database is relatively small. But if this were site that was going into full production, the champion and puppy list would be much more extensive. As a result, the number of chempion or puppy displyed to the user could become overwhelming very quickly. I've not limited to number of chempion or puppy, reason of that is where people can contact different breeders and in that way they can learn more about the breed and also exchange experiences with other breeders of this breed of dogs.

Anyone is able to make an account through the 'Register' page. They have to choose a username and a password. Measures have been put in place so that the user cannot choose a username that is already taken and they cannot use just whitespace.

Once their account is made, they will be able to log in an out when needed.

A registered user is able to upload chempion or puppy to the site. Once they have chempion or puppy that they have added, all chempion or puppy management can be done from their account page. This includes editing a deleting. I decided to keep these features exclusive to the account page rather than accessible on the chempion or puppy or collections pages. I like the uniformity of this.

• Uploading: when uploading, there are form validations in place that the user needs to adhere to. The two most important are:

  • The user cannot leave any inputs blank
  • The user cannot use just whitespace.

• Editing: the user will have to go into the edit page through the chempion or puppy, make the necessary changes and confirm them at the bottom of the page. The user also has the option to cancel all changes. These steps assure that the user cannot do any of this by mistake.

• Deleting: there is a confirmation modal in place to assure the user doesn't accidentally delete the chempion or puppy.

When uploading a chempion or puppy, the user needs to add an image alongside the chempion or puppy information. This image will be used on both the chempion or puppy card and on the full chempion or puppy page. But because the image is added via a url, there are some people who wither don't was to go to the rounds of finding one, or they simply can't on their device. iOS doesn't allow the user to copy an image url in the same way most android do. Because of that I have added a placeholder image url that the user can use in place of their own. It's a stylish image that was found on Unsplash that looks good with the overall feel of the site.

When uploading a chempion or puppy, the user is required to add their chempion or puppy to at least one collection(chempion or puppy). This allows the user to feel like they're adding to the community in a more thoughtful way. This also takes the responsibility of curating the collections off the owner/admin.

Only the admin can manage the collections pages. This includes adding, editing and deleting. The site has been designed so that the admin only has to use the collections management page to create a new collection at this will automatically be updated on the carousel. Any edits or deletions to collections will also apply to those elements.

• A rating system that allows users to rate each others chempion or puppy.
  • This could lead to sorting by top-rated chempion or puppy.
• Ability to 'save' chempion or puppy to a users own account to refer back to.
• Ability to upload a saved image to their chempion or puppy rather than relying on a URL.
• Users ability to update username.
• Users ability to delete their account.
  • This could allow the user to either leave their chempion or puppy on the site or delete them along with the account
• Admin controlled 'featured' chempion or puppy

Belowe you can see categories for puppy:

• HTML5
• CSS3
• JavaScript
• Python3

• Flask
• Flask-PyMongo
• Pip3
• dnspython
• jQuery
• Flask Paginate
• Jinja
• Werkzeug
• Materialize.
• FontAwesome
• Google Fonts

• Heroku used to deploy live site
• MongoDB used to host database information.
• GitHub used to host repository.
• GitPod used to develop project and organise version
• Balsamiq used to create wireframes.
• CloudConvert to convert all images to .webp format.
• Lighthouse for performance review.
• Responsinator used to check site was responsive on different screen sizes.
• Am I Responsive used to generate README intro image.
• Autoprefixer used to make CSS cross-browser compatible.
• favicon.io used to create a site favicon.
• TinyPNG used to host images.

Due to the size of the testing section, I have created a separate document for it. You can find it here.

This project was deployed through Heroku using the following steps:

Heroku needs to know which technologies are being used and any requirements, so I created files to let it know. Before creating the Heroku app, create these files using the following steps in GitPod:

• In the GitPod terminal, type pip3 freeze --local > requirements.txt to create your requirements file.
• In the GitPod terminal, type echo web: python run.py > Procfile to create your Procfile.
• The Procfile needs to contain the following line: web: python app.py and make sure there is no additional blank line after it.
• Push these files to your repository.

Create and env.py file using the following information:

import os
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", " *unique secret key* ")
os.environ.setdefault("MONGO_URI", " *unique uri from mongo.db * ")
os.environ.setdefault("MONGO_DB", " *database name* ")

Because this contains sensitive information, this needs to be added to the '.gitignore' file.

• Log into Heroku
• Select 'Create New App' from your dashboard
• Choose an app name (if there has been an app made with that name, you will be informed and will need to choose an alternative)
• Select the appropriate region based on your location
• Click 'Create App'

• From the dashboard, click the 'Deploy' tab towards the top of the screen
• From here, locate 'Deployment Method' and choose 'GitHub'
• From the search bar newly appeared, locate your repository by name
• When you have located the correct repository, click 'Connect'
• DO NOT CLICK 'ENABLE AUTOMATIC DEPLOYMENT': This can cause unexpected errors before configuration. We'll come back to this
• Click the 'Settings' tab towards the top of the page
• Locate the 'Config Vars' and click 'Reveal Config Vars'
• Use the following keys and values which must match the key/value pairs in your env.py file:

• Go back to the 'Deploy' tab and you can now click 'Enable Automatic Deployment'
• Underneath, locate 'Manual Deploy'; choose the master branch and click 'Deploy Branch'
• Once the app is built (it may take a few minutes), click 'Open App' from the top of the page

• Log in to GitHub and locate the GitHub Repository
• At the top of the Repository above the "Settings" Button on the menu, locate the "Fork" Button.
• You will have a copy of the original repository in your GitHub account.
• You will now be able to make changes to the new version and keep the original safe.

• Log into GitHub.
• Locate the repository.
• Click the 'Code' dropdown above the file list.
• Copy the URL for the repository.
• Open Git Bash on your device.
• Change the current working directory to the location where you want the cloned directory.
• Type git clone in the CLI and then paste the URL you copied earlier. This is what it should look like:
  • $ git clone https://github.com/petracili/MS3
• Press Enter to create your local clone.

NB: In order to work with a clone of this project, you will need to create the env.py file using your own variables and create a MongoDB database matching the one documented in the Database section of this doc.

You will also need to install all of the packages listed in the requirements file you can use the following command in the terminal pip install -r requirements.txt which will do it for you.

• REGEX pattern for form input validation taken from this Stack Overflow post.

• The HTML back button was taken from this W3Schools page.

• I used this Stack Overflow post to adjust the placement of the nav bar dropdown.

• This code for materialize slider autoplay was taken directly (also credited in in js file).

• My own neon text css classes taken from this article and re-worked for my neon boxes (also credited in in css file).

• This demo was used to understand how to incorperate flask pagination into my pre existing code.

• This Stack Overflow post helped me gain more of an understanding of pagination offset.

• This Stack Overflow post helped with the Pylint warning that I was getting and provided the comment to override it.

• I used the code in this W3Schools post to create the scroll-to-top button.

• I took the JS code from this Stack Overflow post for the carousel autoplay functionality.

• I searched for certain dogs with the help of a breeder I know privately, and in a conversation with him I checked the validity of the pedigree of a certain dog.

Adding this functionality to a website was covered in the Interactive Frontend Development module of the course. Those few videos were a great help. Firstly you have to be registered to this service then you will be able to link it with an existing email address. The official EmailJS documentation is also crucial to understand what has to be done in order to get everything in working order. You can find the documentation here.

HTML code validated on - https://validator.w3.org/

CSS code validated on - https://jigsaw.w3.org/css-validator/

• Upon sending a message through the contact form, the site visitor will receive an automated email response to the email address they have provided previously in the form. I Tested this functionality on my email accounts. The right is the email provided while filling the form. This has got the automated message after clicking send.

A member of Code Institute Anna Greaves has mentioned this handy tool in her "How to README.md" online webinar.

Antonio Rodrigez - My mentor at Code Institute - for general feedback and guidance, special guidance on DataBase

Matt Rudge - Lecturer/Developer at Code Institute - for the template used with GitPod IDE for developing this project, and the lecture on Email JS

Anna Greaves - Developer at Code Institute - for the "How to README.md" webinar