This project uses Django to build a site for artists to sell art. It works on premise of artists being able to list their works, but the site taking payment and handling distribution as a physical gallery might.

The site is designed using a minimalist colour scheme. This is to allow the art to stand out from the site, while the site primarily uses smooth movements of menus and cards to complement the products on sale.

The site is made up of the following pages. The pages here contain wireframes. Visit the site or see the gifs in user testing to see the site in action:

Custom styled login/out/account/auth admin pages.

Notifications are provided by colour coded toasts to provide the user with feedback and assurance. These dismissable Toasts also feature a basket preview when items are added, and a button to take the browser to the basket.

Two Menus are provided via means of hamburger icons at either end of the menu bar. These are:

This Project used Django, with Python, JavaScript, CSS and HTML as languages to build the site. A number of python libraries were used which can be seen in the requirements.txt file along with Bootstrap and Jquery.

The project was built in Gitpod as an IDE, used Github for git control, and has been deployed to Heroku with static and media files served by Amazon AWS.

• Poor Database structure - Artist DB may be obsolete

• Order history not saving to profiles

• While more items than inventory can't be added to a basket from the page, this could be added again by re-visiting the page. Ideally the basket should verify against the inventory of an item to prevent buying more than is in stock. Time restrictions have prevented this being properly implemented.

• Checkout does not update inventory of stock or show an update an item as sold if the inventory is sold out. Ideally this would happen from the payment webhook.

• Currently a user doesn't have to provide a name on sign-up. This could populate the list of Artists with a lot of blank entries. This could be solved by creating a custom sign up page to include name (most secure), redirecting to the edit profile page on sign-up (however this could be navigated away from without completing the form).

• Artists disappear from menu on some pages
• Profile Deletion isn't functioning, and has been removed.

• Artist fields for adding art displaying all users not just artists
• Artists in menu alphabetical
• Buttons on some form pages too close to text
• Make right hand menu bass responsive to number of menu items.
• image upload fields need styling
• The bio fields don't seem to store line breaks/formatting, which results in quite unreadable biographies. It would be good to find a better way of handling this.
• The screen is scrolled too far down when clicking through to the card entry details.

• Outstanding issues
• Sign-up including more profile data
• Implement better use of the is_artist/is_customer fields to streamline menus.
• Better gallery filtering including filtering out sold pieces.
• Ability to add exhibition dates to public_profile page

# Testing

While automated testing hasn't been used in development, continual testing of feature while being implemented has to ensure they work while being made. While a thorough record of this hasn't been kept, the commit list evidences some of this, and an example here exists of validating webhooks:

Powermapper has been used for automated validation and assessment of the site. It provides a useful basis from which to start a testing regime on the front end.

These video cover most functionality on the site. All buttons have been tested, and the site has been viewed and checked for visual Compatibility on Chrome, Edge and Firefox.

It's worth noting here, I had a lot of problems with deployment, hence a slightly odd commit history full of guincorn(🦄).

This website was deployed on Heroku and can be found at https://cmh-kh.herokuapp.com/

First login and create your app on the Heroku site, and select a region. Then in the app settings, under ‘Config Vars’ you can should set the following Stripe keys which can be easily found on their dashboard after signing up.

• STRIPE_WH_SECRET as your WH key
• STRIPE_SECRET_KEY as the Stripe secret key
• STRIPE_PUBLIC_KEY for the Stripe Public Key

Under the resources start a PostGres Database

Then create a ‘requirements’ file, which lists all the dependencies by typing in the following command in the bash terminal:

pip3 freeze > requirements.txt

Copy the postgres URL from Heroku config vars into the placeholder: dj_database_url.parse(os.environ.get(POSTGRES URL))

Run migrations to the new database with python3 manage.py migrate

Then use python3 manage.py loaddata categories. Due to the artworks dependencies on user profiles, it can't be migrated across.

Finally create a superuser with python3 manage.py createsuperuser.

This is now deployed to the Heroku PostGres database.

pip3 install gunicorn
pip3 freeze > requirements.txt

Will install gunicorn which acts as a webserver.

You will then need to create a ‘Procfile’, which lists the process types in an application:

echo web: gunicorn kunst_huset.wsgi:application > Procfile

This should then be commited to your repository before Pushing to Heroku:

Git add . > git commit -m “Setup Heroku” > git push

Add the app to ALLOWED_HOSTS in settings.py

This will update your repository.

Back on the Heroku site, under 'Deploy' , select Select 'Heroku Git'- which allows CLI interaction from the IDE terminal and use the following commands:

$ heroku login
Press any key except q and (key in your credentials in the preview window)
heroku config:set DISABLE_COLLECTSTATIC=1 --app kunst-huset
$ git add .
$ git commit -am “initial commit to heroku”
$ git push Heroku master

From here, follow the Heroku documentation on deploying to AWS.

This can be done by clicking ‘clone or download’ on my GitHub Repository.

Then install all the dependencies listed in the requirements.txt file

Create a .gitignore file containing, to prevent sensitive information being revealed in commits.

env.py
__pychache__

Then create an ‘env.py’ file in the root directory with the following code:

import os

os.environos.environ["STRIPE_PUBLIC_KEY"] = key
os.environ["STRIPE_SECRET_KEY"] = key
os.environ["STRIPE_WH_SECRET"] = key

For the rest reference the Django documentation.

Nav bars based on: https://demos.creative-tim.com/navbar-with-icons/index.html?_ga=2.98554264.649268495.1596619877-1871526498.1594128054 and from https://codepen.io/stevenrzy/pen/pogXXEB

Sliding button based on - https://codepen.io/mrnathan8/pen/wvaJREX

Icons from Fontawesome

Font: https://www.fontsquirrel.com/fonts/Latin-Modern-Mono

Body Font: https://fonts.google.com/specimen/Open+Sans+Condensed?standard-styles=&sidebar.open=true&selection.family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300

Adapted from Code Institute Boutique Ado: https://github.com/ckz8780/boutique_ado_v1/blob/master/products/forms.py

Art from my instagram, Arabella Hilfiker, and the MOMA collection.

I'm grateful for the huge amount Cormac Lawlor's patience which has gone into chasing gunicorns in this project, the help of my mentor Akshat Garg, and the staff of Code Institute.