search

DavidFB94 / pro-fit-pt

0 stars 0 forks source link

readme

ProFit-PT

GitHub commit activity

GitHub last commit

GitHub repo size

Overview

ProFit-PT is an e-commerce website where the customer can hire personal trainers for in person training, creating personalized workout plans, and fitness counseling.

The site includes helpful features such as a profile for registered users, an about page and a contact page.

The profile will help returning customers in faster checkout, and make their order history accessible in one place. The about/contact pages are included to show relevant information about the site, and make contact between customers and site owner(s) simple.

This website was built as a project for the Diploma in Full Stack Software Development at Code Institute.

Mockup

screenshot

UX

I started out with Wireframes for both desktop and mobile.

The basic structure for services and service details was created. I did not have any wireframes for the profile/cart/checkout, so I used the CI Boutique Ado walk-through for those pages.

After the base structure for viewing and purchasing services was complete, I moved on the the about/faqs/contact pages. Originally, I had planned for separate pages for all of them, but as the pages started taking shape, I combined some of their functionalities to make related information easier to find.

Colour Scheme

I used coolors.co to generate my colour palette.

screenshot

Typography

User Stories

Site Users

Site Admin

Wireframes

Wireframes were developed for mobile and desktop sizes.

I've used Balsamiq to design my site wireframes.

Mobile Wireframes

Click here to see the Mobile Wireframes Home - ![screenshot](documentation/wireframes/mobile-home.png) Services - ![screenshot](documentation/wireframes/mobile-services.png) Service Details - ![screenshot](documentation/wireframes/mobile-service-details.png) About - ![screenshot](documentation/wireframes/mobile-about.png) Contact - ![screenshot](documentation/wireframes/mobile-contact.png) FAQs - ![screenshot](documentation/wireframes/mobile-faqs.png)

Desktop Wireframes

Click here to see the Desktop Wireframes Home - ![screenshot](documentation/wireframes/desktop-home.png) Services - ![screenshot](documentation/wireframes/desktop-services.png) Service Details - ![screenshot](documentation/wireframes/desktop-service-details.png) About - ![screenshot](documentation/wireframes/desktop-about.png) Contact - ![screenshot](documentation/wireframes/desktop-contact.png) FAQs - ![screenshot](documentation/wireframes/desktop-faqs.png)

Features

Existing Features

#1 Header with Logo home redirect

screenshot

#2 Navbar links to "Our Services" in drop-down menu

screenshot

#3 Navbar links to Home, About and Contact section

screenshot

#4 Search field

screenshot

#5 "My Account" drop-down menu

screenshot screenshot screenshot

#6 Cart display

screenshot screenshot screenshot

#7 Site Banner

screenshot

#8 Feedback messages

screenshot screenshot screenshot

#9 Landing page

screenshot

#10 Our services cards

screenshot screenshot screenshot

#11 Service cards edit/delete links (ADMIN ONLY)

screenshot screenshot screenshot

#12 Service cards Read More link

screenshot

#13 Service details

screenshot

#14 Add service (ADMIN ONLY)

screenshot

#15 Edit service (ADMIN ONLY)

screenshot

#16 Shopping Cart

screenshot screenshot

#17 Checkout

screenshot

#18 Checkout success page

screenshot

#19 User registration

screenshot screenshot screenshot screenshot

#20 User Sign in

screenshot

#21 User Log out

screenshot

#22 User Profile

screenshot

#23 About page

screenshot

#24 Contact page

screenshot

#25 Mobile Navbar

screenshot screenshot

#26 404-page

screenshot

#27 Admin user management

screenshot

#28 Admin contact management

screenshot

#29 Admin FAQ management

screenshot

Future Features

#1 Front end pricing tier creation

Tools & Technologies Used

Database Design

Initial ERD:

screenshot

Entity Relationship Diagrams (ERD) help to visualize database architecture before creating models.

Understanding the relationships between different tables can save time later in the project.

I have used pygraphviz and django-extensions to auto-generate an ERD.

The steps taken were as follows:


INSTALLED_APPS = [

...

'django_extensions',

...

]

erd

source autogenerated ERD: medium.com

erDiagram
    FAQs {
        int id PK
        string question
        text answer
    }

    Newsletter {
        int id PK
        string email
    }

    Order {
        int id PK
        string order_number
        datetime date
        string full_name
        string email
        string phone_number
        string country
        string postcode
        string town_or_city
        string street_address1
        string street_address2
        string county
        decimal grand_total
        text original_cart
        string stripe_pid
        int user_profile_id FK
    }

    OrderLineItem {
        int id PK
        decimal lineitem_total
        int order_id FK
        int service_id FK
        int pricingtier_id FK
    }

    Contact {
        int id PK
        string name
        string email
        text message
        boolean read
    }

    UserProfile {
        int id PK
        string default_phone_number
        string default_street_address1
        string default_street_address2
        string default_town_or_city
        string default_county
        string default_postcode
        string default_country
        int user_id FK
    }

    Category {
        int id PK
        string name
        string friendly_name
    }

    Service {
        int id PK
        string name
        text description
        string image
        int category_id FK
    }

    PricingTier {
        int id PK
        int quantity
        decimal price_per_unit
    }

    Order ||--o{ OrderLineItem : contains
    UserProfile ||--o{ Order : places
    Service ||--o{ OrderLineItem : available
    PricingTier ||--o{ OrderLineItem : sets
    Category ||--o{ Service : categorizes
    Service }o--o{ PricingTier : has

source interactive ERD: mermaid.live

Agile Development Process

GitHub Projects

GitHub Projects served as an Agile tool for this project.

It isn't a specialized tool, but with the right tags and project creation/issue assignments, it can be made to work.

Through it, user stories, issues, and milestone tasks were planned, then tracked on a weekly basis using the basic Kanban board.

screenshot

GitHub Issues

GitHub Issues served as an another Agile tool.

There, I used my own User Story Template to manage user stories.

It also helped with milestone iterations on a weekly basis.

screenshot

screenshot

screenshot screenshot

MoSCoW Prioritization

I've decomposed my Epics into stories prior to prioritizing and implementing them.

Using this approach, I was able to apply the MoSCow prioritization and labels to my user stories within the Issues tab.

Ecommerce Business Model

This site sells goods to individual customers, and therefore follows a Business to Customer model.

It is of the simplest B2C forms, as it focuses on individual transactions, and doesn't need anything such as monthly/annual subscriptions.

It is still in its early development stages, although it already has a newsletter, and links for social media marketing.

Social media can potentially build a community of users around the business, and boost site visitor numbers, especially when using larger platforms such a Facebook.

A newsletter list can be used by the business to send regular messages to site users.

For example, what items are on special offer, new items in stock, updates to business hours, notifications of events, and much more!

Search Engine Optimization (SEO) & Social Media Marketing

Keywords

I've identified some appropriate keywords to align with my site, that should help users when searching online to find my page easily from a search engine.

This included a series of the following keyword types

screenshot

I also played around with Word Tracker a bit to check the frequency of some of my site's primary keywords (only until the free trial expired).

Sitemap

I've used XML-Sitemaps to generate a sitemap.xml file.

This was generated using my deployed site URL: https://pro-fit-pt-dcb56d3b7224.herokuapp.com

After it finished crawling the entire site, it created a sitemap.xml which I've downloaded and included in the repository.

Robots

I've created the robots.txt file at the root-level.

Inside, I've included the default settings:


User-agent: *

Disallow:

Sitemap: https://pro-fit-pt-dcb56d3b7224.herokuapp.com/sitemap.xml

Further links for future implementation:

Social Media Marketing

Creating a strong social base (with participation) and linking that to the business site can help drive sales.

Using more popular providers with a wider user base, such as Facebook, typically maximizes site views.

I've created a Facebook business account.

screenshot

Newsletter Marketing

I have incorporate a newsletter sign-up form on my application, to allow users to supply their email address if they are interested in learning more.

Testing

[!NOTE] For all testing, please refer to the TESTING.md file.

Deployment

The live deployed application can be found deployed on Heroku.

PostgreSQL Database

This project uses a Code Institute PostgreSQL Database.

To obtain my own Postgres Database from Code Institute, I followed these steps:

[!CAUTION]

  • PostgreSQL databases by Code Institute are only available to CI Students.
  • You must acquire your own PostgreSQL database through some other method if you plan to clone/fork this repository.
  • Code Institute students are allowed a maximum of 8 databases.
  • Databases are subject to deletion after 18 months.

WhiteNoise

This project uses Whitenoise to store static files online, due to the fact that Heroku doesn't persist this type of data.

To install whitenoise, run the pip install whitenoise command.

Edit your settings.py file and add WhiteNoise to the MIDDLEWARE list. The WhiteNoise middleware should be placed directly after the Django SecurityMiddleware (if you are using it) and before all other middleware:

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

Cloudinary

This project uses Cloudinary for online static file storage.

To install Cloudinary, run the pip install cloudinary and pip install dj3-cloudinary-storage commands.

Edit your settings.py file and add cloudinary_storage and cloudinary to the INSTALLED_APPS list. Note that cloudinary_storage should be placed directly after the django.contrib.staticfiles.

INSTALLED_APPS = [
    # ...
    "django.contrib.staticfiles",
    "cloudinary_storage",
    # ...
    "cloudinary",
]

Generating a cloudinary environment variable

To sign up for cloudinary, visit Cloudinary.com.

Once you've created a Cloudinary account and logged-in, follow these series of steps to get your project connected.

Stripe API

This project uses Stripe to handle the ecommerce payments.

Once you've created a Stripe account and logged-in, follow these series of steps to get your project connected.

As a backup, in case users prematurely close the purchase-order page during payment, we can include Stripe Webhooks.

Gmail API

This project uses Gmail to handle sending emails to users for account verification and purchase order confirmations.

Once you've created a Gmail (Google) account and logged-in, follow these series of steps to get your project connected.

Heroku Deployment

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

[!IMPORTANT] This is a sample only; you would replace the values with your own if cloning/forking my repository.

Key Value
CLOUDINARY_URL user's own value
DATABASE_URL user's own value
DISABLE_COLLECTSTATIC 1 (this is temporary, and can be removed for the final deployment)
EMAIL_HOST_PASS user's own value
EMAIL_HOST_USER user's own value
SECRET_KEY user's own value
STRIPE_PUBLIC_KEY user's own value
STRIPE_SECRET_KEY user's own value
STRIPE_WH_SECRET user's own value

Heroku needs three additional files in order to deploy properly.

You can install this project's requirements (where applicable) using:

If you have your own packages that have been installed, then the requirements file needs updated using:

The Procfile can be created with the following command:

The runtime.txt file needs to know which Python version you're using:

  1. type: python3 --version in the terminal.

  2. in the runtime.txt file, add your Python version:

For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:

Either:

Or:

The project should now be connected and deployed to Heroku!

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

For either method, you will need to install any applicable packages found within the requirements.txt file.

You will need to create a new file called env.py at the root-level,

and include the same environment variables listed above from the Heroku deployment steps.

[!IMPORTANT] This is a sample only; you would replace the values with your own if cloning/forking my repository.

Sample env.py file:


import os

os.environ.setdefault("CLOUDINARY_URL", "user's own value")

os.environ.setdefault("DATABASE_URL", "user's own value")

os.environ.setdefault("EMAIL_HOST_PASS", "user's own value")

os.environ.setdefault("EMAIL_HOST_USER", "user's own value")

os.environ.setdefault("SECRET_KEY", "user's own value")

os.environ.setdefault("STRIPE_PUBLIC_KEY", "user's own value")

os.environ.setdefault("STRIPE_SECRET_KEY", "user's own value")

os.environ.setdefault("STRIPE_WH_SECRET", "user's own value")

# local environment only (do not include these in production/deployment!)

os.environ.setdefault("DEBUG", "True")

Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:

If you'd like to backup your database models, use the following command for each model you'd like to create a fixture for:

Cloning

You can clone the repository by following these steps:

  1. Go to the GitHub repository

  2. Locate the Code button above the list of files and click it

  3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard

  4. Open Git Bash or Terminal

  5. Change the current working directory to the one where you want the cloned directory

  6. In your IDE Terminal, type the following command to clone my repository:

  1. Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Open in Gitpod

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed.

A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository.

You can fork this repository by using the following steps:

  1. Log in to GitHub and locate the GitHub Repository

  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.

  3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Local VS Deployment

There are no significant differences between local vs deployed version.

Credits

Content

The core e-commerce functionalities and templates (services + checkout flow + alerts + payments) in this project was set up following Code Institutes walk-through. After the core functionalities were in place, adjustments were made to accommodate my design for the site.

Source Location Notes
Markdown Builder README and TESTING tool to help generate the Markdown files
Djangoproject views Setting up Django messages
Djangoproject views Using distinct() for fetching unique service
Bootstrap5 Page layout Using Bootstrap grid system
Bootstrap5 main-nav.html navbar with dropdown
Bootstrap5 services + service details interactive pop-up (modal) for delete confirmation
Bootstrap5 services + service details card layout
Bootstrap5 about FAQs accordion
WhiteNoise entire site hosting static files on Heroku temporarily
Cloudinary services + service details how to use cloudinary field
ChatGPT entire site to help me troubleshoot a few bugs I had, as well as explain some coding concepts used from the walkthrough lesson

Media

Source Location Type Notes
Freepik home page image Background image
Pexels services + service details image Counseling image
Pexels services + service details image PT Weightlifting image
Pexels services + service details image PT Wellness image
Unsplash services + service details image PT Power-lifting image
iStockphoto services + service details image PT Athletics image
StockAdobe services + service details image No image placeholder
Bodybuilding services + service details image PT Bodybuilding image
Canva services + service details image Workout plan image
Fontawesome entire site icons Icons for profile, cart, search, category tag etc..

Acknowledgements