search

PedroCristo / portfolio_project_5

1 stars 4 forks source link

readme

Watches & Clocks - Introduction

Project milestone 5 for Code Institute Full-stack development program: Django Framework.
Watches & Clocks is an E-commerce shop where users can find and buy watches and search for products by filtering different categories. They can also register by filling in their personal information on the website’s profile page. All the visitorsare welcome to drop a service review and help the site admin to improve the service. The application has agood appearance with an easy, clear and concise site navigation.

Live Project Here

Watches & Clocks webpage on multiple devices

README Table Content

User Experience - UX

User Stories

  1. Navigate around the site and easily view the desired content.
  2. View a list of products and choose accordingly.
  3. Search products to find a specific product.
  4. Click on a product to read and view the details.
  5. Register for an account to avail of the services offered to members.
  6. View product comments so that I can read other users opinions.
  7. Buy a product by using the website checkout system.
  1. Review the website service.
  2. Delete my previous reviews.
  3. Save my data under my personal profile.
  4. Edit my previous reviews.
  5. Manage my profile by updating my details.
  6. Logout of the website.
  7. Using my personal profile, buy a product by using the website checkout system.
  1. Create and publish a new product.
  2. Create a draft of a a new product so it can be finalised later.
  3. Create a new user, products, and categories.
  4. Delete user, products, categories and reviews.
  5. Approve user's reviews.
  6. Change a user’s permissions on the website
  7. Upload new banners to be displayed on the website.

Agile Methodology

All functionality and development of this project were managed using GitHub which Projects can be found here

The Scope

Main Site Goals

Design

Colours

Colours Palete

Typography

Imagery

Video

Wireframes

Wireframes for this project are located here

Database Diagram

Database Diagrama

Features

Landing Page

Landing page

Home Page - Images Carousel

Home Page - Images Carousel

Home Page - Selected Products

Home Page - Selected Products

Home Page - Image Banner

Home Page - Image Banner

Home Page - Customers Reviews Carousel

Home Page - Customers Reviews Carousel

Products Page

Products Page

Products Details

Product Details

Products Details - Features

Product Details - Features

Products Details - Products on Sale

Product Details - Products on Sale

Products Shopping Bag

Products Shopping Bag

Products Shopping Bag - Products Coming Soon

Products Shopping Bag - Products Coming Soon

Products Checkout

Products Checkout

Products Checkout - Success

Products Checkout - Success

Products Management

Products Management

Profile Page

Profile Page

Service Reviews Page

Services Reviews Page

Add/Edit Service Review Page

Add/Edit Service Review Page

Signup Page

Signup Page

Signup Page - Verify Email

Signup Page - Verify Email

Signup Page - Confirm Email

Signup Page - Confirm Email

Login Page

Login Page

Logout Page

Logout Page

Reset Password Page

Reset Password Page

Change Password Page

Change Password Page

Navbar

Navbar

Footer

Footer

Page 404 - Page Not Found

Page 404 - Page Not Found

Messages and Interaction with Users

Sign up 1

Sign up 1

Sign up 2

Sign up 2

Login

Login

Logout

Logout

Profile Update

Profile Update

Service Review - Add Review

Service Review - Add Review

Service Review - Update Review 1

Service Review - Update Review 1

Service Review - Update Review 2

Service Review - Update Review 2

Service Review - Delete Review 1

Service Review - Delete Review 1

Service Review - Delete Review 2

Service Review - Delete Review 2

Service Review - Delete Review 3

Service Review - Delete Review 3

Add Product

Add Product

Edit Product 1

Edit Product 1

Edit Product 2

Edit Product 2

Edit Product 3

Edit Product 3

Delete Product 1

Delete Product 1

Delete Product 2

Delete Product 2

Delete Product 3

Delete Product 3

Add Product to Bag

Add Product to Bag

Update Bag

Update Bag

Remove Product from Bag

Remove Product from Bag

Purchase Success

Purchase Success

Purchase Success - Confirmation Email

Purchase Success - Confirmation Email

Admin Panel / Superuser

Admin Panel / Superuser

  1. Banners
  2. Checkout
  3. Products
  4. Profiles
  5. Reviews

Marketing and Social Media

Statista - Facebook Users

Statista - Facebook Users

Watches & Clocks - Facebook Page

Watches & Clocks - Facebook Page 1 Watches & Clocks - Facebook Page 2

Meta Pixel - Tracking Audience

Meta Pixel - Tracking Audience

Mailchimp Subscription Service

Mailchimp Subscription Service

Privacy Policy

Privacy Policy

Search Engine Optimization

SEO - Keywords List

sitemap.xml

  1. Paste the URL of the deployed site into XML-sitemaps
  2. Download the XML sitemap file
  3. Add the file into the projects root folder, named as sitemap.xml

robots.txt

Watches & Clocks - Robots.txt

Sitemap Google Registration

Watches & Clocks - Robots.txt

AWS Setup Process

AWS S3 Bucket

The deployed site uses AWS S3 Buckets to store the webpages static and media files. More information on how you can set up an AWS S3 Bucket can be found below:

  1. Create an AWS account here.

  2. Login to your account and within the search bar type in "S3".

  3. Within the S3 page click on the button that says "Create Bucket".

  4. Name the bucket and select the region which is closest to you.

  5. Underneath "Object Ownership" select "ACLs enabled".

  6. Uncheck "Block Public Access" and acknowledge that the bucket will be made public, then click "Create Bucket".

  7. Inside the created bucket click on the "Properties" tab. Below "Static Website Hosting" click "Edit" and change the Static website hosting option to "Enabled". Copy the default values for the index and error documents and click "Save Changes".

  8. Click on the "Permissions" tab, below "Cross-origin Resource Sharing (CORS)", click "Edit" and then paste in the following code:

    [
    {
        "AllowedHeaders": [
        "Authorization"
        ],
        "AllowedMethods": [
        "GET"
        ],
        "AllowedOrigins": [
        "*"
        ],
        "ExposeHeaders": []
    }
]

  9. Within the "Bucket Policy" section. Click "Edit" and then "Policy Generator". Click the "Select Type of Policy" dropdown and select "S3 Bucket Policy" and within "Principle" allow all principals by typing "*".

  10. Within the "Actions" dropdown menu select "Get Object" and in the previous tab copy the "Bucket ARN number". Paste this within the policy generator within the field labelled "Amazon Resource Name (ARN)".

  11. Click "Add statement > Generate Policy" and copy the policy that's been generated and paste this into the "Bucket Policy Editor".

  12. Before saving, add /* at the end of your "Resource Key", this will allow access to all resources within the bucket.

  13. Once saved, scroll down to the "Access Control List (ACL)" and click "Edit".

  14. Next to "Everyone (public access)", check the "list" checkbox and save your changes.

IAM Set Up

  1. Search for IAM within the AWS navigation bar and select it.
  2. Click "User Groups" that can be seen in the side bar and then click "Create group" and name the group 'manage-your-project-name'.
  3. Click "Policies" and then "Create policy".
  4. Navigate to the JSON tab and click "Import Managed Policy", within here search "S3" and select "AmazonS3FullAccess" followed by "Import".
  5. Navigate back to the recently created S3 bucket and copy your "ARN Number". Go back to "This Policy" and update the "Resource Key" to include your ARN Number, and another line with your ARN followed by a "/*".
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*",
                "s3-object-lambda:*"
            ],
            "Resource": [
                "YOUR-ARN-NO-HERE",
                "YOUR-ARN-NO-HERE/*"
            ]
        }
    ]
}
  1. Ensure the policy has been given a name and a short description, then click "Create Policy".
  2. Click "User groups", and then the group you created earlier. Under permissions click "Add Permission" and from the dropdown click "Attach Policies".
  3. Select "Users" from the sidebar and click "Add User".
  4. Provide a username and check "Programmatic Access", then click 'Next: Permissions'.
  5. Ensure your policy is selected and navigate through until you click "Add User".
  6. Download the "CSV file", which contains the user's access key and secret access key.

Connecting AWS to the Project

  1. Within your terminal install the following packages by typing 
  pip3 install boto3
  pip3 install django-storages
  1. Freeze the requirements by typing:
pip3 freeze > requirements.txt
  1. Add "storages" to your installed apps within your settings.py file.
  2. At the bottom of the settings.py file add the following code:
if 'USE_AWS' in os.environ:
    AWS_STORAGE_BUCKET_NAME = 'insert-bucket-name-here'
    AWS_S3_REGION_NAME = 'insert-your-region-here'
    AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
  1. Add the following keys within Heroku: "AWS_ACCESS_KEY_ID" and "AWS_SECRET_ACCESS_KEY". These can be found in your CSV file.
  2. Add the key "USE_AWS", and set the value to True within Heroku.
  3. Remove the "DISABLE_COLLECTSTAIC" variable from Heroku.
  4. Within your settings.py file inside the code just written add: 
  AWS_S3_CUSTOM_DOMAIN = f"{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com"
  1. Inside the settings.py file inside the bucket config if statement add the following lines of code:
STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'

STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

AWS_S3_OBJECT_PARAMETERS = {
    'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
    'CacheControl': 'max-age=94608000',
}
  1. In the root directory of your project create a file called "custom_storages.py". Import the following at the top of this file and add the classes below:
  from django.conf import settings
  from storages.backends.s3boto3 import S3Boto3Storage

  class StaticStorage(S3Boto3Storage):
    location = settings.STATICFILES_LOCATION

  class MediaStorage(S3Boto3Storage):
    location = settings.MEDIAFILES_LOCATION
  1. Navigate back to you AWS S3 Bucket and click on "Create Folder" name this folder "media", within the media file click "Upload > Add Files" and select the images for your site.
  2. Under "Permissions" select the option "Grant public-read access" and click "Upload".

Stripe Payments

Payments

Webhooks

  1. To set up a webhook, sign into your stripe account and click 'Developers' located in the top right of the navbar.

  2. Then in the side-nav under the Developers title, click on "Webhooks", then "Add endpoint".

  3. On the next page you will need to input the link to your heroku app followed by /checkout/wh/. It should look something like this:

    https://your-app-name.herokuapp.com/checkout/wh/

  4. Then click "+ Select events" and check the "Select all events" checkbox at the top before clicking "Add events" at the bottom. Once this is done finish the form by clicking "Add endpoint".

  5. Your webhook is now created and you should see that it has generated a secret key. You will need this to add to your heroku config vars.

  6. Head over to your app in heroku and navigate to the config vars section under settings. You will need the secret key you just generated for your webhook, in addition to your Publishable key and secret key that you can find in the API keys section back in stripe.

  7. Add these values under these keys:

    STRIPE_PUBLIC_KEY = 'insert your stripe publishable key'
STRIPE_SECRET_KEY = 'insert your secret key'
STRIPE_WH_SECRET = 'insert your webhooks secret key'

  8. Finally, back in your settings.py file in django, insert the following near the bottom of the file: 

    STRIPE_PUBLIC_KEY = os.getenv('STRIPE_PUBLIC_KEY', '')
STRIPE_SECRET_KEY = os.getenv('STRIPE_SECRET_KEY', '')
STRIPE_WH_SECRET = os.getenv('STRIPE_WH_SECRET', '')
    • Below is a screenshot of the Watches & Clocks - Stripe dashboard.

Stripe Payments

Technologies Used

Languages Used

Django Packages

Frameworks - Libraries - Programs Used

Testing

Testing results are here

Creating the Django app

  1. Go to the Code Institute Gitpod Full Template Template
  2. Click on Use This Template
  3. Once the template is available in your repository click on Gitpod
  4. When the image for the template and the Gitpod are ready open a new terminal to start a new Django App
  5. Install Django and gunicorn: pip3 install django gunicorn
  6. Install supporting database libraries dj_database_url and psycopg2 library: pip3 install dj_database_url psycopg2
  7. Create file for requirements: in the terminal window type pip freeze --local > requirements.txt
  8. Create project: in the terminal window type django-admin startproject your_project_name
  9. Create app: in the terminal window type python3 manage.py startapp your_app_name
  10. Add app to the list of installed apps in settings.py file: you_app_name
  11. Migrate changes: in the terminal window type python3 manage.py migrate
  12. Run the server to test if the app is installed, in the terminal "The install worked successfully! Congratulations!"

Deployment of This Project

  1. Log in to Heroku or create an account
  2. On the main page click the button labelled New in the top right corner and from the drop-down menu select Create New App
  3. You must enter a unique app name
  4. Next select your region
  5. Click on the Create App button
  6. Click in resources and select Heroku Postgres database
  7. Click Reveal Config Vars and add:
    • A new record with SECRET_KEY
    • A new record with the AWS_ACCESS_KEY_ID
    • A new record with the AWS_SECRET_ACCESS_KEY
    • A new record with the EMAIL_HOST_PASS
    • A new record with the EMAIL_HOST_USER
    • A new record with the STRIPE_PUBLIC_KEY
    • A new record with the STRIPE_SECRET_KEY
    • A new record with the STRIPE_WH_SECRET
    • A new record with the DISABLE_COLLECTSTATIC = 1
  8. The next page is the project’s Deploy Tab. Click on the Settings Tab and scroll down to Config Vars
  9. Next, scroll down to the Buildpack section click Add Buildpack select python and click Save Changes
  10. Scroll to the top of the page and choose the Deploy tab
  11. Select Github as the deployment method
  12. Confirm you want to connect to GitHub
  13. Search for the repository name and click the connect button
  14. Scroll to the bottom of the deploy page and select the preferred deployment type
  15. Click Enable Automatic Deploys for automatic deployment when you push updates to Github

Final Deployment

  1. Create a runtime.txt "python-3.9.13"
  2. Create a Procfile "web: gunicorn your_project_name.wsgi"
  3. When development is complete change the debug setting to: DEBUG = False in settings.py
  4. In this project the summernote editor was used so for this to work in Heroku add: X_FRAME_OPTIONS = 'SAMEORIGIN' to settings.py.
  5. In Heroku settings config vars delete the record for DISABLE_COLLECTSTATIC
  6. In Heroku settings config vars set the record for USE_AWS to True

Forking This Project

  1. Open GitHub
  2. Find the "Fork" button at the top right of the page
  3. Once you click the button the fork will be in your repository

Cloning This Project

  1. Open GitHub
  2. You will be provided with three options to choose from, HTTPS, SSH or GitHub CLI, click the clipboard icon in order to copy the URL
  3. Once you click the button the fork will be in your repository
  4. Open a new terminal
  5. Change the current working directory to the location that you want the cloned directory
  6. Type "git clone" and paste the URL copied in step 3
  7. Press "Enter" and the project is cloned

Credits

Content

Information Sources / Resources

Special Thanks