code-institute-submissions / wrottesley_golf_club Goto Github PK

Wrottesley Golf Club is a golf course located in the west midlands. There are a number of users that the website will target and each of these user types will have a different need when using the website. This is my fourth milestone project as part of my Full Stack Web Development Course with Code Institute. This project focuses on "Full stack Frameworks With Django" and will put into practice what I have learned over the last year on the course.

1. Project overview
2. UX

• User Stories

3. UI

• Color Scheme
• Typography
• Wireframes

4. Features

• Existing Features
• Features Left to Implement

5. Databases
6. Technologies Used
7. Deployment
8. Testing
9. Acknowledgments

The project was built using Django - web framework.

For the testing of the store and subscriptions, a test credit card can be used by inputting the following details:

• Card Number: 4242 4242 4242 4242
• Exp date: 04/24
• CVC: 424
• ZIP: 42424

The three targetted users of the site will be:

• Existing members of the club
• Potential Members of the club
• Casual golfers wishing to play a round or purchase products from the store

Using the website, all users will be able to:

• View informatiion about the club
• View contact information about the club
• Easily navigate to the Tournaments page
• Easily navigate to the Blog page
• Easily navigate to the Store page
• Easily navigate to the Memberships page
• Always be able to see the total count of the basket

• Register for an account
• Login and Logout of the account
• Recover my password easily
• Recieve email confirmations once I have registered for an account
• Have an area of the user profile dedicated to my purchase history
• Have an area of the user profile dedicated to my personal information

• View and sort all products in the store
• Sort within a chosen category
• Search for an item
• See what the search criteria was
• Select the quantity of an item to purchase
• Select the size of an item (if applicable)
• View my items that I have added to my bag
• Delete an item and reduce the size selected
• Easily fill out delivery and payment information
• View an order summary once a purchase is made
• Recieve an email confirmation when a purchase is made

• See the benefits of a pro membership
• Be able to purchase a pro membership
• Be able to downgrade to beginner membership at any time

• Read the latest news about the course through individual blog posts
• Comment on a blog post
• Upload new blog posts (Admin Only)
• Edit blog posts (Admin Only)
• Delete blog posts (Admin Only)
• Approve comments which have been posted on a blog
• Only allow approved comments to be visible to members

• See a list of all the upcoming tournaments
• See the dates and times of the tournaments
• See the location of the tournaments
• See the prices of the tournaments

• Upload new tournaments to the Tournaments page (Admin Only)
• Edit tournaments on the Tournaments page (Admin Only)
• Delete tournaments (Admin only)
• Upload new products to the store (Admin Only)
• Edit the existing products in the store (Admin Only)
• Delete a product from the store (Admin Only)
• Approve comments which have been made on blog posts (Admin Only)

uiuxcenter - Used for inspiration on my color scheme, to create a bold web experience.

GoogleFonts

• Libre Baskerville - Used for the logo and headings around the site
• Roboto - Used for the main body text

The nav bar serves as the main navigation for the site. It is always visible at the top of the page accross all pages of the site. The navbar shows the Wrottesley Golf Club logo, which links to the homepage, an account button which shows a dropdown with options to go to the profile page or logout, and a basket which is the link to the basket page and also to keep track of the ammount of the current basket.

The secondary part of the navbar has four links, which go to the tournaments page, the blog page, the store page and the memberships page.

The footer serves as secondary navigation. It has the same links as the nav bar but also features the golf club address and some external links to facebook, twitter and instagram.

This serves as the landing page upon sign-up and login and the main hub for the site. The main feature on the site is the hero image and a statement to say the store is now live with a CTA to the store page. Beneath this there is a banner for information about memberships as well as some extra navigation to the blog, memberships and store pages.

The tournaments page is a simple table which lists all of the items on the tournaments database. The table shows five columns - Name, Date, Time, Location and Price. The price will show either the ammount or 'Free' depending on your membership level.

The blog page serves as a place listing all of the blog posts in one page. The items are stacked in a single column vertically down the page on all screen sizes. Each blog post is summarised in a card and shows the main image, the title, the author, the first 200 characters, the time the post was last updated and a button to go to the blog post itself. As a superuser, you can also add, edit and delete a post from this page.

As a superuser, as well as being able to do so on the admin panel, there is also a form to edit or add a new blog to the list of blogs on the website. There will be links to the forms visible on the blog page if you are a superuser.

The blog post page shows the full details of the individual blog post you have just clicked on. This shows the full hero image at the top of the page, the title, the author and the full blog post. At the top of the page you can see a count of how many comments there have been on the post.

Underneath the post, there is the option to leave a comment on the post, up to a maximum of 200 characters. You won't go over this count, as there is a count to warn you when you are close and also the button to submit the comment will not be clickable if you go over. You will only be able to leave a comment if you are logged in. Underneath the form the list of comments are listed in a vertical column. The comments will only be visible if a superuser has deemed the comment as safe and approved it on the database.

The store page lists all the products which are listed on the product database and some tools to help you navigate these products so you can find exactly what you want when there are a lot more items in the store.

The first is a search bar which filters the results down by taking the search criteria and matching it to the product title, the product description or the categories. if nothing is entered into the search box when the user presses submits a search query, the page will show all products and a message will appear to let the user know they need to enter search criteria to search the store.

Above the search bar, there is a total count of the number of items currently listed on the page. If no filtering has been done, it will just show the count followed by the word products e.g "12 Products". If a category has been chosen, the count will show the category selected and the total number of ptoducts e.g "Accessories | 4 products". If the user has used the search box, the count will show the number of products and te search term that was entered e.g "1 products found for "tees""

Above the products is a sort dropdown which lets the user sort by four different criteria - Price (high - low), price (low - high), name (a - z), name (z - a).

All the products are listed in individual cards which show the product category, image, title and price. Clicking the image will take the user to the product detail page.

The prduct detail page shows more information about a particular product. This has some of the same information seen on the product detail card in the store page, with some extra details. On the product detail page the user can see the product image, title, price, catgeory and full description. On top of this, the user can update the quantity and select the size of the item to purchse, if the product has sizes. There is also a primary button here to add the product to the basket, and a secondary button to go back to the store. Clicking the category will take the user back to the store, but the products will be filtered by that category.

Underneath the product details, there is a banner which shows other products the user may be insterested in. This will show other products from the same category, which when clicked, will take the user to that product.

The memberships page serves as the page to manage your subscription with the club. The display on the page is dependent on the current membership level of the user. If the user is a new member, and has never had a subscription before, they will be classed as a 'beginner' member for use around the site but will technically have no membership status. When coming to the memberships page in this scenario, the user would see details of the pro membership and a primary button to subscribe. Clicking this would take them to the stripe checkout page where they would add their card details and become a plus member. When navigating back to the membership page, they would see scenario two.

If coming to the page as a 'pro' member, the user would see a page which highlights the benefits of being a plus member, but will now give them the option to downgrade their membership level from 'pro' to 'beginner'. Clicking this button will not require the user to fill out any other details, but will switch the customers membership level instantly. When navigating back to the memberships page, they would see scenario three.

When coming to this page as a 'beginner' member, the user would see a page highlighting the benefits of pro membership with the option to upgrade again to this level. This would be easier this time around, and will not require the user to fill out the credit card details, but would switch the membership level to 'pro' on both the user profile and the stripe system, using the original card details.

The basket page shows a summary of the products in the basket and the amount that the current basket equates to. Here, the user has the ability to update the quantity of each product or delete it entirely from the basket. The amounts show a breakdown of the prices and a total amount with a button which takes the user to the checkout page.

The checkout page has two sections, the delivery and personal information details and the total of the order. The details is a form when, if logged in, lets the user save their information to their profile for a quicker checkout next time. The total is similar to the basket page, and shows the breakdown of the amounts with the option ot edit the basket and a final summary of how much will be charged. The final feature on the page is the payment information which uses Stripe to handle the payments. A successfull payment will take the users to the order success page showing the order summary.

The profile page is split into two sections, delivery details and order history. The delivery details is a simple form and has an 'update information' button below to update their details on their profile, which would also reflect on the delivery details on the checkout page.

The order history shows a summary of the users previous orders. It is in the layout of a table and shows the order number, date, items and the grand total. Clicking the order number would take the user to the order summary where they would see a more detailed breakdown of the order. Underneath the order history is a button to go to the store.

• Make the tournaments more usable, with the ability to register for a tournament.

• Make the memberships system more robust. This will include using more of the Stripe API to show a dashboard of the users membership details.

• Make more areas for the admin / superuser to upload new details to the site, such as a form for new tournaments and a products form.

• Make use of the social media account logins in all auth.

For my development environment, I was using SQLite, as this is the default with Django. Once my code was deployed to Heroku, I switched to a PostgreSQL database.

My site consists of 9 models and 8 apps

• The home app is used to display index.html, which serves as the root page of the site. This app contains no models.

• The basket app is used for basic CRUD operations for managing products in the shopping basket. This app contains no models.

• The blog app is used to show blog posts which have been added by an admin. Users can read and also comment on blog.

author = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True, related_name='blog_posts')
slug = models.SlugField(max_length=200, unique=True)
date_created = models.DateTimeField(auto_now_add=True)
main_image = models.ImageField(null=False, blank=False)
title = models.CharField(max_length=300, unique=True, null=False, blank=False,)
sub_title_one = models.CharField(max_length=300, unique=True, null=False, blank=False,)
blog_content_one = models.TextField(null=False, blank=False,)
sub_title_two = models.CharField(max_length=300, default='', blank=True,)
blog_content_two = models.TextField(default='', blank=True,)
last_updated = models.DateTimeField(auto_now=True)

blog = models.ForeignKey(Blog, on_delete=models.CASCADE, related_name='comments')
name = models.OneToOneField(to=User, on_delete=models.CASCADE)
body = models.CharField(max_length=200)
date_created = models.DateTimeField(auto_now_add=True)
approved = models.BooleanField(default=False)

• The checkout app is used to handle the chekout process of the store and enabled users purchase their products through the Stripe payments system.

order_number = models.CharField(max_length=32, null=False, editable=False)
user_profile = models.ForeignKey(UserProfile, on_delete=models.SET_NULL, null=True, blank=True, related_name='orders')
full_name = models.CharField(max_length=50, null=False, blank=False)
email = models.EmailField(max_length=254, null=False, blank=False)
phone_number = models.CharField(max_length=20, null=False, blank=False)
country = CountryField(blank_label='Country *', null=False, blank=False)
town_or_city = models.CharField(max_length=40, null=False, blank=False)
postcode = models.CharField(max_length=20, default='', blank=True)
street_address = models.CharField(max_length=80, null=False, blank=False)
county = models.CharField(max_length=30, default='', blank=True)
date = models.DateTimeField(auto_now_add=True)
delivery_cost = models.DecimalField(max_digits=6, decimal_places=2, null=False, default=0)
discount = models.DecimalField(max_digits=6, decimal_places=2, null=False, default=0)
order_total = models.DecimalField(max_digits=10, decimal_places=2, null=False, default=0)
grand_total = models.DecimalField(max_digits=10, decimal_places=2, null=False, default=0)
original_basket = models.TextField(null=False, blank=False, default='')
stripe_pid = models.CharField(max_length=254, null=False, blank=False, default='')

order = models.ForeignKey(Order, null=False, blank=False, on_delete=models.CASCADE, related_name='lineitems')
product = models.ForeignKey(Product, null=False, blank=False, on_delete=models.CASCADE)
product_size = models.CharField(max_length=2, default='', blank=True)
quantity = models.IntegerField(null=False, blank=False, default=0)
lineitem_total = models. DecimalField(max_digits=6, decimal_places=2, null=False, blank=False, editable=False)

• The memberships app is used to allow users to upgrade their membership to 'pro' or downgrade to 'beginner' if they have signed up but no longer which to be a 'pro'memnber.

user = models.OneToOneField(to=User, on_delete=models.CASCADE)
stripeCustomerId = models.CharField(max_length=255)
stripeSubscriptionId = models.CharField(max_length=255)

• The products app is used to store the details of an individual product and associate it with a particular category.

name = models.CharField(max_length=254)
friendly_name = models.CharField(max_length=254, default='', blank=True)

sku = models.CharField(max_length=254, default='', blank=True)
name = models.CharField(max_length=254)
description = models.TextField()
material = models.TextField()
has_sizes = models.BooleanField(default=False, null=True, blank=True)
price = models.DecimalField(max_digits=6, decimal_places=2)
category = models.ForeignKey('Category', null=True, blank=True, on_delete=models.SET_NULL)
image_url = models.URLField(max_length=1024, default='', blank=True)
image = models.ImageField(default='', blank=True)

• The profiles app is used to store information about the registered users of the site, this can be used for faster checkout and handles the membership level for discounts and access around the site.

user = models.OneToOneField(User, on_delete=models.CASCADE)
membership_type = models.CharField(max_length=20, default='', blank=True)
default_phone_number = models.CharField(max_length=20, default='', blank=True)
default_street_address = models.CharField(max_length=80, default='', blank=True)
default_town_or_city = models.CharField(max_length=40, default='', blank=True)
default_county = models.CharField(max_length=30, default='', blank=True)
default_postcode = models.CharField(max_length=20, default='', blank=True)
default_country = CountryField(blank_label='Country *', null=True, blank=True)

• The tournaments app is used to store information about upcoming tournaments at the golf club.

name = models.CharField(max_length=254, default='', blank=True)
start_date = models.CharField(max_length=254, default='', blank=True)
start_time = models.CharField(max_length=254, default='', blank=True)
location = models.CharField(max_length=254, default='', blank=True)
entry_fee = models.CharField(max_length=254, default='', blank=True)

1. HTML 5

• HTML is the standard markup language for Web pages.

2. CSS

• Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

3. JAVASCRIPT

• JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. The vast majority of websites use it for client-side page behavior,[11] and all major web browsers have a dedicated JavaScript engine to execute it.

5. PYTHON

• Python is a programming language that lets you work quickly and integrate systems more effectively.

4. JQUERY

• jQuery is a fast, small, and feature-rich JavaScript library.

5. BOOTSTRAP

• A modern responsive front-end framework based on Material Design.

6. FONTAWESOME

• Font Awesome is a font and icon toolkit based on CSS and Less.

7. GOOGLE FONTS

• Google Fonts is a library of more than a thousand free and open source font families, an interactive web directory for browsing the library, and APIs for using the fonts via CSS and Android.

8. DJANGO

• Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

9. BOTO3

• You use the AWS SDK for Python (Boto3) to create, configure, and manage AWS services, such as Amazon Elastic Compute Cloud (Amazon EC2) and Amazon Simple Storage Service (Amazon S3).

10. GUNICORN

• Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.

11. PILLOW

• Python Imaging Library is a free and open-source additional library for the Python programming language that adds support for opening, manipulating, and saving many different image file formats.

12. POSTGRES

• PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance.

13. PSYCOPG2

• Psycopg is the most popular PostgreSQL database adapter for the Python programming language.

14. STRIPE

• Stripe is an Irish-American financial services and software as a service company. The company primarily offers payment processing software and application programming interfaces for e-commerce websites and mobile applications.

15. SQLITE3

• SQLite is a C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine.

16. GITPOD

• Gitpod streamlines developer workflows by providing prebuilt, collaborative development environments in your browser - powered by VS Code.

17. GITHUB

• Hosting for software development and version control using Git.

18. HEROKU

• Heroku is a cloud platform as a service supporting several programming languages.

19. ADOBEXD

• Adobe XD is a vector-based user experience design tool for web apps and mobile apps, developed and published by Adobe Inc.

20. Imgur

• Free image hosting website used for embedding links to images into websites.

All code on this project was created in Gitpod for development. When development was nearing completion it was deployed to Heroku for hosting the webpage and AWS S3 for hosting the static files and all images.

If someone wishes to run this project locally, they should install the Gitpod chrome browser extension. Then:

• Go to https://github.com/CarterStefan/wrottesley_golf_club and click the green button titled 'Gitpod'

• In the gitpod settings click 'variables' and then 'add new variable' and add the following variables

  • STRIPE_SECRET_KEY = {Your stripe secret key}

  • DEVELOPMENT = {True}

  • STRIPE_BEGINNER_PRICE_ID = {Your stripe beginner price ID}

  • DOMAIN_URL = {Your domain url}

  • STRIPE_PRO_PRICE_ID = {Your stripe pro price ID}

  • STRIPE_WH_SECRET = {Your stripe webhook secret key}

  • STRIPE_PUBLIC_KEY = {Your stripe public key}

  • SECRET_KEY = {Your stripe secret key}

  • STRIPE_MEMBERSHIP_WH_SECRET = {your stripe membership webhook secret key}

  • Any stripe secret keys will need to be set up in the stripe interface once registered for an account

• In the command line type 'pip install -r requirements.txt'

• Migrate the models to the database by going to the command line and typing:

  • python3 manage.py makemigrations
  • python3 manage.py migrate

• Create a super user by going to the command line and typing:

  • python3 manage.py createsuperuser

  • Enter a email, username and password

• Load the data for the categories and the products by going to the command line and typing:

  • python3 manage.py loaddata categories
  • python3 manage.py loaddata Products

• Start the web app by going to the command line and typing:

  • python3 manage.py runserver

• Go to the admin page, by tacking /admin to the end of the url

  • Login with the credentials of the superuser you just created
  • Go to the blog option, and add a new blog using the form
  • Go to the Tournaments option, and add a new tournament using the form

If someone wishes to deploy this project on Heroku, they should follow these steps:

• Within Stripe, create a new account and set up webhook endpoints for checkout/wh and memberships/webhooks

• Within Stripe, create two products for 'Pro' and 'Beginner' membership products

• Setup up an AWS account with the following:

  • AWS S3 Bucket
  • Bucket Policy
  • Group
  • Access Policy
  • User

• Setup a gmail account

  • Turn on 2-step verification
  • Create an app password by selecting 'mail' as the app and 'other' as the device type - set this as 'Django'

• Create a requirements.txt file by going to the CLI and typing 'pip freeze > requirements.txt'

• Create a procfile with the line 'web: gunicorn {the_name_of_your_heroku_app_here}.wsgi:application

• Save and push the code to github

• Create a Heroku account

• In Heroku, create a new app for the project with a unique name

• In Heroku, on the'resources page' search and select 'Heroku Postgress'

• In Heroku, set your config variables:

  • AWS_ACCESS_KEY_ID = {Your AWS_ACCESS_KEY_ID}
  • AWS_SECRET_ACCESS_KEY = {Your AWS_SECRET_ACCESS_KEY}
  • DATABASE_URL = {Your DATABASE_URL}
  • DOMAIN_URL = {Your DOMAIN_URL}
  • EMAIL_HOST_PASS = {Your EMAIL_HOST_PASSWORD}
  • EMAIL_HOST_PASS = {Your EMAIL_HOST_USER}
  • SECRET_KEY = {Your SECRET_KEY}
  • STRIPE_BEGINNER_PRICE_ID = Your STRIPE_BEGINNER_PRICE_ID}
  • STRIPE_MEMBERSHIP_WH_SECRET = {Your STRIPE_MEMBERSHIP_WH_SECRET}
  • STRIPE_PRO_PRICE_ID = {Your STRIPE_PRO_PRICE_ID}
  • STRIPE_PUBLIC_KEY = {Your STRIPE_PUBLIC_KEY}
  • STRIPE_SECRET_KEY = {Your STRIPE_SECRET_KEY}
  • STRIPE_WH_SECRET = {Your STRIPE_WH_SECRET}
  • USE_AWS = True

• Change the allowed hosts in settings.py to match your new heroku app

• In the CLI, type 'python3 manage.py makemigrations' then 'python3 manage.py migrate' to migrate your models to the new database

• In the CLI, import the products and categories by typing 'python3 manage.py loaddata categories' then 'python3 manage.py loaddata products'

• In the CLI, create a super user for your deployed site by typing 'python3 manage.py createsuperuser' and entering the required details

• Set Heroku to get changes from github automatically

• Save and push the code to github

• I used W3C validator the all pages accross my site.

All pages passed the validator with no errors or warnings.

• I used W3C validator the three CSS files in my project:
  • base.css
  • memberships.css
  • blog.css

All three files passed the validator with no errors or warnings.

• All python files (excluding those which come as built in with django) pass the PEP8 online code check.

• The store section of the website was largely created by following the tutorials from the Boutique Ado project from CodeInstitute. The code was adapted to suit the needs of my store and fit with the branding of my project. This code included the bag, store products and checkout process.

• The blog application was created by following along with the DjangoCentral post 'Building a blog application with django'. I then adapted the code to fit with my project.

• The memberships subscription logic was built with help from the TestDriven tutorial on integrating stripe subscription services.

• I took the code for the dropdowns in the wireframes section of the readme from Joyrexus.

ClubHouse

• Used for all product images, details and descriptions

StAndrews

• Used for all blog Contents

AllSquareGolf

• Used for hero image on site

Unsplash

• Used for stock images of golf courses used on blogs, memberships and homepage

• I would like to thank CodeInstitute for providing the lessons on full stack frameworks and the tutorials on how to set up a store. Also, a big thankyou to the tutor support team, who not only helped with this project, but also throughout the last year.

• A big thank you also to my mentor Gbenga, whose encouragement and support has helped me through this project and throughtout my time on the course.