FMCI Store

FMCI Store gives interested users and visitors the opportunity to buy FMCI merchandice as well as the ability to view facilities and services on offer to businesses and automotive product developers.

• Visitors have access to all the published information and can create and complete orders. Visitors can also choose to register on the site.

• Registered users can access records of previous purchases in their profile.

• Staff users can edit existing products and also add or delete products as necessary.

• Wearable merchandice can be ordered in various sizes wherewhen the option is available.

Table of Contents

• FMCI Store

• Table of Contents

• Features

  • Home Page
  • Store
  • Other
  • Authentication

• Design

  • Database Model
  • General Color Scheme
  • Logo
  • Home
  • Store
  • Other

• SEO & Marketing

  • SEO
  • Marketing
  • Newsletter

• User Experience & Testing

  • Agile Tracker
  • User Stories
  • Visitor Journey
  • User Journey
  • Staff Journey
  • Stripe Payments
  • Email Verification
  • Lighthouse Testing

• Technologies

• Deployment

  • Deploy site using Heroku
  • Deployment Procedure
  • Steps to clone site

• Credits

  • Code
  • Media
  • Acknowledgement

Features

Home Page

The home page contains a summary of what FMCI does preceded by a link to the main FMCI homepage. A scrolling carousel runs at the bottom of the page which displays a clickable logo for each of FMCI's partners which when clicked open the partner's home page on a separate tab. The carousel is loaded from a simple django database model which can be edited by a superuser via the admin page.

Store

Products can be purchased from a number of cathegories on the store page. The store dropdown menu allows for viewing the products by category or viewing the entire store on a single page. Visitors can order products without having to register and account. Registered users can access and modify their contact details and also view a list of previous orders. They can also click on any individual order to see what products are contained in it. Staff users can modify the existing products, delete products or add new products as required. Both users and staff users can see that they are logged in as the login menu item changes to their full name and is highlighted for better visibility.

Other Offerings

The site shows what onsite spaces such as desks and labs are available to interested users. A table listing the various option is displayed alongside images of the spaces on offer. Additionally, compute and development services are offered and availabe for tenant or onsite customers. Tables outlining the various offerings are available for visitors and users to view.

Authentication

Users can register an account which gives them the ability to see their order history. Logged in users will see their full name displayed above the information banner and highllighted for visibility.

Design

Database Model

The FMCI databases utilizes a number of models with relationships as shown in the following diagram.

There are five categories of products and services of which only specific products may be purchased online. The Spaces and Services are purchases by emailing FMCI or by tenant customers and are only available on site.

General Color Scheme

I based the color scheme on the main FMCI webpage. Font colours were chosen to make the best use of contrast in order to assist with visbility and clarity.

Logo

The logo is FMCI's trading logo which is based on a wireless communications icon in the colours of the Irish flag.

Home

I used a similiar layout to the "Boutique Ado" tutorial with a the previously mentioned alteration to the color pallet.

Store

Again the store is based on the same Django framework as used in the Boutique Ado tutorial.

Other Offerings

This uses a clean look with a relevant photograph and a table listing the various options on offer.

SEO & Marketing

SEO

For the purposes of PP5 a facebook page is provided here FMCI Store

Relevant code from webpage

<link rel="preconnect" href="https://region1.google-analytics.com">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9988CFHBCY" defer></script>
<script defer>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-9988CFHBCY');
</script>

<meta name="google-site-verification" content="L33apRDqRtPi1I8nHWeQhXlwDacsbGytSjistzBgvfE" />
{% block meta %}
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="robots" content="index, nofollow">
<meta name="keywords" content="FMCI, fmci, future,  mobility, campus">
<meta name="description" content="Storefront CI Project for FMCI">

Marketing

Online Platforms

LinkedIn would be the main vehicle for social media in order to target and engage the relevant audience and market. Instagram and Facebook would alo be utilised and a facebook page is provided cuurrently.

Target Market

The target market is OEMs, new startups and automotive research organisations.

Goals of the business

As a platform for automotive research the goal is to provide merchandise online and at events to draw attention to FMCI and to increase awareness in the industry and in general.

Similiar Businesses

In terms of FMCI's business offering there aren't many if any competing businesses. FMCI provides a bespoke automotive testing platform as a service to the automotive industry, OEMs and new startups. Some specific aspects of FMCIs services are provided by AWS, Google, Heroku, Connected Hubs, WeWork etc.

Newsletter

Visitors and users can signup to a newsletter to receive news, developments and other relevant information.

User Experience & Testing

Agile

I used GitPod Project to as my Agile tracker

User Stories

There are three levels of user stories: visitor, user and staff. The stories are linked to agile tasks which can be seen below. Agile tasks cover one or more stpes on each of the user stories and journeys. Below we can see the agile tasks followed by the journey steps included in that task. The task view itself shows the code commits that were made to implement the task and a list of the steps completed. Below is an edited example of Agile Task 42 - Add Checkout App

Visitor Journey

Agile Task 39 - Add Store App

Agile Task 34 - Add Cart App

Agile Task 42 - Add Checkout App

Agile Task 51 - Add Email Functionality

Agile Task 48 - Add Profiles App

Agile Task 50 - Add Toasts

User Journey

Agile Task 48 - Add Profiles App

Agile Task 56 - Show Full Name on navbar when logged in

Agile Task 50 - Add Toasts

Staff Journey

Agile Task 49 -Implement Store Management

Stripe Payments Webhooks

Stripe is being used to complete purchases. In order to verify that payments are processed correctly Stripe's webhooks are utilised.

Email Verification

Email is used to verify user registration and to confirm purchases for visitiors and users.

Registration Verification Email

Order Confirmation Email

Code Testing

I used CI's linter (https://pep8ci.herokuapp.com/) to test all the python. In some cases there are "line too long" warnings but lines cannot alawys be split up easily.

• Example: content=f'Webhook received: event["type"]} | SUCCESS: Verified order already in database',

Lighthouse Testing

The main pages used were tested using Google Dev Tools Lightouse

Desktop Platform Testing

Mobile Platform Testing

Technologies

• HTML5: mark-up language.
• CSS3: styling.
• JavaScript: programming language.
• Python 3: programming language.
• Django 3.2
  • Django Crispy Forms: for forms.
  • Crispy Bootstrap5: bootstrap5 template pack for crispy forms.
  • Django Forms Dynamic: for the dynamic form using HTMX.
  • Django Widget Tweaks: for the dynamic form.
• Bootstrap: styling.
• Outlook: for email testing.
• Stripe: for payments and webhooks.
• Facebook: For SEO.
• AWS S3: store media files.
• GitHub: for host repository.
• Lighthouse from Chrome Developer Tools for performance testing
• Codeanywhere: online IDE.
• GitPod: online IDE.
• Heroku: PaaS deployment site
• Google Fonts: to import fonts.
• Font Awesome: to import icons.
• Lucidchart: for the mockups and ERM.
• GIMP: to create the logo and readme screens image
• Issues: agile project management

Deployment

Deploy site using Heroku

Deployment Procedure

• On the Heroku dashboard, select "New" and click "Create new app"

  • Create a unique app name which will be added to allowed hosts in the project settings
  • Select your region
  • Click "Create app"

• Go to the settings tab

  • Scroll down to the config vars section and select "Reveal Config Vars"
  • DATABASE_URL should be set to your selected database (Elephant SQL or similiar)
  • Add a new config var for SECRET_KEY - create your own or use a django secret key generator
  • Add a new config var for CLOUDINARY_URL and use the "API Environment variable" from your cloudinary dashboard
  • Add a new config var for DISABLE_COLLECTSTATIC with the value of 1 (!!! REMOVE PRIOR TO FINAL DEPLOYMENT !!!)
  • Add AWS config variables if used
  • Add Stripe Payments variabls if used

• Create environment variables for your app

  • If not already present, create a .gitignore file and add env.py to it ( before final deployment add any other files and folders you want to exclude from the deployed app)

• Replace the insecure secret key with "SECRET_KEY = os.environ.get('SECRET_KEY')"

• Link your database by commenting out old DATABASES section and add

  DATABASES = {
          'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
      }

• Add Heroku to the allowed hosts to ensure site loads

  ALLOWED_HOSTS = ['example-heroku-app-name.herokuapp.com', 'localhost']

• Create a Procfile in the top level directory with the below

  web: gunicorn project_name.wsgi

• Create a requirements file

  'pip3 freeze --local > requirements.txt' 

• Make any outstanding migrations

  python3 manage.py migrate

• Commit and push to GitHub

• ENSURE THE FOLLOWING PRIOR TO FINAL DEPLOYMENT

  • Set DEBUG = False in project settings.py
  • Remove DISABLE_COLLECTSTATIC config var from Heroku

• Go to the Deploy tab

  • Select GitHub and confirm connection to GitHub account
  • Search for the repository and click "Connect"
  • Scroll down to the deploy options
  • Select automatic deploys if you would like automatic deployment with each new push to the GitHub repository
  • In manual deploy, select which branch to deploy and click "Deploy Branch"
  • Heroku will start building the app

• The link to the app can be found at the top of the page by clicking "Open app"

Steps to clone site

• In the GitHub repository, click the "Code" button.
• Select "HTTPS" and copy the URL.
• Open Git Bash and navigate to the repository where you would like to locate the cloned repository.
• Type "git clone" followed by the copied URL.
• Press enter to create the clone.
• Install required packages with the command "pip3 install -r requirements.txt"

Credits

Code

• The site is based on a modified version of Code Institute's PP5
• Deployment procedure modified from SJeCollins excellent readme and also his test procedure document

Media

• The logo is FMCI's current logo
• Social media and google map location icons are from Font Awesome
• Fonts are from Google Fonts
• Product images are stock images with FMCI logo appeded using GIMP GIMP

Acknowledgement

Thanks to the following people who have supported me:

• My mentor Brian Macharia
• Paul Thomas O'Riordan and Laura Maycock from CI
• Cohort team lead Jonny Davison
• My wife and family for putting up with me
• All the slackers on Code Institue