- Do you like creative activities, arts and crafts and making things by yourself with creativity, happiness and your own two hands ?
- Then this website is a pearl to you!
- At Pearl's you can purchase arts and crafts supplies and sharing customers' work of art in the meantime as getting inspiration from other customers' creative work in the gallery.
- ✔️ view the site from any device (mobile, tablet, desktop)
- ✔️ be able to register
- ✔️ be able to log in
- ✔️ filter and search amongst all products
- ✔️ view all products
- ✔️ view product details
- ✔️ view quantity in shopping bag of current product in product details page
- ✔️ view gallery images
- ✔️ view a gallery image (modal)
- ✔️ add products to my bag
- ✔️ update products in my bag / adjust product quantity
- ✔️ remove products in my bag
- ✔️ checkout my order
- ✔️ send a contact request
- ✔️ be able to log out
- ✔️ filter and search amongst all products
- ✔️ view all products
- ✔️ view product details
- ✔️ view quantity in shopping bag of current product in product details page
- ✔️ view gallery images
- ✔️ view a gallery image (modal)
- ✔️ share a gallery image
- ✔️ view my profile
- ✔️ update my profile
- ✔️ add products to my bag
- ✔️ update products in my bag / adjust product quantity
- ✔️ remove products in my bag
- ✔️ save delivery info to profile while checkout
- ✔️ checkout my order
- ✔️ send a contact request
- ✔️ all user stories that apply to an authenticated user apply to an authenticated admin.
- ✔️ add a gallery item with an image
- ✔️ add a gallery item without an image
- ✔️ edit a gallery item with an image
- ✔️ edit a gallery item without an image
- ✔️ delete a gallery image
- ✔️ approved a gallery image
- ✔️ add a product with an image
- ✔️ add a product without an image
- ✔️ edit a product with an image
- ✔️ edit a product without an image
- ✔️ delete a product
- Material Design for Bootstrap 4.19.1
- I really like the modern and clean layout of Material Design and the ease of use and standards of Bootstrap so I wanted to give a try and getting familiar with Material Design for Bootstrap
- jQuery 3.5.1
- For the purpose of keeping the JavaScript minimal
- Django 3.1.1
-
Font Awesome 5.14.0: It fits my needs for this project
-
Flaticon: It fits my needs for this project
- Pearl logo: from original version to customize in Pearl version
- Google Fonts were used across the site:
- Open Sans - default font
- Smythe - showcase section on home page
- Crafty Girls - customer review section on home page
- Code Institute have provided all students a free licence. I got to use this software a few years ago and I am pretty happy to get the chance to use it again.
- The simplicity, rapidity and ease of use by focusing on structure and content.
- My wireframes for this project can be found here in the wireframes sub-directory.
-
A top navbar with the logo and the name of the website, menu items and dropdown menu items : Gallery, My Account, Shopping bag and a product search bar.
-
a navbar with the products menu items and dropdown menu items
-
Common desktop/mobile:
- Transparent navbar when
- the window is at the top
- the header is not hovered
- menu/sub-menu are not opened
- navbar collapse menu is collapsed
- White navbar when
- the window is scrolled down
- the header is hovered
- menu/sub-menu are opened
- navbar collapse menu is pulled down
- Orange double line on the bottom of the navbar when the page is scrolled
- Menu item highlighted when hovered or selected/pulled down
- Sub-menu item highlighted when hovered
- "My account" and "Gallery" menu closes when the user clicks anywhere in the page
- Transparent navbar when
-
Specific desktop :
- Navbar item sub-menu closes when the user clicks anywhere in the page
- Logo of the website
- Favicon
-
Specific mobile :
- Search input field in the mobile top header close when the user clicks anywhere in the page
- Navbar collapse menu closes when the user clicks on "Search", "My Account" or "Gallery" icon links
Back to top
- Social medias to get connected with Pearl
- 3 sections : Company presentation, links to other pages of the website (not implemented), contact section with a contact button redirecting to the Contact page.
- Copyright mention with my name and my gitbhub repository
- 6 sections: Shop now, website order feature offered, target activities, customer reviews, Share your work of art, Stay tune (newsletter subscription not implemented, for presentation purpose)
- A Product collection presented in a "mosaic format"
- Possibility to sort product by price, rating, name, category
- Number of Product result from the product filter or from the Search option.
- Link back to Product home
- Product name, price, category and rating are visible
- Top/down page button to facilitate the navigation
- Edit/delete button are visible if authenticated as Admin
- Clicking on Edit/Delete opens a confirmation modal to continue to edit/delete or to cancel.
- Selecting Yes redirects to the Edit Product page or delete the product
- A page with product details: name, description, price, category, rating, product image, quantity to add to shopping bag, number of current product in shopping bag is display to inform the user
- Buttons: Keep shopping, Add to bag
- Add Product page: add product form containing the fields: Category, Sku, Name, Description, Price, Image, select image button, buttons: Cancel, Add Product
- Edit Product page: edit product form containing the fields: Category, Sku, Name, Description, Price, Image, buttons: Cancel, Edit Product
- A gallery of customers' work of art presented in a "mosaic format".
- The gallery images can be filtered by All, Mosaic, Painting, Beads, other
- The author name is displayed below the images preceded by a copyright
- Clicking on the image opens a gallery image modal composed of the author name preceded by a copyright mention as title, social media links to spread the world, close button
- Top/down page button to facilitate the navigation
- Edit/delete button are visible if authenticated as Admin
- Clicking on Edit/Delete opens a confirmation modal to continue to edit/delete or to cancel.
- Selecting Yes redirects to the Edit Gallery image page or delete the gallery image
- A share gallery item form can be submitted containing the fields: user name, email, author name, gallery category, image, note, an info message "The author name filled in this form will be accompanied by the copyright mention when your photo will be published.", buttons: home, share
- Add Gallery item page: add gallery item form containing the fields: user name, email, author name, gallery category, image, select image button, note, is approved, buttons: cancel, add gallery image
- Edit Gallery item page: edit gallery item form containing the fields: user name, email, author name, gallery category, image, select image button, note, is approved, buttons: cancel, edit gallery image
- To view and update your profile
- Default delivery information form containing: phone number, street address 1, street address 2, town or city, county state or locality, postal code, country, update information buttons
- Order history table containing: order number, date, items, order total
- To view and adjust your shopping bag
- Shopping bag table containing: product image, product description, price, quantity, subtotal
- update/remove links to quantity fields
- Bag total price, delivery cost and grand total price are displayed
- A message inform the user about free delivery: "You could get free delivery by spending just $XX.XX more!"
- buttons: keep shopping, secure checkout
- Checkout form containing Full name, email address, phone number, street address 1, street address 2, town or city, county state or locality, postal code, country, payment details, buttons: adjust bag, complete order.
- A message informs the user "Your card will be charged $XX.XX"
- Order summary table containing: product image, item, product name, quantity, subtotal
- Order total, delivery and grand total prices are displayed
- Section with Pearl information details: address, phone number, working hours, email street_address
- Contact form containing: first name, last name, email, message, buttons: home, spend
- Street view map of the shop location
- Humoristic picture and message letting know the user no result have been found matching with his/her search. - No result found page
- Link redirecting to Products Home page
-
404 page - No page found
- Link redirecting to Products Home page
-
500 page - Internal server error
- Link redirecting to Products Home page
Back to top
- I customise the Default Django Administration in pearl/urls.py:
- I changed the time zone to match with the physical location of Pearl shop in New Orleans in USA and the format of time and date in pearl/settings.py
- GitHub - Used as remote storage of my code online.
- Atom - Used as a local IDE.
- Compressjpeg - Used to compress images for loading faster
- Techsini - Used to generate multi-device website mockup
- Ngrok 2.3.35 - Expose a local web server to the public internet over secure tunnels
- HTML - Used as the base for markup text.
- CSS - Used as the base for cascading styles.
- Material Design for Bootstrap 4.19.1 - used as a front-end framework for building responsive, mobile-first websites and apps
- JavaScript - Used for user interactions.
- jQuery 3.5.1 - JavaScript library, used to simplify some of the DOM manipulations.
- Stripe API - Used to make secured payments
- Amazon AWS S3 - Used to store staticfiles and media folders and files.
- Python 3.8 - Used as the back-end programming language.
- Django 3.1.1 - Used as Python web framework.
- Heroku - Used for app hosting.
- PostgreSQL - Used as relational SQL database plugin via Heroku.
- Chrome v.92.0
- Edge v.92.0
- Firefox v.90.0
- Safari v.5.1.7 for Windows 10
- Opera v.77.0
- Internet Explorer v.11
-
IE: Some CSS3 properties and HTML5 elements are not fully supported
-
Safari v.5.1.7: It’s an outdated version and lacks many of the features present in the latest version of Safari. The last version of Safari for Windows was released on May 9, 2012.
- There is no way to install the latest version of the Safari browser on Windows 10 as Apple stopped developing Safari for Windows operating system long ago. For testing this website on the latest version of Safari, I will have to install the newest version of macOS on Windows 10 in a virtual machine.
- W3C HTML Validator
- Django Template elements not recognized: {{ variable }} {% for %} {% if %} etc.
- No error
- W3C CSS Validator
- No error
- Javascript Validator
- '$' is not defined. This is for jQuery. 'STRIPE' is not defined. This is for Stripe.
- No error
- Chrome DevTools
- Console Navigating through the Website rendered no critical fails/errors in the console that were necessary to fix.
- Python validator
- No error
- If mobile menu is collapsed and if the user scrolls down then scrolls up to the very top of the page window (window scroll = 0) then Top/Down page buttons are visible (from products page, gallery page).
- Set image gallery back to required.
- Create a Project folder at the root of Pearl repository containing the code project repositories in order to separate design and testing folders from the code project repository.
- Python3 to run the application.
- PIP to install all app requirements.
- GIT for cloning and version control.
-
Clone this GitHub repository by either clicking the green "Clone or download" button above in order to download the project as a zip-file (remember to unzip it first), or by entering the following command into the Git CLI terminal:
git clone https://github.com/sctlcd/pearl.git
-
Navigate to the correct file location after unpacking the files.
cd <path to folder>
-
Create a
.env
file with your own credentials.Key Value AWS_ACCESS_KEY_ID <your_aws_access_key_id> AWS_SECRET_ACCESS_KEY <your_aws_secret_access_key> DATABASE_URL <your_database_url> EMAIL_HOST_PASS <your_email_host_pass> EMAIL_HOST_USER <your_email_host_user> SECRET_KEY <your_secret_key> STRIPE_PUBLIC_KEY <your_stripe_public_key> STRIPE_SECRET_KEY <your_stripe_secret_key> STRIPE_WH_SECRET <your_stripe_wh_secret> USE_AWS True DEBUG DEVELOPMENT -
Install all requirements from the requirements.txt file using this command:
sudo -H pip3 -r requirements.txt
-
In the IDE terminal, use the following command to launch the Django project:
python manage.py runserver
-
The Django server should be running locally now on http://127.0.0.1:8000 (or similar). If it doesn't automatically open, you can copy/paste it into your browser of choice.
-
When you run the Django server for the first time, it should create a new SQLite3 database file: db.sqlite3
-
Next, you'll need to make migrations to create the database schema:
python manage.py makemigrations
python manage.py migrate
-
In order to access the Django Admin Panel, you must generate a superuser:
python manage.py createsuperuser
- (assign an admin username, email, and secure password)
-
Create a requirements.txt file so Heroku can install the required dependencies to run the app:
sudo pip3 freeze --local > requirements.txt
- The requirements.txt file for this project can be found here: requirements.txt
-
Create a Procfile to tell Heroku what type of application is being deployed using pearl-latest-version, and how to run it:
echo web: gunicorn main.wsgi:application > Procfile
- The Procfile for this project can be found here: Procfile
-
Sign up for a free Heroku account, create your project app, and click the Deploy tab, at which point you can Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.
-
In the Heroku Resources tab, navigate to the Add-Ons section and search for Heroku Postgres. Make sure to select the free Hobby level. This will allow you to have a remote database instead of using the local sqlite3 database, and can be found in the Settings tab. You'll need to update your .env file with your new database-url details.
-
In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental variables. You will need to copy/paste all of the .env key value pairs into the config variables, but please omit the development=1 variable; this is only for local deployment.
Key Value AWS_ACCESS_KEY_ID <your_aws_access_key_id> AWS_SECRET_ACCESS_KEY <your_aws_secret_access_key> DATABASE_URL <your_database_url> EMAIL_HOST_PASS <your_email_host_pass> EMAIL_HOST_USER <your_email_host_user> SECRET_KEY <your_secret_key> STRIPE_PUBLIC_KEY <your_stripe_public_key> STRIPE_SECRET_KEY <your_stripe_secret_key> STRIPE_WH_SECRET <your_stripe_wh_secret> USE_AWS True -
Your app should be successfully deployed to Heroku at this point, but you're not quite finished yet!
-
Update the settings.py file to connect the remote database using this Python package:
dj_database_url
-
Re-build the migrations and create a superuser to your new remote database using the instructions in the local deployment section above.
-
Sign up for a free Amazon AWS account in order to host your staticfiles and media files. From the S3 buckets section, you'll need to create a new unique bucket. Follow these next steps to complete the setup:
- From here, you'll need to navigate to the IAM section of AWS.
- Create a New Group and be sure to select your existing S3 Bucket details to attach.
- Create a New Policy and a New User in the IAM section as well, then attach these to the Group you just built.
- In your CLI-terminal, you should now be able to push the static files to AWS if everything is configured properly using this command:
python manage.py collectstatic
- Sign up for a free Stripe account. Navigate to the Developers section, and click on API Keys. You should have two confidential keys which need to be added to your .env file, as well as your Heroku config vars. These keys are:
Publishable Key
: pk_test_keySecret Key
: sk_test_key
- Etsy - E-commerce website focused on handmade or vintage items and craft supplies
- Cultura - E-commerce website specialized in cultural, arts and crafts goods and leisure activities
- Baker Ross - E-commerce website specialized in arts and crafts supplies
-
From media/home/hero_image sub-directory
- hero-image-background-min - Pixabay | copyright 463259 - Faizal Sugi
-
From media/home/image_showcases sub-directory
- create-beads-min - Flickr | copyright Heather
- create-grafiti-min - Flickr | copyright Rosemary Miklitsch
- create-mosaic-min - Flickr | copyright Michael Coghlan
-
From media/home/testimonials sub-directory
- female-2-min - Pixabay | copyright Free-Photos
- female-1-min - Pixabay | copyright Free-Photos
- male-1-min - Pexels | copyright Juan Pablo Serrano Arenas
-
From media/home/gallery sub-directory
- gallery-background-1920-min - Pexels | copyright Jessica Lewis
-
From media/logo sub-directory
-
From media/error sub-directory
- no-results-found-min - Free vectors | copyright BSGStudio
-
From media directory
- all product images - bakerross
- park-guell-887725_1920-min - Pixabay | copyright LisaRedfern
- uzbekistan-196875_1920-min - Pixabay | copyright LoggaWiggler
- mosaic-200866_1920-min - Pixabay | copyright GLady
- graffiti-wall-1209761_1920-min - Pixabay | copyright Free-Photos
- pexels-shukhrat-umarov-2103127-min - Pexels | copyright Shukhrat Umarov
- eyasu-etsub-JlufluFHiZc-unsplash-min - Unsplash | copyright Eyasu Etsub
- nasim-keshmiri-cdXwe6nROs8-unsplash-min - Unsplash | copyright Nasim Keshmiri
- fallon-michael-DWjucw3fsaQ-unsplash-min - Unsplash | copyright Fallon Michael
- nasim-keshmiri-CQ3xrqbV58s-unsplash-min - Unsplash | copyright Nasim Keshmiri
- nadia-clabassi-9EiJn8OJ8wo-unsplash-min - Unsplash | copyright Nadia Clabassi
- elsa-lilja-xlkuA0VQshU-unsplash-min - Unsplash | copyright Elsa Lilja
- pexels-khairul-nizam-16516-min - Pexels | copyright khairul nizam
- embroidery-942255_1920-min - Pixabay | copyright bluemorphos
- pexels-anete-lusina-4792086-min - Pexels | copyright Anete Lusina
- paint-4105253_1920-min - Pixabay | copyright stux
- mosaic-200868_1920-min - Pixabay | copyright GLady
- nasim-keshmiri-o7IsP-DbIgk-unsplash-min - Unsplash | copyright Nasim Keshmiri
- nasim-keshmiri-lUvvRj2RzK0-unsplash-min - Unsplash | copyright Nasim Keshmiri
- pexels-anni-roenkae-5278835-min - Pexels | copyright Anni Roenkae
- pexels-anni-roenkae-2832382-min - Pexels | copyright Anni Roenkae
- 6367436537_e49503a3f0_b-min - Flickr | copyright Ian Nicholson
- 12517089325_f4eca23e67_k-min - Flickr | copyright Lawrence OP
- 111294390_33b9db4816_b-min - Flickr | copyright max_thinks_sees
- 17888752_1562ec72fe_b-min - Flickr | copyright 3sth3r
- toa-heftiba-D9EgMp2V85o-unsplash-min - Unsplash | copyright Toa Heftiba
- Environment variables - Igor Basuga Tutor at Code Institute
- Environment variables - Code Institute archive resources
- Ngrok - ngrok
- Using ngrok on Windows-10 - youtube
- Testing our Django App to be publicly accessible using NGROK - medium
- jQuery documentation - jQuery
- Favicon in django app - stack overflow
- Material Design for Bootstrap documentation - mdbootstrap
- How to integrate mdbootstrap with django - mdbootstrap
- mdbootstrap input number mdbootstrap
- Creating a modal image gallery with bootstrap components - css tricks
- How to - Portfolio Gallery with Filtering - w3schools
- Portfolio Filter Gallery HTML CSS & JavaScript | Image Category Filtering web dev trick
- How to - Lightbox - w3schools
- Material Design Full Screen Modal - mdbootstrap
- How to change your commit messages in Git? - github
- How to limit the maximum value of a numeric field in a Django model? stack overflow
- Python perform append at beginning of list - geeksforgeeks
- How to upload files with django - simple is better than complex
- How to crop an image in css - educative
- Set favicon in django admin - stack overflow
- Change the display format of time fields - stack overflow
- Automatic datetime fields - simple is better than complex
- Delete a git commit but keep the changes stack overflow
- You're using the staticfiles app without having set the STATIC_ROOT setting to a filesystem path - stack overflow
- Python django error oserror winerror 123 the filename directory name or vol - stack overflow
- Modify Title and Header Django Admin Interface - medium
- Customizing HTTP error web pages 404, 500, 403 and 400 in Django - lavatech technology
- Equivalent of export command in Windows - superuser
- Heroku Django Deploy Stripe Issue - No module named 'stripe' - stack overflow
- Readme file information - Tim Nelson Software Developer and Tutor at Code Institute
- How to Rename a Local Branch in Git - git tower
- Sending email django
- BadHeaderError with Python emails package, how to fix? stack overflow
- Anthony Ngene
- Thanks to my Code Institute mentor for his time, suggestions, constructive feedback and availability.
- CI Tutor support for their help in order to understand some issues and their friendliness.
Warning
Because of an issue relative to submitting a form with an uploaded image in my deployed environment I did set up the image field in the gallery model as not required for limiting the impact of the issue which has been solved just before my project deadline submission. I set up initially the gallery image field as required. I will set it back to required in the future.
The primary purpose of Pearl is to purchase arts and crafts supplies. Its secondary purpose is to share customers' work of art in the meantime as getting inspiration from other customers' creative work in the gallery. And this anytime, anywhere as this application is available on various devices as desktops, tablets and mobile.
Back to top
This project is part of my Code Institute Full Stack Software Development studies, the Full Stack Frameworks With Django module. The objective of this milestone project is building a full-stack site based around business logic used to control a centrally-owned dataset, setting up an authentication mechanism and provide paid access to the site's data and/or other activities based on the dataset, such as the purchase of a product/service.
My modern responsive e-commerce arts and crafts supplies site is built using HTML, CSS, Material Design for Bootstrap, JavaScript, jQuery, Django, Python, PostgreSQL.
Back to top
✔️ successfully implemented
❌ not yet implemented
"As a non authenticated user, I want to _____"
"As an authenticated user, I want to _____"
"As an authenticated admin, I want to _____"
Back to top
I did choose a warm, joyful and energetic orange
#fc9601
combined with sober and reliable colors ranging between off-white
#fafafa
and black
#000
with shades of grey (more color details in Color Scheme section).
I first selected my logo from Flaticon(https://www.flaticon.com) which I customized in Pearl logo.
Then I chose images relative to arts and crafts and creative activities which fit well in my color scheme and in the space allocated.
I finally selected the main home page image, a fire spin picture, as I found it absolutely stunning, very eye-catchy and intriguing. Catching customers/visitors' attention and raising their interest and curiosity are, I believe, a good recipe for new visitors as much as for regular customers of an e-commerce site.
I decided to implement a customers' gallery and offering the possibility to share your own piece of art while getting inspiration from other customers' art work. I believe this feature is a very interesting one as it involves the customers/makes the customers participate in the website building. They are actors, in a way, of the gallery page building and its content.
Back to top
Back to top
Back to top
Back to top
Back to top
I have used Balsamiq Wireframes for my wireframes because:
Remark: There is a bug at the opening of the balsamiq file: in each page on the mobile version, there are icon overlays on the right corner.
Back to top
Back to top
Back to top
Back to top
Back to top
Back to top
Back to top
admin.site.site_header = 'Pearl Administration'
admin.site.site_title = 'Pearl Admin Portal'
admin.site.index_title = 'Welcome to Pearl Admin Portal'
admin.site.site_url = '/admin'
# Time Zone in New Orleans, Louisiana, USA : CST — Central Standard Time
# corresponding to America/Chicago according to
# https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
TIME_ZONE = 'America/Chicago'
USE_I18N = True
USE_L10N = False
USE_TZ = True
DATETIME_FORMAT = "Y-m-d H:i"
Back to top
Back to top
Back to top
Back to top
The Relational scheme diagram can be found here
Pearl database table details:
category
_id PK int
name NULL varchar
friendly_name NULL varchar
product
_id PK int
sku NULL varchar
name varchar
description text
price money
category NULL int FK >- category._id
rating NULL decimal
image NULL file
created_at date
updated_at NULL date
user_account
_id PK int
email email
user_name varchar
password varchar
first_name NULL varchar
last_name NULL varchar
is_superuser boolean
is_staff boolean
is_active boolean
user_profile
_id PK int
user int FK - user_account._id
default_phone_number NULL varchar
default_street_address1 NULL varchar
default_street_address2 NULL varchar
default_town_or_city NULL varchar
default_postcode NULL varchar
default_county NULL varchar
default_country NULL country
order
_id PK int
order_number varchar
user_profile NULL int FK >- user_profile._id
full_name varchar
email email
phone_number varchar
country country
postcode NULL varchar
town_or_city varchar
street_address1 varchar
street_address2 NULL varchar
county NULL varchar
created_at date
updated_at NULL date
delivery_cost money
order_total money
grand_total money
original_bag text
stripe_pid varchar
order_line_item
order int FK >- order._id
product int FK >- product._id
quantity int
lineitem_total money
contact
_id PK int
first_name varchar(254)
last_name varchar(254)
email email
message text
date date
gallery
_id PK int(254) FK >- user_account._id
user_name varchar
email email
author_name varchar
gallery_category NULL int FK >- gallery_category._id
image NULL file
note NULL varchar
created_at date
updated_at NULL date
is_approved boolean
gallery_category
_id PK int
name NULL varchar
friendly_name NULL varchar
Back to top
✔️ as expected
❌ not as expected
n/a not applicable
User story | authenticated as admin | authenticated as regular user | non authenticated user | note |
---|---|---|---|---|
view the site from any device (mobile, tablet, desktop) | ✔️ | ✔️ | ✔️ | - |
be able to register | n/a | n/a | ✔️ | - |
be able to log in | n/a | n/a | ✔️ | - |
be able to log out | ✔️ | ✔️ | n/a | - |
filter and search amongst all products | ✔️ | ✔️ | ✔️ | - |
view all products | ✔️ | ✔️ | ✔️ | - |
view a product details | ✔️ | ✔️ | ✔️ | - |
view quantity in shopping bag of current product in product details page | ✔️ | ✔️ | ✔️ | - |
add products with an image | ✔️ | n/a | n/a | - |
add products without an image | ✔️ | n/a | n/a | - |
edit products with an image | ✔️ | n/a | n/a | - |
edit products without an image | ✔️ | n/a | n/a | - |
delete products | ✔️ | n/a | n/a | - |
view gallery images | ✔️ | ✔️ | ✔️ | - |
view a gallery image (modal) | ✔️ | ✔️ | ✔️ | - |
share a gallery image | ✔️ | ✔️ | n/a | - |
add a gallery item with an image | ✔️ | n/a | n/a | - |
add a gallery item without an image | ✔️ | n/a | n/a | - |
edit a gallery item with an image | ✔️ | n/a | n/a | - |
edit a gallery item without an image | ✔️ | n/a | n/a | - |
delete a gallery image | ✔️ | n/a | n/a | - |
approved a gallery image | ✔️ | n/a | n/a | - |
view my profile | ✔️ | ✔️ | n/a | - |
update my profile | ✔️ | ✔️ | n/a | - |
add products to my bag | ✔️ | ✔️ | ✔️ | - |
update products in my bag / adjust product quantity | ✔️ | ✔️ | ✔️ | - |
remove products in my bag | ✔️ | ✔️ | ✔️ | - |
save delivery info to profile while checkout | ✔️ | ✔️ | n/a | - |
checkout my order | ✔️ | ✔️ | ✔️ | - |
send a contact request | ✔️ | ✔️ | ✔️ | - |
Back to top
Moto G4 | Galaxy S5 | Pixel 2 | Pixel 2 XL | iPhone 5/SE | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X | Surface Duo | iPad | iPad Pro | Desktop 1024px | Desktop > 1200px | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
website is responsive <= 992px | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | n/a | n/a | n/a |
website is responsive >= 992 px | n/a | n/a | n/a | n/a | n/a | n/a | n/a | n/a | n/a | n/a | Good | Good | Good |
Navigation bar: logo / links / search / menu | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
Footer: text / links / buttons | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
links / urls work | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
Images work | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
Renders as expected | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
Back-End Functionality | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
Stripe payment works | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good | Good |
The site begins to overflow-X at < 280px.
Some elements and product images are small on mobile, especially under 360px.
Back to top
I tested the website across the 6 main browsers in both desktop and mobile configuration to ensure a large number of users can use it successfully.
All pages | Chrome | Edge | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|---|
Expected appearance | Good | Fair | Good | Poor | Good | Poor |
Expected responsiveness | Good | Good | Good | Poor | Good | Poor |
Performance | Accessibility | Best Practices | SEO |
---|---|---|---|
89% | 82% | 93% | 90% |
The Chrome DevTools Audit Report can be found in my testing folder
Back to top
Back to top
HTML
CSS
Javascript
Chrome DevTools
Python
Back to top
Back to top
It's highly recommended to work in a virtual environment, but not absolutely required.
In order to run this project locally on your own system, you will need the following installed (as a bare minimum):
Next, there's a series of steps to take in order to proceed with local deployment:
Once the database migrations and superuser have been successfully completed, Django should migrate the existing migrations.py files from each app to configure the following relational schema:
Back to top
This site is currently deployed on Heroku using the master branch on GitHub. Once you have the project setup locally, you can proceed to deploy it remotely with the following steps:
Permissions > CORS configuration:
[
{
"AllowedHeaders": [
"Authorization"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
Permissions > Bucket Policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<x>/*"
}
]
}
! IMPORTANT ! - on the Resource line above, be sure to replace <x>
with your AWS bucket arn details, but retain the /*
at the end. It should look similar to this:
- "Resource": "arn:aws:s3:::my-bucket-name/*"
Congratulations! Your project should be completely setup and ready for remote deployment!
Back to top
My inspiration comes from:
Back to top
Sources of the content used on this site:
Back to top
Sources of the images used on this site:
Back to top
Back to top
Back to top