A Django created e-commerce site for selling shirts with stoic quotations on them.
- Design
1.1. Bussiness Model
1.2. Market Research 1.3. Marketing - User Stories
- Functionality
- Technologies Used
- Tests
5.1. Lighthouse
5.2 CSS Validator
5.3. HTML Validator - Errors and Fixes
6.1 Issues - Deployment
- Credits
The site is made up of 7 page options displayed on a horizontal navbar:
- Home
- Products can be sorted by price, rating, category and philosopher or all can be selected
- Categories can be sorted by every category available or all can be selected
- Philosophers can be sorted by 5 philosophers
- Contact Us
- Subscribe
- My Account has a dropdown of two options "Register" or "Login" and once logged in the user can navigate to the profile page
The initial design of StoicShirts was meant to be slightly different as I wanted to have the navbar spread out in the 4 corners of the page and in the middle would sit the shirt logo.
The selected business model for StoicShirts22 is a B2C model in which direct contact can be made by the customer through the website and purchase the offered products.
The delivery framework used to satisfy customer requests is the drop-shipping type where the customers order the products that we upload from our manufacturers but the stocking, delivering and standards upkeep will rely on third parties which is why the customer service department will be set-up so as any order can be tracked, if delivered damaged, will be replaced and rewards offered to multiple purchasess (i.e. massive price drop and extra products added as bonus to free delivery)
Heavy advertising required to attract customers. High investments in terms of hardware/software. Support or good customer care service.
Shopping Procedure
Like all B2C model the following purchasig procedure applies :
A user
6. Consults the vendor to get after service support or returns the product if not satisfied with the delivered product.
During the research for the business model or idea I found that the keywords "stoic" and "quotes" were very sought after and had high organic values especially in the United States.
After researching some related keywords have found that the most trending combination relating to philosophers and shirt were a mix of “seneca “, “plato “, "quotes" and "shirts".
Compared to the rest of the keywords,“seneca” had a massive increase combined with other keyword searches and ”plato” as well saw a great increase over the last 5 years. Seeing this upward trend I decided once finished I would use google’s keyword planner to see what would be the site’s potential.
Using Google’s Forecast option we can see that an average of £600+ could be made only using advertisements strategically placed on the site.
Like all e-commerce websites, a decent investment will be required in SEO improvement and website accessibility along with e-mail marketing campaings and a newsletter implementation.
User
- As a user I can login so that I can view my account
- As a user I can select products so that I can purchase them
- As a user I can search so that I can browse products
- As a user I can receive an e-mail so that I can confirm my account has been created
- As a user I can rate and leave a review
- As a user I can download an invoice so that I can prove the purchase/ keep for my records
- As a user I can recover password so that I can retrieve access to my account
- As a user I can rate and leave a review
- As a user I can browse so that I can view all the products
Admin
- As an admin I can login so that I can update products.
- As an admin I can login so that I can check and update the account details
- As an admin I can login so that I can check and update the order details.
- As an admin I can login so that I can check and approve reviews
On StoicShirts any user can:
- Access the main pages
Access to the products, contact page, subscribe as well as register or login can be made from the main navigation bar that can be found on all pages.
- Browse the shirts
The user can see all the products and sort them by price, category or philosopher.
- Add to a check-out bag
A user can add a product to the shopping bag and also update it with the quantity needed
- Delete from the check-out
A user can delete the desired product or reduce the quantity.
- Make purchase
A user can make use of the secure payment system without any issues.
- Create an account
A user can create an account should they desire to.
- Receive e-mail confimation
- View orders
Having an account gives the opportunity to check past orders
- Subscribe tot the newsletter
To keep in touch with the lastest news and products, users can subscribe to the newsletter.
HTML
CSS
Javascript
Python
Django
Bootstrap
Jquery
Stripe Payments
AWS
Heroku
Git
Postgres
I have not undertaken any automated testing and I chose to manually test the site functionality and layout.
Idea 💡: After creating all the templates I wanted to ensure their linkeage and functionality
Test 📝: To test this, I went through each and made sure they were loading correctly.
Result 👷: All templates loaded as expected in development.
Verdict ✅: This test has passed.
Idea 💡: Once the functionality of the sign up and login were done I wanted to test and see if they work correctly.
Test 📝: To test this, I went through using a different device, created an account and managed to access the rest of the pages.
Result 👷: Everything worked as expected.
Verdict ✅: This test passed and the design is more appealing than the standard allauth template.
Idea 💡: A good UX experience is given by interactions with the pages on a website, that's why messages have been implemented in the site.
Test 📝: Testing has been done by confirming every action that should send a message, is doing so.
Result 👷: Users are receiving success messages for loggin in and out and error messages for incorrect forms.
Verdict ✅: This test passed and no further corrections are required.
Idea 💡: Correct functionality of the contact form and subscribe
Test 📝: To test this I have filled in the forms and confirmation is received in the console while in Gitpod but also via e-mail while in production.
Result 👷: Users are receiving success messages for successfully using the contact form and the subscribe option.
Verdict ✅: This test passed and no further corrections are required.
Issue 🐛: Add to bag error.
Cause🔧: Missing "k" in pk= definition.
Resolution✅: Added missing letter resolved the issue.
1.
Issue 🐛: Crispy Field error
Cause🔧: as_crispy_field got passed an invalid or inexistent field.
Resolution✅: Added missing letter.
2.
Issue 🐛: Deleting product error get_object_or_404.
Cause🔧: Function used instead of parameter ("request").
Resolution✅: Replaced function with "Product" parameter.
3.
Issue 🐛: No image media in settings.py.
Cause🔧: No module named "django.template.context.processor".
Resolution✅: Added missing "s" for "processors".
4.
Issue 🐛:Contact Us page not working.
Cause🔧: "Contact.html template does not exist".
Resolution✅: added better view description and url linking.
5.
Issue 🐛: Subscribe page not working.
Cause🔧: Template does not exist.
Resolution✅: Added correct urls in contact/ urls.py.
6.
Issue 🐛: Toast Error.
Cause🔧: TemplateSyntaxError.
Resolution✅: Corrected template name typo.
7.
Issue 🐛: Contact Form/ Sign Up page display 500 error page although filled in successfully.
Cause🔧: USER_ACCOUNT_PASSWORD variable typo in Heroku Config Vars.
Resolution✅: Added correct variable name and everything working fine.
Several issues have been discovered with the reviews and quotes pages but since they do not hinder the overall functionality of the site the issues will be adressed at later stage.
This project was produced in GitPod and is deployed on Heroku. This is how to make a copy of this project and deploy it accordingly. The images are hosted on AWS, so you will need to sign up for a AWS account in order to get an API key. I opted to use a gmail account, the settings for which are in the settings.py file. The payment system used is Stripe, which you will need to set up an account for in order to collect the PUBLIC_KEY, PRIVATE_KEY and WebHook keys.
To set it up locally
1 - download the repository using the link at the top of the page, alternatively you can clone it using the following command:
git clone https://github.com/LeVlad/
2 - Set up a virtual environment:
py -m venv venv
3 - Activate the virtual environment:
venv\Scripts\activate
Create a project by entering the command:
django-admin startproject YOURPROJECTNAMEHERE
Create a new app by entering the comand:
py manage.py startapp YOURAPPNAMEHERE
You are now ready to install the packages required to run this program. You can do this by installing the requirements in the requirements.txt file:
pip install -r requirements.txt
Next we need to add the following to the list of installed apps in settings.py:
-'cloudinary_storage',
-'crispy_forms',
-'allauth',
-'allauth.account',
-'allauth.socialaccount',
-'django.contrib.staticfiles',
-'django_countries',
-'home',
-'bag',
-'checkout',
-'profiles',
-'contact',
-'yourappname'
You will need to create an env.py file which will contain the following:
os.environ["DATABASE_URL"] = "your postgresql url which you will find in heroku (see below)"
os.environ["SECRET_KEY"] = "your secret key which will added to heroku"
os.environ["CLOUDINARY_URL"] = "your cloudinary api"
In order to send emails (such as user confirmation) you will need to configure an email. I have used gmail and followed the guidelines as stated here: https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+EA101+2021_T1/courseware/eb05f06e62c64ac89823cc956fcd8191/39dfbd4ba6ac42168b5df88d69c32f02/?child=first
1 - Set up a (or log into an existing) Heroku account.
2 - Select add new app and give it a unique name
3 - Select 'Resources' and search for/install the Heroku Postgres add-on.
4 - Select 'Settings' and click 'Reveal Convig Vars'
5 - You will find the DATABASE URL already added, copy this to the env.py file mentioned previously.
6 - You will need the following convig vars:
CLOUDINARY_URL = your API url from cloudinary
SECRET_KEY = your secret key must match the secret key in your env.py file
EMAIL_HOST_USER = your chosen email account's address
EMAIL_HOST_PASS = your chosen emaiil account's password or dedicated access key
STRIPE_PUBLIC_KEY = which you will find from your stripe dashboard
STRIPE_SECRET_KEY = which you will find from your stripe dashboard
STRIPE_WH_SECRET = which you will find from your stripe dashboard
Finally, all that remains is to makemigration by entering the following command:
python3 manage.py makemigrations
Then migrate using the following:
python3 manage.py migrate
And run the app locally:
python3 manage.py runserver
- https://docs.djangoproject.com/en/4.1/d
- https://stackoverflow.com/
- https://github.com/ckz8780
- https://getbootstrap.com/
- https://www.w3schools.com/
- https://www.tutorialspoint.com/e_commerce/e_commerce_b2c_mode.htm
Background image logo 
Fonts Used - Google Fonts
Lato - https://fonts.google.com/specimen/Lato
Roboto - https://fonts.google.com/specimen/Roboto
- https://wisdomquotes.com/stoic-quotes/ - quotes
- https://www.brainyquote.com/authors/immanuel-kant-quotes - Kant
- https://yourstory.com/2017/03/29-quotes-by-plato/amp - Plato
- https://www.brainyquote.com/authors/arthur-schopenhauer-quotes - Schopenhauer
- https://quotes.thefamouspeople.com/plato-257.php - Plato
- https://www.goodreads.com/author/quotes/17212.Marcus_Aurelius
The shirt templates have been downloaded from https://www.vecteezy.com/
- My mentor, Richard Wells, without who I wouldn't have had a fighting chance. He has helped, supported and incouraged me all along the way. I truly wish every mentor/teacher were more like him.
- My family for putting up with me during the long annoying nights