This site is a printer and cartridges e-commerce site for my fried who owns small business. This site fully responsive on all modern screen sizes, and it allows the admin to easily add, edit or delete products that he have to sell.
This site was built using HTML, CSS, Bootstrap, JavaScript, jQuery, Python, Django, and it uses a SQL database through PostgreSQL.
- SHOP EASY
- User Experience
- UI
- Wireframes
- Database Schema
- Database Model
- Deployment
- Technologies Used
- Testing
- Problems encountered
- Credits
- Acknowledgements
- I wanted to create a website linked to a database, which allows users to log in, search for and find printers and cartridges for them.
- Currently, I have a basic one-page website and I think it's a time to upgrade to bring more customers in and be able to manage my inventory products more easily
- I wanted to be able to add, edit and delete inventory of products for sale.
- As a site owner, I want to be able to add new or edit existing products.
- As a site owner, I want to be able to remove existing products.
- As a site owner, I want to be able to add new/existing products to "special offers/sale", "featured products".
- As a site owner, I want to be able to add new, edit or remove existing categories and brands.
- As a First Time Visitor, I want to be able to view a list of products, so that I can select some to purchase.
- As a First Time Visitor, I want to be able to view individual product details, product Image, the price, the product description and the compatible cartridges.
- As a First Time Visitor, I want to look for testimonials to understand what other users think of the site and the service it renders.
- As a First Time Visitor, I want to sign up to the site to enable myself for full access to it's service and also to receive email newsletter and latest updates.
- As a First Time Visitor, I want to be able to view order confirmation and save my contact details in my registered Profile
- As a Returning Visitor, I want to see new products and deals.
- As a Returning Visitor, I want to find the best way to get in contact with the site owner with any questions I may have.
- As a Returning Visitor, I want to be able to log in to the site view my profile and view past orders.
- As a Frequent User, I want to browse the site to see if there are any changes, new deals and/or clearance items.
- As a Frequent User, I want to see information about new arrivals and sales.
- As a Frequent User, I want to be able to sort products by price, category, or brand
- A responsive Navbar
- A search function for users to find available products
- A registration/login form for the first time and returning users
- A loading page was implemented to stop poor impressions from data loading slowly
- A footer to provide some information and social links
- Forms for the admin to add new or modify existing products
Wireframes are my initial design, so you may notice that the final website design does not contain everything that was planned at the start of the project. Some missing features are possible future improvements for the project. They may be implemented at a later stage. Wireframes for the desktop and tablet uses same layout, while on mobile screen layout is rearranged.
I started planning the database after I have done my wireframes to justify which fields I would require and what collections I would have to use. After the initial discussion with my mentor, I have settled with the current database schema.
Detailed deployment can be found here
- Bootstrap 5.x:
- Bootstrap 5.x was used to assist with the responsiveness and styling of the website.
- Font Awesome 5:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
- jQuery:
- jQuery came with bootstrap to make the navbar entire site responsive.
- 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.
- Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
- Heroku:
- Heroku was used to create and deploy our app.
- Django:
- Django was used to create the framework.
- Postgresql:
- Mongodb was used to create database and to connect server to our site.
- Stripe:
- Stripe was used to accept and authorise payment for any item purchased on the site.
- AWS:
- Amazon S3 was used to manage and save media and static files in Its cloud service.
- TinyMce
- To create rich text editor for the text field for user to be able to create pretty text.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
-
As a Shopper, I want to be able to view a list of products, so that I can select some to purchase.
-
As a Shopper, I want to be able to view individual product details, product Image, the price, the product description and the compatible cartridges.
-
As a Shopper, I want to look for testimonials to understand what other users think of the site and the service it renders.
- By browsing all products or viewing detailed information about product user can view product rating which can be added by any registered user who has purchased this product
- By navigating on to the review page user can read detailed review if other users who left the review decided to leave detailed comment.
- Logged in users or administrators can edit or delete review.
-
As a Site User, I want to be able to register for an account and have a personalised user profile.
-
As a First Time Visitor, I want to locate the site contact details in case I may need help about the site service.
-
As a Returning User, I want to see information about new products.
-
As a Returning Visitor, I want to find the best way to get in contact with the site owner with any questions I may have.
-
As a Returning User, I want to be able to log in to the site view my profile.
-
As a Frequent User, I want to browse the site to see if there are any changes, new deals and/or clearance items.
-
As a Frequent User, I want to see information about the most new arrivals and sales.
- The Special offers section is on the Navbar with links to the site New arrivals, deals and clearance.
![](./readme_media/clearance_section.png) -
As a Frequent User, I want to be able to sort products by price, category, or brand
- The Website was tested on Google Chrome, Mozilla Firefox, Microsoft Edge and Safari browsers.
- The website was viewed on a variety of devices such as Desktop, Laptop, iPhone SE, iPhone 11, One+ 9 Pro, and iPadPro.
- A large amount of testing was done to ensure that all pages were linking correctly
- Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
Detailed functional code testing can be viewed here TESTING
-
Windows 11 affecting styles of the dropdown menu's, forcing them to have rounded corners
- I was unable to fix this issue as this issue only occurs on Windows 11 and affected by windows itself.
- I tried many things in css to change this view but nothing seemed to work.
-
When running django tests there are few errors shown:
- To fix this error I have to export STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY to make accessible in the terminal once they set, tests pass with no issues.
-
Functionality for searching cartridges not implemented
- Will be done ASAP after assessment completed.
-
Page pagination needed for the products page.
- pagination is less important for the MVP and would be implemented in the future.
-
When checkout with selected update profile user 'Full name' was saved a tuple like so:
('User Name',)
instead ofUser Name
-
When adding new cartridge with image uploaded and without selecting any related printer(even if it already highlighted in the box) cartridge won't get assigned to that printer.
-
When adding new cartridge without selecting image it works fine.
- As a temporary workaround, after saving new cartridge go to admin dashboard and reassign cartridge to the related printer.
- SOLVED Found bug in saving form where I was calling
image.save()
instead of main formform.save()
-
W3 validator gave me warning:
-
To solve it i removed all
type=text/javascript
from<script>
tags -
Duplicate ID delete-review-modal
. was found by markup validator- Had to rewrite bootstrap modal to handle multiple buttons pointing to the same modal. Solution found in Bootstrap documentation
-
Search bar icon get shifted down on some pages
- Fixed it by declaring .form-control and .btn styles to have font size set to 1.4 rem
-
Code were copied and modified from the Full Stack Frameworks with Django, Boutique Ado Project and Hello Django Testing.
-
Bootstrap5 template was used throughout the project mainly to make site responsive using the bootstrap 5
- All content was written by the developer.
- All Images belong to the copyright owner.