Existing Features:

From the home page users are able to navigate to the store, this is seperated into three seperate categories. The user is able to navigate to this using the 3 cards or via the nav bar at the top of the page. The mobile site was also designed to be bold and easy to use, but for quciker navigation the sticky nav bar has a drop down menu for easy access to any account settings or store pages.

Users can also access the all auth features to register, sign in and out.

There are three speperate store pages, 'Tea', 'Pots and Sets' and 'Teaware'. This will allow users to narrow down their search as there could be far too many items for them to comfortably navigate.

Allows users to store their planned purchases until they are ready to buy. User are able to adjust the quantity of items in the basket, this will also update the total cost before the user is ready to purchase items.

Checkout page allows users to pay for their items safely with Stripe. The users delivery information can be inputted here, including email and telephone number.

All below pages are built with all auth, the only major changes are that the register page requires a first and last name, this will make the site seem more personal displaying your name. Crispy Forms was imported to create a cleaner look, text was also centered and placed inside a card. This is far more appealing than the standard layout of both all auth and Crispy Forms.

Potential features to include would be a profile page with a list of previous purchases. This would allow users to easily find items they liked and add to the cart. Potentially could have a reminder button to send users an alert when their favourite tea is back in stock.

The layout was kept simple and easy to naviagte as there may be a wide range of customers wanting to use the site. Some may not be too familiar with a complicated layout.

Home Page Desktop

Store page Desktop

Basket page Desktop

Checkout page Desktop

Home Page Mobile

Store page Mobile

Basket page Mobile

Checkout page Mobile

Similar to a previous project I created, Garenden Gnome, the intended demographic is a wide age range and so it is key to keep a simple and straightforward design. Bold images, text and clear navigation are very important, with a simple account system. The site was deisigned mobile first as this is generally slightly less code intensive and generally an easier approach, so there was a focus from the beginign to make it useable on smaller screens with the adjusting drop down navigation.

Main Body Text: Lato This is a simple text selected for the main body as it is easy to read, is not too bold or distracting and so is ideal for conveying large sections of information or general text.

Title / Header text: Uchen A serif text that stands out from the main body but also accompanies it well, this is used for hearders and other important sections to give some variety and emphasis.

Accent text: Edu VIC WA NT Beginner This is rarely used but ads a third dynamic to text, userd simply to grab the users attention. As it is a more playful font the user understands it as non-serious and thus is not used for critical information.

The colour palette was mixed using Coolers (https://coolors.co), the intetion was to use light and calming colours so that the site is welcoming for users.

• #6B9080
• #A4C3B2
• #CCE3DE
• #EAF4F4
• #F6FFF8

Create Project in Github

Open github

• Using the code institute template found click ‘Use this template’ button
• Choose a unique name
• Click ‘Create repository from template’ button
• The initial set up may take some time to load so just be patient

https://github.com/Code-Institute-Org/gitpod-full-template

Install Django

• type the following command: pip install Django==4.0.5

• Once downloaded there should be a success message in the terminal

• Start Django Project in Github

• To start a new Django project type the following commend, there should be no spaces in the name of your project:

  django-admin startproject your_project_name .

• This dot at the end means the project will be created in the current directory

Look in the .gitignore file, it should contain the following already: If not then download these and use the command pip3 freeze -- local > requirements.txt - this wil make sure we can run our site remotely by requiring the host to use these packages.

core.Microsoft* core.mongo* core.python* env.py pycache/ *.py[cod] node_modules/ .github/ cloudinary_python.txt

We also need to add a few things to this file:

*.sqlite3 as this will ignore our development database file

As we have added a new project we need to migrate the changes, we can do this by typing: pytho3 manage.py makemigrations python3 manage.py migrate

Create a super user A super user allows us to sign into Django as an admin which will give us control over the site once functionality has been added id adding items to the site, viewing user purchases e.c.t

Python3 manage.py createsuperuser: You will need to add username, email and password

The one I have used is: admin [email protected] passyp123

All Auth

All auth is a framework that allows us to implement user sign-in / sign-out functionality and the ability to change email or password information in a much simpler way than to code all of these features ourselves. All the information can be found on the allauth documentation page here:

https://django-allauth.readthedocs.io/en/latest/installation.html

Firstly install the framework: pip install django-allauth

in the settings.py file in your new app we check in the INSTALLED_APPS section for these three lines as they are all required. If they aren’t already there you must add them. 'django.contrib.auth', 'django.contrib.messages', 'django.contrib.sites',

You will need to add the following also: ‘allauth’, ‘allauth.account’, ‘allauth.socialaccount’,

You already should have ‘django.template.context_processors.request’ in the templates section, if not this should be added in the context_processors section.

We need to add the AUTHENTIFICATION_BACKENDS section so we can copy and paste all of this into the project

AUTHENTICATION_BACKENDS = [ # Needed to login by username in Django admin, regardless of allauth 'django.contrib.auth.backends.ModelBackend',

# `allauth` specific authentication methods, such as login by e-mail
'allauth.account.auth_backends.AuthenticationBackend',]

This section of code allows users to log in using an email and via superuser login

Add site id anywhere on the page using: SITE_ID = 1 This allows a single database to manage content for multiple sites – this in conjuction with the 'django.contrib.sites' we added to installed apps works with the socialaccount to link with social media accounts for logging in.

Under SITE_ID the email backends are required:

EMAIL_BACKEND = 'django.core.mail.backends.consle.EmailBackend' ACCOUNT_AUTHENTICATION_METHOD = 'username_email' ACCOUNT_EMAIL_REQUIRED = True ACCOUNT_EMAIL_VERIFICATION = 'mandatory' ACCOUNT_SIGNUP_EMAIL_ENTER_TWICE = True ACCOUNT_USERNAME_MIN_LENGTH = 4 LOGIN_URL = '/accounts/login/' LOGIN_REDIRECT_URL = '/'

Urls.py In urls.py add the following:

From Django.urls import path, include

Path(‘accounts’, include(‘allauth.urls’)),

Now we can make migrations for the database and now would be a good time to do our initial commit.

Logging into admin

Because the latest version of Django includes a crsf checker you need to include CRSF_TRUSTED_ORIGINS in the settings.py file with a list value of the workspace address.

If the admin superuser was created before allauth email verification was required sign in to the admin account, in the dashboard go to Email Addresses in the Accounts section, click on the admin user and click verified and primary.

Allauth Templates

Connect to Heroku

Firstly you will need to install the cli if it hasn’t already been installed using command:

curl https://cli-assets.heroku.com/install.sh | sh

Login to Heorku by typing heroku login into the terminal, if this doesn’t work use an alternative would be to use the command Heroku login -i

If you receive this message: Error: Your account has MFA enabled; API requests using basic authentication with email and password are not supported. Please › generate an authorization token for API access. ›

You will need to create an authorisation cli token for this to work – go to your Heroku account, go to account settings and then applications, create authorisations and give it a label such as Heroku CLI – don’t set and end date then click create.

Go back to Git and try logging in again, instead using the cli code you generated in Heroku as the password

Postgres

As we cannot store any images or media effectively on Heroku we need to use a database adaptor,, one of the most popular is PostgreSQL.

Firstly we need to install psycopg2 and gunicorn

Use commands:

pip install psycopg2 pip install gunicorn

We now need to update our requirements.txt file (or create one for the first time if one is not already present).

pip3 freeze -- local > requirements.txt

This is necessary as hewroku will read this file and understand it needs to download these files for our app to work.

What do these do?

PostgreSQL: Allows your content to communicate with the backend database

Gunicorn: Replaces the development server once the app is deployed to Heroku

Creating your app in Heroku

Use command heroku apps:create the-name-of-your-app when you are logging into Heroku via gitpod – it must be all lowercase, using only numbers, letters or dashes. The region automatically sets to USA so to change to the EU just add a space and then --region eu to the end of the command.

git push -u heroku main

Now we need to connect PostgreSQL to Heroku – go to the Heroku app, open the app you previously created (in this instance that would be the-tea-house-p5) – go to the resources tab and search for Heroku postgreSQL – you then need to reselect the app you want to use this with and select Hobby Dev so you do not need to pay for this.

If you go to settings and click reveal config vars you will now see the database key generated.

To parse the database created in Heroku we need to download a database url package Use command: pip3 install dj-database-url

type heroku config - pip3 freeze -- local > requirements.txt - this will add the packages we have added so Heroku knows to use these.

For now we want the database to talk with Heroku:

Import dj_database_url in settings

You should have imports that look like this so far: from pathlib import Path import os import dj_database_url Now set the database in your settings.py file to

DATABASES = { 'default': dj_database_url.parse('enter the database key provided in config vars on heroku ') }

We can now migrate our changes with the command

Python3 manage.py migrate

We can now push to Heroku – as we do not want to share sensitive data or our database information make sure you have a .gitignore file with the following items:

core.Microsoft* core.mongo* core.python* env.py pycache/ *.py[cod]
node_modules/ .github/ cloudinary_python.txt *.sqlite3

This will tell Heroku not to read these files so users will not be able to access it.

We need to push to ther Heroku master specifically – to do this we need to add the files and commit them, and then push with the command git push origin main

To push to Heroku we can use the command git push Heroku main

As the latest version of python can have issues with Heroku currently you may need to create a runtime.txt file in the root directory, python version 3.8 works where as 3.10 does not currently.

(You can see what version you are running by typing python -v into the terminal)

Add the python version i.e python-3.8.11 and run a pip freeze again – you should now be able to successfully push to Heroku.

Profile

Add a procfile (use a capitol P) and type the code web: gunicorn name-of-your-app.wsgi This tells Heroku to use Gunicorn – this will allow us to use http requests

On macOS you will need to disable the Limit IP Address Traacking in Preferences > Network

NEED TO INSTALL WHITENOISE

pip install whitenoise

MIDDLEWARE = [ # ... "django.middleware.security.SecurityMiddleware", "whitenoise.middleware.WhiteNoiseMiddleware", # ... ]

pip3 freeze -- local > requirements.txt

Meta Tags https://blog.hubspot.com/marketing/meta-tags

Setting up Django https://www.youtube.com/watch?v=_ELCMngbM0E&list=LL&index=7&t=2101s&ab_channel=DennisIvy

Boostrap Documentation https://getbootstrap.com/docs/5.2/getting-started/introduction/

Basket layout https://v1.mdbootstrap.com/docs/standard/extended/shopping-carts/#!

Bootstrap cards https://getbootstrap.com/docs/4.0/components/card/

Django Documentation https://django-allauth.readthedocs.io/en/latest/

HTML CSS Javascript Python

Django Bootstrap All Auth

Cloudinary Heroku

Stripe