Live Version: The Crafty Quilt Company
Repository: GitHub Repo
Developed by Jemima MacKenzie.
Stripe Test Card: 4242 4242 4242 4242
Stripe Test Card for Authentication: 4000 0025 0000 3155
This is a B2C ecommerce website targeted at people who love beautiful handmade patchwork quilts. The website offers consumers the ability to buy already finished handmade quilts, or to buy everything they might need to make a colourful patchwork quilt for themselves (e.g fabric, thread, batting, tools and accesssories, and books to help learn different quilting and patchwork techniques). The home page for the site provides a welcoming and colourful hero image demonstrating the type of quilts that can be bought or made, and the 'shop now' button allows the consumer to dive straight in and look at all the store has to offer. The site includes a main navigation allowing the user to view products by category, price, and name, and includes a search bar that allows the customer to search for products by keywords in the product name, description, brand or author. See selected screenshots (on different viewport sizes) below.
The target audience for the site is anyone that loves colourful, handmade, patchwork quilts and either wants to but them, or make them. Since most of the products would be very colourful and bright, I wanted to make sure that the backdrop for the product images would be relatively plain and uncluttered in order to show the products in their full glory. I did not want the backdrop to distract the customer's attention away from the stunningly colourful and bright products. Therfore I chose a fairly simple colour scheme of mostly black and white with small flourishes of colour in 'english violet':
In terms of typography, I chose to use only one font style (Lato). This is a relatively plain, but stylish, font that would be easy to read and not distract the consumer from the brightly coloured and fancy products.
At the outset of the project, I created the following wireframe designs using Figma:
The planning and design of the wireframes helped me to decide on the database schema I would need, and this was created using LucidChart:
In order to determine a set of SEO keywords that I could use throughout the site, especially as meta keywords, I brain dumped a number of short and long-tailed keywords that I thought users might use to search the site:
Quilts, Patchwork Quilts, Quilter's Fabric, Cotton Fabric, Handmade Quilts, Baby Quilts, Single Quilts, Double Quilts, Kingsize Quilts, Quilter's Batting, Thread, Needles, Free Motion Quilting, Long Arm Quilting, Haberdashery, Fat Quarter's, Jelly Rolls, Quilting Books, Colourful Quilts, Quilt As You Go Quilts, Retro Quilts, Organic Cotton Quilts, Patchwork and Quilting Fabric, Quilting Cotton, Quilts For Sale Handmade, Heirloom Quilts, Handmade Gifts, What To Get For Someone Who Likes Quilting, What To Get For Someone Who Likes Patchwork Piecing.
With this list, I input these keywords into google and used the Google auto suggestions to find these additional keywords:
Handmade Patchwork Quilts for Sale, Fat Quarter Bundles, Patchwork Quilts Handmade, Patchwork Quilts For Sale, Modern Quilts, Classic Quilts, Cotton Patchwork Quilts, What Is Quilter's Fabric?, Cotton Patchwork Fabrics, Free Motion Quilting Book, How Big Is a Fat Quarter in the UK?, Jelly Roll Fabric, Patchwork and Quilting Books, Quilting Books for Beginners, Colourful Bed Quilts, Colourful Quilts for Sale, Quilt As You Go for Beginners, Retro Quilts for Sale, Modern Retro Quilts, Handmade Patchwork Quilts for Sale, Heirloom Quilts for Sale, Gifts for Quilter's and Stitchers.
Analysing these two lists of keywords for relevance, authoritiveness, and competition (based on wordtracker.com) I streamlined the list to a mix of 20 short and long-tailed keywords which I used throughout the site and in meta data:
- quilts
- patchwork quilts
- quilters fabric
- handmade quilts
- baby quilts
- free motion quilting
- fat quarters
- quilting books
- retro quilts
- handmade patchwork quilts for sale
- fat quarter bundles
- patchwork quilts handmade
- patchwork quilts for sale
- modern quilts, cotton patchwork quilts
- cotton patchwork fabrics
- patchwork and quilting books
- handmade patchwork quilts for sale
- heirloom quilts for sale
- gifts for quilters and stitchers
I ensured that I used these keywords throughout the site where appropriate and I also made sure I used these keywords in image names and descriptions.
The target audience for the site is most likely to be middle-aged women. As such, I decided that this demographic was most likely to use facebook for social media, rather than twitter or instagram which usually attracts a younger audience. Therefore I created a facebook business page and included a link to the page in the site. See screenshots below.
In order to plan the project, I used agile methodologies. I created a project kanban board and populated it with a number of user stories (see below), based on the following epics.
- Epic 1: Create a website that allows users to search for and purchase beautiful handmade quilts and materials and accessories to help make patchwork quilts themselves. Includes user stories #1, #2, #11, #12, #13, #10, #3, #4, #14, #15, #16, #19, #17, #5, #6, #8, #7, #9, #18.
- Epic 2: Create a website that allows users to write reviews for products sold on the site in order to help customers decide on their next purchase. Includes user stories #30 and #31.
- Epic 3: Create a website that allows users to add products to their wishlist so they can purchase them at a later date. Includes user stories #28 and #29.
- Epic 4: Create a website that allows users to contact the site owners and interact with the site via their facebook business page and newsletter. Includes user story #34.
- Epic 5: Create a website that allows superusers (store owners) to add, edit, and delete products from the site. Includes user stories #25, #26, and #27.
I decided on three iterations for the project. My main aim for the first two iterations was to complete most of the user stories and deploy it, while the third iteration would focus more on testing the website and completing documentation. I used MoSCow prioritisation to prioritise the user stories and tasks in each iteration. I estimated user stories and tasks based on the following user story since I thought it was one of the smallest pieces of work to be undertaken. Giving this an estimate of one story point, I estimated other user stories relative to this one using a Fibonnaci sequence.
Since I had no 'velocity' measures to use to give an indication of how many story points I could complete in an iteration, I estimated, based on my baseline user story, that I could complete 50 story points per iteration. As such, I ensured that iteration one included no more than 30 story points (60%) that were MUST HAVE or SHOULD HAVE priorities. The kanban board for iteration one at the outset looked like this:
Towards the end of Iteration 1, I found that I had completed all of the tasks and user stories for the iteration, but I had no time left spare.
Based on my velocity measure for Iteration 1, for Iteration 2, I included user stories totalling 44 story points (since I knew I would be taking at least one day off during this iteration), with MUST HAVE and SHOULD HAVE priorities totalling 26 story points (less than 60%):
At the end of Iteration 2, however, I found that I did not have time to complete the following user stories, and I moved them back to the backlog. In Iteration 2, I completed 31 story points.
For Iteration 3 I included user stories totally 50 story points with MUST HAVE and SHOULD HAVE priorities totalling 29 story points (less than 60%):
At the end of Iteration 3, I completed all of the user stories except for two, which I marked as won't do and moved back to the backlog. In iteration 3, I completed 46 story points.
-
- Python 3.12.2: the primary language used to develop the server-side of the website.
- JS: the primary language used to develop interactive components of the website.
- HTML: the markup language used to create the website.
- CSS: the styling language used to style the website.
-
- Code Institute PostgreSQL Database: database used to store all the data.
-
- Git: the version control system used to manage the code.
- Pip3: the package manager used to install the dependencies.
- Gunicorn: the webserver used to run the website.
- Django-allauth: the authentication library used to create the user accounts.
- Django-crispy-forms was used to control the rendering behavior of Django forms.
- Heroku: the cloud platform used to host the website.
- GitHub: used to host the website's source code.
- Chrome DevTools was used to debug the website.
- Font Awesome was used to create the icons used in the website.
- Google Fonts was used to select fonts for the website.
- Favicon.io was used to generate a favicon for the website.
- Coolers was used to generate the colour scheme for the website.
- LucidChart was used to create the ERD.
- Figma was used to create wireframes for the site.
- Am I Responsive was used to create the headline image for the README.md
- W3C Validator was used to validate HTML5 code for the website.
- W3C CSS validator was used to validate CSS code for the website.
- JShint was used to validate JS code for the website.
- PEP8 was used to validate Python code for the website.
- Table to Markdown was used to convert excel tables into markdown for the TESTING.md file.
- Wordtracker was used to analyse the competitiveness of SEO keywords.
Gitpod was used as the IDE for local development of the application and GitHub was used for version control.
For details of all testing performed, including validator testing and manual testing, please see TESTING.md. This also includes details of bugs found and resolved throughout the development process.
If you would like to work on this code you can click on the repository here (https://github.com/Jem212Mac/the-crafty-quilt-company) and click on 'Fork' to create your own fork of the code to work on.
The application was deployed to Heroku. In order to deploy to Heroku, the following steps were performed:
- 'pip3 install gunicorn~=20.1' was used in the IDE terminal to install a production ready webserver for Heroku.
- The command 'Pip3 freeze --local > requirements.txt' was used in the IDE terminal in order to create a requirements.txt file which included the dependencies for the project. Heroku needs this file to install the required dependencies before the application is run.
- A Procfile containing 'web: gunicorn gabbygourmand.wsgi' was created in the root of the project directory.
- ,'.herokuapp.com' was added to the allowed hosts in the project settings.py file.
- I created a new Heroku account here: (https://id.heroku.com/login).
- From the Heroku dashboard I clicked 'Create new app' and input a unique name for the app, a region, and clicked 'create app'.
- I clicked on the Settings tab and went to the Config Vars section.
- I added the appropriate details to Config Vars.
- I clicked on the 'Deploy' tab, chose Github as my deployment method, and searched for my github repository to connect.
- For this project I chose to automatically deploy with every git push.
Given more time there are a number of enhancements I would like to make to the website:
- I would allow Sign Up or Sign In with social media accounts.
- I would include a FAQs model so that site owners can maintain and update FAQs on patchwork and quilting techniques that might be useful to their users. This might also boost the SEO for the site.
- I would include some external inks to relevant sites such as (https://www.thefestivalofquilts.co.uk) to also enhance the SEO for the site.
- I would include a delete confirmation for the links allowing superusers to delete products from the site.
- On a number of occasions I contacted Tutor Support to help me better understand certain coding practices and techniques better and I would like to thank them for their help and support.
- I would like to thank my mentor, Iuliia Konovalova, for her guidance during this project.