View the project on Render here

Overview

Purpose of the application

Have you ever wanted to make your own craft but didn't have the time or the materials? Design Your Craft is a page where you can design an item and have it handcrafted for you.

How does it work?

First step: Choose an item you want to design

Choose between Jewelry boxes, Christmas decoration or Bottles.

Second step: Design your product

Choose between different patterns, decorations or customised messages

Third step: Order a handcrafted item

After you designed an item, it will be handcrafted by one of our team members and send out to you!

Users can create a handcrafted item with the Design Your Craft application upon their first use of the application. No registration is necessary to design and order an item.

Users who are interested can sign up and have their past designs and orders saved on the profile page. Users details can be saved on their profile to make an order quickly and the information can be edited or deleted easily.

Features

The following are the features provided in the Design Your Craft application.

Navigation bar and Footer

• Each page features a navigation bar that has 3 navigation links - Home, About Us and Start the design. On a screen size smaller than a tablet the navbar becomes a collapsible element. In the right corner there are Profile and Shopping list icons.

• Each page features social media links at the bottom. They redirect a user to the social media platform opening it in a new window.

Home & About page

• Users can learn about the purpose of the site on the Home and About page.

 

 

Start the design

• The user is presented with 3 categories of the products - Jewellery boxes, Christmas decorations and Bottles.

  

   

• After deciding about a category, the user can choose a specific product to design.

  

   

Search Functionality

It is possible to search for a specific word in the database.

Sort Functionality

The sort functionality is available on all the products pages.

Products by Category

You can navigate through different categories from the products page.

Design options:

• colors

• patterns

• text

• decoration

  

   

• After the design is finished, the user can add it to the bag

Shopping Bag

The shopping bag page has the image of the design, product, price, quantity and subtotal info, as well as the information about the total, shipping costs and grand total.

The user can add, edit or delete items from the shopping bag.

 

Checkout

The checkout page has a form where the user can add his/her personal details needed for the delivery and a field for the credit card number.

 

Checkout Success Page

After submitting an order, a summary of the order is shown in a page.

 

User Login and Registration

• Registering users are asked to create a username, provide an email address and create a password.

 

* Users have to log in in order to have their order and design saved in their profile.

 

## User Profile * Users profile page contains a list of all of the customers' personal details, past orders and designs.

 

### Product Management (only for superusers) This functionality is limited only to the admin. It allows to add, edit or delete products in the database.

Wireframes

1. Home:

• Desktop
• Tablet
• Mobile

2. About page:

• Desktop
• Tablet
• Mobile

3. Start the Design:

• Desktop
• Tablet
• Mobile

4. Shopping bag:

• Desktop
• Tablet
• Mobile

5. Profile:

• Desktop
• Tablet
• Mobile

Site Users

Who is the site focused on?

People who want to buy or gift a unique item that they design but don't have the skills/time/materials to create them.

The following user stories were used to design the website:

1. Mel, “I would love to create something for my mom, but I was never good and arts and crafts and honestly, I don't have the time with work and everyday chores to learn a new skill."

Testing

Testing information can be found in the separate testing file that can be accessed here.

Database Organisation

Database information can be found in a separate file that can be accessed here.

Bugs/ Features Left to Implement

• .draggable() on mobile devices - the function draggable doesn't work on touchscreen devices. The plan was to use the jQuery UI Touch Punch library but it wasn't working when implemented in the code as it looks like it was deprecated. This is still an issue as it's not possible to change the placement of decoration/text while designing on mobile devices.

 

• different designs of the same product - since the shopping bag is based on the product ids, when a customer creates a design of a product and they create another design of the same product it will replace the original design in the shopping bag.

 

* decoration in the Shopping bag after adjusting the skew or rotation - when using the rotation or the skew of a decoration, the positioning of the decoration in the Shopping bag is incorrect.

 

Technologies

Languages

• HTML5
• CSS3
• JavaScript
• Python (3.6)

Libraries, frameworks and API's

• BootStrap4 to assist with the structuring and responsiveness of the site
• Django - Python framework for building the project.
• Django Crispy Forms - to style Django forms.
• Fontawesome (4.7.0) library for custom icons
• Google Fonts for the fonts used throughout the page
• Gunicorn - a Python WSGI HTTP Server to enable deployment.
• Jinja - templating language for Python
• JQuery for DOM manipulation.
• jscolor.js - jscolor.js is a JavaScript color picker with opacity channel
• Psycopg2 - to enable the PostgreSQL database to function with Django.
• Stripe - to handle financial transactions.

Tools

• Vectr - for creating the Vector Shape / SVG Markup.
• Balsamiq - to create wireframes.
• xiconeditor - to create icons

Databases

• SQlite3 - a development database.
• PostgreSQL - a production database.

Hosting and deployment

• Git for version control
• Github to store repositories of the project
• Render for hosting the deployed app
• AWS S3 Bucket - to store static and media files in production.
• Boto3 for compatibility with AWS.

Deployment

This project has been pushed and deployed to the cloud application platform Render.

Fork the code on GitHub

If you need to work on this code on your own, follow these steps:

• Log in to GitHub;
• Find the repository you are looking for;
• On the top-right of the page you will find a button with the name "Fork";
• Click on it and it will automatically fork the code to your GitHub.

Local Clone

To make a local clone of the site follow these steps:

• Log in to your GitHub;
• Under your repository section, select the repo that you need;
• You will find a green button with the name "Code". Click on it;
• On the dropdown selection, you will find a link to clone the code with HHTPS;
• Now open Git bash;
• Open the directory where you want to work on the cloned code;
• Type git clone followed by the link you have previously copied.
• Create a file env.py and a file .gitignore.
• Add env.py to .gitignore.
• Set environment variables (you can choose if you want to set them in env.py or in GitPod settings - if you are using GitPod).

  import os
  os.environ.setdefault('SECRET_KEY', '<your-value>')
  os.environ.setdefault('DEVELOPMENT', '1')
  os.environ.setdefault('ALLOWED_HOSTS', '<your-value>')
  os.environ.setdefault('STRIPE_PUBLIC_KEY', '<your-value>')
  os.environ.setdefault('STRIPE_SECRET_KEY', '<your-value>')
  os.environ.setdefault('STRIPE_WH_SECRET_CH', '<your-value>')
  os.environ.setdefault('STRIPE_WH_SECRET_SUB', '<your-value>')
  os.environ.setdefault('SECRET_KEY', '<your-value>')
  

• install requirements from requirements.text pip3 install -r requirements.txt
• to run the server type in the terminal python3 manage.py runserver

Create an account on AWS, and in S3 open a bucket where you will store static/ files and media/ files. On Aws,

• create a policy
• create a group
• create an access policy
• create a user

Credits

Code

• boutique_ado_v1: Project that was followed to create most of the layout and the functionality for the project Design your Crafts (Products, Shopping bag, Checkout, Profile...)
• Dynamically Change the Colors : Tutorial used to dynamically change the colours and patterns of product images using CSS Blend Mode and SVG
• Auto-Playing Slideshow : Tutorial used to create the slideshow in the About Us section
• How to create tabs: Tutorial used to create tabs in the Start the Design section
• Example code to add dynamic text to canvas image found on Codepen - link
• Example code to create a draggable text box in canvas found on Stack Overflow - link
• Example code to add, resize, position and colour change text inside a div using jquery found on Stack Overflow - link
• Example code to allow a user to resize an image on the page found on Stack Overflow - link
• Example code to rotate images with slider found on Codepen - link
• Example code for the slide effect on the home buttons found on Codepen - link

Content

• Inspiration for the README.md came from trisdauvergne/milestone-project-03,taikatta/Milestone3-Konyvkucko and marlene32100/sherocks

Media

• Paintbrush icon was taken from the depositphotos.com
• Paintbrush image was created by Juraj Varga and taken from pixabay.com
• Vintage decoupage box image was taken from kimberkreations-laura.blogspot.com
• Jewlery box category image was taken from diys.com
• Christmas decoration category image was taken from bmstores.co.uk
• Bottles decoration category image was taken from pinterest.ie

Acknowledgements

I would like to thank my mentor Brian Macharia for his advice and help with this project.