• The main colors used will be black, gray, white, and a yellow variant (specifically, #F7DC6F)

• The font for the logo is Boogaloo from Google Fonts
• The font family used for this site will be Lato throughout the site, with San Serif as the fallback if such font family is not being imported

• Imagery is very important on this app. It will be used to appeal to dog owners specifically and feature a variety of dogs. The images will be professional and acquired from Unsplash. Product images are very important and will be featured with a white background in order to show as much detail. Because this is a fictitious company created for this project, professional products images have been acquired from various Amazon.com product pages

Day Care, Training, Accessories and Special Offers pages will all have the following layouts on desktop and mobile devices.

• Responsive on all device sizes
• Interactive elements:
  • Search bar
  • Register form
  • Sign In/Out actions
  • My Profile update form
  • Log in/ log out actions
  • Go to secure checkout
  • Adjust order option at checkout
  • Secure checkout page
  • Product management (Add a product) page for admin
  • Edit product page for admin
  • Edit/Delete options for each product (visible only to admin/superuser)

• HTML5
• CSS3
• Javascript
• Python

Google Fonts:

• Google fonts were used to import the Roboto font family into the style.css file which is used on all pages throughout the project

GoogleImages:

• Google was used to find images for the Day Care, Training and Special Offers categories where and I was unable to find suitable images for other parts of the site

GMail:

• Gmail was used to send confirmation emails (profile set-up, purchases, etc.)

Font Awesome:

• Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes

Bulma:

• Bulma was used to ensure that Font Awesome icons would stay consistently sized and centered

Bootstrap:

• Bootstrap was used to assist with the responsiveness and styling of the website

jQuery:

• jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript

Git:

• Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub

GitHub:

• GitHub is used to store the projects code after being pushed from Git

Balsamiq:

• Balsamiq was used to create the wireframes during the design process

PicResize:

• PicResize was used to resize the Home page image

Postgres:

• Postgres was used for the app database and to store collected data

Heroku:

• Heroku was used to deploy the application

Amazon Web Services:

• Amazon Web Services was used to store static and media files

Stripe:

• Stripe was used as the payment gatewway to process payments from customers on the site

Django:

• Django was used as a framework to facilitate rapid site development

TempMail:

• TempMail was used to create a temporary email to enable the creation of test profiles

MiniWebTool:

• MiniWebTool's Django Secret Key Generator was used to generate secret keys

W3C Validator:

• This validator was used to check HTML and CSS

PEP 8 Online Validator:

• This validator was used to check Python code

JSHint:

• This validator was used to check Javascript code

Postgres is the database used for storing product categories, product details, user’s profile details and previous order information. The schema is as follows:

Defensive design and security features have been achieved by:

• Utilizing inbuilt Django validation and authentication features
• Assigning a specific Staff status to each user and only allowing those users labeled as Staff access to product management site features
• Users must sign in to view order history and personal profile details
• Users cannot view other users' previous order history and personal information
• If a user tries to enter a url for a protected area of the site, the Django @login required decorator and superuser class will stop the action and flash a warning message stating that only store owners are allowed access to that area
• If a user tries to checkout with an empty shopping bag, a warning messages lets them know that there is nothing in their shopping bag
• Email fields with correct email structure are required fields for registering onto the site as a new user
• When registering as a new user, a visitor is required to enter email and password twice to ensure they enter information correctly

• Result: Tested logo on all pages and action works as intended. No errors.

• Result: Tested all links (in desktop, tablet and mobile modes) before and after logging in. Links work as intended. No errors.

• Result: Entered data for user 'testytest'. Action completed as intended. No errors.

• Result: Tested by entering info for all three current users. Action worked as intended. No errors.

• Result: Tested with three different user entries. Action works as intended. No errors.

• Result: Tested all entry fields. Action works as intended. No errors.

• Result: Tested by entering various combinations of information/misinformation. Action works as intended. No errors.

• Result: Tested with different users. Action works as intended. Users are not able to edit or delete products unless they are superusers. No errors.

• Result: Tested with various keywords from all fields. Action works as intended. When keyword was found in any of these pages Search function returned a match. When keyword was found in other areas (ie. Username), no result was found and No Result message falshed.

• Validator: (http://pep8online.com/)
• Outcome: First test resulted in several errors pertaining to trailing whitespaces, line-too-long and various linting errors. Corrected all trailing whitespace and line-too-line errors possible. Ignored the linting errors on advice of tutor and Slack community.

• Validator: (https://jigsaw.w3.org/css-validator/)
• Outcome: First test failed with various errors due to missing elements (paragraph and div) and Jinja syntax. Corrected errors. Second test passed with zero errors.

• Validator: (https://jshint.com/)
• Outcome: Tests of various javascript code passed with no errors.

To deploy to GitHub Pages use the following steps:

1. Log in to GitHub and locate your GitHub Repository. For this particular project the name is milestone-project-4.
2. At the top of the Repository, find the "Settings" button and select it.
3. Scroll down the Settings page and find "GitHub Pages" section. Click on "Pages settings now has its own dedicated tab! Check it out here!"
4. Under "Source", click the dropdown called "None" and select "Master Branch" and click "Save" button that pops up.
5. The page should automatically refresh but if it doesn't, refresh the page.
6. Click on "Your site is ready to be published at https://katyacano.github.io/milestone-project-4/" that appears after refresh.

To clone this repository use the following steps:

1. When logged into GitHub, navigate to the repository you want to clone. For this project, click here.
2. Click on the 'Clone or download' button which should be displayed above and to the right of the repository files.
3. You are presented with a HTTPs address. Copy this address by pressing the button to the right of the address.
4. Open your terminal.
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.
7. Press Enter and your local clone will be created.

To deploy to Heroku use the following steps:

1. On Heroku create an account and log in.
2. Click new and create new app.
3. Choose a unique name for your app, select region and click on Create App
4. Under the Settings click Reveal Config Vars and set IP to 0.0.0.0 and the PORT to 5000
5. Go to the CLI and type $ sudo snap install --classic heroku
6. Type $ heroku login command into the terminal
7. Create requirements.txt ($ sudo pip3 freeze --local > requirements.txt)
8. Create a Procfile ($ echo web: python app.py > Procfile)
9. Go back to Heroku, under Deploy find Existing Git repository and find corresponding Git repository by name.
10. In the app dashboard, under Settings click on Reveal Config Vars
11. Set "DATABASE_URL" and "SECRET_KEY".
12. Once the build is complete, go to Domains section of Settings page and you will find a link to app.
13. Other Config Vars you will set include: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, EMAIL_HOST_PASS, EMAIL_HOST_USER, STRIPE_PUBLIC_KEY, STRIPE_SECRET_KEY, STRIPE_WH_SECRET, and USE_AWS.

• More products in the Accessories categories
• More service offerings including overnight boarding, grooming and additional training options
• Log in via Facebook
• The ability to add user's photo to Profile page
• The ability to add a user's pet info within their profile page (pet name, breed, photo, etc.)
• Ability for a user to rate a product or service offering
• Ability for a user to store their commonly purchased products or services in a Favorites folder for quick access

• Bootsrap: Boostrap was used throughout the project to rapidly achieve responsiveness
• Bulma: Bulma was used to ensure that Font Awesome icons were consistently sized and centered
• JQuery: jQuery was used to facilitate functionality of Bootstrap and other functions
• StackOverflow: Stack Overflow was instrumental in solving code issues like dynamically changing page titles, breaking line-too-long Flake8 errors, and centering icons in mobile view
• Code Institute: Code Institute learning modules set the foundation for generating the code on this site

• All content, except as otherwise already noted here, was written by the developer

Image sources are as follows:

• Home page image was acquired from Unsplash.com
• About Us image was acquired from Unsplash.com
• Photos of Daycare and Training services were acquired from GoogleImages
• Product images and descriptions were acquired from Amazon.com since this is a school project and will not be made public

• My Mentor Brian for continuous helpful feedback
• Tutor Support at Code Institute for their support
• CI Slack community for their ongoing assistance