A full ecommerce website built in Django for purchasing of 3D-printed models.

The target market is primarily customers that require designed pieces to fulfil niche requirements, products that may not be available as lone pieces elsewhere (e.g. spare parts) or customisation of existing model dimensions to suit their purpose (e.g. clean attachment to desks of various thicknesses without screw-fixtures).

The webshop boasts a modern and intuitive shopping experience, providing customers with options to purchase from standard stock items or request commissions via contacting the site owner. The live deployment is available here

• PrintCrate
  • Introduction
  • Table of Contents
  • User Experience
    • Target Audience
    • User Stories
      • Customer Stories
      • Customer Story Fulfilment
  • Design & Styling
    • Colour Scheme
    • Wireframes
      • Homepage
      • Register Page
      • Login Page
      • Products Page
      • Contact Page
      • About Page
      • Homepage
      • Register Page
      • Login Page
      • Products List Page
      • Product Detail Page
      • Contact Page
      • About Page
      • Cart Page
      • Checkout (Shipping) Page
      • Checkout (Payment) Page
      • Error404 Page
      • Error500 Page
  • Page Features
    • Home
    • Products List
    • Product Details
    • About PrintCrate
    • Contact
    • Register Account
    • Login
    • Logout
    • Cart
    • Checkout
    • Contact Us
  • Data Modelling
    • User Model
    • Products Model
    • Shipping Information Model
    • Order Detail Model
  • Testing
  • Deployment
    • Prerequisites
    • Running this project in a local environment
    • Deployment of this project to Heroku
  • Technologies Used
    • Libraries
    • Tools
    • Databases
  • Credits
    • Image Sourcing
    • Acknowledgements
      • Disclaimer

• Potential buyers of the existing standard product range.
• People with product requirements that require specific customisation.
• People searching for 3D-printed products.

Key objectives/requirements for site users.

1. As a new user: I want to create an account.
2. As a returning user: I want to login to my existing account.
3. As a user browsing products: I want to navigate standard products.
4. As a user interested in a particular product: I want to expand details of a specific product to view a description.
5. As a user interested in the background of the company: I want to read more about the business.
6. As a user purchasing a product: I want to add a product to my cart.
7. As a user purchasing a product: I want to know if there is sufficient stock available for my order.
8. As a user purchasing a product: I want to view the products currently in my cart.
9. As a user reviewing my cart: I want to alter quantities of products in my cart.
10. As a user reviewing my cart: I want to remove a product from my cart.
11. As a user finalising a purchase: I want to provide shipping information and pay for my purchase.
12. As a user with finalised purchases: I want to view all of my ordered products.
13. As a returning user: I want to be able to update my account details if required.
14. As a satisfied customer: I want to be able to share PrintCrate on social networks.
15. As a development-inclined visitor: I want to view the site's GitHub repository.
16. As a customer requesting a non-standard model or with an additional query: I want to contact the site owner.

1. From any page of the PrintCrate site: selection of the "Register" button in the navigation bar loads a registration page. The registration page displays a form with validation. If the form is populated with invalid values the registration is rejected upon submission with an error message detailing why registration has failed. Upon population of the form with valid values the browser redirects away from the register page with a success feedback message displayed.
2. From a logged-out state, access to the "Profile" or "Checkout" pages is restricted. The login feature is accessed by selecting "Login" from the navigation bar, which loads the login page. The login page displays a form with validation. If the form is populated with invalid values the login is rejected upon submission with an error message detailing why login has failed. Upon login success the user is redirected to their account page with new navigation options and success modal indicating the updated user state.
3. From the site homepage, selection of the "Browse Products" button in the jumbotron or from the navigation bar loads a page of all products sold by PrintCrate. If the number of items exceeds 15 the products are split across multiple pages (pagination) to account for load times, especially if hundreds of items become available in the future.
4. Having located the product I am interested in, either by finding it as a showcase product on the homepage, in a mix of all products, or as a result of the search function: selecting either the "Product Details" button or the product's image redirects to display a more detailed view of the target product. The notable addition of the product detail page is the description and ability to add a product to a cart.
5. Selecting the "About Us" button from the jumbotron on the homepage or selecting the "About" navigation bar icon redirects to display a short description of PrintCrate and an accordion display of frequently asked questions.
6. Having located a desired product and accessing the product details display of said product, either iterating the quantity or manually typing the quantity before selecting the "Add" button results in addition of the desired quantity of that product to the cart. Form validation prevents entering a quantity less than zero, non-integers or a number exceeding the quantity of that item in stock. Upon selecting the "add" button, a redirect occurs to view the current cart contents.
7. Upon locating a desired product and selecting the "Product Details" button or the product image to acces the product details: the available quantity of the desired product can be viewed as part of the product information. If a customer wants to place an order in excess of the quantity available they can contact the store owner via the "Contact Us" form as detailed in the "About" page.
8. The current cart contents can be accessed at any time by selecting the cart icon from the navigation bar. If the cart is empty: a modal is displayed to let the user know that the cart is empty and redirects them to view all of the PrintCrate products with a prompt to add products to the cart. If there are items in the cart: the cart contents are displayed with product names, prices and quantities with the total price of all products.
9. When viewing the cart contents with items occupying the cart: the quantity input field is pre-populated with the current quantity of the specific item in their cart. This field can be selected and overwritten by using the selector iteration arrows or by manually typing the desired value. The maximum number this field allows is the available quantity of the product and the lowest number this can be changed to is 0. Upon changing the number from the original cart quantity: an "Amend" button is displayed for the user to confirm their change, upon selecting this button the page is refreshed with their new quantity and total price.
10. Upon viewing an occupied cart contents page: the user can remove an item by either decreasing the quantity to zero and confirming the removal by selecting the "Amend" button or selecting the red cross displayed to the left of any item and confirming removal by selection of the "Remove" button in the triggered modal. In either method, the user stages the removal by either setting the quantity equal to zero or clicking the red cross icon and then must confirm the deletion by selecting "Amend" or selecting "Remove" in the modal, this is designed to minimise instances of customers accidentally removing items from their cart.
11. From the cart contents page, selection of the "Checkout" button redirects to display a shipping information form if the user is logged in. If the user is not logged in they are required to create an account or login to continue with their transaction. The shipping information form is displayed with every transaction as the user may wish to send their purchase to a new address. Upon submission of valid details for the shipping information form: a payment information page is displayed, this reminds the user of the total price of their transaction and allows for entry of payment credentials. Submission of invalid credentials returns an error message for the invalid field, submission of valid credentials results in display of a successful payment modal and redirect to display the user's purchased products and order status.
12. A logged-in user with past orders can view their purchased products by selecting "Profile" from the navigation bar. The user is redirected, with their purchased products displayed in a table, detailing the product name, quantity, total price, purchase date and order status.
13. A logged-in user can select "Profile" from the navigation bar to view their purchased products and option to update their account details. Population of the "New Email Address" and "New Password" fields with valid data redirects the user to Login with their updated password. Submission of invalid credentials yields an error message detailing the failed test.
14. The user can select one of the social media icons in the footer to open a new browser tab and share a link to the website on that respective site. Alternatively, selection of the hyperlink icon copies the page URL to the user's clipboard with a success modal detailing this for custom sharing options for the user.
15. Selection of the GitHub icon in the footer opens the GitHub repository of this site in a new browser tab.
16. Selection of the "Contact Us" button from the navigation bar redirects the user to display a contact form. Population of this form followed by submission via selecting the "Send" button directs the user to a message success page for user feedback.

The original draft colour schemes for this project fell short of expectations when the site became more established, and as a result were disregarded for adaptive creative attempts.
The final colour scheme displays a light theme as is generally preferable for a webshop, with the main theme colour being shades of green.
Given that green is one of the colours most affected by colour-blindness, care was taken to ensure contrast and not to overlay with conflicting colours e.g. blue text on green background.
The prominent use of green, coupled with whitespace encourages a "new" and "fresh" perception of the site.

The homepage serves as the main landing page for site visitors.
The user is directed to browse products or learn more about PrintCrate, with a selection of products showcased as examples for the user.

Cards displaying the products available at PrintCrate provide an overview of standard stock, giving a summary of each product available at a glance.
Users can access more details about each product by using the "Product Details" button of their selected product.

Individual product detail pages include information such as the product name, image, description, price and quantity available.
The option to add a product to the user's cart is given here.

The about page gives a brief summary of what PrintCrate is and the main offering to the customer. Some common questions concerning logistics of the business, product material details and other services provided by PrintCrate are also answered.

The contact page provides a form for users to send their message directly to the PrintCrate owners.
The recipient email address is kept hidden in this way and prevents bot scraping of that information.

A user who is not logged in can access the Register page from the navigation bar, they are then prompted for username, email, password and a confirmation of the chosen password in order to create an account.
If the user already owns an account, there is a prompt to login instead below the registration form.

The login page prompts the user for their existing username and password to access their account.
If the user does not already own an account, a prompt below the login form can be clicked to redirect to the registration form.

A logged in user can logout via the navigation bar link, this clears all session data. Any items in their cart and not checked out at that time are cleared to prevent shared accounts detailing incomplete orders to other users.

The cart provides a list of all products in the user's cart with the current total price of all items in the cart.
The user has the ability to update the quantities of products in their cart, and the total price is updated when those changes are submitted.

The checkout feature allows users to submit their shipping address and conduct payment through Stripe processing.

The contact feature enables customers to email the site owner to detail additional queries or requests.

The User model for this project is part of the Django defaults "django.contrib.auth.models".

The standard inventory sold on this website is constructed with the following model:

This model stores the shipping information for an order placed by a user.

This model stores the details of an order made by a customer.

Testing details can be viewed in the TESTING.md file.

• An Integrated Development Environment (IDE) e.g. Visual Studio Code
• Python 3
• PIP
• Git

Accounts for the following (some environmental variables are required from these.):

• Stripe
• AWS and an S3 bucket
• Gmail

1. Save a copy of this github repository with the Git clone function in your terminal:

   git clone https://github.com/ElliotRedhead/PrintCrate
   

2. In your IDE, navigate to the location that you saved the repository to.

3. Create a virtual environment to load the project's required packages into. Enter the command:

   py .venv venv
   

   NB: Please refer to documentation for the specific syntax required for your OS, py may require replacement with python3 or python

4. Activate the virtual environment:

   source venv/Scripts/activate
   

   NB: This command will vary based on your OS, see Virtual Environment documentation for help.

5. If required, update the Package Installer for Python (PIP):

   pip install --upgrade pip.
   

6. Install all required project packages:

   pip install -r requirements.txt.
   

7. Setting environment variables:
   Create a file in the root of the project named "env.py", copy the code block below and populate with your details:

   import os
   os.environ.setdefault("AWS_ACCESS_KEY_ID", "<Your AWS Access Key>")
   os.environ.setdefault("AWS_SECRET_ACCESS_KEY","<Your AWS Secret Access Key>")
   os.environ.setdefault("DATABASE_URL", "<Your PostgreSQL Database URL>")
   os.environ.setdefault("EMAIL_HOST", "<Your SMTP Enabled Gmail Address>")
   os.environ.setdefault("HOST_PASS", "<Your SMTP Enabled Gmail Password>")
   os.environ.setdefault("EMAIL_RECIPIENT", "<Email Address to Send Contact Form Messages to>")
   os.environ.setdefault("STRIPE_PUBLISHABLE", "<Your Stripe Publishable Key>")
   os.environ.setdefault("STRIPE_SECRET", "<Your Stripe Secret Key>")
   os.environ.setdefault("DJANGO_SECRET", "<Your Django Secret Key>")
   os.environ.setdefault("DEPLOY", "True")

   See this page for instructions to enable SMTP with Gmail.

8. Make and migrate models to create your database structures:

   py manage.py makemigrations
   py manage.py migrate
   

9. Create a superuser to access admin features:

   py manage.py createsuperuser
   

10. Add your development IP to the ALLOWED_HOSTS variable list in settings.py.

11. Run the project on a local server:

    py manage.py runserver
    

12. Add new products to the database by accessing the URL provided in the terminal and adding "/admin", logging in with your superuser credentials and accessing the Products table.

Steps to deploy PrintCrate to Heroku:

1. Create a requirements.txt file populated by required python modules:

   pip freeze > requirements.txt
   

   NB: Please refer to documentation for the specific syntax required for your OS, pip may require replacement with pip3.

2. Create a Procfile:

   echo web: py app.py > Procfile.
   

   NB: Please refer to documentation for the specific syntax required for your OS, py may require replacement with python3 or python

3. Add requirements.txt and Procfile to git tracking, committing their addition and pushing those changes.

4. Open https://dashboard.heroku.com/apps in your browser, signing in/creating an account as required.
   Create an application by selecting the "New" button on the dashboard. Create a name for the application with an appropriate region.

5. Open the dashboard of the new application on Heroku, select the "Deployment" tab and select GitHub from the Deployment Method selection.

6. Search for the correct GitHub repository from the list of your existing repositories and select the correct repository.

7. Within the application dashboard, select the "Settings" tab then "Reveal Config Vars".

   Populate the config variables table with the following:

   Key	Value
   DJANGO_SECRET	<Your Django Secret Key>
   AWS_ACCESS_KEY_ID	<Your AWS Access Key>
   AWS_SECRET_ACCESS_KEY	<Your AWS Secret Access Key>
   DATABASE_URL	<Your PostgreSQL Database URL>
   EMAIL_HOST	<Your SMTP Enabled Gmail Address>
   HOST_PASS	<Your SMTP Enabled Gmail Password>
   EMAIL_RECIPIENT	<Email Address to Send Contact Form Messages to>
   STRIPE_PUBLISHABLE	<Your Stripe Publishable Key>
   STRIPE_SECRET	<Your Stripe Secret Key>
   DEPLOY	True

8. Ensure you are using the postgreSQL database by either creating an env file as instructed in "Running this project in a local environment.7" or stipulating the postgreSQL URL in settings.py.

9. Make migrations and migrate the database models to the postgreSQL database:

   py manage.py makemigrations
   py manage.py migrate
   

10. In the Heroku app dashboard, select the "Deploy" tab. Scroll down to "Manual Deploy", select the master branch and select "Deploy Branch".

11. The build progress can be monitored in the log for the Heroku application, upon build completion, select the "Open App" button to view the deployed application.

• Bootstrap 4 is used for resolution responsiveness and for general structuring of the UI.
• JQuery is used within this project for ease of DOM manipulation.
• FontAwesome for a source of the majority of icons.
• Google Fonts to supply the fonts used across the site.

• PIP for python package management.
• Git for version control.
• GitHub to store the project repository.
• Django 3 as a framework for building the project.
• Heroku for live deployment of PrintCrate.
• Gunicorn a Python WSGI HTTP Server to enable deployment to Heroku.
• Stripe to handle customer payments.
• Travis for continuous integration testing.
• Django Storages to enable custom Django storage for AWS.
• AWS S3 Bucket to store static files required on the site.
• Boto3 for compatibility with AWS.
• Django Crispy Forms to custom-style Django forms.
• Pillow to enable compatibility across image file formats.
• Psycopg2 to enable the PostgreSQL database to function with Django.
• Coverage to have visibility on what code had automated testing.
• Sweetify for improved modal displays.
• autopep8 for automatic formatting of Python code for PEP-8 style conformity.
• pylint as a primary linting tool for Python.
• eslint as a primary linting tool for JavaScript.
• Balsamiq for wireframe creation.
• BootstrapDetectBreakPoint.js for a lightweight, ready-made solution to detect current display breakpoint.
• Cookie.js for handling of cookies within javascript.
• Clipboard.js to copy a target to the clipboard of the user.

• SQlite3 as a development database.
• PostgreSQL as a deployment-ready database.

All product images in the PostgreSQL database were sourced from thingiverse, if interested in the original files click here.
The crate favicon was sourced from free3d.com. The social media/hyperlink sharing icons were sourced from flaticon.com. The jumbotron 3d-printer background was sourced from unsplash.com.

Many thanks for support in the creation of this website to my mentor: Simen Daehlin. Many thanks also to family, friends and the CodeInstitute Slack team for your support throughout my time on the course.

This project and its contents are for educational purposes only. At the time of writing/submission: the deployed version is identical to the development version.