CDS Car Keys is a B2C & B2B E-Commerce application which sells Car keys blanks and keys directly to the end customers and business. The site aims to present using with an attractive and seamless online shopping experiance and encourage users to return to purchse multiple times, including newsletters, social media information and a user profile to save customers details.
The site is implimented as a retail store where the users can view, search and filter through products that are avalivle. To then select either a single or range of products to add to their shopping cart and pay through a single secure payment.
Customers can view the detail pages and view a range of products for purchasing, including product description and information, Manufacture, price and a rating. They are able to make purchases and view order history and save details for future purchases.
Admin/Staff users are able to manage a range of products. Employee's and services that CDS Car Keys offer. This includes Additon, Updates and Deletion of all mentioned.
Marketing is a usefull tool in business and the Newsletter using Mailchimp and addition of Facebook social media to gain new customers and exposure to the site.
The structure and key coding was based on the Code Institute Boutique Ado walkthrough example application, Credits where required.
Live Version of the website - Click Here!
- Customers looking for car related services
- Businesses/Customers looking for key blanks
- Customers looking for spare keys
- To be able to purchase products on the website.
- View a range of products matching the car and key that user is looking for.
- Easy navigation through the site.
- Able to save information for seamless revisit purchases.
-
EPIC 1 : Registration and Account Management
User Stories for EPIC 01:
- US101 - Register an account
- As a site user I can register an account so that i am able to view my purchase history and proflie details
- US102 - Confirm registration via email
- As a site user I can receive email confirmation upon registering so that i can verify account registration was successfull
- US103 - Able to reset password
- As a site user I can easily reset my password if i forget it so that I can regain access to my account
- US104 - Access Profile
- As a site user I can access personalized user profile so that I can view my personal saved information and the order history and confirmations
- US105 - Login & Logout
- As a site user I can easilly login or logout so that I can access my information on my account
- US101 - Register an account
-
EPIC 2 : Navigation
User Stories for EPIC 2:
- US201 - View a list of all avalible products
- As a site user I can view a list of all keys so that I can select one or more to purchase.
- US202 - Vieww a detail page of each product
- As a site user I can view the details of a specific product so that I can see the description, image, avalibility, rating and pricing.
- US203 - View shopping bag total
- As a site user I can easily view the total of my purchase so that I can decide on purchase options.
- US204 - Able to navigate the page and understand directions
- As a site user I can quickly identify what the website is and how to get to pages so that I can find the information and the ability to use the site for.
- US205 - View keys by manufacturer
- As a site user I can see which keys i am looking for so that I can purchase the correct key for my car
- US206 - View keys by category/rating
- As a site user I can view specific catergory or taing of key so that I can easily choose what keys i am interested in
- US207 - Handle 403, 404, 405 and 500 errors
- As a site user I can return back to homepage after encountering a 403, 404, 405 and 500 response so that I can still manuver the website without any issues and navigate easily
- US201 - View a list of all avalible products
-
EPIC 3 : Sorting & Searching
User Stories for EPIC 3:
- US301 - Sort a list of avalible keys
- As a site user I can sort through a list of keys so that I can choose the best rated and sorted products
- US302 - Sort a specific category
- As a site user I can sort a specific category or keys so that I can find the best-rated key in a specific category or to sort in a range or keys
- US303 - Sort a specific Manufacturer
- As a site user I can sort by specific manufacturer so that I can find the right key brand and choose a specific key from the manufacture
- US304 - Search for a specific key or maufacturer
- As a site user I can search by name, description or manufacture so that I can find a specific key to purchase
- US305 - View a results of searching and amount of prodcuts found
- As a site user I can easily see results of my searches so that I can decide what key i want to purchase
- US301 - Sort a list of avalible keys
-
EPIC 4 : Purchasing & Checkout
User Stories for EPIC 4:
- US401 - Add an key to shopping bag
- As a site user I can add keys to the shopping bag so that I can what i want or more items to purchase
- US402 - Edit shopping bag and remove items from bag
- As a site user I can modify my shopping bag even after putting keys in my bag so that I can manage the shopping bag even if erros have been made or have any changes
- US403 - See user notification on actions
- As a site user I can get a notification on the screen of my actions so that I can easily confirm that my interaction with the website too place
- US404 - Finalise an order via checkout page
- As a site user I can complete an order on the checkout page so that I can see my final total, a list of items and sumarry and specify a delivery adress and payment option
- US405 - Have a secure payment option
- As a site user I can enter payment details so that I can payment informtaion is secure and action is secure
- US406 - View an order confirmation after checkout
- As a site user I can view an order confirmation after checkout so that I can see what was ordered and the final cost
- US407 - Recive email confirmation of order after checkout
- As a site user I can recive and email confirmation after checkout completion so that I can have a record of all my purchase as a backup
- US401 - Add an key to shopping bag
-
EPIC 5 : Admin and Store Management
User Stories for EPIC 5:
- US501 - Add a product
- As a site admin I can add a product so that I can sell a new product on the store
- US502 - Add a employee
- As a site admin I can add a new employee so that I can update our team roster on the website
- US503 - Add a service
- As a site admin I can add new services so that I can offer more services along with products
- US504 - Edit or update product, employee or service
- As a site admin I can change and details to uploaded inforion or update so that I can keep store information up to date fresh
- US505 - Delete a product, employee or service
- As a site admin I can remove a product, employee or server so that I can remove a product, and employee or service from the database
- US501 - Add a product
-
EPIC 6 : SEO and Web Marketing
User Stories for EPIC 5:
- US601 - View company facebook page
- As a site admin I can find the company on facebook so that I can view and keep up to date with company posts
- US602 - Subscribe to newsletter
- As a site admin I can subscribe to company newsletter so that I can get company news and offers
- US603 - SEO
- As a site admin I can find the site through web searches so that I can easily acces the site
- US601 - View company facebook page
Bellow are a list of features avalible on the site along with a decription. Many of the feature that are based of the Boutique Ado walkthrough project, SEO and Web Marketing modules from the course.
CDS Car Key uses a B2C e-commerce model, selling directly to customers with single online payments.
The page focuses on a black, white and grey theme to stay consistant throught the site.
-
F-01
- The homepage and shop homepage Desktop View
- The homepage and shop homepage Desktop View
-
F-02
- The Homepage and shop on tablet view
- The Homepage and shop on tablet view
-
F-03
- The homepage and shop on mobile view
-
F-04
- View Avalible Key Products
- View Avalible Key Products
-
F-05
- Filter and Sort options avalible
- Filter and Sort options avalible
-
F-06
- Manufacturer filter options (Audi)
- Manufacturer filter options (Audi)
-
F-07
- Product View for details
- Product View for details
-
F-08
- About Us and Services Links
- About Us and Services Links
-
F-09
- About Us Section
- About Us Section
-
F-10
- Services Section
- Services Section
-
F11
- Bag Notification
- Bag Notification
-
F12
- Newsletter Popup
- Newsletter Popup
-
F13
- Registration Form
- Registration Form
-
F14
- Sign in Form
- Sign in Form
-
F15
- Email Confirmation
- Email Confirmation
-
F16
- Logout Form
- Logout Form
-
F17
- Admin Account View
- Admin Account View
-
F18
- Profile View
- Profile View
-
F19
- Shopping Bag
- Shopping Bag
-
F20
- Checkout Page
- Checkout Page
-
F21
- Checkout Complete
- Checkout Complete
-
F22
- Stripe Events
- Stripe Events
-
F23
- Stripe Webhooks
- Stripe Webhooks
-
F24
- Email Confirmation
- Email Confirmation
-
F25
- Add Product !f25
-
F26
- Add employee
- Add employee
-
F27
- Add Service
- Add Service
-
F28
- Edit Product
- Edit Product
-
F29
- Edit Employee
- Edit Employee
-
F30
- Edit Services
- Edit Services
-
F31
- SEO
- Added Meta tags along with description and keywords
- Appropriate site title and home page content
- Informative site heading slogan on home page
- SEO
-
F32
- Facebook Page
- Facebook Page
-
F33
- Newsletter
- Newsletter
- A feature that would be good to impliment would be a wishlist/like option, to allow user to be able to save their favroute products to come back to later date or just to save for later.
- Leave reviews on products and see what they bought with. A way for user to get feedback on what they are looking to buy and see what else people bought with it for stats and trends.
- Add a DOB option to user profiles to then allow user to get a discount code on their birthday or even deals on holiday such as christmas and easter. To entice user to create an account for discounts.
The project is hosted on Heroku and currntly using CI Database. Amazon S3 is used for all of the static file and stripe is primary source for financial payments, along with incorpiration of webhooks to allow for email confirmtaion. There are Custom models used to think our the website and the furture expantion of website and the business. Data Models used bellow.
The Models are created to be able to be updated or to serve a expantion process to limit amount of hard coding needed. For explample, with services and employees model. The company may increase in size and offere more services. So having the option for a Admin or staff memeber to add more employees or to add more services they offer without the need of a developer to hard code into the html.
Montserrat is the primary font-family used, with Sans-Ferif as a backup.
- HTML5
- CSS3
- JavaScript
- Python
- Bootstrap: Bootstrap CSS Framework is used for styling and building responsive web pages.
- Cloudinary: Used to store all blog images and uploaded images.
- Coverage: Used for measuring code coverage of Python test files.
- Django: Main Python framework used in the development.
- Django Allauth: Used for authentication and account registration.
- Django Crispy Forms: Used to simplify the rendering of Django forms.
- dj_database_url: Used to allow database URLs to connect to the Postgres database.
- Django Countries: Used for country selection drop-down
- Gunicorn: Green Unicorn, used as the Web Server to run Django on Heroku.
- Pillow: Python Imaging Library used for image handling
- Stripe: used for secure payments
- Amazon S3: used to store static files and images.
- Boto3: the Amazon Web Services (AWS) Software Development Kit (SDK) for Python.
- Django-Storages: used to connect django to S3.
- Google Fonts: To import font family Roboto
- Font Awesome: Used for style icons for nav and footer and other links
- Chrome DevTools: To test inside of different screen sizes
- GitHub: GitHub is used to store the project's code and update and pull from. As well as host user stories
- Heroku: For deployment and hosting of the application.
- HTML Validator: Check your code for HTML validation.
- CI Python Linter Used to validate python code
- W3 CSS Validator: Check your code for CSS validation.
- Codeanywhere Used as virtual environment for coding
- Code Institute Postgres Database: Used CI to host PostgreSQL Service
- Stack Overflow Used for help when hit bumps or errors
-
Validator Testing
-
HTML Validator
- Home Page
- Employee Page
- Services Page
- Products Page
- Product View Page
- Profile Page
- Bag Page
- HTML Bag has a quantity error but cannot change due to duplicate product has multiple same id causing html error.
- Checkout Page
-
CSS Validator
-
Python Testing
- Python Validation was performed using the command : python3 -m flake8. No serious errors reported. Messages relevant to the project py files are as follows:
Python Validation Results
- .\cds_car_keys\settings.py:18:5: F401 'env' imported but unused
- .\cds_car_keys\settings.py:128:5: E122 continuation line missing indentation or outdented
- .\cds_car_keys\settings.py:132:1: E122 continuation line missing indentation or outdented
- .\checkout\apps.py:8:9: F401 'checkout.signals' imported but unused
- .\checkout\migrations\0001_initial.py:19:80: E501 line too long (117 > 79 characters)
- .\checkout\migrations\0001_initial.py:20:80: E501 line too long (82 > 79 characters)
- .\checkout\migrations\0001_initial.py:25:80: E501 line too long (85 > 79 characters)
- .\checkout\migrations\0001_initial.py:28:80: E501 line too long (92 > 79 characters)
- .\checkout\migrations\0001_initial.py:29:80: E501 line too long (83 > 79 characters)
- .\checkout\migrations\0001_initial.py:31:80: E501 line too long (98 > 79 characters)
- .\checkout\migrations\0001_initial.py:32:80: E501 line too long (97 > 79 characters)
- .\checkout\migrations\0001_initial.py:33:80: E501 line too long (97 > 79 characters)
- .\checkout\migrations\0001_initial.py:39:80: E501 line too long (117 > 79 characters)
- .\checkout\migrations\0001_initial.py:40:80: E501 line too long (90 > 79 characters)
- .\checkout\migrations\0001_initial.py:42:80: E501 line too long (104 > 79 characters)
- .\checkout\migrations\0001_initial.py:43:80: E501 line too long (137 > 79 characters)
- .\checkout\migrations\0001_initial.py:44:80: E501 line too long (115 > 79 characters)
- .\checkout\migrations\0004_order_user_profile.py:18:80: E501 line too long (155 > 79 characters)
- .\employees\migrations\0001_initial.py:17:80: E501 line too long (117 > 79 characters)
- .\employees\migrations\0001_initial.py:18:80: E501 line too long (81 > 79 characters)
- .\products\migrations\0001_initial.py:18:80: E501 line too long (117 > 79 characters)
- .\products\migrations\0001_initial.py:20:80: E501 line too long (91 > 79 characters)
- .\products\migrations\0001_initial.py:29:80: E501 line too long (117 > 79 characters)
- .\products\migrations\0001_initial.py:30:80: E501 line too long (81 > 79 characters)
- .\products\migrations\0001_initial.py:34:80: E501 line too long (103 > 79 characters)
- .\products\migrations\0001_initial.py:35:80: E501 line too long (87 > 79 characters)
- .\products\migrations\0001_initial.py:36:80: E501 line too long (82 > 79 characters)
- .\products\migrations\0001_initial.py:37:80: E501 line too long (135 > 79 characters)
- .\profiles\migrations\0001_initial.py:21:80: E501 line too long (117 > 79 characters)
- .\profiles\migrations\0001_initial.py:22:80: E501 line too long (94 > 79 characters)
- .\profiles\migrations\0001_initial.py:23:80: E501 line too long (97 > 79 characters)
- .\profiles\migrations\0001_initial.py:24:80: E501 line too long (100 > 79 characters)
- .\profiles\migrations\0001_initial.py:25:80: E501 line too long (100 > 79 characters)
- .\profiles\migrations\0001_initial.py:26:80: E501 line too long (97 > 79 characters)
- .\profiles\migrations\0001_initial.py:27:80: E501 line too long (91 > 79 characters)
- .\profiles\migrations\0001_initial.py:28:80: E501 line too long (93 > 79 characters)
- .\profiles\migrations\0001_initial.py:29:80: E501 line too long (111 > 79 characters)
- .\profiles\migrations\0001_initial.py:30:80: E501 line too long (121 > 79 characters)
- .\services\migrations\0001_initial.py:17:80: E501 line too long (117 > 79 characters)
-
-
Manual Testing
- US101 - Register an account
- As a site user I can register an account so that i am able to view my purchase history and proflie details
- Testing Complete:
- Created an account with multiple emails to confirm account creation successfull.
- US102 - Confirm registration via email
- As a site user I can receive email confirmation upon registering so that i can verify account registration was successfull
- Testing Complete:
- Recived and email to confirm account create. Opened link to confirm working link. Account created and registered.
- US103 - Able to reset password
- As a site user I can easily reset my password if i forget it so that I can regain access to my account
- Testing Complete:
- Clicked reset password and able to enter an email. Email was sent with instructions to reset password.
- US104 - Access Profile
- As a site user I can access personalized user profile so that I can view my personal saved information and the order history and confirmations
- Testing Complete:
- Logged into account and able to access profile from the navigation bar
- US105 - Login & Logout
- As a site user I can easilly login or logout so that I can access my information on my account
- Testing Complete:
- Able to successfully loging and logout of multiple accounts.
- US101 - Register an account
- US301 - Sort a list of avalible keys
- As a site user I can sort through a list of keys so that I can choose the best rated and sorted products
- Testing Complete:
- Was able to click on sort option in the products page and go through multiple links
- US302 - Sort a specific category
- As a site user I can sort a specific category or keys so that I can find the best-rated key in a specific category or to sort in a range or keys
- Testing Complete:
- Able to select category such as audi and only audi keys came up
- US303 - Sort a specific Manufacturer
- As a site user I can sort by specific manufacturer so that I can find the right key brand and choose a specific key from the manufacture
- Testing Complete:
- Sorted by Manufactutre and only that manufacturer showed so successful
- US304 - Search for a specific key or maufacturer
- As a site user I can search by name, description or manufacture so that I can find a specific key to purchase
- Testing Complete:
- Search for hyundia word and a hyundia key came up.
- US305 - View a results of searching and amount of prodcuts found
- As a site user I can easily see results of my searches so that I can decide what key i want to purchase
- Testing Complete:
- Searched for word transponder and all keys that had transponder in name or description came up.
- US401 - Add an key to shopping bag
- As a site user I can add keys to the shopping bag so that I can what i want or more items to purchase
- Testing Complete:
- Went to products page and selected multiple keys and all successfully went into bag.
- US402 - Edit shopping bag and remove items from bag
- As a site user I can modify my shopping bag even after putting keys in my bag so that I can manage the shopping bag even if erros have been made or have any changes
- Testing Complete:
- Was able to update product quantity and remove items from bag.
- US403 - See user notification on actions
- As a site user I can get a notification on the screen of my actions so that I can easily confirm that my interaction with the website too place
- Testing Complete:
- When add a product or remove a product notification message is displayed.
- US404 - Finalise an order via checkout page
- As a site user I can complete an order on the checkout page so that I can see my final total, a list of items and sumarry and specify a delivery adress and payment option
- Testing Complete:
- Able to select secure checkout and taken to the checkout page.
- US405 - Have a secure payment option
- As a site user I can enter payment details so that I can payment informtaion is secure and action is secure
- Testing Complete:
- Entered card details into payment method and secure transaction went through
- US406 - View an order confirmation after checkout
- As a site user I can view an order confirmation after checkout so that I can see what was ordered and the final cost
- Testing Complete:
- Was able to see order confirmation and a notification of email sent to email entered upon checkout.
- US407 - Recive email confirmation of order after checkout
- As a site user I can recive and email confirmation after checkout completion so that I can have a record of all my purchase as a backup
- Testing Complete:
- Recieved and email with details of my order.
- US402 - Edit shopping bag and remove items from bag
- US501 - Add a product
- As a site admin I can add a product so that I can sell a new product on the store
- Testing Complete:
- Logged into admin account and was able to create a test key to add to products page.
- US502 - Add a employee
- As a site admin I can add a new employee so that I can update our team roster on the website
- Testing Complete:
- Logged into admin account and enter a new employee to the site.
- US503 - Add a service
- As a site admin I can add new services so that I can offer more services along with products
- Testing Complete:
- Logged into admin account and able to create and new service that is displayed on the services page.
- US504 - Edit or update product, employee or service
- As a site admin I can change and details to uploaded inforion or update so that I can keep store information up to date fresh
- Testing Complete:
- Edited updated both test employee and the test service and the test key
- US505 - Delete a product, employee or service
- As a site admin I can remove a product, employee or server so that I can remove a product, and employee or service from the database
- Testing Complete:
- Was able to delete both the test employee and the test service and the key aswell
- US502 - Add a employee
- US601 - View company facebook page
- As a site admin I can find the company on facebook so that I can view and keep up to date with company posts
- Testing Complete:
- Checked facebook links and the active Facebook page to show working.
- US602 - Subscribe to newsletter
- As a site admin I can subscribe to company newsletter so that I can get company news and offers
- Testing Complete:
- Subscribed to newsletter and checked inside of MailChimp and email was added to mailing list
- US603 - SEO
- As a site admin I can find the site through web searches so that I can easily acces the site
- Testing Complete:
- Checked all pages to include, Descriptions, Keywords and alt tags to any avalible options.
- US602 - Subscribe to newsletter
I used the following steps to deply to Heroku:
- Top right corner in heroku select Create New App
- I call the app P5-CDS-Car-Keys and set region to "Europe"
- Once the app is created i choose deployment method for "Connect to github"
- After logging in and authenticating GitHub, i typed in and selected my repo that i was using for my project.
- When the repo appeared, I clicked Connect Button.
- Once connected i had the option to deploy.
- I went to my setting in heroku and added all the Enviroment varibles to config vars
- Once i was ready, i went to my virtual enviroment and did
pip3 freeze --local > requirements.txt - Once completed i created a Procfile that ran the command,
web gunicorn cds_car_keys.wsgi - Once all completed i ran
git add .,git commit -m 'final deploy,git push - Then i went back to heroku dashboard and selected deploy.
- Waited for heroku to deploy my app and then finished.
- CodeInstitue Boutique Ado - Project was used as a base and then fully expanded, gave the groundwork and idea to build up from.
- Codemy.com Some very helpful advice and able to see how others do it and make my own or use advices.
Would like to thank my mentor Brian Macharia who has helped very much all throught this assignment. Along with CodeInstitute Tutors have been a great asistance.