Hue

This full-stack application was developed for Hue, an online art gallery and store where users can view and purchase artwork. The main goal of Hue's website is to display and sell their artwork to shoppers digitally. Hue is a fictional company that was created for the purpose of this project.

As the Milestone 4 Project for Code Institute's Full Stack Software Development Diploma Program, Hue was built with HTML, CSS, Bootstrap 5, JavaScript, Python 3, and Django.

UX

Summary

Hue, a fictional art gallery & store, needs to move their business online and sell their work to customers digitally. The business needs software that gives them the ability to:

• Add, edit and remove products from the shop

• Receive payments upon purchases

• Sell and send products to customers

Hue's niche target market is comprised of male & female luxury art enthusiasts, ages 24 - 39, that want to preview and purchase art online. To meet the needs of these shoppers, Hue's website should allow them to:

• View art products

• Add selected products to a shopping cart

• Purchase items (via online Stripe payment)

• Sign up and become a member

• Login to persist shopping cart between visits

Research & Planning

Users

During the research & planning phase of this milestone project, the developer completed the below flowchart activity, titled "Django Multiple User Types". This activity was conducted to determine how to properly build and implement the Django user model.

djangomultipleusertypes

As can be seen in the image above, the activity led the developer to make the following conclusions:

• Hue's user authentication model should define a one-to-one relationship, using the OneToOneField.

• Hue should be built for two different types of users:

  1. The Site Owner
  • Hue, the company, that wants to:
    • Sell digital artwork.
  2. The Shopper
  • Digital art buyers that want to:
    • Purchase digital artwork from Hue online.

User Stories

User stories were created by the developer during the planning phase of this project. As practiced in agile development, each user story coincides with a feature of the Hue application and will be accomplished in one sprint.

The following user stories were created for the shopper:

Database

Local Development

Features

To meet all of Hue's goals and needs, this application will be built with the following features:

Existing Features

• Home - A

• Gallery:

Shopper

• Allows shoppers to view, search, sort, and filter products, by having them visit the gallery and utilized the built-in tools.

Site Owner

• Gives site owner the opportunity to view the gallery page as a regular shopper/user would.

• Sign Up - Allows all users to create an account, by having them fill out a form that uses POST to send data.

• Login:

Shoppers

• Provides an opportunity for shoppers to persist their cart between visits, by logging in.

Site Owner

• Allows the site owner to access special product management tools hidden from other users, by filling out a secure form that sends data and logging in.

• About: Allows all users to view information and images related to the business, by having them visit the about page.

Hugo

• Allows users to create custom artwork via MindsDB/OpenAI image generation models.

Features Left to Implement

Technologies Used

• Django

• The project uses Django to simplify development and scalability.

• django-allauth

• This project will uses Allauth to simplify user authentication, registration, account management and 3rd party (social media) login.

• sqlite3

• This application is using sqlite3 for internal data storage during local development.

• Pillow

  • This project will use the Python Imaging Library, Pillow to add image processing capabilities to the Python interpreter.

• Virtual Environment Wrapper

  • This project makes use of virtualenvwrapper extensions for creating and deleting virtual environments and managing local development.

• Homebrew

  • This project uses Homebrew to simplify software and package installations in MacOS.

• [Bootstrap 5]

• Django form plugins:

  • Crispy Forms
  • Crispy-Bootstrap5
    • This project uses crispy filters & tags to control the rendering behavior of Django forms in a consistent, visually appealing and DRY manner.

Testing

Deployment

Credits

Content

• The artwork categories in the database and application were copied from Architecure Lab article "15 Types of Digital Art to Consider"

• I copied Font Awesome's CDN from cdnjs.com.

• The grayscale hover effect on the homepage was copied from this Codepen.

• I used this Stack Overflow thread for header, footer and body content templating with Django.

• The images used for this project were copied from:

  • Pixabay

UX Design

• I copied components from Bootstrap's documentation to make Hue's navigation intuitive and responsive.

• The 'multiple light sources' text-shadow effect used for all social media font-awesome icons (fab) was copied from CSS Tricks.

• The layout and structure for the login (login.html) and signup (signup.html) pages were copied from this Bootstrap 5 Portal theme's login page (https://themes.3rdwavemedia.com/bootstrap-templates/startup/portal-free-bootstrap-admin-dashboard-template-for-developers/).

by copying the contents of this Bootstrap 5 Portal theme's login page (https://themes.3rdwavemedia.com/bootstrap-templates/startup/portal-free-bootstrap-admin-dashboard-template-for-developers/)

Front End Snippets & Resources

• I used this article from CSS Tricks to style the background image on Hue's homepage.

• Hue's images were copied from the following sources:

  • Hero background image: Pexels](https://www.pexels.com/photo/abstract-painting-2156881/)

  • The favicon image was downloaded from The Noun Project and is licensed by Creative Commons

• I learned how to configure a favicon in a Django project by following:

  • W3

  • Automation Panda

  • Tango with Django

  • Stack Overflow

• The code used to create a custom cursor was copied from W3 Schools

• I found the solution to disable right-clicking, dragging and selecting images so I could protect products that are delivered via digital-download and avoid giving them away for free from Medium

Backend Snippets & Resources

• Django timezones were learned by reading Django's documentation.

• I copied syntax and referenced these articles to build the shop, order and order items models.

  • Codegrepper

  • Medium

• The line of code for creating subcategories in Django (specifically the declaration of parent in models.py) was copied from 'Sub categories - How to build an Ecommerce website using Django 3 and Vue.js - Part 23'.

• I followed this video while setting up custom confirmation emails with Django & Google SMTP Automating confirmation emails with Django.

Version Control

• GitHowTo.com for returning to the latest version in master branch after git reset --hard <commitsha>.

• Git's Documentation for basic branching & merging.

-Stack Overflow for the following solution to my inquiry of how to properly git reset --hard <commitsha>.

Utilities & tools

• Diffchecker.

• Random Key Gen.

• I learned how to set up Django project's in a virtual environemnt by reading these articles:

  • 'Setting up a Django development environment' from MDN Web Docs

  • 'Installation', Virtualenv docs.

  • Virtualenvwrapper

  • "Install Python3, Virtualenv, Django and Start a new project on your MacOS" from Medium

  • 'Setup python, pip, virtualenv and virtualwrapper, with zsh on a new machine'

  • Python Tips

• Other resources I used during local development

  • 'How to install pip in MacOS', Geeksforgeeks

  • Homebrew

  • Stack Exchange

  • Sublime Text

Security

• I copied the following settings(located in settings.py) from Django's Documentation

  • SECURE_SSL_REDIRECT

Acknowledgements

• I followed Code Insitute's video lessons.

• I learned about writing user stories for multiple end-users by reading the following articles:

• "User Stories with Examples and Template" from Atlassian article "User Stories with Examples and Template"

• "User Stories and User Stories Examples", Knowledge Hut article "User Stories and User Stories Examples

• I referenced this article for any commands related to git reset, git revert or git rebase

• I learned how to make user stories that capture feature requirements from:

• Code Insitute

• Knowledge Hut article "User Stories and User Stories Examples"

• I learned about different target markets by reading:

  • [Marketing Artfully article "Customer Demographics - Age Demographics for Advertising"][https://marketingartfully.com/customer-demographics-age-demographics-for-advertising/]

• I referenced (Django's Documentation)[https://docs.djangoproject.com/en/3.2/] for the following topics:

  • Timezones

  • Models

  • Writing Custom Model Fields

  • Creating Forms from Models