Gaelic Galore is my final project submitted for assessment in the Diploma in Software Engineering with Code Institute. It forms the minimum viable product for an e-commerce site for a fictional Gaelic-language school. The site enables education professionals to offer their courses to potential clients and allows the growing number of learners interested in Scottish Gaelic to find a means of learning a language for which courses are often limited by the relatively low number of speakers.

The full site is deployed via Heroku at: gaelic-galore · Activity | Heroku

A full user experience design document, detailing the five planes of design for Gaelic Galore, complete with user stories, appears as a separate PDF here.

A database design diagram for the project appears as a separate PDF here.

• The navigation bar allows users to easily navigate the pages of the site by giving a simple site overview.

• To provide a cleaner aesthetic, the navigation bar appears on smaller devices the homepage in the form of a hamburger-style dropdown menu.

• The decorative favicon uses the Saltire, the Scottish flag, to both indicate that the Gaelic in question is Scottish Gaelic, i.e. as opposed to Gaelige, and to fit in with the overall (blue) design accentuating Scottish cultural aspects.

• These features, as well as Django messages, are enabled by the base.html template content applying to all pages of the website, other than index.html which was coded separately to better apply and style its background images.

• The homepage navigation changes its design arrangement to make best use of the device on which it appears. Index.html contains vivid background images (from Pixabay) depicting scenes from the Hebrides, where Gaelic has traditionally been spoken. Via media queries, the background image changes from a landscape image (for medium and large devices) to a horizontal image (for small devices).
• As stated above in the section on information architecture, the items in the navigation bar vary on the homepage, depending on whether or not the user is logged in.

• The add location page provides a form to enable superusers to add a new location to the database, entering appropriate text and up to three images.

• The add course page provides a form to enable superusers to add a new course to the database, entering the location, title, level, a description, and up to two images.

• The course listview pages, accessed vie the navbar Courses element, filter the courses in the database to show Bootstrap cards with initial details for: all courses, advanced courses, intermediate courses, or beginners courses based on the user's choice.

• The course detail view pages provide information on specific courses and allow users to add courses to their shopping carts. Users may also increase and decrease the amount of participants as they wish.
• Superusers may access the edit / delete course form from this page.
• Upon a user adding an item to their cart, a success toast appears which allows users to navigate directly to the checkout page.

• The edit course page provides a form for superusers to change the content of course detail pages.

• The shopping cart page allows users to increase, decrease or delete the number of items in their shopping cart
• If the user's cart is empty, a message tells them so and provides a button taking them back to the 'all courses' list view

• The course listview pages, accessed vie the navbar Courses element, filter the courses in the database to show Bootstrap cards with initial details of all courses, advanced courses, intermediate courses or beginners courses based on the user's choice.

• This is a static html site which provides a contact email address for users.

• The login page, powered by a Django allauth form, allows users to securely log in.
• A 'Forgot your password' link takes users to a password reset page

• This page provides a form to initiate the allauth reset password process

• The logout section of the navbar takes users to a page which asks them whether they are sure they want to log out and provides a button to allow them to do so. Logging out takes the user back to the homepage.

• The checkout page provides a list of items in the user's cart, a Stripe-powered form for payment, and buttons to allow the user to either complete the purchase or go back to their shopping cart.
• A notification below the payment form also alerts users to how much they will be charged for their purchase.

• The checkout success page gives the reader a breakdown of their purchase and order number, and informs them of the automatic email they will receive to confirm the order. However, if the order is unsuccessful, a message appears at the bottom of the checkout page informing the user.

• The user profile page provides a form for users to change their billing address and a list of previous purchases.

• The search results page shows courses which contain the word that the user searched for, whether the words appear in either the course title or details

I initially began a version of the milestone 4 project in the Spring/Summer of 2021, but had to go on medical leave for around 10 months due to chronic pain issues. As such, I came back to the project having to start from scratch with limited time remaining, and a limited time that I could spend in front of the computer without experiencing pain. For that reason, there were a few sacrifices I had to make due to time constraints.

• More custom CSS. Due to the time constraints, I took Bootstrap at its purpose and used it as much as possible.
• Adding social media login functionality to the site.
• Adding other means of payment, e.g. PayPal.

Additionally, I had, despite the time constraints, planned a couple of features that I later had to sacrifice due to time lost trying to fix problems that occurred while coding.

• Automated testing: At this stage, the app has only been tested manually.
• A contact form: For the time being, a static page directs users to a contact email address.
• A timer graphic to show users that their order is being processed. For the time being, text on the Checkout page tells users that their purchase may take some moments to process.

• GitHub: https://github.com/
  • GitHub was used to host the application's repositories.
• GitPod: https://www.gitpod.io/
  • GitPod served as the integrated development environment used to code the site.
• Python: Welcome to Python.org
  • Python was used to code the app's models, views, urls, etc.
• HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
  • The website uses HTML to input the structure and content.
• CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
  • The website uses CSS to style the HTML elements.
• Bootstrap: Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)
  • The website uses the Bootstrap framework to simplify the integration and styling of responsive elements.
• Django: The web framework for perfectionists with deadlines | Django (djangoproject.com)
  • Django was used as the framework within the site was coded.
• Django allauth: Installation — django-allauth 0.43.0 documentation
  • This was used for customer authentication.
• Stripe: Stripe® Official | Payment Processing Platform for the Internet
  • Stripe was used to handle secure credit card payments and to send purchase confirmation emails.
• Amazon Web Services: https://aws.amazon.com/
  • Cloud support to help manage static and database content.
• jQuery: https://code.jquery.com/
  • The site uses jQuery to handle Stripe payments, allow users to manage their shopping carts, and to provide users with informative toasts.
• Google Fonts: https://fonts.google.com/
  • The site uses Google Fonts to integrate the Lato font into the website.
• Fontawesome: https://fontawesome.com/
  • The site uses Font Awesome to integrate icons site.
• Autoprefixer CSS online: https://autoprefixer.github.io/
  • Autoprefixer was used to automatically add vendor prefixes to style.css in order to aid cross-browser compatability.
• Favicon.io
  • favicon.io was used to add a favicon to the site. https://favicon.io/emoji-favicons/flag-scotland/
• word2md.com: https://word2md.com/
  • To ensure correct markdown in the first draft of this Read Me file a Microsoft Word document of the text was run through word2md.com. The resulting markdown and text was then edited according to the preferences of the author using rules set out in the Mastering Markdown document at GitHub.com. https://guides.github.com/features/mastering-markdown/

• I manually tested the site for errors by having the Mozilla, Microsoft Edge, and Google Chrome Developer Tools console open while performing every user event possible on the site, both on the local and deployed versions.
• To ensure that the site contains valid HTML, the HTML code was checked by direct input using the W3C Markup Validation Service: https://validator.w3.org/
• To check valid CSS, direct input via the W3C CSS Validation Service was used: https://jigsaw.w3.org/css-validator/
• To test the validity of the jQuery / Javascript JS Hint was used: https://jshint.com/
• To ensure that Python and Django templating code remained error-free, the Debug console was set to 'True' throughout the entirety of the development process. Pylint was also used to ensure pep8 compliance as far as possible without breaking the code.
• To check that the website complies well with accessibility standards I used Siteimprove: Website Accessibility Checker - Free Instant Accessibility Check (siteimprove.com)
• To ensure the site's functionality across various devices, I used the web developer tools inspection feature of each of the following browsers:
  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • For each browser, I manually checked the preview of each of the site's pages and events, in both vertical and horizontal views, for devices ranging from the iPhone 5/SE at the smallest end to a width of 3840px / 4k at the highest. I also checked all the user events with the console of each browser's developer tools to ensure there were no errors.

In addition to checking the application's functionality using browser developer tools, the site has been manually checked and found to function as desired on the following devices:

• Lenovo Yoga 530 (checked by both myself and my wife, Anita)
• HP 255 G5 Notebook (checked by both myself and my wife, Anita)
• Macbook Air (checked by my father, George)
• Lenovo Thinkpad x390 (checked by myself)

• Kindle Fire 3 HD (checked by both myself and my wife, Anita)
• iPad mini 3 (checked by my father, George)

• Samsung Galaxy J4+ (checked by myself)
• Samsung A50 (checked by my wife, Anita)
• iPhone XR (checked by my brother, Greg)
• iPhone SE (checked by my friend, Kirill)

Occasionally, a Stripe-related error appears in the console when navigating through the site. Neither I nor Code Institite tutors have been able to reproduce it by performing any one particular action and I have therefore been advised by both Code Institute tutors and my project mentor that this is an issue on the Stripe end rather than an error in my code.

At the time of writing, I have run out of time without being able to fix the bug in the method shown in the Boutique Ado walkthrough project, i.e. that the minus button on the shopping cart button enables users to select quantities of less than zero.

Additionally, the cart allows users to continue to add a product to the cart once it has already sold out. On the advice of my tutor, I have focused on addressing other issues in the time remaining. As such, in a real-life scenario, website owners would need to keep an eye on purchases and remove a course from the site once it was sold out.

To meet the needs required above, the website requires mixed multimedia content including: text, a search function, call-to-action buttons, photographs, forms, and site-wide navigation buttons,

To create this project, I used the Code Institute template: https://github.com/Code-Institute-Org/gitpod-full-template

• Create GitHub and GitPod accounts.

• Navigate to https://github.com/Code-Institute-Org/gitpod-full-template

• Click the 'use this template' button.

• Give your repository a name and, optionally, a description.

• Click the Create repository from template button to open a GitPod workspace.

• While working on the project, be sure to open it from your existing project workspace, i.e. do not open a new workspace.

• To open a port and run the local version of the site on the server, type python manage.py runserver into the command line in the terminal and choose open server from port 8000.

• To commit changes to the local project, type the following commands into the command line from the terminal:

  • git add.
  • git commit – m "commit message"
  • git push

• To create a superuser for the project, type python manage.py createsuperuser into the command line in the terminal, then enter your chosen login credentials when prompted.

• To migrate changes to models to the Django database, type the following commands into the command line from the terminal:

  • python manage.py makemigrations
  • python manage.py migrate

• asgiref==3.5.1
• boto3==1.23.8
• botocore==1.26.8
• dj-database-url==0.5.0
• Django==3.2.13
• django-allauth==0.41.0
• django-countries==7.2.1
• django-crispy-forms==1.14.0
• django-storages==1.12.3
• gunicorn==20.1.0
• jmespath==1.0.0
• oauthlib==3.2.0
• Pillow==9.1.0
• psycopg2-binary==2.9.3
• python3-openid==3.2.0
• pytz==2022.1
• requests-oauthlib==1.3.1
• s3transfer==0.5.2
• sqlparse==0.4.2
• stripe==3.0.0

• To clone the project, follow the steps providedby GitHub here: Cloning a repository - GitHub Docs
• The following environment variables must be added to the project's env.py file:

import os

os.environ["SECRET_KEY"] = 'Your secret key'

os.environ["STRIPE_PUBLIC_KEY"] = 'Stripe public key'

os.environ["STRIPE_SECRET_KEY"] = 'Stripe secret key'

os.environ["STRIPE_WH_SECRET"] = 'Stripe webhook secret'

os.environ["EMAIL_HOST_USER"] = 'Your email'

os.environ["EMAIL_HOST_PASS"] = 'Your email host password'

os.environ["DEVELOPMENT"] = '1'

os.environ["DATABASE_URL"] = 'Your database URL'

USE_AWS = ["True"]

os.environ["AWS_ACCESS_KEY_ID"] = 'Your AWS access key ID'

os.environ["AWS_SECRET_ACCESS_KEY"] = 'Your AWS secret access key'

• Information on how to get Stripe environment variables can be found in the Stripe documentation: Stripe Documentation
• Information on how to get Amazon Web Services environment variables can be found in the AWS S3 documentation: Amazon Simple Storage Service Documentation
• To get the Database URL from your Heroku app,
  • Log in to Heroku and navigate to your app.
  • Select the Overview menu.
  • Click on the Heroku postgres addon.
  • Navigate to Settings > View Credentials
  • Find the URI and copy the whole thing in at the database url environment variable.

To deploy the project on Heroku:

• Create a Heroku account.
• Create a new app.
• Name the app, choose the region closest to you, and click Create app.
• Navigate to the Resources tab, type posgres into the add ons search bar and choose Heroku Postgres.
• Provision the Hobby Dev - Free Plan when prompted.
• If not already installed, install dj-database-url and psycopg2 by returning to GitPod and typing the following commands into the command line in the terminal:
  • pip3 install dj_database_url
  • pip3 install psycopg2-binary
  • pip3 freeze > requirements.txt
• import dj_database_url to the project settings.py on GitPod.
• Comment out the default DATABASES setting in settings.py and replace it with:

DATABASES = {

'default': dj_database_url.parse('Your database URL')

}

• You can get your database URL from the Config Vars under the Settings tab of your Heroku app.
• Set up the Heroku postgres database by typing python3 manage.py migrate into the command line of the terminal.
• Create a superuser with python3 manage.py createsuperuser.
• Be sure to click the verified and primary boxes for the superuser in the Heroku Django admin page.
• Uncomment out the original DATABASES setting in settings.py and remove your Heroku / dj_database one so that you don't push it to GitHub.
• Commit changes via the terminal.
• Set the if . . . else . . . statement below in settings.py. This will ensure that you connect to the postgres database when the app runs on Heroku and to sqlite otherwise.

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'),
        }
    }

• Type pip3 install gunicorn into the command line, then freeze requirements.
• Create a Procfile and and the following to it:
  • web: gunicorn gaelic_galore.wsgi:application
• To ensure that Heroku does not collect static files upon deployment, type the following into the command line:
  • heroku config:set DISABLE_COLLECTSTATIC=1 –app name-of-your-heroku-app
• add the host name of the Heroku app to ALLOWED_HOSTS = [] in settings.py.
• Additionally, add localhost to ALLOWED_HOSTS = [] to ensure that GitPod still works.
• Add, commit, and push changes in the command line.
• Initialize Heroku git remote in the command line with heroku git:remote a- your-app-name
• Type git push heroku master into the command line.
• To set the heroku app to automatically deploy when you deploy to github, Heroku app > Deploy > Deployment method > GitHub > search for your repository in the search bar > click connect > enable automatic deploys
• Generate a Django SECRET_KEY and add it to the Heroku config vars in Settings.
• Replace the SECRET_KEY setting in settings.py with a call to get it from the environment.
• SECRET_KEY = os.environ.get('SECRET_KEY', '')
• Change the DEBUG setting to:
• DEBUG = 'DEVELOPMENT'in os.environ
• Commit and push the changes to initiate a Heroku build.
• N.B. At the time of coding this project, automatic deploys were not available, so I needed to migrate database changes and push other changes with the following commands:
  • To commit changes to the deployed project on Heroku type the following commands into the command line from the terminal:
    • heroku login –i
    • When prompted, enter your email and password.
    • git push heroku main
  • To migrate changes to models to the deployed Heroku Django, database type the following command into the command line from the terminal:
    • heroku run python3 manage.py migrate -a YOUR PROJECT NAME
• By the time I finished the project, however, automatic deploys were once again available.
• The full list of Config Vars in the Heroku settings should be as follows:
  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY
  • DATABASE_URL
  • EMAIL_HOST_PASS
  • EMAIL_HOST_USER
  • SECRET_KEY
  • STRIPE_PUBLIC_KEY
  • STRIPE_SECRET_KEY
  • STRIPE_WH_SECRET
  • USE_AWS = True
• As stated above, information on how to find Stripe and AWS keys can be found in the Stripe and AWS documentation.

• To store static files and images on AWS S3, follow the instructions in the AWS S3 User Guide here: What is Amazon S3? - Amazon Simple Storage Service

• Log into a gmail account and go to settings.
• Click Accounts and Import > Other Google account settings > Security
• Turn on two-step verification.
• Click Get started, enter your password, and go through your chosen verification method
• Click Security > App passwords
• Select Mail as the app and Other then type Django under Device
• Click Generate and copy the password you are given
• Paste this password in Heroku > Settings > Config Vars as EMAIL_HOST_PASS
• Add another Config Var, EMAIL_HOST_USER, and set it as your gmail address.
• Ensure that the following is in your Settings.py:

if 'DEVELOPMENT' in os.environ:
    EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
    DEFAULT_FROM_EMAIL = '[email protected]'
else:
    EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
    EMAIL_USE_TLS = True
    EMAIL_PORT = 587
    EMAIL_HOST = 'smtp.gmail.com'
    EMAIL_HOST_USER = os.environ.get('EMAIL_HOST_USER')
    EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_HOST_PASS')
    DEFAULT_FROM_EMAIL = os.environ.get('EMAIL_HOST_USER')

• Add, commit, and push changes to GitHub/Heroku.

• All site images come from Pixabay

• The project is largely based on the methods and code taught in the Boutique Ado walkthrough project in the as part of Code Institute's Fullstack Frameworks module.
• I learned the static and template file structure, as well as how to build listviews and detailviews, from Django for Professionals by William S. Vincent.

• I would like to thank my wife, Anita, for always being willing to lend a spare pair of eyes and, at times, keeping up an elaborate pretence that I was not in fact exhausting every swear word I know in several languages when my code wasn't working.
• I also owe a debt to my father, George, for agreeing to test and give feedback on site functionality, particularly as regards the various iterations of the game.
• I would also like to thank my friend Milana for being awesome at all things design and never being unwilling to say when some aspect of my design is less than awesome.
• A huge shout out must go to Rebecca of the Code Institute tutoring staff, who was there with great advice and fantastic explanations to help me out of the most difficult spots during this project.
• Thank you to everyone on the Code Institute Slack page for being willing to lend an eye and a word of advice when required.
• Particular Slack honorifics must go to mentor Eventyret, tutor Ed B_alum, and my fellow students Abi Westcott and Ken Wee Chin for helping out when they were already done with their own projects and deserving of spending their time on something far better than fielding my last-minute, panicky questions.
• Finally, I would like to express my gratitude to my course mentor, Spencer Barribal, for offering encouragement and useful ideas, and to the Code Institute tutors and Slack community for providing advice and for humouring me when I asked stupid questions.