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.
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.
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.
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.
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.
The FMCI databases utilizes a number of models with relationships as shown in the following diagram.
ERM
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.
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.
Color Scheme
The logo is FMCI's trading logo which is based on a wireless communications icon in the colours of the Irish flag.
I used a similiar layout to the "Boutique Ado" tutorial with a the previously mentioned alteration to the color pallet.
Homepage Mockup
Again the store is based on the same Django framework as used in the Boutique Ado tutorial.
Store Page Mockup
This uses a clean look with a relevant photograph and a table listing the various options on offer.
Offerings Mockup
For the purposes of PP5 a facebook page is provided here FMCI Store
Facebook Page Screenshot
<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">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.
The target market is OEMs, new startups and automotive research organisations.
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.
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.
Visitors and users can signup to a newsletter to receive news, developments and other relevant information.
Newsletter Screenshot
I used GitPod Project to as my Agile tracker
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
Edited Example
As a visitor I can use a menu to view products and services
As a visitor I access the store so I can purchase products
As a visitor I can select wearable products and accessories
As a visitor I can select wearable products in different sizes
As a visitor I can modify my cart and add or remove products
Agile Task 42 - Add Checkout App
As a visitor I can checkout and complete my product purchases
As a visitor I can see that my order is processing
As a visitor I can see that my order is successfull
Agile Task 51 - Add Email Functionality
As a visitor I receive an order confirmation email
Agile Task 48 - Add Profiles App
As a visitor I can register so that I become a site user
As a visitor I will receive a registration verification link in an email
As a visitor I can click a registration verification link from an email
As a visitor I can get a registration acknowledgement alert
Agile Task 48 - Add Profiles App
As a user I can log in to my account
As a user I can view my user profile
As a user I can modify my profile
As a user I can view details of my orders
As a user I can view my past orders
As a user I can log out of my account
Agile Task 56 - Show Full Name on navbar when logged in
As a user I can see my name when logged in
As a user I can verify I've logged out of my account
Agile Task 49 -Implement Store Management
As a staff member I can manage store products
As a staff member I can edit store products
As a staff member I can delete store products with confirmation warning
As a staff member I can add a new product
As a staff member I can view confirm product is added
Stripe is being used to complete purchases. In order to verify that payments are processed correctly Stripe's webhooks are utilised.
Sample Webhooks List
Email is used to verify user registration and to confirm purchases for visitiors and users.
Email Verification
Order Confirmation
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',
The main pages used were tested using Google Dev Tools Lightouse
Home Page
Store Page
Product Page
Cart
Checkout
Home Page
Store Page
Product Page
Cart
Checkout
- 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
-
- Create a unique app name which will be added to allowed hosts in the project settings
- Select your region
- Click "Create app"
-
- 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
-
- 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)
-
DATABASES = { 'default': dj_database_url.parse(os.environ.get('DATABASE_URL')) }
-
ALLOWED_HOSTS = ['example-heroku-app-name.herokuapp.com', 'localhost']
-
web: gunicorn project_name.wsgi -
'pip3 freeze --local > requirements.txt' -
python3 manage.py migrate
-
- Set DEBUG = False in project settings.py
- Remove DISABLE_COLLECTSTATIC config var from Heroku
-
- 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"
- 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"
- 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
- 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
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