The live version of the website can be seen here
- Project Purpose - Overview
- User Experience Design
- Agile Methodology
- Technologies Used
- Testing
- Deployment and making a clone
- Credits
A website that promotes handmade macrame items for sale, made by an artist Marika from Poland. She collects wood samples from the forests around the suburban Dublin and creates items tying Irish Cotton around them to make items like Macrame wall hangings, wall decorations, earrings, keychains and similar handmade items that look warm and comforting. She is very enthusiastic about her passion and as she worked in Hospitality, this pandemic has inspred her to start using her hobbies to make other people happy too, by selling these handmade items online. She organizes the shipment and packs each item herself and cares very much for the display of every package. Every item represents her and her passion towards handmade originals as she rarely could make any two items exactly the same, which makes these even more special. She is also very active on instagram in promoting her items and has ready made promotional instagram page with videos and reels that present her new collections so she has quite an audience on Instagram, Facebook and Etsy which are bringing revenue her way. Her shop started on Etsy on this link
The website color matches the items in a sense that it is kept to few pinkish and brown/grey shades and black and white to be for the contrast and the palette is chosen by the owner with a hint for 'boho' style to match the macrame. I wanted originally to have all buttons the same pinkish color to be seen only on hover as not to be too accentuated.
SEO implementations is used with an accent towards home decor and cozy cotton feel so it inspires good feelings for users while browsing interesting items in warm colors. Keywords are used to associate website with handmade macrame art, original, cotton, home decorations.
This website is made for a small irish business that promotes handmade macrame items, and allows users to purchase items through the website directly from the owner of the website. This is a B2C - Business to Customer model, as it allows for direct communication between the owner/artist of the items and customers.
The artist of macrame items had made a FB page which cannot be found just by engering keywords, but just after the artist shared this link. The content showcases the items and the stories with the items make it even more original as artist is the one doing everything, from packing, through marketing, and shipping.
A Macrame shop is for people of all ages and gender, who like handmade unique macrame products, and have a fond for (irish) cotton and wood. For a dash of nature in anyones home,it would also make a nice present/gift or just pure home decor with style. Wood was taken from Irish forests outside of Dublin and surroundings and Cotton provided from Amazon
Artist suggested more warm, boho, soft colors so i went for a combination of these 
The user stories were categorized into different priorities, from highest to lowest: "Should Have" ,"Must Have", "Could Have", "Wont Have". User Stories that have been labeled as "Wont Have" are not prioritized to be implemented in this edition of this app but as a future feature.
The User Stories that have been satisfied are:
| User Story | Image of the User Story completed | Label |
|---|---|---|
| #1 Add Subscription to newsletter |  |
Must Have |
| #2 Logged out Navbar |  |
Must Have |
| #3 Add page that displays items details with ability to add item to shopping cart |  |
Should Have |
| #4 Create a Search Feature |  |
Should Have |
| #5 A button for shopping and browsing macrames |  |
Must Have |
| #6 A Shopping Cart Feature with adding items |  |
Should Have |
| #7 Add Checkout Page |  |
Must Have |
| #8 Add feature to like an item |  |
Could Have |
| #9 Create User Profile Page |  |
|
| #10 Review macrame items user have purchased |  |
Could Have |
| #12 Add ability to make payments using Stripe |  |
Must Have |
| #13 Add messages to indicate status of the adding items into cart |  |
Must Have |
| #14 Add Footer with links |  |
Must Have |
| #15 Admin authorisation and authentication |  |
Must Have |
| #19 Home page |  |
Must Have |
| #20 Add notification while after supscription to newsletter |  |
Must Have |
| #22 Macrame Deletion ability - Admin should be warned before deleting anything |  |
Must Have |
- Main Navigation right next to the Logo on Desktop versions, but on mobile the navigation is placed on the right hand side, supposing the users are more rigght-handed so it is easier to manage and access on mobile versions.
- Main Logo and Homepage/landing page
- Main Shopping button outlined in the middle of the homepage as the most obvious thing to do next, to shop for macrames
- Products page with listed items for sale and option to add likes to items on this page without entering the detailed part of the page
- Detailed product page with ability to add products in the shopping cart
- Messages to notify the user when he/she is logged in succesfully or made an order
- User profile wher users can update their personal information
- Admin ability to add, update and remove product without accessing the admin panel featured in Django
- Add/ Update/ Remove product into the shopping cart
- Checkout page for reaching the payment and completing with stripe payment system
- #11 Add pagination to macrame items page
- #21 Ability to write responses to the reviews of users by the author
- #16 Add Facebook/Google Login option
- #18 Add delivery price to be determined by the country where items are shipped out to
First three pages for wireframes - Homepage, Macrame list page, item details page
Entities that are related here are User, Macrame Item, Shopping Cart, Order, Reviews, Newsletter and Likes
To create the User stories I used Github Issues and then I grouped them according to MoSCoW prioritization technique. The link with live issues can be found here. Some of the User Stories will be left for the future development and they are labeled as 'Could Have'.
In your app
- Add the list of requirements by writing in the terminal "pip3 freeze --local > requirements.txt"
- Git add and git commit the changes made
Log into heroku
-
Log into Heroku or create a new account and log in
-
top right-hand corner click "New" and choose the option Create new app, if you are a new user, the "Create new app" button will appear in the middle of the screen
-
Write app name - it has to be unique, it cannot be the same as this app
-
Choose Region - I am in Europe
-
Click "Create App"
The page of your project opens.
-
Go to Resources Tab, Add-ons, search and add Heroku Postgres
-
Choose "Settings" from the menu on the top of the page
-
Go to section "Config Vars" and click button "Reveal Config Vars".
-
Add the below variables to the list
- Database URL will be added automaticaly
- Secret_key - one can be generated here or make up your own secret key.
Go back to your code
- Procfile needs to be created in your app Content of Procfile has a structure like this :
web: gunicorn PROJECT_NAME.wsgi
-
In settings in your app add your name of your Heroku App to ALLOWED_HOSTS without the starting slashes and 'https:'
-
Add and commit the changes in your code and push to github
Final step - deployment
-
Next go to "Deploy" in the menu bar on the top
-
Go to section "deployment method", choose "GitHub"
-
New section will appear "Connect to GitHub" - Search for the repository to connect to
-
type the name of your repository and click "search"
-
once Heroku finds your repository - click "connect"
-
Scroll down to the section "Automatic Deploys"
-
Click "Enable automatic deploys" or choose "Deploy branch" and manually deploy
-
Click "Deploy branch"
Once the program runs: you should see the message "the app was sussesfully deployed"
- Click the button "View"
The live link can be found here
By forking the GitHub Repository you will be able to make a copy of the original repository on your own GitHub account allowing you to view and/or make changes without affecting the original repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- In the same line as the name of your repository, on the right side there are a few buttons, locate the "Fork" button and click on it
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open commandline interface on your computer
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/totalnoMartina/irish-macrame
- Press Enter. Your local clone will be created.
-
Create Virtual enviroment on your computer or use gitpod built-in virtual enviroment feature.
-
Create env.py file. It needs to contain those 5 variables.
- Database URL can be obtained from heroku, add PostgreSQL as an add-on when creating an app.
- Secret_key - the django secret key can be generated here.
- Cloudinary URL can be obtained from cloudinary follow the steps on the website to register.
- Google API key can be obtained here you will have to register with google and create new app to get the API key. Follow the instructions on the website.
DEVELOPMENT
SECRET_KEY
STRIPE_PUBLIC_KEY
STRIPE_SECRET_KEY
STRIPE_WH_SECRET
PostgreSQL and Cloudinary URL keys are needed only on Heroku, not in local IDE
- Run command
pip3 freeze --local > requirements.txt
Go to developers tab. On side menu you will find API keys. Copy STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY.
(The next part I did not implement but it might be useful for the fellow developers) Go to Webhooks. Click Add Endpoint button in top right hand corner. Add endpoint URL (your local or deployed URL) Add all events Than click add endpoint You should be redirected to this webhook's page. Reveal webhook sign in secret and copy to Settings and to heroku as STRIPE_WH_SECRET variable (I skipped this part until here, and made an app on google)
- Log into gmail account
- Go to Settings and than See all settings
- Top menu go to Accounts and import
- Find on the list Other google account settings
- Left side menu - Security
- Turn on two step verification: add phone number and follow instructions
- Go back to security App passwords - Select Mail, Select Device - Other, Django, Copy app password.
In Heroku EMAIL_HOST_PASS is the password copied from above. EMAIL_HOST_USER is the gmail email address
Most of the code has been used from Code Institute curriculum for the e-commerce related code, mainly from 'Boutique Ado' regarding items, bag and payment section, and for deployment steps, cloudinary and starting apps has been followed by the walkthrough project 'I think, Therefore I Blog'. Many thanks to teachers that presented us a way to make an e-commerce website using Django.
First bugs were related to CSS, as it was not loading background linear so I used stackoverflow and found this solution. The MyColor was used to help choose colors. Google Fonts was used for selection of fonts for the website. Finding a cool navigation was not an easy task but here I found one that suits.
Finding way to easy CRUD functionality through this link More info on CRUD on this website
More help for the review idea on this video
A great example of a README.md found here by JoGorska , a very inspiring individual and Alumni at the Code Institute.
I wanted likes to be only available to users that are logged in so I found more information on django documentation here
Found a guide on supscriptions/newsletters for non-registered user which I might use as I have used the dynamic rendering of the curent year using a jinja template on this link
A link that helped me handle csrf token error in the begining because i am using Django 4.
As I was trying to find best explanation of deployment steps I found most genuine approach from JoGorska README.md of the project bonsai-shop and used the same approach to explain this.
I found a guide for newsletter here and in the beginning my newsletter is poping messages but not storing the emails.
I would like to thank to my mentor Tim Nelson, fellow students Iulia Konovalova and JoGorska, as well as the CI community and Slack community for the support and sharing the bugs and solutions that help each other grow, it is highly apreciated and forever remembered to be passed on to another student/fellow coder in the future.
I also have a friend that is opening a bakery and asked me to do a website for him for wholesale so I will use this knowledge and put it into practice in real life very soon, I am really grateful for the Code Institute and all the people that guided us and were teaching us, supported us through this last year