Winos Den

To easily navigate please click the the small headings selector to the top left of this document.

Overview

Winos Den has a strong standing reputation with it's customers and with this has managed to become the market leader for fine wines within it's local area. With the turbulent times over the past couple years the management have taken the decision to increase their presence online, opting to grow the business via the forms of E-commerce rather than to open a second outlet.

With the move to push Winos Den online the business will benefit largely from the marketing outreach with promoting both the physical outlet and online store. An aggressive marketing strategy will be outlined below providing the business with the avenues needed to hit the ground running once the site goes live.

User Experience (UX)

Target Audience

With Winos Den already being the market leader for fine wines in it's geographical area the idea to move online comes at zero loss. This move will allow the business to focus not just on it's local captive audience but to promote the business online to larger audiences and not be concerned about wasting money on potential customers who fall outside the local catchment area.

The marketing strategy will push the boundaries on your typical audience and with the use of social media be able to push the business to audiences across the UK. The wine industry has a very large consumer base with any person over the age of 18 in the UK being a potential customer, thus targeting smaller groups can have it's pros a cons. When looking at age ranges, people over the age of 65 comprised the largest group of wine consumers, yet anyone can be a potential customer as wine is one of the most common gifts.

User Stories

Following a strategy meeting with the management of Winos Den we created a base of user stories to cover most scenarios that may be encountered for all levels of site users. Below is some examples of the user stories we came up with during the meeting. User stories can be viewed by clicking the link at the bottom of this section.

For the purpose of development process these user stories have also been added to a kanban board. This is to aid in an agile workflow and streamline the development process as much as possible.

User story kanban board can be viewed Here: LINK

Strategy

Working closely with Winos Den We aim to create a sleek and interactive platform which will be fully responsive and and allow for great user interaction (via CRUD) by allowing users to leave reviews, create carts and complete orders.

Our Ideal user: Someone who has a passion for fine or is in the market for purchasing wine.

Project Goal: Provide a platform where users can easily navigate and purchase the products they require, Make this process as easy and effortless as possible to prompt users to want to return.

Site Users Needs

• To be able to view the site on any device.
• To be able to navigate the site with ease.
• To easily register an account.
• To be able to easily add items to a cart and checkout
• To be able to log in and out.
• To be able to update personal info.

Project Objectives:

• Create a fully responsive web app.
• Allow for safe payments via Stripe
• Create a stylish and easy to navigate web app.
• Create a strong marketing strategy for instant traffic.
• Streamline the buying process to keep customers captive.

Scope

Provided that the site is a success and the sales figures keep the business owners happy, the site will be able to flow through multiple iterations to keep the site interesting and moving forward with the times. With the first iteration of the Winos Den website we are aiming to launch quick so we will strongly focus on getting an MVP(minimum viable product) out as soon as possible. Even though we are aiming to launch with an MVP we know that any flaws/bugs could have a negative impact on potential customers so thorough testing will be carried out.

MVP release:

• User account creation and management
• Payment gateway - Stripe
• Fully responsive
• Product creation, reading, editing and deleting.
• Users can store billing information
• Anonymous review submission for newsletter

Future Releases/Updates:

• Stock management for Admin.
• More in depth user profile customisation e.g. profile picture, rating scores,
• Loyalty scheme for returning customer.
• Sorting products within list view.
• Page pagination.
• featured products.

Additional considerations.

• More scope on user profiles, allow for loyalty schemes and more customisation
• REview/rating ability; provide the ability for registered users to review products and leave a rating (Consider restricting to items that user has purchased.).
• automate emails for new featured products.
• coupons based on users spend over time.

Structure

As the platform will be user driven, the structure is based on allowing users to be drawn to products and offers. Users will be prompted with messages when a hard action has been made e.g. "successfully logged in", "Order processed successfully", "You have logged out".

There will be a link in the footer to navigate users to a newsletter sign up.

• Header

  • Winos Den Logo
  • Desktop and mobile navigation
  • User Access
  • Search Bar.

• Messages

  • Display success messages for users
  • Messages based on users actions

• Main content

  • provided in a block content this will be the Majority of site content.

• Footer

  • Winos Den Copyright.
  • Links to Developer.
  • News Letter Sign up.

Skeleton

Wireframes

As an unwritten rule with all of my design work I opt for a mobile first approach, All of our initial planning with the management at winos den was based on designing the site in mobile first as we both believe that the majority of the consumer base will be mobile/tablet users. From this it is quite simple to extend the site to look great in desktop view also. With the bases of this site being to provide an MVP first. All block content elements will be centered on page. utilizing 100% page width on smaller screens and 50% width on larger screens, this allows for a very streamline approach to styling the majority of the site, with only small edits being made to the block content on each page.

WireFrames

Database

Database structure and planning can be found here: LINK

Surface

Typography

To keep the site in running with winos den's house style the font we will be using is Lora, with Serif as a backup,

Lora will be imported into the CSS from Google fonts. We will also include the 500, 600 and 700 weights to cover a nice selection of needs.

Lora - GoogleFonts

Colours

For Winos den we will be keeping inline with their current house style using the following colours:

• raisin-black: #272727ff;
• old-gold: #b3a400ff;
• ivory: #f1f7e6ff;
• viridian-green: #21a0a0ff;
• skobeloff: #046865ff;

Business Model

With the wine industry being so large our audience isn't just the general public but also the hospitality and catering industry. Due to this our business model crosses the border of both B2B(business to business) and B2C (business to customer). We will sell directly to both.

Marketing

With winos den already having a strong market share in its local catchment area due to a long trading history and word of moth, the move online will consist of two marketing avenues, social media and newsletters. Social media will drive the traffic to the site and the newsletter is something we can utilise to keep users coming back.

Social media has always been a very strong avenue for businesses to grow and with this we will focus mainly on Facebook and Instagram with the potential to progress into other social networks like Pinterest where we can target a another audience and also linkedin to target those who WFH and spend a lot of time on the site for work purposes.

Facebook

Here is an example of the facebook page we will be using. Click to go to example Facebook page

Newsletter

Our newsletter will appear in a variety of places across the site and will always have a perma location in the site footer.

Prompting people to sign up for the newsletter when they initially land on the site will be out avenue for promoting the newsletter.

Once a user is signed up they will receive weekly wine updates filled with tasting notes, whats hot and weekly offers that WD are offering.

SEO

SEO = search engine optimization

Providing that all sites compete for that golden spot on search engines making the site unique and following all the golden rules of SEO will help to promote the site and keep its ranking healthy.

Some key points that will be focused on are as follows:

• Linking site with google places
• Semantic HTML
• use of meta tags
• building back links via news letters, social media posts.
• correct usage of robots.txt file.
• up to date sitemap.xml

Search engine crawlers rank pages on many factors and keeping everything we do as professional and complete as possible will keep the site in good shape. Maintaining the site and fixing any broken links that may appear over time will also provide us with a better ranking. Page ranking doesn't happen over night and this will take some time but with the correct growth, traffic and management the site will slowly appear closer to that top spot.

Technologies

• Vs Code
• Git
• Bash
• GitHub
• HTML5
• CSS3
• Python
• JavaScript
• jQuery
• Heroku
• Stripe

When working on python projects I work within a virtual env and track all my packages in a requirements.txt file.

Below is a list of all the python packages used for PCR and there version types.:

• asgiref==3.5.2
• boto3==1.24.38
• botocore==1.27.38
• certifi==2022.6.15
• cffi==1.15.1
• charset-normalizer==2.1.0
• cryptography==37.0.4
• defusedxml==0.7.1
• dj-database-url==0.5.0
• Django==3.2.14 <<<<<<<< - Specific version to avoid security issues.
• django-allauth==0.51.0
• django-countries==7.2.1
• django-crispy-forms==1.14.0
• django-environ==0.9.0
• django-heroku==0.3.1
• django-storages==1.12.3
• gunicorn==20.1.0
• idna==3.3
• jmespath==1.0.1
• oauthlib==3.2.0
• Pillow==9.2.0
• psycopg2==2.9.3
• pycparser==2.21
• PyJWT==2.4.0
• python-dateutil==2.8.2
• python3-openid==3.2.0
• pytz==2022.1
• requests==2.28.1
• requests-oauthlib==1.3.1
• s3transfer==0.6.0
• six==1.16.0
• sqlparse==0.4.2
• stripe==3.5.0
• typing-extensions==4.3.0
• whitenoise==6.2.0
• urllib3==1.26.10

Deployment

This project will be deployed to Heroku using the following outlined steps:

Setting up Heroku Deployment

1. Navigate to Heroku.
2. Create an account or log in.
   • If creating an account select Python as the Primary development language
3. Click the New button found top right of page and select Create New App from the dropdown menu.
4. Provide an app name this has to be unique
5. Select your region.
6. Click Create App
7. Navigate to the Deploy tab
8. Scroll down the page until you come across Deployment Method
9. Click GitHub
   • Connect your GitHub account if this is your first time.
10. Search for your projects GitHub Repository and click connect

Automatic Deployment

When it comes to deployment there are two options Automatic Deployment or Manual Deployment.

For this project I have opted for Automatic Deployment as this allows for Heroku to re run the build and update my deployment every time I push code to my GitHub Repository.

To activate this:

1. Navigate to the Deploy Tab
2. Scroll down until you come across Automatic Deployment
3. Ensure that the correct branch is selected.
   • In Most cases this will be either main or master
   • In my case it will be main
4. Click Enable Automatic Deploys

The project is now deployed and will automatically re-run the build and deploy every time I push code to GitHub.

Amazon AWS S3 Deployment

AWS S3 will be used to host our static and media files for this project.

1. navigate to AWS and create a free account.
2. Log in and type "S3" into the search bar and navigate there.
3. Click Create bucket, name it and select the region that makes the most sense to you.
4. Under "Object ownership" ensure to select "ACLs enabled.
5. Ensure that "Block all public access" is NOT checked as we need to allow access to our files.
6. now navigate to to the "properties" section within your newly created bucket.
7. Under "Static website hosting" click edit and make sure to change static hosting to "enabled".
8. Within the "permissions" tab select the CORS section and select edit, within here you need to paste the following snippet:

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

9. navigate to the bucket policy section. select edit > policy generator. Select s3 bucket policy and and enter "*" within all principles. select "get object" from the actions menu. In the previous tab you can copy the ARN number as you will need to paste this exact snippet into the ARN field.
10. Now click add statement and generate policy, You can now copy the generated policy and paste it into the bucket policy editor and add "/*" to the end of the resource key.
11. navigate to ACL and click edit. Enabled lists next to "everyone" you will be prompted with a warning, enable and and click save.

IAM allows for acces to S3 and managing our storage via django.

1. navigate to IAM(you may need to search for this at the top)
2. select "user groups" in the side bar.
3. give your group a name I named mine "manage-winos-den" and click create group.
4. Now select polices and create policy.
5. Select JSON and click "import managed policy" here you need to search for "AmazonS3FullAccess" and click import.
6. navigate to your S3 bucket and copy the ARN number again.
7. now update the resource section of your policy to look something like:

"Resource": [
    "ARN_HERE",
    "ARN_HERE/*",
]

8. click next x2 and name the policy and provide a small description. Policy created.
9. Select "User Groups" and select the group you have just created. under the permissions tab, select add permission > attach policy and select the policy you just made and select add permissions.
10. Select users from the side nav and click add user, name the user and ensure to check "programmatic access" and click next.
11. select the group with the policy attached and then next > next > create user.
12. Download the provided CSV this contains the credentials for your user, store this somewhere safe!

Now we need to connect AWS with our Django project.

1. install packages and freeze to requirements.txt

pip install boto3 django-storages

pip freeze > requirements.txt

2. Add "storages" to your INSTALLED_APPS.
3. ADD AWS variables to settings.py. and access your environmental variables with your chosen method.

if 'USE_AWS' in env:
    # Cache control.
    AWS_S3_OBJECT_PARAMETERS = {
        'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
        'CacheControl': 'max-age=94608000',
    }

    # Amazon S3 Bucket config.
    AWS_STORAGE_BUCKET_NAME = 'your bucket name'
    AWS_S3_REGION_NAME = 'eu-west-2'
    AWS_ACCESS_KEY_ID = env('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = env('AWS_SECRET_ACCESS_KEY')
    AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

    # static and media files.
    STATICFILES_STORAGE = 'custom_storages.StaticStorage'
    STATICFILES_LOCATION = 'static'
    DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
    MEDIAFILES_LOCATION = 'media'

    # override static and meia urls in production
    STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
    MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

3. within heroku add a key value to the config vars of "USE_AWS = True"
4. AWS_ACCESS_KEY api is located in the CSV you downloaded earlier from IAM.
5. Remove DISABLE_COLLECTSTATIC.
6. create a file named "custom_storages.py" in the root of tour directory.

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

7. Navigate to yourr S3 bucket and click create folder, name it media.
8. upload the contents of your media folder. so that your local and AWS media folders have the same contents.
9. Be sure to grant public access under the permissions option.
10. Your static and media files and now hosted via AWS.

Stripe

Stripe is a very well know online payment handler, It provides a very customizable and secure method for processing payments.

Following stripes own walkthrough guide (FOUND HERE) provides a very streamline method for installing stripe within your application, they provide guides and tidbits for a variety of coding languages.

Once stripe is enabled we need to set up webhooks to listen and catch requests/payments.

1. Navigate to the "Developers" tab located in the top right of the Stripe window.
2. Down the left hand side click on "webhooks" and select "add endpoint"
3. here you will need to provide a url, this consists of your app url + checkout/wh in our case

https://winos-den.herokuapp.com/checkout/wh

4. now you want to enable all events, so thats the WH is listening out for all events.
5. within your newly created webhook, click on "Reveal" below "signing secret" this will provide your secret api copy iy.
6. We now need to set the Stripe related variables within our settings and heroku config vars.

STRIPE_WH_SECRET = "This is your webhook signing secret"
STRIPE_PUBLIC_KEY = "Stripe publishable key, found within api keys"
STRIPE_SECRET_KEY = "Stripe secret key, found within api keys"

7. depending on how your eviron is set up you will need to access these variables within your settings.py file. #
8. In my case using a .env file they look something like this.

STRIPE_WH_SECRET = env('STRIPE_WH_SECRET')
STRIPE_PUBLIC_KEY = env('STRIPE_PUBLIC_KEY')
STRIPE_SECRET_KEY = env('STRIPE_SECRET_KEY')

9. this allows me to access the keys without them being open to the public.
10. Keeping api keys can be very sensitive and can allow the wrong people to access your accounts so they want to stay hidden and should not be shared.

Environment Variables

Within my local files my Environmental Variables are set within a .env file, the details of this file are confidential and are added to the .gitignore file so that they aren't publicly available. But because these files are not pushed to GitHub we need to enable the same Variables within Heroku for the application to run successfully. These can be set under the Config vars, found within the apps settings, and providing the same Key=Value pairs that you provide to the .env e.g. (SECRET_KEY = 12345)

Credits

Chris(AKA ckz8780) @ CI, This project was heavily inspired by the Boutique Ado Project and a large section of this applications functionality is taken from there. 

The CI community and staff for providing an amazing knowledge base.