An E-Commerce Site which facilitates the sale of Art Work products created by by Sarah Rae. The site promotes the digital art work of Sarah Rae.
This is fifth project contribution to the Code Institute Full Stack Diploma. It is inspired by and is closely modelled on the Code Institute E-Commerce Walkthrough project 'Boutique Ado'. Appropriate accreditation is hereby given for any similarities between this project and the Code Institute E-Commerce Walkthrough project 'Boutique Ado'.
This site presents the Artwork of Sarah Rae and facilitate the sale of this artwork though an e-commerce website.
- Purchase selected artwork products using Stripe as an industry standard purchasing method.
- Create a customer account to facilitate purchases and view order history
- View different categories of available artwork products
- View artwork product detail, with descriptions of the product.
- View digital art work in a gallery
- View details of a particular digital artwork
- Sign up to a Newsletter using MailChimp
- Access Sarah Rae’s Social Media sites
- Be updated on the progress of their order, from placement to delivery.
- Indicate ‘liked’ artworks
- Commission bespoke artwork
- Sell her artworks to customers through the e-commerce site
- Promote her internet presence
- Develop a community of people interested her work through the circulation of a Newsletter
- Negotiate commissioned art work.
- Analyse and manage her stock levels .
- Track Order progress from placement to delivery.
- Keep Customers informed of the progress of their orders.
Commissions are not implemented in the MVP. A commissions business model will describe the services offered, the consultation process, the pricing structure and any terms and conditions.
- Initiate dialogue with Sarah Rae regarding the commissioning of bespoke Artwork
- Conduct dialogue with prospective commissioners with a view to developing a commissioned Artwork Service.
User Stories were generated through discussion with Sarah Rae, and were used to inform the strategy the UXD. User Stories summarising project objectives may be viewed here:
The following features were included in the MVP and can be viewed in the MVP Sprint here:
- Products and Digital Artworks can be added by the site owner
- Products and Digital Art Works can be edited by the site owner
- Products and Digital Art Works can be deleted by the site owner
- Digital Art Works selected by the Site Owner are displayed in a carousel on the landing page
- Digital Art works are displayed in the Gallery area of the site
- Shoppers may add products to be purchased to their basket
- Shoppers may view basket items
- Shoppers may view a summary of basket items
- Shoppers may select and edit the quantity of products they wish to purchase
- Shoppers may remove items from their basket before checkout
- Shoppers will receive a confirmation email of purchases, summarising their order and also containing site contact details
- Shoppers may securely submit payment details to Stripe for purchase processing
- Shoppers are given feedback on the site for a successfully (or otherwise) processed purchase
The Django Security package 'Allauth' was used to manage account security and registration.
- Users may register with the site
- Users may log in and out of the the site
- Users may recover lost passwords
- Users are sent a confirmation of registration by email
- User role is authenticated using username, email and password.
- Passwords are encrypted in all areas of the site and cannot be read directly
- Passwords may be changes by the registered user and the super-user.
- Access to areas and features of the site is restricted by role as follows:
- Anonymous users may view the Shop and Gallery and make purchases
- Registered Shoppers may have their shipping details saved and have them populate future purchases for convenience
- Registered Shoppers may save and view their order history
- Registered Shoppers may view their profile
- Registered Shoppers may sign up for and be sent a Newsletter
- The Site Owner may add, edit and delete products and digital art works
- The Site Owner, as super-user, my access and manage the Admin section of the site
- The site user may view a list of products sorted by category
- The site user may search products by category
- The site user may search the shop using key words in the search bar
- The site user is shown a summary of their search results
- The site user may sort the list of products by name, price and category (Ascending and descending).
- A carousel of digital art works is displayed the site landing page
- Digital artworks are viewable in the Gallery
- Digital Artworks are stored securely on the site database
- Details of a particular digital artwork can be viewed when that item is clicked
- Products are viewed in the shop
- Details regarding a particular product are viewed by clicking on the item
- Different versions of a particular product are viewable for purchase
- A digital artwork my be zoomed in for detailed inspection
- Social media links for the site owner are available in the footer of each page and open in a new window
- The site user may easily navigate the site using the nav-bar at the top of each page
- The site user is given feedback for every interaction with the site.
- Commissions: A customer may enter into discussion with the site owner regarding the commissioning of art work
- Order Processing and Delivery: Order status tracking and delivery tracking will be provided to the customer and the site owner.
- Stock Management: Stock management will be provided to the site owner.
- Customer Product Interest: Customers may express interest in products when they are out of stock
Back to Top The access to areas and features within the site is dependant on the user role. The following Site Maps show the differences:
Wire frames modelling the Skeleton phase of UXD were constructed in Balsamiq
- Index Hamburger m
- Index Hamburger Expanded m
- Index Search 1 m
- Index Search 2 m
- Index My Account m
- Sign In m
- Products m
- Category Selection m
- Products Sort m
- Products Detail m
- Product or Art Work new Window .
- Add to Bag Success! m
- Shopping Bag Empty m
- Shopping bar Items m
- Checkout 1 m
- Checkout 2 m
- Gallery m
- About Sarah-m
- Commissions m
- Product Management m
- Gallery Management m
- Index Hamburger t
- Index Hamburger Expanded t
- Index Search 1 t
- Index Search 2 t
- Index My Account t
- Sign In t
- Products t
- Category Selection t
- Sort t
- Product Detail t
- Product or Artwork New Window t
- Add to Bag Success t
- Shopping Bag Empty t
- Shopping Bag Items t
- Checkout 1 t
- Checkout 2 t
- Gallery t
- Commissions t
- About Sarah t
- My Account Menu t
- Product Management t
- Gallery Management t
- Shop Landing Menus d
- Shop Category Selection d
- Product Detail d
- Add to Bag Success! d
- Shopping Bag Empty d
- Shopping Bag Items d
- Checkout d
- Gallery d
- Product-ArtWork New Window d
- Commissions d
- About Sarah d
- My Account Menu
- Sign Up d
- Sign In d
- Product Management d
- Gallery Management d
Back to Top The colours, font style, logo and background image were derived from a mockup of the landing page for mobile made by Sarah Rae. The mockup can be viewed here
Agile development practices were used throughout the development of this project.
The GitHub platform was used to facilitate Agile Development:
- User stories were derived from discussions with Sarah Rae and notated as Github issues These user stories were refined from 'epic' to more specific user-stories.
- For some user stories, Predicted Project Effort was defined, with story points being allocated to some user stories.
- Issues were prioritised according to Moscow principles. Github Labels were used mark user stories accordingly.
- Must have: < 60% of total story points in iteration
- Should have: the rest
- Could have: 20% of total story points in iteration
- Won't have
Bugs were recorded as issues, and the progress towards resolution of these issues was tracked.
Some Tests were recorded as issues, and their results were tracked.
Information Radiators were used to monitor the progress of the project development.
- A Github Project was used to hold all user stories for processing and allocation in a Kanban Board. User stories were allocated to the Project and their progress tracked through the following stages:
- New Issue
- Backlog
- Ready
- In Progress
- In Review (Used when a branch pull-request was made)
- Done
- Github Milestones were used to define sprint content.
The GitHub Project Backlog was used to hold user stories and other issues which were not allocated to the current sprint.
- Sprints were defined using Github milestones to define development tasks needed to bring the project to Minimum Viable Product level. Other Github Milestones were used to hold user stories allocated to these sprints.
Initially Milestones were used to group related issues for development. Later the following 2 sprints were used:
- MVP (Issues for the project submission)
- Resubmission (Issues arising from the projects assessment and initial failure)
The purpose of the Sarah-Rae-Illustrations database is to hold data relating to the the sale of Products and display of Digital Art Works, by Sarah Rae.
- Product
- Category
- Orders
- OrderLineItem
- UserProfile
- DigitalArtWork
- Stock
- ProcessingStatus
The entities for this project have the following relationships and attributes:
The Models Schemas for this project are:
The models were created from least dependant to most dependant.
Example products and digital art works, with associated data were created for the purpose of development.
For Production, the Site Owner, Sarah Rae will load her own product images, and digital artworks with associated data.
- Python
- HTML5
- CSS
- Javascript
- Bootstrap For this project the older Bootstrap 4 version was used. Documentation for v4 is found here
- JQuery The minified version of JQuery was used for this project.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
- Allauth v 0.41.0 which is compatible with the project version of Django.
pip3 install django-allauth==0.41.0 - django-crispy-forms used to format forms
- Django 3.2 LTS (Long Term Support version)
The project code was stored remotely in a Github repository.
- A gitHub repository was created using a Code Institute template. This would ensure that all initial code eg Python3 was made available in the GitPod workspace.
Issues were used to identify and track the development and implementation of discrete elements of the project.
Issue templates were created to facilitate the creation of project issues. Templates for the following types of project issue were used:
- User Stories
- Bugs
- Tests
Issues were allocated labels. These were useful to easily identify:
- The priority of an issues within a sprint (MOSCOW)
- The category of user story and is sequence in the development process.
- The type of user to which the issue related
Milestones were created to mark stages in development. The main ones which were eventually used were:
- MVP (initial project submission)
- Resubmission (of project after initial failure)
A github project was created as an Information Radiator and project management tool. The sections of the project were:
- New
- Backlog
- Ready
- In Progress
- In Review
- Done As issues were created, they were added to the New section. They were then moved to the Backlog section for storage and processing. Epic issues were broken down into as many smaller issues as was appropriate.
For each issue the following were defined:
- Acceptance Criteria: Identifiable outcomes upon which the Site owner and developer could agree were evident
- Tasks needs to make effective the resolution of the issue.
Once an issue was prepared it was moved the the 'Ready' section of the Project board.
One or two issues were moved to the 'In Progress' section of the board whilst they were developed.
Once an issue was completed, it was closed and moved to the 'Done' section of the board. The process of closing and moving issues was automated when a branch addressing these issues was merged with the main branch.
Back to Top Code was developed locally in a browser using a GitPod Workspace. The template used to create the GitHu repository ensured that all the necessary software was preloaded in the GitPod workspace to facility the start of development. A browser based version of VS Code was used with this workspace to write the code.
Version control was effected using Git.
Incremental snapshots were taken as git commits to recored the stages of project development.
Once a commit was made locally, the committed code and the commit description was 'pushed' to the github repository. In this way, an exact copy of each of the commits (code snapshots) existed both on the local computer (via the browser to the Gitpod workspace) and in the github repository.
Issues created in GitHub were linked to commits to facilitate the tracking of the progress of a particular user story, bug-fix or other issue. This tracking proved a powerful tool in managing and monitoring the development of the project.
Latterly, new branches were created away from the main branch. A particular branch was used to address a unique issue or collection of related issues. Code developed in these branches was separate from code in the main branch.
Once code in a branch had been sufficiently developed to resolve the issues assigned to it, a pull-request was made. This began the process of merging the branch being developed into the main (deployed) branch.
For the purpose of this project the creation and merging of branches was unnecessary. Branch creation and merging was used later on in the project for practice purposes. Once a pull-request was made, and tests, discussions and reviews had been conducted, and the pull-request approved, the branch was then merged with the main branch. All discrete commits were retained so that a record for the the development progress could be shown. Upon successful
Development closely matched the Code Institute walkthrough eCommerce project 'Boutique Ado' with appropriate adjustments and changes being made to match the requirements of this project. The following stages of development were used as initial Github Milestones, matching the Boutique Ado Walkthrough chapter headings:
Issues associated with set up can be viewed here
The gitpod environment was updated with additional requirements as and when they were needed in development. They were downloaded them into the environment via the terminal, and the requirements.txt file was updated to recored their addition to the using the following code:
pip3 freeze --local > requirements.txt
The requirements.txt file was used by Heroku to build each successive deployment of the project with the correct code dependancies.
The current requirements used can be viewed here
A Django project was created:
$ python3 django-admin startproject <project-name>
A Local sql database was automatically created
- Add the following to settings.py under 'installed apps'
if os.path.isfile('env.py'):
import env
- Generate a secure Django secret key here.
- Store this secret key in env.py
- Ensure that env.py is added to .gitignore to prevent environment variables being pushed to github and exposed to the public.
- Replace the insecure Django SECRET_KEY with the env.py SECRET_KEY
SECRET_KEY = os.environ.get('SECRET_KEY')
A superuser was created to access the django admin section of the site.
$ python3 manage.py createsuperuser
A username , email and password were provided, and this username was added to the django user model inside the project.
Apps were created as required using:
$ python3 manage.py startapp <app name>
The app was added to the list of installed apps in the settings.py file
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app-name',
]
As models were created and changed, the changes were recorded in a set of sequential django records called 'migrations' and then applied to the database models either locally or remotely.
The changes to the Django database were recorded by making migration records. First, a dry run was used to expose any errors in creating the records:
$ python3 manage.py makemigrations -- dry-run
Once all issues were resolved, migrations were actually made using:
$ python3 manage.py makemigrations
Changes to the database were made by applying the migrations.
The following command was used to simulate the application of migrations without actually making any changes. This identified any errors which might arise.
$ python3 manage.py migrate --plan
Once any issues were resolved, migrations were applied to the database using:
$ python3 manage.py migrate
The Allauth library and django.contrib.auth api were used to register user accounts in the django User model. When a user registers with the site, allauth requests a username, email and password. A request for verification is sent to the user's email, and upon confirmation , the user is registered. The password is accessible for a user is encrypted and not accessible anywhere in the font or back end. A passwords may be changed by the user or the superuser.
Roles may be defined in the administration section of the site, accessible by the superuser, and control access to certain parts of the site.
The login screen may be viewed here.
Issues relating to Registration & User Accounts may be viewed here
During development, the sending of emails was not possible. Sending emails was simulated by sending an email to the terminal using the following setting in settings.py
EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
A base template was used to provide consistent content throughout the site. The base template contains the header, navigation, content blocks and footer.
Boilerplate HTML was added to the base template.
An additional meta tag was added to the header for extensibility:
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% load static %}was added to the top to ensure that static files were accessible throughout the project Blocks were added to contain various types of code. All blocks were closed with the{% endblock %}tag.
{% block meta %}contained meta data{% block extra_css%}provided space for additional css on subsequent pages{% block corejs %}contains javascript for the project{% block extra_js %}provided space for additional js on subsequent pages{% block extra_title %}{% block extra_title %}{% endblock %}was included in the title tag
{% block page_header %}provided space for additional header information on subsequent pages{% block content %}provided space for dedicated content on subsequent pages{% block postloadjs %}provided space for additional js on subsequent pages
To enable toasts (see later) to function on all pages, the toast js was loaded at the end of the base template.
{% block postloadjs %}
<script>
$('.toast').toast('show');
</script>
{% endblock %}
This ensured that the Toast JS was always loaded when other js was also needed to be loaded.
All pages of the site were built upon this base template by adding the following code at the top of their html files:
{% extends "base.html" %}
At the foot of all subsequent pages which needed additional js, was the following tags were added:
{% block postloadjs %}
{{ block.super }}
.... additional js ....
{% endblock %}
Includes were used where an area of the site needed variations to the base template eg.
- Navigation for the Shop and Gallery.
- The responsive display for mobile devices was handled by a dedicated mobile include whilst the display for larger screens was handled by a different include.
The landing page for the site was design to invite the user into the site using a door background image. A carousel of selected digital artworks gives an immediate impression of the artwork to be found within. The Sarah Rae Illustrations brand logo is present on mobile and larger screens.
Issues relating to viewing and navigation may be viewed here.
The all areas of the site are accessible via the nav-bar, with the two main areas (Shop and Gallery) easily available in the mobile and larger screen size. The utility areas (Search, My Account, Shopping Bag) area accessed from the top line of the nav bar in both mobile and larger screens. The logo, when clicked, will redirect the user to the home page.
In the Shop and Gallery areas of the site, where products and digital art works are listed, the user may easily navigate to the top of the page by clicking on the 'back to top arrow'.
The footer has links to Sarah Rae's Facebook Buisness page and her Instagram page.
When the user hovers over a navigation feature of the page, it responsively changes colour indicating that an action is about to take place. Examples are:
- A drop-down menu item
- A button when hovered over.
- The logo when hovered over.
A list of products may be viewed on entry to the shop area of the site, and a detailed description of a particular product is obtained by clicking on it.
A list of Digital Art Works may be viewed on entry to the Gallery area of the site, and a detailed description of a particular art work is obtained by clicking on it.
Issues relating to product filtering, sorting and searching may be viewed here.
At the top of every page is a search bar. The user can enter any word or combination of words, and any products whose associated data (title, description, category, price etc) which match these keywords will be shown on the Shop main page.
Filtering can be a complex and difficult area. Django has a module "Q" to facilitate this. View the documentation here
The list of products in the shop may be sorted from the nav bar or in a more detailed way, from the shop page body. A variety of sort options are provided.
Products may be filtered by category.
Issues relating to Purchasing and Checkout can be viewed here
Products are added to the shopping cart by clicking on a product, selecting the quantity of a product, then clicking 'Add to Cart'.
An icon of the shopping cart is shown on every page. An empty cart shows '0 Items'. When the user has items in their shopping cart, the cart icon changes colour and shows the number of items in the cart.
Shopping cart info was made available throughout the site using a context.
'cart.contexts.cart_contents', was added to settings.py in the Templates - Context processors list.
The Shopping cart shows a list of products to be purchased, with product image, description, unit price, quantity and subtotal for each product. The quantity of a product can be updated, and a product can be removed from the cart.
When the user is reaches the checkout area, a number of features are presented:
- The user may return to the shopping cart to make changes before committing to a purchase.
- A summary of the items to be purchased is presented, with the sub-total and total price clearly shown.
- If the user is not logged in, the options to create and account, or log-in are offered .
- If the user is logged in, the user is invited to save shipping details in their profile to facilitate quicker future purchases.
Payment is securely handled using Stripe.
To access the Stripe API an account needs to be set up, and the Public and Secret keys obtained. Whilst in development, the Stripe API can be used in Test Mode. The public and secret keys set this mode. In test mode, all workflows (purchases) are simulated but not actually made. In production, Stripe is set for production and the public and secret keys are generated accordingly.
In this app, the stripe 'Payment Element' was used in contrast to the more outdated 'Card element' used in the Boutique Ado walkthrough. Since the integration of these elements into the app is significantly different, the fundamental payment , shipping details and order management architecture had to be reworked for this project compared to the Boutique Ado Walkthrough project. This was not entirely successful in this version of the app, and there remain a number of outstanding issues which render the app less than satisfactory. Purchases are able to be made successfully in this version, but an efficient integration was not achieved.
- Webhook are active but not used
- Shipping data is added to the Payment Element on checkout, and not via the User Profile.
- The Payment element does not pre-populate with user profile shipping data
- A Session Variable is used to indicate that the user would like to store their shipping details for future use, rather than this being included in the Stripe Payment Element data.
Future versions will properly integrate with Stripe by including the following:
- A stripe product will be defined for each product on the site
- A stripe price will be allocated to each product
- Stripe analytics will thus be made available to the Site Owner.
When Stripe returns a response confirming that payment was successful, the Order Success page is shown. This contains a summary of the order, including the user shipping details, and user email, the order id. and the order details. The user is advised that a confirmation email is will be sent to the user's email address.
Feedback is given to the user throughout the site when actions or events take place. These are made using the django messaging framework, and including these within Bootstrap toasts.
Django makes it easy to send messages with a variety of status levels, from the backend to the front end for the application. The messages can by handled in different ways according to their status. eg. A warning status massage could be displayed in red, and a success message displayed in green etc.
To access the messaging framework add this to views.py:
from django.contrib import messages
The following was added to settings.py to store messages:
MESSAGES_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'
Toasts were used to provided a positive user experience when receiving site feedback with django messages.
Bootstrap toasts are 'pop-up' boxes which display information for particular events and whose behaviour and appearance can be customised.
An example of a toast may be viewed here.
JS for a toast is found at the foot of the base.html template:
<script>$('.toast').toast('show');</script>
The html for the success toast may be viewed here.
Registered Users have a User Profile. This is accessed via the main nav-bar.
The 'My Profile' page shows the stored shipping details for the user, which may be edited by the User, and a summary of their order history.
If the user clicks on a particular order number, the details for that order are displayed. A toast with a message status of 'information' (blue) is displayed to the user in this case.
Issues relating to Admin and store management may be viewed here
The Site Owner may administer the site in various ways. The 'My Account' Nav-bar menu allows the manager to add new products and digital art works, and provides access to the django admin area..
Signals were used to ensure that each time save or delete operation occurred, other administration tasks could also be carried out. The signals.py file may be viewed here. This was used in the profiles.models.create_or_update_user_profile
@receiver(post_save, sender=User)
def create_or_update_user_profile(sender, instance, created, **kwargs):
"""
Create or update the user profile
"""
if created:
UserProfile.objects.create(user=instance)
# Existing users: just save the profile
instance.userprofile.save()
Full CRUD functionality is made available to the site owner. They may Create, Read, Update and Destroy products and digital art works.
- New products can be added by the site owner using an empty product form
- New digital art works can be added by the site owner using an empty digital art work form.
When the site owner clicks on a particular product or digital art work, the option to edit or delete that product or digital art work is offered. When the option to edit is clicked, the form for that product or digital art work is presented for editing.
The django email engine is used for the following tasks:
- Email authentication on registering
- Order confirmation The following settings were used in settings.py to facilitate the sending of emails:
if 'DEVELOPMENT' in os.environ:
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
DEFAULT_FROM_EMAIL = '[email protected]'
else:
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = os.environ.get('EMAIL_HOST_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_HOST_PASS')
DEFAULT_FROM_EMAIL = os.environ.get('EMAIL_HOST_USER')
A newsletter app was created in Django to manage the Newsletter signup process. A signup-page was created , with associated views and urls. The Mailchimp service provider was to send out a Newsletter. Custom signup forms were created at the Mailchimp website. Embedded signup code was generated. Navigation to the newsletter signup area was added.
A user may sign up to the MailChimp newsletter. The site owner can then send newsletters to these users. The site owner can use the extensive analytic tools to examine customer data.
In order to prevent a Cross Site attack, every POST request sent by a Form needs to have a CSRF Token allocated to it.
Without this, Django will reject the POST request.
{% csrf_token %}
An example may be viewed on line 73 here.
On order to prevent a non-logged in user from accessing restricted areas, the login-required decorator was used.
eg. In shop.views.py:
from django.contrib.auth.decorators import login_required
and
@login_required
def add_product(request):
""" Add a product to the shop """
The project was deployed to Heroku in the initial stages of development in order to resolve early and fundamental deployment issues.
Heroku was used to deploy the django project backend.
- in ALLOWED_HOSTS add the heroku app name
ALLOWED_HOSTS = ['#sarah-rae-illustrations.herokuapp.com', 'localhost']
This tells Heroku that thew app will be displayed using the gunicorn webserver
- Create 'Procfile' at the top level, next to manage.py
web: gunicorn django_string_rota.wsgi
The app "#sarah-rae-illustrations" was created on Heroku by:
- Logging into Heroku
- Clicking on New
- Click "Create new app"
- Giving the app a unique name.
- "#sarah-rae-illustrations" was accepted as unique
- The region was chosen as:
- Europe
- The app was created:
- Click "Create app"
- In '#sarah-rae-illustrations'
- Click on 'Reveal Config Vars'
- Add all necessary KEYS and their corresponding VALUES (without "") from env.py
For initial deployment of a new , undeveloped django project with no Static files the build will fail on Heroku unless the DISABLE_COLLECTSTATICK config var is set:
DISABLE_COLLECTSTATICK:1
Once static files are introduced into the project, this variable can be removed.
When in development, Django can be set to DEBUG mode. If a server error is encountered, detailed information is provided to help debug the error. In production, this detailed internal information is a major security risk and must not be exposed. In deployment, Django must NOT be in DEBUG mode.
- Ensure that the DEBUG or DEVELOPMENT KEYS are NOT present in the Heroku CONFIG VARS.
- Push to git hub
- In Heroku, #sarah-rae-illustrations:
- Click on 'Deploy"
- Select GitHub Connect to Github
- Select the #sarah-rae-illustrations repository
- choose automatic deployment from 'Main' branch
ElephantSql was used for data storage.
The database "#sarah-rae-illustrations" was created on ElephantSQL by:
- Logging into ElephantSQL
- Click on "Create New Instance"
- The plan was named "#sarah-rae-illustrations"
- The plan type was " Tiny Turtle (Free)
- Click on "Select Region"
- "EU-West-1 (Ireland)" was selected by default
- Click on "Review"
- Click on "Create Instance"
-
create or locate the "env.py" file at the top directory in the workspace, at the same level as requirements.txt
-
ensure that "env.py" is added to .gitignore so that it's sensitive contents are not pushed to github.
-
In env.py
- Import the os library
- Add the DATABASE URL to the environment
import os os.environ["DATABASE_URL"] = "<copiedURL>"
where "copiedURL" is replaced by the copied elephantSQL "#sarah-rae-illustrations" URL
- Add the ElephantSql secret key to the environment
os.environ["SECRET_KEY"] = "my_super^secret@key"
- The following code was added to the settings.py file below PATH import:
import os
import dj_database_url
- The default database url variable (which would have connected Django to the internal db.sqlite3 database) can be used locally in development. If the remote ElephantSQL database url DATABASE_URL is present in the env.py file, the remote database is used. In this case, since DATABASE_URL is always present in the env.py file, ElephantSQL was always used.
if 'DATABASE_URL' in os.environ:
DATABASES = {
'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
}
else:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
$ python3 manage.py migrate
NB: If a different local and remote database are used, migrations need to be applied to both.
- To apply migrations to the local db.sqlite3 comment out
DATABASE_URLin env.py - To apply migrations to the remote db, ensure that
DATABASE_URLis available in env.py.
- In the dashboard for ElephantSQL (logged in)
- select "#sarah-rae-illustrations" instance
- on the left menu
- select BROWSER
- select 'Table queries'
- observe the dropdown is populated. This means that tables have been created by django in this database, and that the connection between django and the database is made.
Initial sudo data was generated in the admin section.
The Site Owner, Sarah Rae will load proper product data before going into production.
Once an initial product data set is established, this data set may be dumped into a db.json file in the fixtures dir using the following command.
$ python3 manage.py dumpdata --exclude auth.permission --exclude contenttypes --indent 4 > db.json
When the local database needed to be reset:
- The db.sql file was deleted
- Migrations were run
- The db.json file was loaded using
$ python3 manage.py loaddata fixtures.db.json
When the remote database needed to be reset:
- The database dashboard was accessed from the ElephantSql site
- The database was reset
- DEVELOPMENT variable was commented out in env.py
- Migrations were run
- The db.json file was loaded using
$ python3 manage.py loaddata fixtures.db.json
The deployment sever, Heroku is ephemeral. This means that it only exists when needed, and 'spins down' when inactive. It cannot permanently store files which are needed to be permanently accessed. For this purpose, a cloud based storage solution is used. For this project the Amazon S3 storage solution.
2 directories in the top level project directory, next to manage.py, were created
- 'media' : holding product images and digital art works
- 'static'
- 'css' : holding project css
- 'images' : holding template images
The deployment platform, Heroku, is ephemeral i.e. when it is not being used, it stops running actively and any state data is lost. It is necessary, therefore, to store static files in a permanent state location. For this project, Amazon AWS3 was used as the permanent storage location for the static and media files.
The following settings were applied in settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
if 'USE_AWS' in os.environ:
# Cache control
AWS_S3_OBJECT_PARAMETERS = {
'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
'CacheControl': 'max-age=94608000',
}
# Bucket Config
AWS_STORAGE_BUCKET_NAME = 'sarah-rae-illustrations'
AWS_S3_REGION_NAME = 'eu-west-2'
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('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 media URLs in production
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'
The linked guide was used to set up
- In created AWS Account
- Copy
- In env.py
- add environment variable:
os.environ["CLOUDINARY_URL"] = "copied_url"
The following packages were installed:
- boto3
- django-storages
A custom_storages.py was created at project base directory level, and referenced in settings.py:
STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'
A custom setting was added to settings.py to ensure that the AWS bucket was kept live for a meaningful length of time.
if 'USE_AWS' in os.environ:
# Cache control
AWS_S3_OBJECT_PARAMETERS = {
'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
'CacheControl': 'max-age=94608000',
}
The project was submitted in an incomplete state, resulting in it failing to meet some pass level criteria. Issues identified in the assessment can be viewed here
As each feature was added, it was tested manually to ensure that it behaved as desired.
The following manual tests were made:
- Test Log 1
- Test Log 2
- Test Log 3
- Test Log 4
- Test Log 5
- Test Log for MailChimp Implementation
- Test Log for bug-fix Issue #117
- Test Log for bug-fix Issue #118
No automatic testing was used for the MVP. Future versions will have full django unit and integration testing.
No human testing was done for the MVP. Feedback from the site owner and customers will be used to develop future versions.
Back to Top Validators were used to ensure that all aspects of the code was 'clean' according to industry standards.
All aspects of the code were shown to be free of errors.
The Python code showed no validation errors.
Two methods of python validation were used.
- The Code Institute Online PEP8 Validator
- The VS Code Pylint Extension
The Python code was validated using the online Code Institute PEP8CI Python Linter and passed without issue.
Screenshots confirming PEP8CI python validation can be viewed here:
- about_sarah app
- cart app
- checkout app
- digital-artworks app
- home app
- newsletter
- profiles app
- sarah_rae_illustrations app
- shop app
- custom_storage
- manage
The VS Code pylint linter extension was used throughout development to ensure that problematic code was corrected as it was written.
A number of the lines in the settings.py file were raising a linting error because they were too long for standard use in a terminal. Since these settings were not going to be visible in a terminal, the errors were suppressed by adding the following to the end of the long line:
# noqa E501
There were several instances where the VSCode Pylint identified that some objects had no members associated with them. These objects were, in fact, populated and accessible. This error message was disables by placing the following code at the the top of a file which generated this error.
# pylint: disable=no-member
The state of the currently deployed python code showed no errors. Some warnings and some items for information were shown. Screenshots confirming Pylint python validation can be viewed here:
JSHint was used to validate javascript code and showed no errors.
Screenshots confirming JSHint javascript validation can be viewed here:
- add-digitalartwork
- add-product
- base
- checkout
- countryfield
- digital-artworks
- edit-product
- quantity_input_script
- shop
The W3C NU html validator was used to validate the html code which passed without errors.
Screenshots confirming HTML validation can be viewd here:
- add-digital-artwork
- add-product
- cart
- checkout-success
- checkout
- digital-artwork-detail
- gallery
- index
- login
- newsletter
- product-detail
- profile
- shop
- signup
The W3C CSS Validator was used to validate the css code which passed without errors.
CSS validation of these pages will be documented when bug #117 is fixed.
Screenshots confirming CSS validation can be viewed here:
- add-digital-artwork
- add-product
- cart
- checkout
- checkout-success
- digital-artwork-detail
- gallery
- index
- newsletter
- product-detail
- profile
- shop
The Lighthouse Validation Tool found in Developer Tools in the Chrome Browser was used to validate the the following aspects of the site:
- Accessibility
- Best Practices
- SEO
All areas of the site scored 90 or higher for accessibility
All areas of the site scored 90 or higher for Search Engine Optimisation
Most areas of the site scored 90 or higher for Best Practices.
The following pages scored 83 for Best Practices:
- Shop
- Product-Detail
- Gallery
- Gallery Detail This was caused by image resolution not matching the size of the container for different screen sizes. Best Practice recommends that several image sets are used for different container sizes. This will be addressed in future versions.
Screenshots confirming Lighthouse validation can be viewd here:
- add-digital-artwork
- add-product
- cart
- checkout-success
- checkout
- gallery
- gallery-detail
- edit-digital-artwork
- edit-product
- home
- newsletter
- product-detail.png
- profile
- shop
- signout
Back to Top Bugs are recored as Issues with a Bug template and Bug label in the Github repo. Bugs which have been fixed can be viewed here
- Search error does not show in messages #82
- Search in Gallery #83
- Update cart JS #84
- Mobile Cart #86
- Mobile Display: Quantity #87
- Order Line Items: No subcategories #92
- Admin LineItem Order: No category or subcategory #95
The following resources were used:
- Code Institute Training Material
- Python Documentation:
- Django Documentation: https://docs.djangoproject.com/en/3.2/ref/
- Stack Overflow: https://stackoverflow.com/
- Wikipedia: https://en.wikipedia.org/wiki/Main_Page
Who is your ideal customer and why do they buy your product?
⁃ A fantasy fairytale lover who enjoys a whimsigothic twist, they love the quirky characters of the Addams Family and the magical feeling of seeing Cinderella’s dress (Ever After) and Tinkerbell’s dress (Hook) and Sarah’s Ballgown (Labyrinth), they want to be sucked into an adventure they can imagine themselves loving.
⁃ They would buy my art to feel that magical wonder, and explore the richly coloured painterly illustrations that feel like a movie scene, to connect to that inner child that loves fairytales and whimsical people
What does the brand aim to achieve & how will it be achieved?
- Illustrations that explores and expands on whimsical magical worlds full of adventure so evocative the audience can imagine themselves there and what they’d want to do while there. Our brand will achieve this by creating narrative illustrations that show rich and wondrous experiences/ places/ people but with illustrations of everyday activities to ground it into reality, as if taking a snapshot of a character going about their day
- Explore these whimsical worlds by telling stories within the painting and grounding it with everyday experiences the viewer can see themselves in
- To create storybook illustrations that makes the viewer feel like someone from the story painted what happened and the paintings were found and put with the literature centuries later
- To bring a sense of “wow that’s a really cool creature!”, “I would love to fly over those lakes”, “that’s the dress I want for my wedding”, “I want them to be my friend”, “that would be my pet”
- To bring people a whimsical magical world and adventures to imagine themselves in when they look at the artwork
- Through illustrated books or just solo paintings, to evoke that otherworldly magic and interest to know more about the story there eg. “That character likes soup and is looking at a photo, did the person in that photo like soup too?”
- The illustrations take you into worlds so enchanting and real, it feels like coming home
- fantastical content in a realistic painterly style using film techniques such as shot framing, lighting and costume design to tell the story
- The priority is to evoke a specific emotion within the context of the narrative, so the viewer will receive more than a nicely painted image or an interesting character design
- Whimsical, enchanting elements with dark mystifying twists yet grounded with familiarity and comfort
- Communicate a story in such detail the characters or places feel real
- whimsically inspiring and soulful
- Accepting
- Exciting
- Imaginative
- Personal
- Thoughtful
- Wholesome
Fairytale Whimsi-gothic Quirky -characters. Magical feeling.
adventure. Wonder. Rich colour. Painterly
Movie scene. Connect to inner child. Grounded in reality. Enchanting
coming home. Evoking emotion. Inspiring. Soulful Mystifying Twists
The site optimises its visibility to prospective customers through Search Engines with the use of the following:
- A robots.txt file
- A sitemap.xml file
- Descriptive meta tags
- rel attributes on links to external resources
Meta Data tags showing semitics and keywords were used in headers and on elements.
Fairy. Storybooks. Curly branches. Witches. 90s. Burgundy. Purples. Orange. Navy blue. Velvet. Wholesomely weird creatures. Sparkles. Clouds. Treasure chest. Pirate ship. Stars. Autumn/ gold + blue sky. Dynamic framing/lighting. Child reading
Child sleeping with dreams above. Treehouses. Kites. Splashing in muddy puddles
Rope swing. Playing dress up/pretend. Reading under a tree. Eating at home
Making something. Soup. Bread & butter. Iridescent. Shiny. Glass. Glowing white
Shimmering blue Hobbit hole. Gathered round Fireplace. Blankets. Tea. Pet curled up.
Mailbox. Welcome mat. Facial expression close-up. Happy tears. Wide-eyed. Fireworks. Flying. Colourful lights. Golden light. Theatrical villains. Wispy fabric
Dark forest
sarah rae illustrations
sraeillustrations
sarah rae art
sarah rae artist
sarah rae art prints
Links to the following Sarah Rae Illustrations social media platforms are found in the footer of each page and may be viewed here:
The following resources were used:
- Code Institute Training Material
- Python Documentation:
- Django Documentation: https://docs.djangoproject.com/en/3.2/ref/
- Stack Overflow: https://stackoverflow.com/
- Wikipedia: https://en.wikipedia.org/wiki/Main_Page
Grateful acknowledgment is given to the following:
-
Mentor: Dario Carrasquel for encouraging and focused support
-
Particular thanks are offered to the Code Institute Tutors who patiently and most helpfully enabled me to make progress on the many occasions when I got stuck on an issue.
-
Code Institute: for training materials, training environment and specific 'Boutique Ado Walkthrough' code
-
Stack Overflow https://stackoverflow.com/
-
Django Documentation https://docs.djangoproject.com/en/3.2/ref/models/fields/