The GolfShop is an online golf shop website that allows users to buy golf clubs and accessories.

Superusers can log in and add, edit and delete items in the shop.

I got inspraion from the application in the walk through that we did in this module, Botique Ado.

I used the walk through videos to help code the project.

View the live project here.

• 1. User experience (UX)
  • 1.1. Project goals
  • 1.2 User stories
  • 1.3 Design
  • 1.4 Information architecture
  • 1.5 Mockup designs
• 2. Features
  • 2.1 Existing features
  • 2.2 Features left to implement in the future
• 3. Technologies used
• 4. Testing
• 5. Deployment
• 6. Credits
• 7. Acknowledge
• 8. Disclaimer

• Making a full-stack site that allows users to manage a common dataset about a particular domain.
• Making a full-stack site that uses HTML, CSS, JavaScript, Python+Flask and PostGresDB.
• Creating a website that serves as a platform where people shop online, create an account and add items to the site.
• Creating a website that is simple to understand and easy to navigate.

First-time visitor goals:

1. As a first time visitor, I want to be able to visit the website on every device, so that I can look at the website on desktop, mobile and tablet.
2. As a first time visitor, I want to be able to navigate easily through the website, so I can find everything easily.
3. As a first time visitor, I want to be able to add and remove items from my shopping basket.
4. As a first time visitor, I want to be able to search golf clubs by categories, so I can easily find the equipment I want.
5. As a first time visitor, I want to register an account on the website, so I can buy golf accessories.

Site member goals:

All the goals of first-time visitors also apply for site members. There are additional user stories to the site members because they have more access to the website. See the additional user stories below.

1. As a site member, I want to login to my profile.
2. As a site member, I want to search for golf equipment.
3. As a site member, I want to buy the equipment.
4. As a site member, I want to logout to my profile.

Admin goals:

All the goals of the first time visitors and site members also apply for the admin. The admin has additional user stories to manage the categories of the golf accessories.

1. As an admin, I want to be able to add, edit and delete an item to the website.
2. As an admin, I want to be able to approve a message before it is displayed in the website.

• Colour scheme

I kept this website very neutral so that it doesnt take away from the golf images. White for the header mild color scheme from colorwwall.com.

• Fonts

The Merriweather are used throughout the whole website. Sans serif and cursive are the fallbacks in case the main font isn’t being imported to the site correctly.

• Icons

In the project, for the golf club and user, I used the icons provided by Font Awesome.

• Images

I collected the images from multiple sites including https://www.halpennygolf.com/.

• Interactive design

  • The website is basic and simple to use for the user. Users can navigate the site easily and clearly find what they are looking for.

I have crated a model for the categories and products and was able to add them using fitures using json files. I have used allauth for my login and logout. I have order models for the checkout and

Mockup designs are made with Balsamic.

Click on the links below to view.

• A basic, uncluttered layout with consistency.
• Simple navigation throughout the website by using the navigation bar.
• Displaying nice images, description and proces of the products.

• The home page has a header where the user can login, log out or create an account.
• Users can search for a club on using the search bar.
• Users can select select from a tab what club or accessory they want to see.
• Users can navigate to a facebook shop page to help SEO.

• Logged in super user can add, edit or delete an item.
• Users can arrange the items by price, category or name.
• Users can select a product and add it to the bag.

• Users can add or remove items from their shopping bag.
• Users can buy the app from the website.

• Like in the walkthrough, I have used allAuth for to handle the login and logout.
• People can create a new account on the web application.
• People can login with their existing accounts.
• People can easily log out.

• Extra style to be added.
• Facebook page to be updated.

• HTML5
  • HTML5 provides the structure and the content for my project.
• CSS3
  • CSS3 provides the style of the HTML5 elements.
• jQuery
  • jQuery used as the JavaScript functionality.
• Python
  • Python provides the backend of the project.
• Django
  • Python-based framework that follows the model–template–views architectural pattern.

• Gitpod
  • The GitPod is used to develop the project.
• Git
  • The Git was used for version control to commit to Git and push to GitHub.
• GitHub
  • The GitHub is used to host the project.
• Balsamic
  • Balsamic is used to create the mockup designs for the project.
• PostgreSQL
  • PostgreSQL is the open Source Relational Database that was used for the project.
• Heroku
  • Heroki is the cloud platform to deploying the app.
• AllAuth
  • Django-allauth was used for registeration, login and log out.
• AWS Amazon
  • AWS Amazon is used to store static and media files.
• Boto3
  • Boto3 is used for compatibility in AWS.
• Gunicorn
  • Gunicorn is used to enable deployment to Heroku.
• Crispy Forms
  • Django Crispy Forms is used to style the Django forms
• Stripe
  • Stripe is used for the secure payments.
• SQlite3
  • SQlite3 is used as the development database.
• PostgreSQL
  • PostgreSQL is used as the production database.

• Chrome DevTools is used to detect problems and test responsiveness.
• Autoprefixer
  • Autoprefixer is used to parse the CSS and to add vendor prefixes to CSS rules.
• W3C Markup Validation Service
  • The W3C Markup Validation Service is used to check whether there were any errors in the HTML5 code.
• W3C CSS validator
  • The W3C CSS validator is used to check whether there were any errors in the CSS3 code.
• JShint
  • JShint is a JavaScript validator that is used to check whether there were any errors in the JavaScript code.
• PEP8
  • The PEP8 validator is used to check whether there were any errors in the Python code.

• HTML Validator: Some errors due to django.

  • With testing the HTML code, I had some syntax issues on all pages I build with django templating.
  • I tested the HTML code by running my server locally and used view page source. This code I passed through the validator.
  • Some doctype errors that can be ingored as seen on slack chat.

• CSS Validator: No errors found.

• Python validator | PEP8: No errors found

• Responsiveness of the project is tested with Chrome DevTools.
• The project is tested on the following devices:
  • Desktop, Mobile & Tablet.
  • On ChromeDevTools used some of their devices for further testing.

1. As a user i want to click on a golf accessory so that I can see the the details of the product.
   • The user can click on a product and a detail page will open with the details required.
2. As a user i want to view a paginated list of products so that I can select what product I want to view.
   • The user will see see a set ammount of products depending on the screen size.
3. As a user i want to add and remove items from my shopping basket.
   • A user add and remove products from basket.
4. As a user i want to be able to search for a product.
   • A logged in user can enter text into the search bar and find a product they want.
5. As an Administrator, i want to add, remove and edit a product so that other users can view my products.
   • I added products as an admin.
6. As a user i want to be able to register an account.
   • I created and deleted test user accounts. All this was handled by allAuth.
7. As a user i want to be able to list the products in different orders so that i can view the list order by price or category.
   • I added order functionality and tested in the app.

• Python3
• Github account
• Heroku account

To make a local clone, follow the following steps.

1. Log in to GitHub and go to the repository.
2. Click on the green button with the text “Code”.
3. Click on “Open with GitHub Desktop” and follow the prompts in the GitHub Desktop Application or follow the instructions from this link to see how to clone the repository in other ways.

1. Set up local workspace for Heroku
   • In terminal window of your IDE type: pip3 freeze -- local > requirements.txt. (The file is needed for Heroku to know which filed to install.)
   • In termial window of your IDE type: python app.py > Procfile (The file is needed for Heroku to know which file is needed as entry point.)
2. Set up Heroku: create a Heroku account and create a new app and select your region.
3. Deployment method 'Github'
   • Click on the Connect to GitHub section in the deploy tab in Heroku.
     • Search your repository to connect with it.
     • When your repository appears click on connect to connect your repository with the Heroku.
   • Go to the settings app in Heroku and go to Config Vars. Click on Reveal Config Vars.
     • Enter the variables contained in your env.py file. it is about: CLOUDINARY_URL, DATABASE_URL, SECRET_KEY
4. Push the requirements.txt and Procfile to repository.

   $ git add requirements.txt
   $ git commit -m "Add requirements.txt"
   
   $ git add Procfile 
   $ git commit -m "Add Procfile"
   

5. Automatic deployment: Go to the deploy tab in Heroku and scroll down to Aotmatic deployments. Click on Enable Automatic Deploys. By Manual deploy click on Deploy Branch.

Heroku will receive the code from Github and host the app using the required packages. Click on Open app in the right corner of your Heroku account. The app wil open and the live link is available from the address bar.

This project is based on the Botique Ado walkthrough project and also using project example Idea 2. A lot of the code that I used in the walkthrough project I also used on this project.

• I got the product images, price and details from various online golf shops, mainly halpennygolf.

• Code Institute walkthrough project I think therefore I blog.

Thanks to the following people and organizations who helped or inspired me for the project:

• The support from Kasia and my class mates.
• The support and guidance of my mentor Precious Ijege.
• The lessons and knowledge of Code Institute.
• The advice about bugs from Slack community.

Thanks for visiting

Back to top!