This project is an e-commerce website created for Milestone Project 4("Code Institute").
UNIQUE Crafts & Design is a shop selling handcrafted items. Located in Geroge's Street Arcade in Dublin city centre.
The unique shop is a full-stack e-commerce web application for a handmade craft shop in Dublin.
Customers will be able to purchase items offered by the shop. Registered users will be able to save and update information and receive a discount voucher to use at the checkout.
The aim is to build a responsive e-commerce website.
-
To provide users with a simple and easily navigated website.
-
To sell the products the shop has to offer.
-
To offer secure online payment for shoppers.
-
As a user, I want to understand the purpose of this website.
-
As a user, I want to find an easily navigated website and find all the content.
-
As a user, I want the website to be responsive and allow me to use it comfortably on all size devices(particularly mobiles phones).
-
As a user, I want to find a clear and easy registration on the website.
-
As a user, I want to receive an email confirmation upon registering.
-
As a user, I want to be able to log in/log out to/from my account.
-
As a user, I want to control my account information and have the option to update my profile details and delete the account.
-
As a user, I want to view individual product information and be able to review that item.
-
As a user, I want to view the total of my purchases and the final cost including delivery.
-
As a user, I want to have products grouped into categories.
-
As a user, I want to be able to search for the products I'm interested in.
-
As a user, I want to select the number of products I'm buying.
-
As a user, I want to be able to contact the site owner for any questions or suggestions I might have.
-
Users can register.
-
Allow admin and users to log in.
-
Allow users to purchase items online.
-
Allow users to review shop products.
-
Display users profiles.
-
Display Users orders.
-
Search product functionality.
-
Add and redeem a voucher for users.
-
Use SQLite database to store information
-
Responsive website with a navigation menu and website title.
| - | Planed Feature | Importance | Viability/Feasibility |
|---|---|---|---|
| 1 | Users able to register | 5 | 3 |
| 2 | Allow admin and users to login | 5 | 3 |
| 3 | Allow user to purches items online | 5 | 5 |
| 4 | Allow user to review shop products | 4 | 5 |
| 5 | Display Users profile | 4 | 4 |
| 6 | Display Users orders | 4 | 4 |
| 7 | Search product functionality | 4 | 3 |
| 8 | Add and reedem voucher for users | 3 | 5 |
| 9 | Use SQLite database to store information | 5 | 4 |
| 10 | Responsive website with a navigation menu and website title | 5 | 2 |
As a user, I want to understand the purpose of this website.
A solution to satisfy user requirements:
-
Shop logo in the navigation bar.
-
Categories and product links in the header.
-
Image carousel showing the main products this shop has to offer.
-
Additional information in the footer includes about section, social links etc.
As a user, I want to find an easily navigated website and find all the content.
A solution to satisfy user requirements:
-
Top navigation menu in the Header displays Home, Login, and Registration links.
-
Footer at the bottom of the page.
As a user, I want the website to be responsive and allow me to use it comfortably on all size devices(particularly mobiles phones).
A solution to satisfy user requirements:
-
Bootstrap 5 will be used for this website to ensure all content is displayed correctly.
-
Collapsible menu when using the website on mobile phones.
As a user, I want to be able to register to the website.
A solution to satisfy user requirements:
-
registration link is available in the navigation bar.
-
link to redirect to registration when on the login page.
As a user, I want to receive an email confirmation upon registering.
A solution to satisfy user requirements:
- confirmation email will be sent once the registration form will be submitted.
As a user, I want to be able to log in/log out to/from my account.
A solution to satisfy user requirements:
-
log in/out links available in the navigation bar menu.
-
log in to the link also available on the registration page if the user has already an account.
As a user, I want to control my account information and have the option to update my profile details and delete the account.
A solution to satisfy user requirements:
- update profile will be available. and delete buttons available on the account profile page once a user logged in.
As a user, I want to view individual product information and be able to review that item.
A solution to satisfy user requirements:
-
once clicked on the product image, the user will be redirected to a product details page.
-
all products can be reviewed once on the product detail page.
As a user, I want to view the total of my purchases and the final cost including delivery
A solution to satisfy user requirements:
-
After adding each item the current total will be visible in the modal.
-
information about the total price for items will be available in the shopping cart.
-
final cost including shipping fees available at the secure checkout before making the payment.
As a user, I want to have products grouped in categories.
A solution to satisfy user requirements:
- in the navigation menu user can find categories and all product links.
As a user, I want to be able to search for the products I'm interested in.
A solution to satisfy user requirements:
- search bar was introduced to allow the user to search by categories and product description.
As a user, I want to select the number of products I'm buying.
A solution to satisfy user requirements:
-
users can select the quantity of each item on the product page.
-
in the shopping cart user can update the quantity of each product or delete it from the basket.
As a user, I want to be able to contact the site owner for any questions or suggestions I might have.
A solution to satisfy user requirements:
-
contact information in the footer including shop address.
-
social links are provided where the user can contact the shop owners.
Home
Login
About Us
Account Details
Account Order
Order
Cart
Checkout
Product Details
Register
Review
✒️
Fonts used in this project are:
'Spirax' with cursive as a fallback font to give headlines a refined and interesting look is paired with a simple neutral 'Open Sans Condensed' with 'sans-serif' as a fallback.
This combination works well with this shop selling uniquely designed handmade products.
A relational database is used in this project as the best solution for an e-commerce website. In the development process, SQLite was used. Heroku Postgres was used in production:
All images used in this project were supplied by the Unique Shop owner.
There are several changes to the original design:
-
Not including voucher coupons for registered users due to lack of time.
-
Not including model variants to change the price based on product size as that implementation become too expensive in terms of resources.
-
Home page design changed to not overload users with too much content.
-
Adding contact form for users and allowing sending emails to site admin.
-
Not Including About Us page (moving some information to contact page)
-
Not including login and registration pages and use allauth templates.
-
Change approach for a product review :
-
Allow users to add comment
-
Not include star rating(instead 1-5 points scale)
-
Not including google maps due to concept change during the development process.
-
Update profile information available, but to delete account user needs to fill in contact form and site admin will delete the account.
- Mobile responsive design.
-
toasts messages
-
navbar
-
back top button
-
image carousel
-
cards
-
forms
-
Register and login functionality.
-
Profile page with email, order history and user address details for shipping.
-
Error pages 404 and 500
-
"Stripe" payments for customers
-
Review products
-
Django multi-select allowing admin to add relevant colour for each product
-
Search functionality
-
Sorting functionality for price and category
-
Cloudinary for storing media files
-
AWS3 to host static files
-
Admin Tool to add/delete the product and read messages from the user.
-
Average rating display and sorting reviews from highest rated.
-
Voucher cupon model to allow registered users to get discounts.
-
Add product variants to get the price depending on the size of the product.
-
Displaying more images for the product on the product details page
-
Pagination
-
Address google map
-
Shipping rates based on country
-
Company footer
-
Python -
python modules used in this project:
-
appdirs==1.4.4
-
asgiref==3.4.1
-
Babel==2.9.1
-
boto3==1.19.2
-
botocore==1.22.2
-
certifi==2021.5.30
-
cffi==1.14.6
-
charset-normalizer==2.0.6
-
cloudinary==1.26.0
-
crispy-bootstrap5==0.6
-
cryptography==3.4.8
-
defusedxml==0.7.1
-
distlib==0.3.1
-
dj-database-url==0.5.0
-
Django==3.2.7
-
django-allauth==0.45.0
-
django-cleanup==5.2.0
-
django-cloudinary-storage==0.3.0
-
django-colorfield==0.4.5
-
django-countries==7.2.1
-
django-crispy-forms==1.13.0
-
django-dotenv==1.4.2
-
django-multipleselectfield==0.2.0.post2
-
django-multiselectfield==0.1.12
-
django-storages==1.12.2
-
filelock==3.0.12
-
gunicorn==20.1.0
-
idna==3.2
-
jmespath==0.10.0
-
oauthlib==3.1.1
-
Pillow==8.3.2
-
psycopg2-binary==2.9.1
-
py-moneyed==1.2
-
pycparser==2.20
-
PyJWT==2.1.0
-
python-dateutil==2.8.2
-
python-decouple==3.5
-
python3-openid==3.2.0
-
pytz==2021.1
-
requests==2.26.0
-
requests-oauthlib==1.3.0
-
s3transfer==0.5.0
-
six==1.15.0
-
sqlparse==0.4.2
-
stripe==2.61.0
-
urllib3==1.26.7
-
virtualenv==20.4.4
-
-
jQuery - used for toast messages,increment/decrement functionality , Stripe payments, hamburger toggler, back to top button and preventing form from re-submission reviews.
-
Django framework was used to build this site.
-
used for layouts, styling and custom components
-
JIRA - project management tool to organize workflow.
-
Balsamiq - to create wireframes
-
techsini - to generate website mock-up.
-
dbdiagram - to create data base diagram.
-
- DB used after deploying to Heroku
-
Google Fonts - to import fonts for this site
-
JPEG-OPTIMIZER - to optimize some images used in this project.
-
Font Awesome - for social media links and forms icons.
-
Heroku - Heroku was to deploy and host the live website.
-
AWS - AWS S3 Bucket was set up to store static files and media files(if needed as Cloudinary is currently used for products media)
-
Visual Studio Code - used for developing this website and committing the project to GitHub repository.
-
Chrome Developer Tools - used to debug the styling issues, test the website responsiveness and make sure colour contrast is correct.
-
Github - Github as the hosting site was used to store the source code of this website.
-
Git - used Git to commit and push code to the GitHub repository.
-
Favicon - to create a favicon for this Website.
-
Wave - web accessibility evaluation tool
-
Lighthouse - as a part of the chrome dev tool was used to improve the quality of the web page.
👉 TESTING
-
Navigating to the GitHub Repository
-
Click on Code green button.
-
Under the Clone section, copy the URL from the HTTPS :
-
Use the IDE of choice(vscode in my case) to open the terminal.
-
Use the git clone command followed by the copied URL.
-
A clone of the project will now be created locally on your machine.
-
Create Application
-
Create a Heroku account.
-
Press the
Newbutton. -
Select
Create a new app. -
Enter the app name.
-
Select region.
-
-
Create connection to Github Repository
-
Click the deploy tab and select GitHub -
Connect to GitHub. -
field to find a GitHub repository to connect to will then be displayed.
-
type repository name in that input field
-
once the repo is founded, click the connect button.
-
-
PostgresSQL Database
-
Click the
resourcestab -
Under Add-ons search for Heroku Postgres and then click on it when it appears.
-
Select Plan name Hobby Dev - Free and then click Submit Order Form.
- Setting environment variables
-
Click on the settings tab and then click reveal config vars.
-
Variables added for this project:
* AWS_ACCESS_KEY_ID
* AWS_SECRET_ACCESS_KEY
* DATABASE_URL
* EMAIL_HOST_PASS
* EMAIL_HOST_USER
* SECRET_KEY
* STRIPE_PUBLIC_KEY
* STRIPE_SECRET_KEY
* STRIPE_WEBHOOK_SECRET
* USE_AWS
-
Enable automatic deployment:
-
Click the Deploy tab
-
In the
Automatic deploys section, the select branch you want to deploy from then clickEnable Automation Deploy
-
Navigating to the GitHub Repository
-
Click on Code green button.
-
Under the Clone section, copy the URL from the HTTPS
-
Use the IDE of choice to open the terminal.
-
Use git clone command followed by the copied URL.7. A clone of the project will now be created locally on your machine.
codepen - used this code and customized it for this site
codepen - used this code and customized it to create a hamburger toggler in the navbar
stackoverflow- multiselect value
Twilo- learn how to built contact form
-
My mentors, Daisy Mc Girr and Maranatha Ilesanmi for advice, guidance and support on this project.
-
Igor from Tutor Support - for help on this project.
-
My friends and family - for giving feedback on my project and testing this website.