click here for the live site!

my goal for this project is to create a full-stack site using HTML, CSS, JavaScript, Django and python to create a platform that artist can use to share their work with a larger audience. At bert's Art we offer a large collection of different works you are able to purchase with a click of a button and have it shipped to you without having to leave your home! add more affordable wall art for your home to complete the look you want.

• 1. User experience (UX)
  • 1.1 User stories
  • 1.2 wireframes
• 2.Data Modelling
  • 2.1 features
  • 2.2 Features left to implement in the future
• 3. Technologies used
• 4. Testing
• 5. Deployment
• 6. Credits

The design for this site is simplistic to not overload the user, with the main focus being on finding the site to be easy to navigate for first time users who want to purchase some new, affordable art for themselves.

• As a first time visitor, I want the site to be easy to understand how to navigate throughout the site.
• As a first time visitor, I want the content to be easily read and understandable.
• As a first time visitor, I want images to be clearly visible and enticing.
• As a first time visitor, I want to subscribe to a newsletter, so I can be up to date about the latest news and trends.
• As a first time visitor, I want to access the social media accounts of the company, so I can follow them and see the latest trends and news.
• As a first time visitor, I want to access the website from any device, so that I can go to the website on desktop, mobile and tablet.
• As a first time visitor, I want to be able to contact the owners of the website, so I can easily ask a question.
• As a first time visitor, I want to be able to search and filter the wall art.

• As a registered user, i want to be able to create/log into my profile.
• As a registered user, I want to add products to my basket, so I can buy products.
• As a registered user, I want to modify my order, so I can make last changes before I order the products.
• As a registered user, I want to be able to pay online securely.
• As a registered user, I to receive a confirmation email and get an order number once placed so i know its been successful.
• As a registered user, I want to see my order history.
• As a registered user, I want to know the shipping details.
• As a registered user, I want to know the return policy.

• As an Admin i want to full control of the site, being able to edit, add delete the collection on site.

The wireframes can be found here.

• serves its purpose as an introduction to the site/shop via text and pictures.
• links to other features of the site all easy to find and accessible.
• An attractive and simple layout with consistency.

• found at the bottom of all pages
• with links to our pages app, which have the following pages Contact, About us, FAQ and our returns policy.
• a link to our newsletter which the user is encouraged to subscribe to.
• links to all our socials.

• The name of the site is clearly visible on the left of the navbar. The name is also a redirect to the home page.
• The navbar contains search functionality allowing the user to search for products easily.
• on mobile devices the navbar is visible as a hamburger menu.
• the navbar contains the profile icon and the shopping bag, where you can login or register and reflects the items you have put into your shopping basket respectively.

• The name of the site is clearly visible on the left of the navbar. The name is also a redirect to the home page.
• The navbar contains search functionality allowing the user to search for products easily.
• on mobile devices the navbar is visible as a hamburger menu.
• the navbar contains the profile icon and the shopping bag, where you can login or register and reflects the items you have put into your shopping basket respectively.

• The product page contains all items the shop has to offer.
• The items can be sorted by name A-Z, Z-A, price from high to low and price from low to high.
• There is a back to top button, where people can click on the link to go back to the top of the page.

• The product detail page shows information about that specific item, the information includes; name, image, the price and the product description.
• A user can select the quantity of the product. this ranges from 1 being the lowest to 99 being the highest.
• There is a button where the user can add to shopping bag, which when used will show a toast success message and will update the shopping bag.

• the bag pages shows the user all the items in their bag at the moment, with the price of the item and quanity that they have selected.
• calculates the total price of all the items in the bag for the user and how much more to spend to be entitled to free delivery.
• 2 links at the bottom which redirect you to continue shopping or to the checkouts page.

• The order summary gives information about the item, this information includes; name, price, total, delivery costs and grand total.
• a form to complete for shipping details, that once completed for a registed user will save their information.
• Two buttons at the bottom to complete the order or to adjust it which would take you back to the bag page.
• when completing the order you will get a toast success message showing you have your order has been successful.
• you will be taken to the checkout success page when completeing your order.

• contains the order information along with your order number
• button at the bottom to take you back to the products page to continue shopping if you would like.

• users can use the contact page to reach out to the site owner, with a simple form to fill out.
• about-us page contains a little information about the site owner and the team.
• FAQ contains answers to some common questions the users might have as well as a link to the returns page at the bottom.
• the returns page contains our returns policy.

• sign up, login, logout, reset passwords for users are all done using allauth.

• Add a review page where users can leave comments on items they have purchased.
• Adding a favorite section to the users profile so that users can favorite a piece and see them on their favorite page.
• The user can delete their profile.
• logging in with social media accounts.

• HTML5
  • HTML5 provides the structure and the content for my project.
• CSS3
  • CSS3 provides the style of the HTML5 elements.
• jQuery
  • jQuery used as the JavaScript functionality.
• Python
  • Python provides the backend of the project.
• Jinja
  • Jinja provides the templating language for Python.
• JavaScript
  • JavaScript provides the interactive elements on the website.

• Gitpod
  • The GitPod is used to develop the project.
• Git
  • The Git was used for version control to commit to Git and push to GitHub.
• GitHub
  • The GitHub is used to host the project.
• Google Fonts
  • Google Fonts is used to provide the font roboto for all the text that is used in the project.
• Heroku
  • Heroki is the cloud platform to deploying the app.
• Flask
  • Flask is the web framework used to provide libraries, tools and technologies for the app.
• AWS Amazon
  • AWS Amazon is used to store static and media files.
• Boto3
  • Boto3 is used for compatibility in AWS.
• Gunicorn
  • Gunicorn is used to enable deployment to Heroku.
• Bootstrap
  • Bootstrap is used for the design framework.
• Django
  • The GitPod is used as Python framework for the project.
• Django Crispy Forms
  • Django Crispy Forms is used to style the Django forms
• Stripe
  • Stripe is used for the secure payments

• SQlite3
  • SQlite3 is used as the development database.
• PostgreSQL
  • PostgreSQL is used as the production database.

• PEP8
  • The PEP8 validator is used to check whether there were any errors in the Python code.
• Chrome DevTools is used to detect problems and test responsiveness.
• W3C Markup Validation Service
  • The W3C Markup Validation Service is used to check whether there were any errors in the HTML5 code.
• W3C CSS validator
  • The W3C CSS validator is used to check whether there were any errors in the CSS3 code.
• JShint
  • JShint is a JavaScript validator that is used to check whether there were any errors in the JavaScript code.

• Responsiveness on different browsers and screen sizes:

Google Chrome works as intended.
Mozilla Firefox works as inteaded.
Internet Explorer works as intended.
Opera works as intended.

manuel tested each one to ensure the website was responsive on the different browers listed via testing them all on different resoultions.

• Python validator | PEP8: No errors found

• HTML Validator: a few warnings but no major errors.

• CSS Validator: No errors found.

• As a first time visitor, I want the site to be easy to understand how to navigate throughout the site.

  • A visitor can navigate throug the website with the navbar on top of the website and through the footer. There is a hamburger menu for mobile visitors, where they can easily can go to every relevant page.

• As a first time visitor, I want the content to be easily read and understandable. -the site is clear and minimal nothing distracting for first time users.

• As a first time visitor, I want images to be clearly visible and enticing.

  • a first time visitor willfind thats the pictures dont overload the page and make for eye pleaseing viewing.

• As a first time visitor, I want to subscribe to a newsletter, so I can be up to date about the latest news and trends.

  • the subscibe to newsletter button is found at the bottom of every page in the footer which navigates you easily to the page.

• As a first time visitor, I want to access the social media accounts of the company, so I can follow them and see the latest trends and news.

  • the social media accounts can all be found in the footer on every page

• As a first time visitor, I want to access the website from any device, so that I can go to the website on desktop, mobile and tablet.

  • you can visit the website on any device. The website is designed for computer, mobile and tablet.

• As a first time visitor, I want to be able to contact the owners of the website, so I can easily ask a question.

  • a link to The contact page can easily be found in the footer on every page which will navigate you to the mentioned page.

• As a first time visitor, I want to be able to search and filter the wall art.

  • using the search bar you can filter the works based on their name and whats in their description.

• As a first time visitor, I want to add products to my basket, so I can buy products.

  • when selecting a product and being directed to the products detail page you will find the option to add to basket.

• As a registered user, i want to be able to create/log into my profile.

  • on the navbar under the under the "My account" drop down button the user has the option to register to the site.

• As a registered user, I want to modify my order, so I can make last changes before I order the products.

  • this can be accomplished by going to the bag page

• As a registered user, I want to be able to pay online securely.

  • using stripe on the checkout page this is accomplished

• As a registered user, I to receive a confirmation email and get an order number once placed so i know its been successful.

  • once you have submitted an order you will recieve both.

• As a registered user, I want to see my order history.

  • on your profile page you will have a your order history on the right hand side which you can click on for more details.

• As a registered user, I want to know the shipping details.

  • This can be found on the FAQ page.

• As a registered user, I want to know the return policy.

  • this can be found on the returns page.

• As an Admin i want to full control of the site, being able to edit, add delete the collection on site.

• Responsiveness of the game is tested with [Chrome DevTools]

• since the website is very simplistic havent found major bugs other than had some issues with using bootstrap css as certain elements werent interacting well or at all together.
  • i was using two different versions of bootstrap and simply had to swap to one.

due to time constraints testing thoroughly wasnt an option on this project, however since a large part of this has been taken from the code along project boutique ado it hasnt hampered the project. in future i would like to do alot more testing with the views and models.

This website is deployed on Heroku, following these steps:

1. Install these packages to your local environment, since these packages are required to deploy a Django project on Heroku.

• gnicorn: gnicorn is Python WSGI(web server gataway interface) server for UNIX.
• gninx: gninx is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server.
• psycopg2-binary: psycopg2-binary is PostgreSQL database adapter for the Python programming language.
• dj-database-url: dj-database-url allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application.

2. Create a requirements.txt file and freeze all the modules with the command pip3 freeze > requirements.txt in the terminal.
3. Create a Procfile write web: gunicorn bubbles.wsgi:application in the file.
4. git add and git commit and git push all the changes to the Github repositoty of this project.
5. Go to Heroku and create a new app. Set a name for this app and select the closest region (Europe) and click Create app.
6. Go to Resources tab in Heroku, then in the Add-ons search bar look for Heorku Postgres(you can type postgres), select Hobby Dev — Free and click Submit Order Form button to add it to your project.
7. In the heroku dashboard for the application, click on Setting > Reveal Config Vars and set the values as follows:

• I used Djecrety to generate Django Secret Key.

8. Comment out the current database setting in settings.py, and add the code below instead. This is done temporarily to migrate the datbase on Heroku.

  DATABASES = {     
        'default': dj_database_url.parse("<your Postrgres database URL here>")     
    }

9. Migrate the database models to the Postgres database using the following commands in the terminal: python3 manage.py migrate
10. Load the data fixtures(products and categories) into the Postgres database using the following command: python3 manage.py loaddata <fixture_name>
11. Create a superuser for the Postgres database by running the following command: python3 manage.py createsuperuser
12. Replace the database setting with the code below, so that the right database is used depending on development/deployed environment.

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': os.path.join(BASE_DIR, 'db.sqlite3'),
        }
    }

13. Disable collect static, so that Heroku won't try to collect static file with: heroku config:set DISABLE_COLLECTSTATIC=1
14. Add 'https://bertsart.herokuapp.com/', 'localhost' to ALLOWED_HOSTS` in settings.py.

ALLOWED_HOSTS = ['https://bertsart.herokuapp.com/', 'localhost',]

15. In Stripe, add Heroku app URL a new webhook endpoint.
16. Update the settings.py with the new Stripe environment variables and email settings.
17. Commit all the changes to Heroku. Medial files are not connected to the app yet but the app should be working on Heroku.

The static files and media files for this deployed site (e.g. image files for product/blog) are hosted in the AWS S3 Bucket. You will need to create S3 bucket, complete the setting up and upload static files and media files to the S3 bucket. You can find Amazon S3 documentation for more information on the setting. I used CORS configuration below:

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

• Setting for static/media files in settings.py

1. Install boto3 and django-storages with a command pip3 install boto3 and pip3 install django-storages in your terminal, to connect AWS S3 bucket to Django.
2. Add 'storages' to INSTALLED_APPS in settings.py.
3. Add the following in settings.py.

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 = 'ms4-bubbles'
    AWS_S3_REGION_NAME = 'eu-central-1'
    AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
    AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3-eu-central-1.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}/'

5. Add [custom_storages.py].
6. Delete DISABLE_COLLECTSTATIC from Heroku Config Var.
7. Push all the changes to Github/Heroku and all the static files will be uploaded to S3 bucket. By setting up above, Heroku will run python3 manage.py collectstatic during the build process and look for static and media files.

You can enable automatic deploy in the following steps that pushes update to Heroku everytime you push to github.

1. Go to Deploy in Heroku dashboard.
2. At Automatic deploys, choose a github repository you want to deploy.
3. Click Enable Automatic Deploys.

1. Navigate to the GitHub Repository.
2. Click the Code drop down menu.
3. Either Download the ZIP file, unpackage locally and open with IDE (This route ends here) OR Copy Git URL from the HTTPS dialogue box.
4. Open your developement editor of choice and open a terminal window in a directory of your choice.
5. Use the git clone command in terminal followed by the copied git URL.
6. A clone of the project will be created locally on your machine.

Once the project has been loaded into an IDE of choice, run the following command in the shell to install all the required packages: pip install -r requirements.txt.

1. Log into GitHub.
2. In Github go to (https://github.com/MichaelDugdale/MS4_berties_art).
3. In the top right hand corner click "Fork".