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
- UX
- Design
- Project Objectives
- Information Architecture
- Testing
- Deployment
- Defensive Features
- Credits
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.
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.
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
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.
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.
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
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.
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 |
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. |
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
I used Font Awesome 6 for their valiety and flexibility of their icons.
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.
As tablet layout is similar to mobile phone layout, tablet is omitted on this wireframe. The wireframe file is found here.
This website has these main features.
- This website has a feature to add page content, so an admin person can easily add a content from admin area, with 2 images.
- 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.
This page allows an user to browse products visually, and click on the product to see more details.
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.
This page displays product items in the shopping bag, allows an user to change quantity, or remove items.
This page allows an user to add their details and card details for payment.
This website is using Sprite, for payment integration.
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.
-An admin can also add extra images, which makes the image area to an image gallery automatically.
An admin can add advert with a page link through admin. This is using Javascript code.
An admin can add sample youtube link through admin, to display a video on 'Sample Videos' page, and also Home page.
This website has "Back to Top" button so an user can scroll back to top easily. This is written by Javascript code.
- 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.
- 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
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 |
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 |
Key | Type | Validation |
---|---|---|
name | CharField | max_length=254 |
friendly_Name | CharField | max_length=254, default="", blank=True |
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 |
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 |
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 |
Key | Type | Validation |
---|---|---|
product | OneToOneField | on_delete = models.CASCADE |
album_runtime | IntegerField | null=False, blank=False |
album_jacket | ImageField | null=True, blank=True |
Key | Type | Validation |
---|---|---|
album | ForeignKey : Album | on_delete=models.CASCADE, related_name='albumsongs' |
song_title | TextField | max_length=250, null=True, blank=True |
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 |
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 |
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='' |
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 |
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="" |
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 |
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 |
Please click on this link to see the Testing section.
This project was developed on Github, using Gitpod as IDE. It has only master branch. This is pushed and deployed onto Heroku.
- 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
This project will be deployed following these steps:
-
Add your own repository on your Github account
-
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)
-
Gitpod launches
-
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
- Run this command below to install all the modules on requirements.txt file:
pip3 install -r requirements.txt
- 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 |
-
Replace your_value with your values
-
On your CLI, run this code below to test migration
python3 manage.py migrate --plan
- 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
- 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
- Run this code to run server on local :
python manage.py runserver
-
If no errors, the CLI will provide the link to the local server. Click on the link to open the website.
-
Go to https://your-local-url.com/admin to find out your superuser login is working.
- 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
-
In your chosen IDE, open the folder
-
Create a virtual environment to load these packages. Please see Python's official documentation for more details.
-
Run these commands to create your virtual environment: Please see Python's official documentation for more details.
py .venv venv
source venv/Scripts/activate
- Run this command below to install all the modules on requirements.txt file:
pip3 install -r requirements.txt
- 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"
-
Add 'env.py' onto your .gitignore file.
-
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 |
- On your CLI, run this code below to test migration
python3 manage.py migrate --plan
- 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
- 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
- Run this code to run server on local:
python manage.py runserver
-
If no errors, the CLI will provide the link to the local server. Click on the link to open the website.
-
Go to https://your-local-url.com/admin to find out your superuser login is working.
If you want to add it to your Heroku account, follow the instructions below:
- Add an app for this project
- Create an AWS S3 bucket, create access group and attach access policy.
- 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 |
-
Replace your_value with your values
-
On your CLI, run this code below to test migration
python3 manage.py migrate --plan
- If there was no errors, run this code below to migrate database:
python3 manage.py migrate
- 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
- 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
-
On your Heroku app, click on the "Deploy" tab, in 'Deployment method' select GitHub.
-
Find your Github repository and click on it to connect to your repo.
-
In "Manual deploy" section, make sure your repo branch is chosen, click on "Deploy Branch".
-
In "Automatic deploys" section, enable automatic deploy, if you choose to.
-
On the top-right corner on the app page, find "Open App" button to open your app.
-
Go to https://your-app-name-herokuapp.com/admin to find out your superuser login is working.
- 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.
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.
- 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
This project and its contents are for educational purposes only.