Carter Music & Co.

Link to Deployed Site

Carter Music & Co. is an online music shop, which offers great instruments for any budgets. So that the customers can enjoy their favourite instruments without breaking their bank account. The shop allows customer to leave a comment to any instrument.

Table of Contents

1. UX

   • Project Goals
   • User Stories
   • Design

2. Features

   • Existing Features
     • Landing Page
     • Product Page
     • Cart Page
     • Checkout Page
     • Profiles Page
     • Admin Product Managment
     • Django allauth features
   • Features Left to Implement
   • Defensive Design

3. Information Architecture

   • Database Choice
   • Data Modeling

4. Technologies Used

   • Languages
   • Libraries and Packages
   • Tools
   • Databases

5. Testing

6. Deployment

   • Heroku Deployment with Cloudinary
   • Local Deployment

7. Credits

8. Disclaimer

UX

Project Goals

Target Audience

• People / Proffesionals who are looking to buy instruments / music equipment
• People who love intruments / music equipment
• People who want to try to learn an instrument

Visitor / User Goals

• Purchase products in a smooth and secure way
• Get informed with the products before buying by product reviews / product information
• Gain interesting knowledge about the gear from instrument selected page and leave a comment

Business Goals (Site Owner's Goals)

• Provide customers with a secure and safe ecommerce shop
• Establish the shop's brand image
• Expand their business effectively
• Make profit from selling products / services

User Stories

• Viewing and Navigation

• Registration, User Accounts and User Community

• Online shopping

• Bag, Purchasing and Checkout

Design

I have used white for the overall background colour fo the website, accompanied by black for the header to noteably distinguish this from the main content.

For the text, black has been used against the white background. this opposite contrast has been chosen for ease of visibility, so users are able to read the text without any additional difficulty.

Typography

The fonts were obtained from Google Fonts.

Wireframes

Wireframes were created using my book and pencil.

The wireframes have examples of desktop, tablet, and mobile phone displays.

• Main
  
• Mobile
  
• Detail
  

Overall, the finished projects design is similar to what I had originally intended to create as per my wireframes.

Brand Identity

• Vision: Simple design to shocase the intruments with ease.
• Mission: Provide a wide range of music gear that suit special anyone which can be purchased with one click online. without the hassle of going to a physical shops.
• Values: Happiness - Improve your happiness with the power of music!

Brand Logo

Logo design is the cornerstone in your brand identity and presents a company's name, product and brand. I used Affinity Photo to create the brand logo file. The font represents the brand value Arial.

Features

Existing Features

This website is composed of 5 applications: home, bag, checkout, products, profiles.

Landing Page

Landing Page is designed as a single page website to provide site visitors with enough information so they can understand what the business is about of this site. This page has minimal amount of information to let the site visitors take next actions.

Navbar

Navbar is fixed at the top of pages across the site, so that the site visitors easily navigate the whole site. Navbar contains Brand Logo, Search Box, My Account dropdown, Bag icon and Site Menu below.

• Search box: This search box function allows the visitors to search the products on online shop with keywords. The keywords are searched over name and description field of Product Model. (Details of these models will be described at the Information Architecture)
• Site Menu & My Account dropdown: The site menu collapses to toggle icon less than 992px width. My Account dropdown is included to toggle menu for smaller screen.
• Bag icon: The number next to the Bag icon shows the total of items added to the bag.

Navbar for larger screensizes (width > 992px)

Navbar for smaller screensizes (width < 992px)

Footer

The footer section consists of two sections: 1. General information of the Shop and Quick Link, 2. newsletter subscription form.

1. General Info and Quick Links: The first footer section includes the shop address and its quick links to the pages within the site.

2. Social media icons: In this milestone project, Social Media icon is linked to my bussiness page on social media, for social media marketing purposes.

• Result Number: It's shown above the product cards. Customers can see how many results were found in total at a glance.

• Product Card: The products are displayed in cards that have Product Name, Price, Category, Brand name and Rating. If the user is logged in as a superuser, Edit / Delete option is also shown on each card.

Product Card

• Pagination Bar: At the bottom of this online shop page, I've set a pagination bar for easy navigation when there are many results to show. Setting up a pagination bar and limiting the number of the products reduce the loading time and make the site look more organized, which is crucial for a site like which offers many products for sale.

Product Detail Page

• Product Information: On the right side of the product detail page, there is a Product Name, Price, Category, Rate, Description, Quantity, Color option, Add to bag button. Color option is only visible when the product has the options. Also for superuser, Edit / Delete option will be shown.
• Product Testimony Section: Customers can see the product scores and review messages by other customers.

Bag Page

• The left side of this bag page shows the products added to the bag. Customers are able to change the quantity or remove the products in this bag page.
• On the right side of this bag page, there is an Order Summary section that shows Bag Total, Delivery and Grand Total. This way, customers are able to check the order summary at first glance even if they have added a lot of products to the shopping bag.

Checkout Page

Checkout Page

• On the checkout page, customers are asked to fill in delivery details. The customer can also select if they want gift wrapping for the product or not. At the moment, this shop does not collect user's billing information within the User Profile model or Order model.(However, the billing data is recorded in Stripe from the billing information added by the customer.) One of the features left to implement is to add the billing details on the Checkout page.
• Though the customer can complete the checkout process without having an account, if the customer hasn't logged in, the message "Create an account or login to save this information" is shown at the checkout page.

Checkout Success Page

• A thank you message will be displayed after the checkout process as well as the table that holds the order details.
• Keep Shopping button is placed at the end of the page, and if the customer has been logged into their account, Back to Profile will be shown.

Add/Edit Product

• If user is logged in as superuser, they can access to Add / Edit Blog post page.

Profiles Page

My Profile page is available for authenticated users and will be shown in the My Account Dropdown menu at the navbar which appears when you log into your account.

My Profile Page

• In Profile Page, authenticated users can 1. edit Delivery Information and 2. see Order History.

Admin Product Managment

Only authenticated superusers can access the admin page (1.products/add/, 2. products/edit/, 3. products/delete/, 4. 5. 6. ). If non-logged in users try to access the url directly, it will redirect to the sign in page. If a non-superuser tries to access the url, an error message pops up which says that only a superuser can access this page.

Django-allauth features

Base template for allauth has Back to Home button at the end of the page, for easy navigation for users.

• Sign Up: The users will be asked to fill out E-mail, User Name and Password to create an account. When the sign up form is submitted, a verification email will be sent to the user's email address to complete the sign up process.
• Log In: Users will be asked to input User Name or Email, and Password to login. If the user successfully logged in, a success message will pop up and redirect to the landing page.
• Log out: Log out page is accessible from the site menu. After the user successfully signed out button on the sign out page, a success message will appear and redirect to the landing page.
• Forgot password: Forgot password page is accessible from Sign In page. Users will be asked to put in an email address which they have used for their registration to the site. An email with a link to reset the password will be sent after submitting the form.

Features Left to Implement

There are some of features left to implement in the future which I could not add to the project this time due to time constraints. These features are great to be added for a more complete online shop service which would lead to higher customer satisfaction.

Issues known

Remove button in the bag doesn't work properly.

1. Limit the user who can leave product review

At the moment, all the authenticated users can leave reviews to any products if they are logged in. It should be limited to those who actually purchased the product for the validity of the reviews.

2. Custumer could rate any item

Let the customer that have an account could rate from 1 to 5.

3. Social Account Login

This function allows users to sign up / log into their account of the site, using an existing third party account such as Google and Facebook. This is beneficial to users and the site owners. For users, it's hassle free for remembering a password for the site and it gives the users a smooth registration process. For the site owners, there are many benefits gained by social login - such as increasing user sign ups, reducing bounce rate and gaining a user's social account details which is beneficial for marketing purpose.

4. Social Media Share Icons

For social media marketing purpose, adding a social media icon with a link to share products and blog posts would be effective.

5. Order Tracking System

To keep the customers informed with the status of their purchase, it would be nice if the site provides the order status such as shipment information in order history and email notifications.

Defensive Design

Error views (404)

If 404 error occured within the site, a page that has the message of the error. The templates of 404.html added. the root template directory)

Form Validation

• Django Form Validation

Information Architecture

Database choice

• Development phase SQLight database was used for the development which is installed with Django.

• Deployment phase PostgreSQL was used on deployment stage, which is provided as add-on by Heroku application.

• User model is provided as a default by Django's authentication system.

Product App

A instrument could have several types of colors. And have target category and brand

Checkout App

Chekcout model collects the delivery information, stripe_pid and order information. All the fields except user_profile field have null=false. The reason why user_profile does not have null=false is that guest customers (not authenticated users) can also purchase products and complete the checkout process without creating an account. Order model is connected to OrderLineItem model which collects information of purchased products.

Profile App

Profile is used for my profile page where the authenticated users can see their delivery details and their order history.

Technologies Used

The main frontend development was created using HTML, CSS, JavaScript and their libraries. The main backend development was powered by Python and Django.

Testing

Manual Testing

Devices and platforms used for testing:

• Google Chrome.
• Mozilla Firefox.
• Opera.

• laptop, laptop with touch (width 1440px);
• Galaxy S5;
• Pixel2, Pixel 2XL;
• Iphone 5/SE, Iphone 6/7/8;
• Iphone 6/7/8 Plus, IphoneX;
• Ipad and Ipad Pro;

Validation

*HTML: I have used https://validator.w3.org/ in order to validate the HTML code.

*CSS: I have used https://jigsaw.w3.org/css-validator/ in order to validate the CSS code & CSS prefixes were checked against with https://autoprefixer.github.io/

*JavaScript: I have used https://jshint.com/ in order to check the JavaScript code.

*PEP8 Online: (http://pep8online.com/) was used to validate Python.

Errors not handled:

• Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

Languages

• HTML, CSS, JavaScript, Python

Libraries and Packages

• Django
• Django Crispy Forms
• Django Allauth
• Bootstrap (v4.4.1)
• JQuery
• JQuery-UI
• Font Awesome
• Stripe
• Google Fonts
• Cloudinary )

Tools

• Git/GitHub
• Gitpod
• PIP
• Django Debug Toolbar

Databases

• SQlite3- database used for development.
• PostgreSQL - database used for production.

Data relationship:

• Data Relationship

Deployment

Heroku Deployment

This website is deployed on Heroku, following these steps:

1. Install these packages to your local environment, since these packages are required to deploy a Django project on Heroku.

• gnicorn: gnicorn is Python WSGI(web server gataway interface) server for UNIX.
• gninx: gninx is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server.
• psycopg2-binary: psycopg2-binary is PostgreSQL database adapter for the Python programming language.
• dj-database-url: dj-database-url allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application.

2. Create a requirements.txt file and freeze all the modules with the command pip3 freeze > requirements.txt in the terminal.
3. Create a Procfile write web: gunicorn boutique_ado.wsgi:application in the file.
4. git add and git commit and git push all the changes to the Github repositoty of this project.
5. Go to Heroku and create a new app. Set a name for this app and select the closest region (Europe) and click Create app.
6. Go to Resources tab in Heroku, then in the Add-ons search bar look for Heorku Postgres(you can type postgres), select Hobby Dev — Free and click Submit Order Form button to add it to your project.
7. In the heroku dashboard for the application, click on Setting > Reveal Config Vars and set the values as follows:

8. Comment out the current database setting in settings.py, and add the code below instead. This is done temporarily to migrate the datbase on Heroku.

  DATABASES = {     
        'default': dj_database_url.parse("<your Postrgres database URL here>")     
    }

9. Migrate the database models to the Postgres database using the following commands in the terminal: python3 manage.py migrate

10. Create a superuser for the Postgres database by running the following command: python3 manage.py createsuperuser

11. Replace the database setting with the code below, so that the right database is used depending on development/deployed environment.

if 'DATABASE_URL' in os.environ:
    DATABASES = {
        'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
    }
else:
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.sqlite3',
            'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
        }
    }

12. Disable collect static, so that Heroku won't try to collect static file with: heroku config:set DISABLE_COLLECTSTATIC=1
13. Add 'carter-music-co.herokuapp.com', 'localhost', '127.0.0.1' to ALLOWED_HOSTS in settings.py.

ALLOWED_HOSTS = ['flowerydays.herokuapp.com', 'localhost', '127.0.0.1']

14. In Stripe, add Heroku app URL a new webhook endpoint.
15. Update the settings.py with the new Stripe environment variables and email settings.
16. Commit all the changes to Heroku. Medial files are not connected to the app yet but the app should be working on Heroku.
17. Delete DISABLE_COLLECTSTATIC from Heroku Config Var.
18. Push all the changes to Github/Heroku and all the static files will be uploaded to S3 bucket. By setting up above, Heroku will run python3 manage.py collectstatic during the build process and look for static and media files.

Automatic Deploy on Heroku

You can enable automatic deploy in the following steps that pushes update to Heroku everytime you push to github.

1. Go to Deploy in Heroku dashboard.
2. At Automatic deploys, choose a github repository you want to deploy.
3. Click Enable Automatic Deploys.

Local Deployment

For local deployment, you need to have an IDE (I used Gitpod for this project) and you need to install the following:

• Git, Python3, PIP3 Also, you need to create account in the following services if you don't own yet:
• Stripe, Gmail

1. In the IDE you are using, copy and paste the following commane into the terminal to clone this repository. git clone https://github.com/KevinDGnanih/carter-music-co (the other ways to clone a repository are written in this GitHub documentation)
2. Set up environment variable in your selected IDE, or you can create .env file in your root directory and add .env to .gitignore file, and add the followings to the .env file.

import os  
os.environ["DEVELOPMENT"] = "True"    
os.environ["SECRET_KEY"] = "<Your Secret Key>"
os.environ["STRIPE_PUBLIC_KEY"] = "<Your Stripe Public Key>"    
os.environ["STRIPE_SECRET_KEY"] = "<Your Stripe Secret Key>"    
os.environ["STRIPE_WH_SECRET"] = "<Your Stripe WH Secret Key>"    

3. Install all the required packages with pip3 install -r requirements.txt
4. Migrate the models to crete a database using in your IDE with python3 manage.py makemigrations and python3 manage.py migrate

Create a superuser for the Postgres database by running with python3 manage.py createsuperuser Now you can access the app using the command python3 manage.py runserver

Credits

Content & Code

• I constantly read Django, Stripe and Python documenation and tutorial throughout the development.
• For Blog app, I referred to this tutorial.
• I refered to this code snippet for the Testinonial section on the landing page.
• For search product function, I refered to several articles and video. Stack Overflow 1, Stack Overflow 2, Stack Overflow 3, Combine 2 Django Querysets from Different Models, Django Queryset:value_list() flat=True.
• For the hover show button on the product card, I refered to this code snippet.
• For multiselect dropdown menu which is used for the product filter function, I referred to these article: Stack Overflow 1, bootstrap-select.
• For creating custome template tags used in Product apps, I refered to The code Institute Botiq Ado project.
• This project was developed refering to the Boutique Ado Django mini-project from Code Institute course materials. The codes are customized and modified to fit the purpose of this milestone project.

Images & Media

• All the icons in this website were provided by Font Awesome.

Acknowledgements

• Thanks to: my Code Institute Mentor Guido Cecilio Garcia Bernal for his advice throughout the development process.
• Code Institute Slack Community that gave me a light when I was stuck in my coding.

Disclaimer

This website is created for educational purpose only.