Boutique Ado

B2C E-Commerce Django-based Web Application. It is a fully functional online store with a shopping cart, checkout, and payment capabilities, as well as an admin interface to manage the store.

Live Demo: https://boutique-ecommerce-c39a21be7709.herokuapp.com/

Repo: https://github.com/FlashDrag/boutique-ado

User Stories

Epic: Viewing and Navigation

• As a Shopper, I want to be able to view a list of products so that I can select some to purchase
• As a Shopper, I want to be able to view the details of a product so that I can identify the price, description, product rating, image and available sizes
• As a Shopper, I want to be able to quickly identify deals, clearance items and special offers so that I can take advantage of special savings on products I'd like to purchase
• As a Shopper, I want to be able to easily view the total of my purchases at any time so that I can avoid spending too much

Epic: Registration and User Accounts

• As a Shopper, I want to be able to easily register for an account so that I can have a personal account and be able to view my profile
• As a Shopper, I want to be able to easily login or logout so that I can access my personal account information
• As a Shopper, I want to be able to easily recover my password in case I forget it so that I can recover access to my account
• As a Shopper, I want to be able to receive an email confirmation after registering so that I can verify that my account registration was successful
• As a Shopper, I want to be able to have a personalized user profile so that I can view my personal order history and order confirmations, and save my payment information

Epic: Sorting and Searching

• As a Site User, I want to be able to sort the list of available products so that I can easily identify the best-rated, best-priced and categorically sorted products
• As a Shopper, I want to be able to sort a specific category of products so that I can find the best-priced or best-rated product in a specific category or sort the products in that category by name
• As a Shopper, I want to be able to sort multiple categories of products simultaneously so that I can find the best-priced or best-rated product across broad categories, such as "clothing" or "homeware"
• As a Shopper, I want to be able to search for a product by name or description so that I can find a specific product I'd like to purchase
• As a Shopper, I want to be able to easily see what I've searched for and the number of results so that I can quickly decide whether the product I want is available

Epic: Purchasing and Checkout

• As a Shopper, I want to be able to easily select the size and quantity of a product when purchasing it, so that I can ensure I don't accidentally select the wrong product, size or quantity
• As a Shopper, I want to be able to view items in my bag to be purchased, so that I can identify the total cost of my purchase and all items I will receive
• As a Shopper, I want to be able to adjust the quantity of individual items in my bag, so that I can easily make changes to my purchase before checkout
• As a Shopper, I want to be able to easily enter my payment information so that I can check out quickly and with no hassles
• As a Shopper, I want to be able to feel my personal and payment information is safe and secure so that I can confidently provide the needed information to make a purchase
• As a Shopper, I want to be able to view an order confirmation after checkout, so that I can verify I haven't made any mistakes
• As a Shopper, I want to be able to receive an email confirmation after checking out, so that I can keep the confirmation of what I've purchased for my records

Epic: Admin and Store Management

• As a Store Owner, I want to be able to add a product to the store, so that I can sell it to customers.
• As a Store Owner, I want to be able to edit/update a product, so that I can change the price, description, image or any other attribute of the product.
• As a Store Owner, I want to be able to delete a product, so that I can remove it from the store.

Features

User Authentication and Authorization

• User Registration
• User login with email confirmation(temporarily disabled)
• User logout

User Profile

• Order history
• Order email confirmation
• Save delivery information

Store Management

• Add product
• Edit product
• Delete product

List of Products

• All products
• Clothing products
• Homeware products
• Special offers

Product Details

• Product category(clickable)
• Product price
• Product rating
• Product image
• Product Description
• Product sizes
• Product Quantity
• Add to bag button

Search

• Search by keywords in the product name and description

Sorting

• Sort by price (ascending and descending)
• Sort by rating (ascending and descending)
• Sort by name (ascending and descending)
• Sort by category (ascending and descending)

Shopping Bag

• Add product to bag
• Remove a product from the bag
• View bag
• View and adjust the number of each product in the bag
• View a subtotal cost of each product in the bag
• Delivery calculation
• Grand total

Checkout (Stripe)

• Checkout form with delivery information
• Card payment

Technologies Used

• Python 3.11
• Django 3.2
• Django Allauth
• Bootstrap 4.4
• jQuery 3.4

Payment (Stripe)

Python Django - Build a user, payment and order management system https://www.youtube.com/watch?v=ncsCnC3Ynlw&t=11263s

Webhooks configuration

• Go to Stripe Developer Dashboard > Webhooks
• Add endpoint:
  • Endpoint URL: https://boutique-ecommerce-c39a21be7709.herokuapp.com/checkout/wh
  • Select all events
  • Add endpoint
• Copy the Signing secret
• Add the Signing secret to Heroku Config Vars
  • STRIPE_WH_SECRET

Test card numbers for Stripe

https://stripe.com/docs/testing?testing-method=card-numbers

• Successful payment

4242424242424242

• Declined payments

• 4000000000000002 - card declined

• 4000000000009995 - insufficient funds

• 4000000000009987 - lost card

• 4000000000009979 - stolen card

• 3D Secure

4000002500003155 - 3D Secure authentication required

Static Files

AWS S3 Setup

• Create a new bucket in AWS S3:

  • Bucket name: boutique-ado
  • Region: Choose the region closest to you
  • Object ownership:
    • ACLs enabled
    • Bucket owner preferred
  • Uncheck Block all public access
  • Check 'I acknowledge ... becoming public'.
  • Create bucket

• Bucket settings:

  • Properties:
    • Static website hosting:
      • Enable
      • Index document: index.html
      • Error document: error.html
  • Permissions:
    • CORS configuration (Paste the following code):

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

    • Bucket policy:
      • Policy generator:
        • Select type of policy: S3 Bucket Policy
        • Principal: *
        • Actions: GetObject
        • Amazon Resource Name (ARN): Bucket ARN - Get from the Bucket policy editor arn:aws:s3:::boutique-ecommerce
        • Add statement
        • Generate policy
        • Copy the policy
        • Paste the policy in the Bucket policy editor
        • Add / to the end of the Resource key in the statement*
        • Save changes
    • Access control list:
      • Everyone:
        • Check List

• IAM:

  • Groups
    • Create a new group without any policies attached to it yet.
    • Create a policy:

      • Service: S3

      • Select JSON

      • Select Import policy from Actions

      • Find AmazonS3FullAccess typing S3 in the search bar

      • Import

      • Go to S3 bucket settings (don't close the policy editor of the IAM group)

      • Copy the Bucket ARN from the Bucket policy editor

      • Paste the Bucket ARN in the Resource key of the policy:

        "Resource": [
            "arn:aws:s3:::boutique-ecommerce",
            "arn:aws:s3:::boutique-ecommerce/*"
        ]
        

      • Review policy

      • Give the policy a name: boutique-ecommerce-policy

      • Add description: Access to boutique-ecommerce S3 bucket for static files

    • Attach the policy to the group:
      • Go to the group > Permissions
      • Attach policy
      • Search for the policy name: boutique-ecommerce-policy
      • Attach policy
  • Users
    • Create a new user:
      • User name: boutique-ecommerce-staticfiles-user
      • Access type: Programmatic access
      • Next: Permissions
      • Add user to group:
        • Select the group: boutique-ecommerce-group
      • Create user
    • Retrieve credentials:
      • Go to IAM and select 'Users'
      • Select the user for whom you wish to create a CSV file.
      • Select the 'Security Credentials' tab
      • Scroll to 'Access Keys' and click 'Create access key'
      • Select 'Application running outside AWS', and click next
      • On the next screen, you can leave the 'Description tag value' blank. Click 'Create Access Key'
      • Click the 'Download .csv file' button or copy the 'Access Key ID' and 'Secret Access Key' values into a secure location.

Connecting Django to S3

• Install boto3 and django-storages using pip:

  pip install boto3 django-storages
  

• Freeze the requirements
• Add 'storages' to INSTALLED_APPS in settings.py
• Add AWS S3 settings to the settings.py file (see settings.py)
• Create a file called custom_storages.py in the root directory of the project
• Add credentials to Heroku Config Vars:
  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY
  • AWS_STORAGE_BUCKET_NAME

Uploading static and media files to S3

• Delete DISABLE_COLLECTSTATIC from Heroku Config Vars and deploy the app

It automatically uploads all static files to S3 using python3 manage.py collectstatic

• Create a folder called media in the S3 bucket
• Manually upload all media files to the media folder in the S3 bucket
• Set Grand public-read access in the Access control list(ACL) of the media folder
• Upload