Knit Happens is an eCommerce site aimed at lovers of knitting looking to find wool, needles and patterns to purchase and allows them to leave blog posts of their creations and find inspiration for their next project. The site is designed to be responsive and easy to navigate on a range of devices to make it easily accessible for all users.
This site was built for educational reasons and no deliveries will be fulfilled.
Link to live site
- UX (User Experience)
- Design Choices
- Features
- Database
- Technologies
- Testing
- Bugs
- Version Control
- Deployment
- Credits
| User Story ID | As a/an | I want to be able to... | So that I can... |
|---|---|---|---|
| Viewing Products & Navigation | |||
| 1 | User/Shopper | view individual products | identify their qualities and compare. |
| 2 | be able to add, edit quantity and remove items from my bag | buy them if after browsing. | |
| 3 | see any special offers | take advantage of saving money on products I'd like to buy. | |
| 4 | gain inspiration from the blog | decide what to buy and make next. | |
| 5 | add posts to the blog | show other users what I have made and gain their opinions through comments. | |
| Registration and Accounts | |||
| 6 | User/Shopper | register for an account | keep track of my orders and check my personal details. |
| 7 | receive email confirmation upon signing up | verify my set up was successful. | |
| 8 | be able to reset my password in case I forget it | gain access to my account. | |
| 9 | have the ability to log in to the site with my details | view my orders and personal details | |
| 10 | update my personal details | keep them up to date. | |
| 11 | purchase from the site without having to create an account | check out quickly and easily. | |
| Searching products | |||
| 12 | User/Shopper | search for specific products | find products I am interested in buying. |
| 13 | easily understand the search results | quickly decide which product I want to buy. | |
| 14 | sort by price, name, category and rating | view a wide range and choose which to buy. | |
| Checkout | |||
| 15 | Shopper | have a running total of my bag | stay within my budget. |
| 16 | view my bag contents | keep track of which products I have selected. | |
| 17 | easily select the correct size | ensure I have ordered the right size for my project. | |
| 18 | adjust the quantity of products to buy | update the order without going back to the product page. | |
| 19 | easily enter my payment details | checkout as quickly and easily as possible. | |
| 20 | view the full order before entering card details | check it before confirmation. | |
| 21 | receive email notifications when I make an order | confirm my order has been placed and refer back to. | |
| Admin/Management | |||
| 22 | Store owner/Admin | add a product | sell new items in my store |
| 23 | update a product | change descriptions, sizes, images in my store. | |
| 24 | delete a product | remove items no longer on sale. |
The fonts were chosen to complement one another and also give the aesthetic of a fun, knitting store with 'Lobster', cursive and 'Libre Franklin', sans-serif as a contrasting font to help the cursive stand out and allow for extra readability when more information given.
- This Coolors palette was used to put together a colour scheme to reflect the different colours of the balls of wool to keep in with the theme of the knitting shop.
- The original colour scheme was slightly different but due to accessibility reasons this was changed near the end of building this project to improve contrast ratios. Previous colours here
The images used were taken from these sources:
- Home page wallpaper by Nynne Schrøder
- The images of the different kinds and colours of wool were from Surene Palvie
- The images of knitted garments from Miriam Alonso, Anna Khomutova, Karolina Grabowska, Arina Krasnikova and Daria Shevtsova
The wireframes were created using Adobe XD and can be found in pdf form in wireframes.
- Home
- Register
- Login
- Profile-Orders
- Products
- Product-Detail
- Add-Product-To-Bag
- Processing-Payment
- Checkout
- Cart
- Confirmed-Order
- Admin
- Home
- Register
- Login
- Profile
- Orders
- Edit-Profile
- Products
- Product-Detail
- Add-Product-To-Bag
- Processing-Payment
- Checkout
- Cart
- Blog
The navigation bar displays different links depending on whether the user is logged in, logged out or a super user.
| Link | Not logged in | Logged in | Logged in as super user |
|---|---|---|---|
| Home | âś“ | âś“ | âś“ |
| Log In | âś“ | âś— | âś— |
| Register | âś“ | âś— | âś— |
| Profile | âś— | âś“ | âś“ |
| Log Out | âś— | âś“ | âś“ |
| Search | âś“ | âś“ | âś“ |
| Blog | âś“ | âś“ | âś“ |
| Add Product | âś— | âś— | âś“ |
- Users are able to:
- Create a profile to save their orders and personal information
- Confirm their details are correct via email verification
- Store details for faster checkout
- Users are able to:
- Log in to profile to see their orders and personal information
- Edit personal information if required
- Users are able to:
- See the products for sale on the site
- Sort products by A-Z, Name, Category, Price.
- See only 12 products at a time to save site loading times
- Price of product
-
Users are able to:
- Click the products to find out more information including
- Name, Size (if has size), Weight (if has weight), colour, price, SKU, category
- Add products to bag to buy
- Find out the needle size of their required product and convert to local using the sizing guide
- See reviews of products and also review the products if logged in
-
Super users are able to:
- Add, edit and delete products
If the user is a super user they can:
- Add a product (inc adding image)
- Edit a product
- Delete a Product
- Users are able to:
- Adjust number of products in bag if they require
- Find out delivery costs
- Find out how much more they need to spend to get free delivery
- Clearly see the total of their items by quantity and grand total
- Users can:
- Save time as personal details pulled from profile page if user is logged in
- Save their delivery information to their profile
- Clearly see how much they will be charged for their items and delivery
-
Guest users can:
- View blog posts
-
Logged in users can:
- Add comments on blog posts
- Create new blog posts
- Edit their own blog posts
- Delete their own blog posts
Header
-
All users can:
- Navigate to home, blog, products, bag pages
-
Users logged in can access:
- Profile pages
-
Users not logged in can:
- Access log in and register pages
Footer
- All users can access social media links, terms and conditions and privacy policy pages.
- 404 page created to redirect users back to the main site in case of an error
- 403 page created to redirect users back to the main site in case they try to access a page they are not authorised to
- 500 error page created to redirect users to the main site after a server error
- I would like to implement a feature where if users log out of the site with items in their bags the items would be there upon log in again. Currently this is not the case.
- A chat bot where users can ask questions on the site.
- The ability to add many filters to their search criteria eg colour, category.
- The ability for users to change their username.
- A star rating or upvote functionality for the products and blog posts.
The site was designed to be mobile first as more users are using their handheld devices to shop online but this has been adapted to allow a great experience for desktop users also.
-
Form Validation
- Form validation has been added to every form to ensure all required information is included before submitting.
- If incorrect data is input a warning text appears to advise the user how to continue
-
Default Image if none added
- In the event that a product or blog post is added without an image a default image will be added however this is unlikely due to form validation.
-
Unauthorised Attempts
- An error is launched if the user attempts to visit a part of the site where they are not authorised
-
@login_required
- @login_required decorator added to restrict access to certain pages.
- If a logged-out user tries to access a restricted page, they will be redirected to the login page.
- Only authorised users may perform certain actions: Eg add, edit, delete product and edit, delete blog posts. Example
- @login_required decorator added to restrict access to certain pages.
-
Bag
- Validation ensures a minimum of 0 product and maximum of 99 products is added to the bag. In the case that 0 is selected the item is removed from the bag.
- Error message appears if user tries to add negative numbers of items "Value must be greater than or equal to 0"
The database uses SQL through PostgreSQL and was originally formed from fixtures categories.json and products.json
The Database schema is below
- HTML5
- Used as the main markup language for the website content.
- CSS3
- Used to style the individual webpages.
- JavaScript
- Used to show the questions through pagination and for the game play.
- Python 3
- Used to run the site and database
- Bulma
- Used to design a mobile-first responsive website layout along with custom components.
- Django
- High level framework used for rapid development of the site.
- Git
- Git was used for version control (commit to Git and push to GitHub).
- GitHub
- Used to store, host and deploy the project files and source code after being pushed from Git. I also used it for the Project Kanban board to keep track and split tasks into smaller tasks to make them easier to fulfill.
- Gitpod
- An online IDE linked to the GitHub repository used to write my code.
- Heroku
- A Cloud Application Platform used to deploy the site
- AWS
- A cloud application to hold media files.
- Google fonts
- Used to compare and choose fonts.
- Coolors
- Used to research and choose the colour scheme by comparing and contrasting similar colours in the generator.
- Favicons
- Used to generate a favicon for the website title.
- Lighthouse
- Used to audit the site for quality and ensure responsiveness.
- techsini
- An online tool to check how responsive the site is on different devices and displayed at the top of the README file.
- tinypng
- Used to reduce the size of the images for better user experience.
- JSHint
- Used to detect errors in the JavaScript files
- PEP8 Online
- Used to check PEP8 compliance in the code
- W3C Markup Validator
- Markup validation service for HTML5
- Jigsaw Validator
- CSS3 Validation Service
- Wave
- Accessibility validation service.
- Testing can be found here
- Fix for Favicon 401 error found as resolved using the site linked.
- Fix for price negative numbers on Add Product page form found on Stack Overflow
- AllAuth automatically logs user out before displaying Sign Out page
- Sorting products works on first page but when clicking next page it stops working.
Version control was managed within GitHub and Gitpod and regular commits pushed to GitHub. See below for how this was managed:
- Starting from GitHub clone the Code Institute template by clicking Use This Template and copying to my repository under the name ms1-ali-shiatsu. The workspace is then launched by clicking GitPod - this action only needs to be performed once and then workspace reopened from GitPod.
- Start the Gitpod Workspace which opens an online IDE editor window.
- I created various branches to work on different sections of code to push to master. I did this by typing into the terminal the commands: git status to find out which branch currently on; git switch -c <branchname> to create a new branch and switch to it immediately and then once the work was completed on that branch typed git add <files to be added> , git commit -m <commit message> and git push --set-upstream <remote> <branchname> to push to GitHub. I then created a pull request to pull the changes to the master if happy with the changes. From this point I would use git -d <branchname> to delete the local branch and delete the remote branch on GitHub.
- Meaningful commit messages were used to allow to roll back any changes made throughout the journey.
Click here to see deployment steps
- A large portion of the Django, Python and JavaScript code was developed following the Code Institute's Boutique Ado walkthrough.
- CodeInstitute Full Stack Developer Course
- Wes Bos JavaScript 30 for extra ideas on using JavaScript
- Background layout this was taught in one of the Code Institute lessons from css-tricks.com and I use it constantly for my background images.
- Code taken from Bulma GitHub thread to fix the navbar menu always open on mobile.
- Uni-form Crispy Form CSS and JS code taken from the uni-form GitHub repo
- Code inspiration taken from CI Student Kyle Lawrence for help with the reviews section.
- Code inspiration from CI student Jenny Malmoe while completing the Blog section.
- Code with Stein tutorial followed to complete the blog model on the project and some extra information from jennymalmoe fellow student.
- Testing Tools docs 1, 2, 3
- Pagination Tutorial
- Stack Overflow to help position the images within the cards and ensure any new uploaded products or blog posts had images to fit the columns.
- Student friend Abi where I got help with automated testing.
- Terms and conditions, privacy page sources from https://www.termsfeed.com/
All product images sourced from Pexels Homepage image by K8 on Unsplash
- My Mentor for confidence boosting and helpful advice and feedback.
- Friends and family for testing the site and giving feedback on different devices, especially Alasdair, Eleanor and my mum for diligently testing and finding things to be fixed.
- @Eventyret_mentor, Amy O'Shea, Iryna, Claire Lemmonaire on Slack who supported me through the journey.
- My husband for all his support, patience and great ideas.
- And, lastly my cheerleader Emanuel Silva for helping me to stay motivated, sharing great ideas and bad jokes to keep us going.