Composer MLK website

Deployed website is found here

Machiko Lacey-Kimura, A.K.A MLK is a composer, pianist. Coming from Classical piano background, she started writing songs in 2016, when she dived into Jazz and rock music in her play.

Kim started writing her Neo-classical song when she was practicing improvisation on second and ninth degree in A minor. She named her first song “A29”. However, she realised that she uses a drive way “A27” which is more close to her home, and re-named the song to “A27”. She wants to express the feelings of boredom, irritation and impatience most of us feel daily in our daily lives.

This website shows her journey on her piano composition, which resonates with the people driving to commute daily, who live in the area far from their work, school, and community.
She provides CD albums and digital concert event through her online shop. There is an advert section on the homepage to show current promotion.

There is a profile section to show her biology, and also the concept of her composition with a map of East Sussex in England.

Table of Contents

• Table of Contents
• UX
  • Project Goals
    • Wireframes
  • User Stories
• Design
• Project Objectives
• Information Architecture
• Testing
• Deployment
• Defensive Features
• Credits

UX

Project Goals

What is the purpose of the app

The purpose of the app is to inform the artist's passion to compose piano songs by proviting information and background of her composition, as well as providing event information. An user can purchase her albums and event tickets online.

Who is this website for

This website is for the people who wants to find out about the artist, and would like to benefit by purchasing her albums and event tickets.

Who are the primary target groups

This website is targeting these two groups:

• Aged between 18 to 65, working, and familiar with Sussex roads
• People who loves solo piano music
• People who wants to explorer new age of Neo-classical piano music
• People who likes modern music, however, wants to discover possibilities in piano music
• Event organisers, music producers, can also benefit from this website to find out about the artist

What is it that they want to achieve

Users would find out about the artist, would benefit from the artist's sample videos to feel the music directory. They will be able to purchase either event tickets and albums from the shop.

How this website achieves users ultimate goals

They can achieve their goals because

• The homepage app provides a carousel advert so they can easily find out about coming events and albums
• The biagraphy page provides a map of sussex road, so they can find out which area of sussex road she wrote about
• Embed videos provide sample of her songs, so they can listen to her music partially so they can see if they want to listen to her album.
• The review model provides users to write about the products, so it gives them opportunities to find out what other people thought about their purchase.

Project Goals

The main Goals of the site for the owner are:

• To inform the passion of the artist's composition
• To provide sample songs on ambed video
• To provide shopping facility for event tickets and albums
• To provide a platform to review her products
• To provide a schedule of the artist
• To provide biography and profile of the artist
• To provide information about Neo Classical piano and what is the artists goal

The main goals of the site for the visitors are:

• To find out about what is the motivation for the composition.
• To watch sample videos to feel how the songs sond like.
• To purchase event tickets and albums
• To find out about in-coming activities of the artist
• To discover the details of the artist
• To discover the genre of the artist is going to achieve

Project Objectives

The main objectives of the site for the owner are:

• Showcase his activities.
• Let the visitor know about who he is, what he does and when.
• Offer a platform to display his work and sell it.
• Give a clear way to get in touch and be contacted.
• Promote his concerts and activities by offering clear information of past and future engagements.
• Spread the love for baroque music in general and harpsichord in particular.

The main goals of the site for the visitors are:

• Get to know and connect with the artist.
• Know clearly where and when they can attend one of their concerts.
• Discover how he presents himself by looking at the media album.
• Have a preview of his art by watching his videos.
• Discover what CDs he offers on sale and be able to securely purchase them from home.

User Stories

For the visitor

As a user	I would like to	so
As a user	I would like to find out up-coming events and recent albums on top of the homepage	so I can find out up-coming events and recent albums at a glance
As a user	I would like to navigate to the destination page smoothly	so I can find the information I want easily
As a user	I would like to find schedule easily	so I can find event dates in no time
As a user	I would like to find out what is the artist's motivation on her composition	so I can see if her music suits my interest
As a user	I would like to find out about genre of the artist's songs	so I can see if her music suits my interest
As a user	I would like to listen to samples of her songs	so I can see if the music feeds my interest
As a user	I would like to see how album jackets look like	so I can find it the album interests me
As a user	I would like to find out venue, date, time and duration of the event	so I can find out if I can attend it.
As a user	I would like to be able to ask question through a contact form	so I can ask questions.
As a user	I would like to purchase the artist's products and event tickets	so I can enjoy her music.
As a user	I would like to write a review on my purchased products	so I can share my thoughts on my purchased products.
As a user	I would like to be able to purchase the products securely	so I feel safe through payment section.
As a user	I would like to be able to register on this website	so I can purchase easily in the future.
As a user	I would like to be able to reset my password	so I can login again in case I forget my password
As a user	I would like to be able to see my order history	so I can see what I purchased
As a user	I would like to be able to update the account details	so I can update my address, phone number etc in case I change them

For the site owner

As a user	I would like to	so
As a user	I would like to be able to add a product easily	so I feel ease on adding product
As a user	I would like to be able to edit a product easily	so I can update product details at ease
As a user	I would like to be able to delete a product	so it won't show up on the website.
As a user	I would like to be able to add album songs	so they will be displayed on the album product page
As a user	I would like to be able to add event venue, date, time and duration	so they will be displayed on the event product page
As a user	I would like to be able to modify event details	so I can update event details
As a user	I would like to be able to approve or dissaprove user reviews	so I can manage customer reviews effectively
As a user	I would like to be able to update artist information pages	so I can flexibly refresh the page information.

Design

Colors

I chose black as a simbolistic image of piano, as a piano composer. Also chose supporting to look elegant and classical. I added pink and green as an accent, which depicts the new story of the artist's passion for new genre of piano songs.

• Primary colour: #14110f
• Secondary colour: #d9c5b2
• Main font colour: #34312d
• Secondary font colour: #f26a8d

Icons

I used Font Awesome 6 for their valiety and flexibility of their icons.

Fonts

I used Nanum Gothic as a header font to depict these concept : elegance/ old fashioned and new / innovative fashion.

I used Nanum Myeongjo as a normal font to support the primary font. This font is easy to read, and readable from a distance.

Wireframing

As tablet layout is similar to mobile phone layout, tablet is omitted on this wireframe. The wireframe file is found here.

Features

Main Features

This website has these main features.

Page CMS and page views

• This website has a feature to add page content, so an admin person can easily add a content from admin area, with 2 images.

Shop functionality

• This website has shopping functionality, so admin can add products, an user can see the product pages, add to cart, go to checkout to make a payment.

Category page

This page allows an user to browse products visually, and click on the product to see more details.

Product page

This page gives details of the product. If it's an event, it shows date and time, if it's an album, it displays runtime and song titles.

Cart (bag) page

This page displays product items in the shopping bag, allows an user to change quantity, or remove items.

Checkout page

This page allows an user to add their details and card details for payment.

Sprite payment integration

This website is using Sprite, for payment integration.

Reviews

This website allows a logged in user to add reviews on products, using a form. A review will be added as a record on reviews table on database.

Additional Features

Extra images - automatic photo gallery

-An admin can also add extra images, which makes the image area to an image gallery automatically.

Homepage banner

An admin can add advert with a page link through admin. This is using Javascript code.

Embed videos

An admin can add sample youtube link through admin, to display a video on 'Sample Videos' page, and also Home page.

Back to top button

This website has "Back to Top" button so an user can scroll back to top easily. This is written by Javascript code.

Future Improvements

• I would like to add paging feature on sample videos page.
• I would like to add E-ticket generation so when an user orders an event ticket, they can download the ticket immediately.
• I would like to add more specs on Album model so admin can add more specs.

Technologies Used

Front-end

Languages

• HTML
• CSS

Tools & Frameworks

• Bootstrap
• JavaScript
• jQuery
• Font Awesome
• Google Fonts
• Slick Slider

Back-end Technologies

Languages

• Python
• Javascript

Tools & Frameworks

• Django-allauth
• Django-storages
• Stripe
• AWS
• SQLite
• Postgresql
• Django Cleanup
• Django Bootstrap

Python & Django

• Django
• Pillow
• boto3
• botocore
• django-allauth
• django-countries
• django-phonenumber-field
• django-crispy-forms
• django-filte
• asgiref
• django-environ
• django-storages
• dj-database-url
• unicorn
• gunicorn
• jmespath
• oauthlib
• psycopg2
• psycopg2-binary
• python3-openid
• pytz
• requests-oauthlib
• s3transfer
• sqlparse

Other technologies

• Visual Studio Code
• GitHub
• Heroku
• Balsamiq
• Cloudinary

Information Architecture

Models used in home app

Advert

Key	Type	Validation
link_url	URLField	max_length=1024, default='', blank=True
banner	ImageField	default='', blank=True
banner_tablet_size	ImageField	default='', blank=True
banner_mobile_size	ImageField	default='', blank=True
name	TextField	default='', blank=True

homepageVideo

Key	Type	Validation
title	CharField	max_length=254
subtitle	CharField	max_length=254
youtube_link	CharField	max_length=254, default='', blank=True
details	TextField	default='', blank=True
recorded	TextField	max_length=254, default='', blank=True

Models used in products app

Category

Key	Type	Validation
name	CharField	max_length=254
friendly_Name	CharField	max_length=254, default="", blank=True

Product

Key	Type	Validation
category	ForeignKey : Category	null=True, blank=True, on_delete=models.SET_NULL
sku	CharField	max_length=254, default="", blank=True
name	CharField	max_length=254
description	CharField
has_sizes	BooleanField	default=False, null=True, blank=True
price	DecimalField	max_digits=6, decimal_places=2
rating	DecimalField	max_digits=6, decimal_places=2, null=True, blank=Tru
image_url	CharField	max_length=1024, default="", blank=True
image	ImageField	default="", blank=True

Review

Key	Type	Validation
product	ForeignKey : Product	: Product on_delete=models.CASCADE
user	ForeignKey : User	on_delete=models.CASCADE
comment	TextField	(max_length=1000
created_at	DateField	auto_now_add=True
updated_at	DateField	auto_now=True

Event

Key	Type	Validation
product	OneToOneField : Product	on_delete=models.CASCADE
start_date_time	DateTimeField
end_date_time	DateTimeField
event_title	TextField	max_length=250, null=True, blank=True
is_virtual	BooleanField	default=False, null=True, blank=True
video_link	TextField	(max_length=1000, null=True, blank=True

Album

Key	Type	Validation
product	OneToOneField	on_delete = models.CASCADE
album_runtime	IntegerField	null=False, blank=False
album_jacket	ImageField	null=True, blank=True

AlbumSongs

Key	Type	Validation
album	ForeignKey : Album	on_delete=models.CASCADE, related_name='albumsongs'
song_title	TextField	max_length=250, null=True, blank=True

Models used in about app

Page

Key	Type	Validation
permalink	CharField	max_length=254
title	CharField	max_length=254
content	TextField	default='', blank=True
primaryImage	ImageField	default='', blank=True
secondaryImage	ImageField	default='', blank=True

SampleVideo

Key	Type	Validation
title	CharField	max_length=254
subtitle	CharField	max_length=254
youtube_link	CharField	max_length=254, default='', blank=True
recorded	CharField	max_length=254, default='', blank=True
details	TextField	default='', blank=True

Images

This model is related to Page model, which enables an user to add multiple images for one page.

Key	Type	Validation
page	ForeignKey	'Page', default='', blank=True, on_delete=models.CASCADE
image	ImageField	default='', blank=True
caption	CharField	max_length=254, default=''

Models used in checkout app

Order

Key	Type	Validation
order_number	CharField	max_length=32, null=False, editable=False
profile	ForeignKey: UserProfile	on_delete=models.SET_NULL, null=True, blank=True, related_name='orders'
full_name	CharField	max_length=50, null=False, blank=False
email	EmailField	max_length=254, null=False, blank=False
phone_number	CharField	max_length=20, null=False, blank=False
country	CountryField	blank_label='Country*', default="", blank=False
postcode	CharField	max_length=20, default="", blank=True
town_or_city	CharField	max_length=40, null=False, blank=False
address_line1	CharField	max_length=80, null=False, blank=False
address_line2	CharField	max_length=80, default="", blank=True
date	DateTimeField	auto_now_add=True
delivery_cost	DecimalField	max_digits=6, decimal_places=2, null=False, default=0
order_total	DecimalField	max_digits=10, decimal_places=2, null=False, default=0
order_items	DecimalField	max_digits=4, decimal_places=2, null=False, default=0
grand_total	DecimalField	max_digits=10, decimal_places=2, null=False, default=0
original_bag	TextField	null=False, blank=False, default=""
stripe_pid	CharField	max_length=254, null=False, blank=False, default=""

OrderLineItem

This model is related to Order Model, which allows an user to add multiple items in one order.

Key	Type	Validation
order	ForeignKey: Order	null=False, blank=False, on_delete=models.CASCADE
cd	ForeignKey: Cd	null=False, blank=False, on_delete=models.CASCADE
quantity	IntegerField	null=False, blank=False, default=0
lineitem_total	DecimalField	max_digits=6, decimal_places=2 null=False, blank=False, editable=False

Models used in profile app

user

Key	Type	Validation
user	OneToOneField: User	on_delete=models.CASCADE
default_phone_number	CharField	max_length=20, default='', blank=True
default_street_address1	CharField	max_length=80, default='', blank=True
default_street_address2	CharField	max_length=80, default='', blank=True
default_town_or_city	CharField	max_length=40, default='', blank=True
default_county	CharField	max_length=80, default='', blank=True
default_postcode	CharField	max_length=20, default='', blank=True
default_country	CountryField	default='', blank=True

Testing

Please click on this link to see the Testing section.

Deployment

This project was developed on Github, using Gitpod as IDE. It has only master branch. This is pushed and deployed onto Heroku.

Preparation

• Install python 3 on your local environment
• Install PIP on your local environment
• Register with Git if you don't have an account and login before cloning
• Register with AWS-S3 if you don't have an account and make sure you can use S3 Bucket. Create your user group with a policy, attach it to your bucket. Make permission keys ready.
• Register with Stripe if you don't have an account, activate your account, get your API keys ready

To run this project on your local repository

Runnin on Gitpod

This project will be deployed following these steps:

1. Add your own repository on your Github account

2. Click the green 'Gitpod' button on top-right corner of this repo (If there isn't a button on your browser, install 'Gitpod' extension on your Chrome browser)

3. Gitpod launches

4. Run the following command (Replace the 'USERNAME' and 'REPO' to your username and repo name):

git remote set-url origin https://github.com/USERNAME/REPO.git

5. Run this command below to install all the modules on requirements.txt file:

pip3 install -r requirements.txt

6. Create these environment variables:

Config Vars	Value
AWS_ACCESS_KEY_ID	your_value
AWS_SECRET_ACCESS_KEY	your_value
DATABASE_URL	your_value
EMAIL_HOST_PASS	your_value
EMAIL_HOST_USER	your_value
SECRET_KEY	your_value
STRIPE_PUBLIC_KEY	your_value
STRIPE_SECRET_KEY	your_value
STRIPE_WH_SECRES	your_value
USE_AWS	your_value

7. Replace your_value with your values

8. On your CLI, run this code below to test migration

python3 manage.py migrate --plan

9. If there was any errors, find out solutions on Python's documentation If there was no issues found, run this code below:

python3 manage.py migrate 

10. If there was any errors, find out solutions on Python's documentation If there was no issues found, run this code below to create a superuser (Your admin account).

python manage.py createsuperuser

11. Run this code to run server on local :

python manage.py runserver

12. If no errors, the CLI will provide the link to the local server. Click on the link to open the website.

13. Go to https://your-local-url.com/admin to find out your superuser login is working.

Runnin on your local environment (PC/Mac)

1. On top-righ corner of this page, find 'Code' button to open a dropdown list of links. Download zipped files into your local folder. Alternatively, navigate to your chosen folder on your CLI and run this command:

git clone https://github.com/machikolacey/composermlacey

2. In your chosen IDE, open the folder

3. Create a virtual environment to load these packages. Please see Python's official documentation for more details.

4. Run these commands to create your virtual environment: Please see Python's official documentation for more details.

py .venv venv

source venv/Scripts/activate

5. Run this command below to install all the modules on requirements.txt file:

pip3 install -r requirements.txt

6. In the root of your project, create a file 'env.py' abd add environmental variables. The format will be like this below:

import os

os.environ["VARIABLE_NAME"] = "YOUR_VALUE"

7. Add 'env.py' onto your .gitignore file.

8. Replace your_value with your values

Config Vars	Value
AWS_ACCESS_KEY_ID	your_value
AWS_SECRET_ACCESS_KEY	your_value
DATABASE_URL	your_value
EMAIL_HOST_PASS	your_value
EMAIL_HOST_USER	your_value
SECRET_KEY	your_value
STRIPE_PUBLIC_KEY	your_value
STRIPE_SECRET_KEY	your_value
STRIPE_WH_SECRES	your_value
USE_AWS	your_value

9. On your CLI, run this code below to test migration

python3 manage.py migrate --plan

10. If there was any errors, find out solutions on Python's documentation If there was no issues found, run this code below:

python3 manage.py migrate 

11. If there was any errors, find out solutions on Python's documentation If there was no issues found, run this code below to create a superuser (Your admin account).

python manage.py createsuperuser

12. Run this code to run server on local:

python manage.py runserver

13. If no errors, the CLI will provide the link to the local server. Click on the link to open the website.

14. Go to https://your-local-url.com/admin to find out your superuser login is working.

Remote Deployment (Run the project on Heroku.com)

If you want to add it to your Heroku account, follow the instructions below:

1. Add an app for this project
2. Create an AWS S3 bucket, create access group and attach access policy.
3. Back to your Heroku app, the 'Settings' tab on your app, add Config variables:

Config Vars	Value
AWS_ACCESS_KEY_ID	your_value
AWS_SECRET_ACCESS_KEY	your_value
DATABASE_URL	your_value
EMAIL_HOST_PASS	your_value
EMAIL_HOST_USER	your_value
SECRET_KEY	your_value
STRIPE_PUBLIC_KEY	your_value
STRIPE_SECRET_KEY	your_value
STRIPE_WH_SECRES	your_value
USE_AWS	your_value

6. Replace your_value with your values

7. On your CLI, run this code below to test migration

python3 manage.py migrate --plan

8. If there was no errors, run this code below to migrate database:

python3 manage.py migrate 

9. If there was any errors, find out solutions on Python's documentation If there was no issues found, run this code below to create a superuser (Your admin account).

python manage.py createsuperuser

10. Go back to your Gitpod workspace, run this code below for the first deployment on Heroku:

    git init
    git commit -m 'First commit for Heroku deployment'
    git push -u origin

11. On your Heroku app, click on the "Deploy" tab, in 'Deployment method' select GitHub.

12. Find your Github repository and click on it to connect to your repo.

13. In "Manual deploy" section, make sure your repo branch is chosen, click on "Deploy Branch".

14. In "Automatic deploys" section, enable automatic deploy, if you choose to.

15. On the top-right corner on the app page, find "Open App" button to open your app.

16. Go to https://your-app-name-herokuapp.com/admin to find out your superuser login is working.

Defensive Features

• This website has quantity limit on product app (0 - 30). If an user change minimun length or max length on front-end and enters a number out of range, add_to_bag function will limit the number within the range.

Credits

Contents

Photos are downloaded from iStockphoto, using my account. I designed banner and uploaded to AWS S3 through Django admin. This project is using icons from FontAwesome. All texts are written by Machiko Lacey-Kimura. All product images, slider banners are created by Machiko Lacey-Kimura.

media

• The videos used in this website are taken from Youtube
• This website is using images uploaded to Cloudinary
• The colour scheme is generated by Colours

Disclaimer

This project and its contents are for educational purposes only.