View live site

• Project Overview
• User stories
• Wireframes
• Database design
• Features
• Technologies used
• Testing
• Deployment
• Credits
• Contents
• Media
• Acknowledgements

Wunderlust is an online fine art gallery which exhibits and sells art from around the World. Our gallery showcases art from well-established and traditional artists as well as emerging artists breaking through the norms of the art world.

Users may be looking for an artwork to remind them of a place they once visited,they may want to buy a piece from an artist they admire or could simply be looking for an item that will bring them joy.

As a user I want to be able to browse art by artist, category, country and price, in order to select items to purchase. I want to be able to see details about each artwork I am interested in and be able to add items to my shopping cart, customise my purchases and check out.

I want to be able to sign up for an account, manage my account and sign up for events.

Artists will exhibit their art exclusively at Wunderlust for a number of months. As an artists I want to be able to 'consign work in' by uploading the image to the site, and 'consign work out' by removing the item after the exhibition/display term.

As an artist I want to be able to edit items I have on the site and manage my own artist biography on the site.

As a site owner I want to attract potential buyers to the website and allow them to easily browse through all the work available. I want to be able to sell artwork through the website and therefore receive a commission on any sales. I also want to encourage site users to sign up for an account so that I can easily market our artworks to them.

I want to allow artists to sign up for accounts so that they can manage their artwork and information, but I want to be able to approve the changes they make.

Shopping cart terminology

When choosing between the words 'bag', 'basket' and 'cart' I thought about the mental model the shoppers would build when shopping for art. It is likely you would imagine putting large artworks into a cart rather than a basket or a bag. I looked up use cases for the terminology and also found that the word 'cart' is easier to localize as it translates well into other languages. One good resource is the article: Shopping cart, bag or basket. Therefore I have gone with 'cart'. I have used an 'Open Cart' icon as I think the flair fits in well with this website's products. Once the user begins adding items to their cart a total will appear which will make the purpose of the icon obvious.

See my user stories here

Use this section to provide insight into your UX process, focusing on who this website is for, what it is that they want to achieve and how your project is the best way to help them achieve these things.

In particular, as part of this section we recommend that you provide a list of User Stories, with the following general structure:

• As a user type, I want to perform an action, so that I can achieve a goal.

This section is also where you would share links to any wireframes, mockups, diagrams etc. that you created as part of the design process. These files should themselves either be included as a pdf file in the project itself (in an separate directory), or just hosted elsewhere online and can be in any format that is viewable inside the browser.

See my user stories here

See my user stories here

In this section, you should go over the different parts of your project, and describe each in a sentence or so.

• Create an account: users can create an account, signing up with their email address
• Add artwork to cart - users can add artworks they wish to purchase to their cart
• View cart - users can view their shopping cart and all the items in it before proceeding to checkout.
• Checkout - users can pay for their items and the site will process their order and take payment via Stripe
• View profile - users can view their profile and update their shipping details or see their order history
• Filter artwork - users can filter artwork by Artist, Country, Category or price
• Search - users can search the site for art that contains their search query in the name or description of the artwork
• Featured collection - users can view the artwork currently featured on the store
• Add to wishlist - users can add items they want to save to their wishlist.
• Admin - admin users can log into the admin portal to manage artwork, artists, categories, countries, orders and users.

• Framing options

• Django
  • This website is built on the Django framework.
• HTML - the front-end structure of this app is written in HTML
• CSS - this app is styled with CSS
• JavaScript - used for DOM manipulation
• JQuery - used to simplify DOM manipulation
• Python - the app functionality and data manipulation is written in Python.
  • The project uses JQuery to simplify DOM manipulation.
• Pip3 - used to install Python packages
• Allauth - used to provide all account functionality including the ability to register for an account, verify, log in and out and reset a forgotten password.
• Bootstrap - used to speed up responsive design
• Stripe - is used as the payment system for the store
• Balsamiq - wireframes for this app were created with the Balsamiq wireframing tool.
• Amazon S3 - this project uses Amazon S3 to store images uploaded by users
• Heroku - is the cloud platform used to host the deployed app.

• W3C Markup Validation Service - used to validate HTML code
• W3C CSS Validation Service - used to test CSS code validation
• JSHint - used to test for JavaScript code validity
• Lighthouse - used for testing front-end best practice
• Pep8 checker - used for testing Python code against Pep8 guidelines

• Fixed - in the Artworks view Pep8 picked up an error on the Lower() function from Django, with the error mesage: 'undefined name 'Lower''. Looking this up in the Django documentation I could see I needed to import Lower.
• Bug - in the Artworks view Pep8 picks up an error on all the models, giving an error message that 'Class Country/Category/Artist has no objects member'. Research on Stack Overflow and Reddit confirms that this is not really an error as Django adds that property dynamically to all Models but the IDE is not able to see this.

I took time to plan out my database in Excel. I created all database tables in csv files and then converted those to json to allow me to add my fixtures.

See my database diagram here

Differences between development site and deployed site:

There are no differences between the development site and deployed site. The development site is deployed on the Master branch and I have tested the deployed site to ensure it looks the same and functions in the same way as the development site.

Setting up your Amazon S3 account to host uploads

I used Amazon S3 to host images and fixtures. These are the steps I took and the steps you can take when cloning my site:

1. Create an Amazon AWS account
2. Create a bucket within your account
3. Attach a CORS policy
4. Attach a bucket policy
5. In IAM create a new user group
6. Attach an S3 bucket policy to your user group and set the permissions to only allow access to your project bucket
7. Create a new user and add to the group you created before
8. Download the access key file and keep it safe, you will not be able to download it again.
9. Add the settings to your IDE

In Heroku

In Heroku add your config vars (in the 'settings' tab > click 'Reveal config vars')

If you would like to run my code locally you can clone the site by following these steps:

1. Visit the main page of my repository on GitHub here.

2. Click 'Clone or download'

3. Click the icon to the right of the URL. This will allow you to clone the repository using HTTPS.

4. If you would like to clone it using SSH, click 'Use SSH'

5. On your computer open Git Bash

6. Change the directory to the folder where you would like to run the cloned directory

7. Type 'Git clone' and then paste the URL you copied from my repository in GitHub

8. Press enter and your local clone of my site will be created.

9. Install each of the requirements from the requirements.txt file or run the following code:

            pip -r requirements.txt
   

10. Set up your Amazon AWS account following the steps above.

11. You will then need to create your own app on Heroku, steps for Heroku above

I included code from the Code Institute Boutique Ado project as a guide for many of the pages and where I have utilised full blocks of code from the project I have attributed it inline.

• The Boutique Ado project provided me with a lot of inspiration for this project. I used many of the lessons from that project to help me when planning out and building my own project and then added to it to make this site unique and fit for it's purpose.

Text for descriptions of artworks:

• Andy Warhol: The Tate Modern's website and Princeton University Art Museum
• Gustav Klimt: Google Arts
• Leonardo da Vinci: Wikipedia - The Vitruvian Man and Wikipedia - The Last Supper
• Paul Cezanne Wikipedia - Paul Cezanne
• Wassily Kandinsky Wassily Kandinsky

• All artwork images are from the Kaggle collection here

Artist self-portraits:

• Andy Warhol's self-portrait is from the Kaggle collection here
• Caravaggio's self portrait is from the Kaggle collection here
• Paul Cezanne's portrait is from Wikimedia commons
• Vincent van Gogh's portrait is from Wikimedia commons
• Wassily Kandinsky's portrait is from Wikimedia commons
• Gustav Klimt's portrait is from Wassily Kandinsky's portrait is from Wikimedia commons
• Leonardo da Vinci's self-portrait is from Wikimedia commons

-The image placeholder is from Wikimedia commons

• Thank to you my mentor for guiding me.