MarketFlex

Table of Contents

• Overview
• User Experience (UX)
  • Agile Development
  • User Stories
• Design
  • Database Schema
  • Wireframes
  • Typography
  • Colours
  • Icons
• Features
  • Nav Bar
  • Landing Page
  • About Page
  • Product List Page
  • Product Detail View
  • Product Review
  • Search, Order & Filter
  • Basket
  • Order Form
  • Order Confirmation Page
  • Profile Page
  • Register, Log In & Log Out
  • Footer
  • Product Create
  • Product Edit
  • Contact Page
  • Error Pages
  • Messages
  • Custom newsletter form
  • Privacy Policy
  • Mailchimp Integration (Removed)
• Features Left to Implement
• Testing
• Technologies Used
  • Languages Used
  • Libraries & Frameworks
• Web Marketing
  • Key Advantages for MarketFlex:
  • Target Audience:
  • Marketing and Customer Engagement Strategies:
  • Site Features and User Experience:
• Search Engine Optimization
  • sitemap.xml
  • robots.txt
  • Sitemap Google Registration
• Deployment
  • Heroku Deployment
  • Local Deployment
• Tools
• Credits
  • Content
  • Information Resources

Overview

MarketFlex is a fully responsive e-commerce platform built using Django. This site allows people to browse and purchase tools and equipment used in many industries like the automotive and metal fabrication industry to name two.

The site allows users to search for specific items they are looking for and filter all items on a number of parameters. The site allows them to create a user profile so that they can quickly purchase items each time they visit the site and also keeps a record of there past orders.

Users can make purchases as a guest without having a profile also if they chose not to register with an account.

The option to sign up to newsletters is also available to the user, this will keep them up to date with the latest promotions and sales on offer.

The site also has admin users, admin users have access to create, update and delete products on the site.

View the live project Here

User Experience (UX)

Agile Development

The agile methodology was used in the development of this project. This is when each feature to the site is broken down into smaller tasks and each then is developed. The tool used to manage this was GitHub projects.

The breakdown of tasks was done using user stories, each story would describe the task the end user would like to do to achieve a desired goal. The user stories contained acceptance criteria that outline what the site needed to do in order to meet the requirements of the user story. Then there are tasks which described the technical work thats needed to be done to complete each User Story.

Story points are an estimated level of effort the developer thinks will be required to develop that feature.

The MoSCoW Prioritization technique was used to assign priorities for Product Backlog Items to be completed. Using this allowed for each user story to be prioritized.

User Story Sample USER STORY: As a Site User, I want to be able to navigate the site. The navigation needs to be simple and easy to understand. Navigating should be fluid

ACCEPTANCE CRITERIA:

• criteria one: As a Site User, i can navigate between different product categories
• criteria two: As a Site User, I can easily search for a product by its name
• criteria three: As a Site User, I can easily navigate to my shopping bag
• criteria four: As a Site User, I can easily navigate to my profile settings
• criteria five: As a Site User, I can easily login and logout of my profile

TASKS:

• [ ] Create a fixed Nav Bar
• [ ] Add a search bar with search functionality
• [ ] Add a link for users to access the shopping bag page
• [ ] Add a link for users to access their profile details page
• [ ] Add a link for users so they can login if not logged in and a link to logout for users that are logged in.

BUG TICKETS:

• [ ]

STORYPOINTS: 4

User Stories

User stories where done using the agile methodology above. The user stories where created and managed using GitHub projects. A lin to all the user stories can be found below.

View user stories Here

Design

Database Schema

• The database schema was created using dbdiagram.io. The schema was created to show the relationships between the different models in the database.

Wireframes

Wireframes were created using Balsamiq. The wireframes were created for desktop with the goal being to create a responsive design. The wireframes were created for the following pages:

Wireframes

- Product List Page -  - Product Detail Page -  - Bag Page -  - Checkout Page -  - Profile Page -  - Contact Page -  - Newsletter Page - 

Typography

• Lato

  • The decision to use Lato for the MarketFlex platform likely stems from its versatility and readability. Lato offers a balance between serious and friendly tones, making it suitable for a wide range of applications. Its well-structured characters enhance readability, which is crucial for an e-commerce platform where clear communication is key.

Colours

• Coolors

• 13293D: A dark navy blue, often used for text or background elements that require a dark, strong presence.

• 006494: A rich medium blue, good for accents and to draw attention to elements.

• 247BA0: A calming mid-tone blue, suitable for backgrounds, buttons, or headers.

• 1B98E0: A bright sky blue, stands out well against both light and dark elements, good for call-to-action buttons or links.

• E8F1F2: A very light blue with a hint of grey, excellent for backgrounds or for a light, airy feeling in the design.

Icons

• Font Awesome - Used for all icons on the site.
• LeonardoAI - Used to generate the favicon for the site.

Features

Nav Bar

• The navigation bar is fixed to the top of the page and is visible on all pages. Its optimised for mobile and desktop view. The navigation bar contains links to all the pages on the site as well as a search bar and a link to the user's shopping bag. There is also a link to the user's profile if they are logged in. If the user is an admin user they will also see a link to the product management page. When opened on mobile the navigation bar collapses into a hamburger menu.

Landing Page

• The landing page is the first page the user sees when they visit the site. It contains a hero image and a call to action button to view all products. The image was downloaded from Unsplash.

About Page

• The about page contains information about the site and the company. Its has a brief history of the company and its mission statement and also a list of advantages the company has over its competitors. There is also the image of the man welding from the landing page.

Product List Page

• The product list page displays all the products available on the site. The user can filter the products by category and sort the products by price, name and rating. Users can also search for a product by name using the search bar. The avergae rating of the product is also displayed on the product card.

Product Detail View

• The product detail view displays all the details of a product. The user can select can select a size if the product has different sizes. The user can also select the quantity they want of the product to add to their shopping bag from this page.

Product Review

• The product review section allows the user to leave a review for a product. The reviews are visible to all users. The user can also see the average rating of the product. Only logged in users can leave a review. And it is one review per user per product. User who are not logged in will be prompted to log in to leave a review.

Search, Order & Filter

• The user can search for a product by name using the search bar. The user can also filter the products by category and sort the products by price, name and rating.

Bag

• The bag page displays all the products the user has added to their shopping bag. It shows the product name, price, size if applicable, quantity and subtotal. The user can update the quantity of a product using the input field. The user can also remove a product from their shopping bag. The user can also see the total cost of all the products in their shopping bag. The user can also see the delivery cost and the grand total of their order. They will also see a message notifing them of the free delivery threshold. The options to continue shopping or proceed to checkout are also available.

Order From

• The order form page allows the user to enter their delivery details and payment information. The user can also save their delivery details to their profile. On the right side of the page, the user can see the order summary. It lists all the products in the user's shopping bag, the delivery cost, the grand total.

Checkout Confirmation Page

• The order confirmation page displays the user's order details and order number. The user will also receive an email confirmation of their order when the order is placed. There is also a link to go back to the user's profile page.

Profile Page

• The profile page displays the user's delivery details and order history. The user can also update their delivery details on this page.

Register, Log In & Log Out

• The user can register for an account, log in and log out of their account.

Footer

• The footer is visible on all pages and contains links to the site's social media pages and contact form as well as quick links to other pages.

Product Create

• Admin users can create new products on the site.

Product Edit

• Admin users can edit existing products details on the site.

Contact Page

• The contact page contains a contact form that allows the user to send a message to the site admin. The recieve a toast message to confirm the message was sent when successful.

Error Pages

• The site contains custom error page for 404 errors.

Messages

• The site displays toast messages to the user to inform them of the status of their actions.

• Login Success

  • 

• Item add

  • 

• Bag Update

  • 

• Bag item remove

  • 

• Contact Form

  • 

• Checkout Success

  • 

• Profile Update

  • 

• Block signed in users from viewing other users orders

  • 

Custom newsletter form

• The site contains a custom newsletter form that allows the user to sign up to the site's newsletter.

Privacy Policy

• The site contains a privacy policy page that informs the user of the site's privacy policy. This policy is GDPR compliant. It can be found at the bottom of each page in the footer. It was generated using TermsFeed

Mailchimp Integration (Removed)

• The site is integrated with Mailchimp to allow users to sign up to the site's newsletter.

Features Left to Implement

• Stock management system to track stock levels and allow admin to add stock. The sale of an item would also update the stock level automatically.
• A blog section to keep users up to date with the latest news and promotions.
• Setup address field to autofill if user is logged in and has details saved.
• Pop up window to confirm deletion of a product.
• Pop up window confirming add item to bag.
• Star rating picker for product reviews.
• Unsubscribe from newsletter feature.

Testing

Browse to the TESTING.md file for the full testing documentation.

Technologies Used

Languages Used

• HTML5

• CSS3

• JavaScript

• Python

Libraries & Frameworks

• Django:

  • The Django web framework was used to create the full-stack web application.

• Django Crispy Forms:

  • A Django app that provides a way to control the rendering behavior of Django forms in a DRY manner. It is used to create elegant, div-based forms.

• Django Allauth:

  • Provides authentication, registration, and account management. It supports multiple authentication sources like social media platforms.

• Django Storages:

  • A collection of custom storage backends for Django. It allows Django projects to store files in locations other than the local filesystem, such as cloud storage services.

• Stripe Library:

  • This library is used to integrate payment services provided by Stripe into web applications, allowing for the processing of payments.

• Django Countries:

  • A Django app that provides country objects and a country field for models, enabling easy handling of country selection in forms.

• Psycopg2-Binary:

  • A PostgreSQL database adapter for Python, providing efficient and secure database connections.

• PostgreSQL:

  • PostgreSQL was used as the object-relational database system.

• ElephantSQL:

  • ElephantSQL offers PostgreSQL as a service, which can be used to host and manage the database in the cloud.

• Git:

  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• GitHub:

  • GitHub is used to store the projects code after being pushed from Git.

• Heroku:

  • Heroku was used to deploy the application, providing a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

• Gunicorn:

  • A Python WSGI HTTP server for UNIX, used to run Python web applications.

• asgiref:

  • Serves as the foundation for running asynchronous tasks in Django. It's essential for handling asynchronous protocols like WebSockets.

• boto3:

  • The Amazon Web Services (AWS) SDK for Python, used to interact with AWS services such as S3.

• botocore:

  • The low-level core functionality of boto3, upon which the 'boto3' library is built.

• certifi:

  • A collection of Root Certificates for validating the trustworthiness of SSL certificates while verifying the identity of TLS hosts.

• cffi:

  • A Foreign Function Interface for Python calling C code, used for interfacing with low-level libraries.

• charset-normalizer:

  • A library for character encoding detection, particularly useful in HTTP scenarios.

• cryptography:

  • A package designed to expose cryptographic recipes and primitives to Python developers.

• defusedxml:

  • An XML library that protects against dangerous XML attacks by wrapping the standard XML APIs.

• dj-database-url:

  • A Django utility that allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application.

• idna:

  • A library for handling Internationalized Domain Names in Applications (IDNA).

• jmespath:

  • A query language for JSON, used to search and extract data from JSON documents.

• oauthlib:

  • A generic, spec-compliant, thorough implementation of the OAuth request-signing logic.

• Pillow:

  • A Python Imaging Library that adds image processing capabilities to your Python interpreter.

• pycparser:

  • A complete parser of the C language, written in pure Python.

• PyJWT:

  • A Python library that allows you to encode and decode JSON Web Tokens (JWT).

• python3-openid:

  • A set of Python packages to support use of the OpenID decentralized identity system.

• pytz:

  • A library that enables accurate and cross-platform timezone calculations.

• python-dotenv:

  • Reads key-value pairs from a .env file and can set them as environment variables.

• requests:

  • A library that allows you to send HTTP requests using Python.

• requests-oauthlib:

  • A library that provides OAuth support for Python requests.

• s3transfer:

  • A Python library that provides a high-level interface for Amazon S3.

• six:

  • A Python 2 and 3 compatibility library.

-sqlparse:

• A non-validating SQL parser module for Python.

• typeings-extensions:
  • A backport of the standard library typing module for Python versions older than 3.8.

Web Marketing

MarketFlex stands as a pivotal B2B and B2C e-commerce platform, dedicated to revolutionizing the way garages, tradesmen, specialized and general contractors, as well as retail shops in Ireland, source their tools and equipment. With a comprehensive product range spanning categories like Abrasives, Automotive Refinishing, Engineering, Woodworking, and more, MarketFlex is committed to providing high-quality materials at competitive prices.

Key Advantages for MarketFlex:

• Cost Efficiency: By offering products at near cost price, we ensure that our clients, from garages to professional contractors, receive the best value for their investments.
• Quick Delivery: Our efficient logistics ensure that products are delivered swiftly, minimizing downtime and enhancing productivity for our clients.
• Personalized Support: Local representatives are always on hand to assist with queries, offer product demos, and ensure that every customer finds the right solution for their needs.
• Diverse Product Range: From Rupes detailing packages for automotive care to stainless steel finishing and chemical cleaning solutions, our extensive catalog caters to a wide array of industry needs.

Target Audience:

MarketFlex primarily serves garages, tradesmen, specialized and general contractors, and retail shops looking to stock high-quality tools and equipment. We also cater to individual buyers, offering a seamless purchasing experience for both one-time and recurring needs.

Marketing and Customer Engagement Strategies:

• Social Media and Online Marketing: Leveraging a Facebook business page and targeted SEO and ad campaigns to build our online presence, with plans to introduce TikTok for showcasing our latest products through engaging video content.

• Facebook Business Page: Utilizing Facebook's business tools to create a comprehensive business page, we aim to engage with our audience, share product updates, and offer customer support. Link to the Facebook Business Page Here

• Community Building: Offering valuable tips and tricks through our content, we aim to build a community of informed users, enhancing customer engagement and loyalty.

Site Features and User Experience:

MarketFlex is designed with user convenience in mind, featuring easy navigation, dedicated customer support, and a streamlined purchase process. Our goal is to ensure that every visitor can effortlessly find and acquire the tools and equipment they need, enhancing their operational efficiency.

Search Engine Optimization

SEO and Content Strategy: Utilizing tools like Google Trends and WordTracker, the aim is to identify and target key search terms relevant to our diverse product range. Inspired by industry leaders, our content emphasizes MarketFlex's role as "Abrasives Experts at your Service!"

Short Tail Keywords:

1. "Abrasives"
2. "Automotive Refinishing"
3. "Engineering Tools"
4. "Woodworking Tools"
5. "Metal Fabrication"
6. "Rupes Tools"
7. "Pencil Grinders"
8. "Body Filler"
9. "Stainless Steel Finishing"

Long Tail Keywords:

1. "Best Abrasives for Metal Fabrication"
2. "Top Automotive Refinishing Products"
3. "High-Quality Engineering Tools in Ireland"
4. "Woodworking Equipment for Professionals"
5. "Rupes Tools for Automotive Care"
6. "Pencil Grinders for Metal Fabrication"
7. "Body Filler for Automotive Repairs"
8. "Stainless Steel Finishing Solutions"
9. "Bodyshop Supplies in Ireland"

sitemap.xml

Site map was generated using XML Sitemaps and then uploaded to the root directory of the site.

robots.txt

The robots.txt file was created and uploaded to the root directory of the site.

Deployment

Heroku Deployment

1. Create a Heroku account by going to https://signup.heroku.com/
2. Create a new app by clicking the "New" button in the top right corner and then click "Create new app".
3. Enter a name for the app and select the region closest to you.
4. Click the "Create app" button.
5. Select "settings" from the top menu.
6. Click the "Reveal Config Vars" button.
7. Enter the following environment variables with your values:
   • STRIPE_PUBLIC_KEY
   • STRIPE_SECRET_KEY
   • STRIPE_WH_SECRET
   • SECRET_KEY
8. Click buildpacks from the top menu.
9. Add the following buildpacks:
   • heroku/python
10. Click the "Deploy" tab from the top menu.
11. Click the "Connect to GitHub" button.
12. Search for your repository and click the "Connect" button.
13. Click the "Enable Automatic Deploys" button.
14. Click the "Deploy Branch" button.
15. Click the "View" button to launch the app.

Local Deployment

1. Clone the repository by clicking the "Clone or download" button in github.
2. In your IDE open a new terminal.
3. Change the current working directory to the location where you want the cloned directory to be made.
4. Type git clone, and then paste the URL you copied in Step 2.
5. Press Enter. Your local clone will be created.
6. Create a virtual environment by typing python -m venv venv in the terminal.
7. Activate the virtual environment by typing venv\bin\activate in the terminal.
8. Install the requirements by typing pip install -r requirements.txt in the terminal.
9. Create a .env file in the root directory and add the following environment variables:
   • os.environ.setdefault("STRIPE_PUBLIC_KEY", "xxxxxxxxx")
   • os.environ.setdefault("STRIPE_PRIVATE_KEY", "xxxxxxxxx")
   • os.environ.setdefault("STRIPE_WH_SECRET", "xxxxxxxxx")
   • os.environ.setdefault("SECRET_KEY", "xxxxxxxxxx")
   • os.environ.setdefault("DEBUG", "False || True")
10. Migrate the database by typing python manage.py makemigrations and then python manage.py migrate in the terminal.
11. Create a superuser by typing python manage.py createsuperuser in the terminal.
12. Run the app by typing python manage.py runserver in the terminal.

Tools

• [VS Code]() - IDE application used to develop code in.
• Balsamiq - Low Fidelity Wireframes
• W3C Validator - Validator that checks the markup validity for Web Documents in HTML.
• W3C CSS Validator - Validator that checks CSS validity.
• Code Institute's Python Linter - Validator that checks syntax and stylistic problems in Python code.
• Am I responsive - Generates Responsive images for your website.
• Chrome DevTools and Lighthouse - Web Developer Tools.
• DB Diagram - Database Schema Design Tool.
• JSHint - JavaScript Validator.

Credits

• Mentor Lauren Nicole - For her guidance and support throughout the project and course.
• Code Institute - For the course content and support.
• Slack Community - For their support and guidance.
• Cohort Facilitator Alan Bushell - For his support and guidance throughout the course.

Content

• All the products content were taken from Abcon
• All the products images were taken from Abcon
• The hero image on the landing page was taken from Unsplash
• The favicon was generated using LeonardoAI

Information Resources

• W3Schools - Python
• Stack Overflow
• Youtube