Stitchin is a Django-based web application for users to share their knitting and crochet patterns. Other users can like and comment on these patterns, and add the pattern to their favourite so they can use the pattern later.
Important
I used Allow X-Frame-Options to access the UI Responsive page but please uninstall the extension after using it.
Visit the live site here: Stitchin
- Stitchin
- UX - User Experience
- Project Planning
- Features
- Technologies & Languages Used
- Testing
- Deployment
- AI Implementation and Orchestration
- Credits
Stitchin is a platform designed for users to share their patterns with the community. The platform offers the following features:
- Registered users can:
- Upload their patterns
- Comment on other users' patterns
- Add patterns to their own favourite
- Unregistered users can:
- View the site
- Browse through the available patterns
The color scheme for Stitchin is designed to be visually appealing andu user-friendly. The chosen colors are:
- Primary Color: #ADC178 (Olivine)
- Secondary Color: #A98467 (Chamoisee)
- Dark Green Color: #556B2F (Dark Olive Green)
- Accent Color: #C6D8A7 (Tea Green)
- Background Color: #F0EAD2 (Parchment)
- Text Color: #492E1C (Dark Brown)
The fonts used for Stitchin are chosen to enhance readability and aesthetics. The chosen fonts are:
- Body Text: Karla
- Headings: Playfair Display SC
I have used my GitHub project board to manage the project. I have created a project board with columns for each stage of the project. I have created issues for each task and assigned them to the relevant column. I have also used thes project board to track the progress of the project.
- Must Have: User authentication, pattern sharing, commenting, liking.
- Should Have: User profiles, search functionality.
- Could Have: Pattern rating, tagging.
- Won't Have: Real-time chat.
The Kanban boarde used for this project is a GitHub project board with the following columns:
- To Do: Tasks that need to ber done.
- In Progress: Tasks that are currently being worked on.
- Testing: Tasks that are completed and need to be tested.
- Done: Tasks that are completed and tested.
You can view the project board here.
User stories are managed in the GitHub project board. I have created issues for each user story and assigned them to the relevant column.
Link to User Stories in GitHub Projects: GitHub Projects Kanban Board
| User Story | Priority |
|---|---|
| As a user, I can view the home page so that I can learn about the platform's features. | MUST HAVE |
| As a user, I can access the navigation bar so that I can navigate through the site. | MUST HAVE |
| As a user, I can see the footer so that I can access additional information and links. | MUST HAVE |
| As a user, I can browse through the patterns so that I can explore the available content. | MUST HAVE |
| As a user, I can register a new account so that I can upload and interact with patterns. | MUST HAVE |
| User Story | Priority |
|---|---|
| As a logged in user, I can delete my account so that I can remove my profile and all my personal data from the platform. | MUST HAVE |
| As a logged in user, I can log in via my email and password so that I can access my account. | MUST HAVE |
| As a logged in user, I can log out of my account so that I can securely end my session. | MUST HAVE |
| As a logged in user, I can see notifications when I register, log in, or log out from my account so that I am informed of the changes. | SHOULD HAVE |
| As a logged in user, I can see my username at the top right corner so that I know I am logged in. | MUST HAVE |
| User Story | Priority |
|---|---|
| As a logged in user, I can upload new patterns to the platform so that I can share my creations with the community. | MUST HAVE |
| As a logged in user, I can add other users as collaborators to the pattern so that we can work on it together. | COULD HAVE |
| As a logged in user, I can see notifications when I upload a pattern so that I am informed of the changes. | SHOULD HAVE |
| As a user, I can search for a pattern so that I can find specific patterns quickly. | SHOULD HAVE |
| As a logged in user, I can like/unlike a pattern so that I can show my appreciation for it. | COULD HAVE |
| User Story | Priority |
|---|---|
| As a logged in user, I can add the pattern to my favourite so that I can easily access it later. | MUST HAVE |
| As a logged in user, I can remove a pattern from my favourite so that I can manage my saved patterns. | MUST HAVE |
| As a logged in user, I can create collections in my favourite so that I can organize my patterns. | COULD HAVE |
| As a logged in user, I can see notifications when I add or remove a pattern from my favourite so that I am informed of the changes. | SHOULD HAVE |
| User Story | Priority |
|---|---|
| As a logged in user, I can comment on a pattern so that I can share my thoughts and feedback. | MUST HAVE |
| As a logged in user, others can comment on my comment so that we can have a discussion. | COULD HAVE |
| As a logged in user, I can update my comment so that I can correct or improve it. | MUST HAVE |
| As a logged in user, I can delete my comment so that I can remove it if needed. | MUST HAVE |
| As a logged in user, I can see notifications when I comment on a pattern so that I am informed of the activity. | SHOULD HAVE |
The wireframes for Stitchin were created using Balsamiq. They include views for desktop, tablet, and mobile devices to ensure a responsive design.
-
Home Page
- The home page provides an overview of the platform and its features.
- The home page provides an overview of the platform and its features.
-
Pattern Page
- The pattern page displays individual patterns with details and user interactions.
- The pattern page displays individual patterns with details and user interactions.
-
Sign Up Page
- The sign-up page allows new users to create an account on the platform.
- The sign-up page allows new users to create an account on the platform.
-
Upload Pattern Page
- The upload pattern page enables users to upload new patterns to the platform.
- The upload pattern page enables users to upload new patterns to the platform.
-
Favourite Page
- The favourite page shows the patterns saved by the user in their personal favourite.
- The favourite page shows the patterns saved by the user in their personal favourite.
The database schema for Stitchin was created using dbdiagram.io. It includes tables for users, patterns, comments, favourites, and pattern hooks needles.
Stitchin employs several security measures to protect user data and ensure a safe user experience:
- User Authentication: User registration and authentication are handled by Django AllAuth.
- Defensive Design: Input validation and error messages provide feedback to users, guiding them towards the desired outcome. Unregistered users are redirected to the login page when trying to access restricted features.
- CSRF Protection: CSRF (Cross-Site Request Forgery) tokens are included in every form to help authenticate the request with the server when the form is submitted.
| Page | Unregistered Users | Logged-in Users |
|---|---|---|
| Home Page | Visible | Visible |
| Pattern Page | Visible | Visible |
| Upload Pattern Page | Not Visible | Visible |
| Favourite Page | Not Visible | Visible |
| Feature | Create | Read | Update | Delete |
|---|---|---|---|---|
| Pattern | Yes | Yes | No | No |
| Profile | Yes | No | No | No |
| Favourite | Yes (Created upon registration) | Yes | Yes | No (It is unnecessary to delete the user's favourite as it is intended for them to save the interested patterns for later) |
| Comments | Yes | Yes | Yes | Yes |
Header: Provides navigation links to different sections of the site.
Footer: Provides additional information and links.
Home Page: Provides an overview of the platform and its features.
Pattern Page: Displays individual patterns with details and user interactions.
Upload Pattern Page: Enables users to upload new patterns to the platform.
Favourite Page: Shows the patterns saved by the user in their personal favourite.
- Comment on Comments: Allow users to comment on others' comments and like comments.
- Tagging: Allow users to tag patterns for better categorization.
- Create Collection within Favourite: Allow users to create collections within their favourite to categorize the patterns.
- More Knitting Tools and Pattern Details: Allow users to upload different crafts with more pattern details.
- Buying Pattern: Enable users to sell their patterns and other users to support the creators.
- HTML
- CSS
- JavaScript
- Python
- Django
- Cloudinary: Used for cloud media storage for images.
- Git: Used for version control.
- GitHub: Used for online storage of codebase and Projects tool.
- Heroku: Used to host the website.
- Balsamiq: Used for creating wireframes.
- Coolors: Used for creating the color theme.
- Favicon: Used for converting the icon into favicon.
Please refer to TESTING.md for all testing.
The live deployed application can be found deployed on here.
This project uses a Code Institute PostgreSQL Database.
This project uses the Cloudinary API for storing media assets online, as Heroku does not support persistent storage for this type of data.
To obtain your own Cloudinary API key, create an account and log in.
- On your Cloudinary Dashboard, you can copy your API Environment Variable.
- Be sure to remove the
CLOUDINARY_URL=as part of the API value; this is the key.
This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Deployment steps are as follows, after account setup:
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you, and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
Important
This is a sample only; you would replace the values with your own if cloning/forking my repository.
| Key | Value |
|---|---|
DATABASE_URL |
user's own value |
SECRET_KEY |
user's own value |
CLOUDINARY_URL |
user's own value |
DISABLE_COLLECTSTATIC |
1 (this is temporary, and can be removed for the final deployment) |
Heroku needs three additional files in order to deploy properly.
- requirements.txt
- Procfile
- runtime.txt
You can install this project's requirements (where applicable) using:
pip3 install -r requirements.txt
If you have your own packages that have been installed, then the requirements file needs updated using:
pip3 freeze --local > requirements.txt
The Procfile can be created with the following command:
echo web: gunicorn <app_name>.wsgi > Procfile- replace <app_name> with the name of your primary Django app name; the folder where settings.py is located
The runtime.txt file needs to know which Python version you're using:
- type:
python3 --versionin the terminal. - in the runtime.txt file, add your Python version:
python-3.12.3
For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:
Either:
- Select Automatic Deployment from the Heroku app.
Or:
- In the Terminal/CLI, connect to Heroku using this command:
heroku login -i - Set the remote for Heroku:
heroku git:remote -a app_name(replace app_name with your app name) - After performing the standard Git
add,commit, andpushto GitHub, you can now type:git push heroku main
In Heroku, you need to select your own GitHub repository and click the Deploy button.
The project should now be connected and deployed to Heroku!
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the requirements.txt file.
pip3 install -r requirements.txt.
You will need to create a new file called env.py at the root-level, and include the same environment variables listed above from the Heroku deployment steps.
Important
This is a sample only; you would replace the values with your own if cloning/forking my repository.
Sample env.py file:
import os
os.environ.setdefault("DATABASE_URL", "<user's own value>")
os.environ.setdefault("CLOUDINARY_URL", "<user's own value>")
os.environ.setdefault("SECRET_KEY", "<user's own value>")
# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/catrinlam/stitchin.git
- Press Enter to create your local clone.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account
Throughout the development of Stitchin, GitHub Copilot was integrated into the workflow to assist with various aspects of coding, debugging, and optimisation. This project marked a significant step in leveraging AI-powered development tools to enhance efficiency and maintain code quality.
Reflection: Initially, GitHub Copilot was primarily used to generate repetitive boilerplate code, such as Django models, serializers, and views. Over time, its utility expanded beyond that, as it provided alternative implementations and prompted exploration of more efficient coding patterns. One key benefit was its ability to suggest more concise and Pythonic ways to handle database queries, which streamlined the development process.
Highlight: The iterative nature of working with Copilot improved the clarity of prompts and requests. By refining input queries, the quality of generated code improved, demonstrating the importance of structured communication with AI tools.
Reflection: Copilot played a role in identifying potential errors and inconsistencies within the codebase. While it was not a replacement for manual debugging, it provided suggestions that highlighted overlooked issues. Additionally, it facilitated simplifications in complex logic, making the codebase more maintainable and readable.
Reflection: Copilot contributed to refining the front-end experience, particularly in styling and responsiveness. While front-end development was not a primary focus, AI-assisted recommendations improved UI consistency by suggesting minor but effective changes, such as adjusting breakpoints and optimising Bootstrap styling. These refinements enhanced the overall user experience.
Reflection: The integration of Copilot influenced the approach to development, encouraging an iterative workflow. It provided a secondary perspective when structuring new features and prompted considerations that might not have been initially accounted for. However, while its suggestions were valuable, they occasionally required significant modification to align with project-specific requirements.
Using AI-assisted development tools like GitHub Copilot proved beneficial in streamlining repetitive tasks, debugging, and optimising code structure. However, it was evident that AI should complement, rather than replace, core development skills. The experience reinforced the importance of critical evaluation when incorporating AI-generated solutions, ensuring that code remains maintainable, efficient, and aligned with best practices.
The process of working with AI tools also encouraged a more structured approach to problem-solving and documentation. Clearer articulation of requirements led to improved results, both in AI-assisted development and broader software engineering practices.
-
Readme structure from project readme guide, example project 1 and example project 2
-
Django Tutorial - I Think Therefore I Blog
- Flaticon - favicon design
| Source | Author | Link |
|---|---|---|
| Pexels | Anna Tukhfatullina | Link |
| Pexels | Daniel Duarte | Link |
| Pexels | Magda Ehlers | Link |
| Pexels | Arina Krasnikova | Link |
| Pexels | Fernanda Gomez de la torre | Link |
| Pexels | Ryutaro Tsukata | Link |
| Pexels | Kaboompics.com | Link |
| Pexels | freestocks.org | Link |
| Unsplash | Milada Vigerova | Link |
| Unsplash | Lucky Alamanda | Link |
| Unsplash | Thea Hdc | Link |
| Unsplash | kids&me Germany | Link |
| Unsplash | Karen Cantú Q | Link |
I would like to express my heartfelt gratitude to my family and partner for believing in me and supporting me throughout the Bootcamp.
A huge thank you to my Learning Facilitator, Emma Lamont, for her invaluable guidance, patience, and for always being there to answer my questions.
I am also incredibly grateful to my mentor, Spencer Barriball, for his support and insightful advice.
Lastly, thank you to my Coding Coachs, Ruairidh MacArthur, and John Rearden for their support and encouragement whenever I encountered coding challenges.