Giters

sctlcd / pearl-latest-version

Modern responsive e-commerce arts and craft supplies site with a customers' work of art gallery for exhibiting customers' pieces of work and getting inspiration while shopping. This e-commerce site is built using HTML, CSS, Material Design for Bootstrap, JavaScript, jQuery, Django, Python, PostgreSQL. (CI Software Development diploma - Milestone 4)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

javascriptjquerymaterial-design-bootstrap

Pearl

New deployed app coming soon (Heroku has ended its free product plans)


Pearl

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.

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.

Table of Contents

  1. About

  2. UX

  3. Features

  4. Technologies Used

  5. Relational scheme

  6. Testing

  7. Deployment

  8. Credits

About

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

Why this project?

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

UX

User Stories

✔️ successfully implemented
❌ not yet implemented

"As a non authenticated user, I want to _____"

  • ✔️ 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

"As an authenticated user, I want to _____"

  • ✔️ 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

"As an authenticated admin, I want to _____"

  • ✔️ 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

Back to top

Design

I did choose a warm, joyful and energetic orange #fc9601 #fc9601 combined with sober and reliable colors ranging between off-white #fafafa #fafafa and black #000 #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

Framework

  • 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

Back to top

Color Scheme

  • #fc9601 #fc9601
  • #6a6a6e #6a6a6e
  • #fafafa #fafafa
  • #efefef #efefef
  • #6c757d #6c757d
  • #d8d8d8 #d8d8d8
  • #d6d4d4 #d6d4d4
  • #dee2e6 #dee2e6
  • #000 #000

Back to top

Icons

Back to top

Typography

Back to top

Wireframes

I have used Balsamiq Wireframes for my wireframes because:

  • 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.

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

Features

Existing Features

Navigation bar

  • 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

  • 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

Footer
  • 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
Home page
  • 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)

Back to top

Products page
  • 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
Products details page
  • 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

Back to top

Products management page
  • 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
Gallery page
  • 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

Back to top

Share gallery page
  • 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
Gallery management page
  • 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

Back to top

Profile page
  • 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
Shopping bag page
  • 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

Back to top

Checkout page
  • 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
Contact us page
  • 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

Back to top

No result found page
  • 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
Error pages

  • 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

Pearl Admin Portal
  • I customise the Default Django Administration in pearl/urls.py:
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'
  • 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
# 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

Technologies Used

  • 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

Back to top

Front-End Technologies

  • 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.

Back to top

Back-End Technologies

  • 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.

Back to top

Relational scheme

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

Testing

User story validation

✔️ 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

Layout responsiveness

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

Compatibility

Browser compatibility

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.

  • 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
All pages Chrome Edge Firefox Safari Opera IE
Expected appearance Good Fair Good Poor Good Poor
Expected responsiveness Good Good Good Poor Good Poor

  • 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.

Chrome's DevTools Audit Report

Performance Accessibility Best Practices SEO
89% 82% 93% 90%

The Chrome DevTools Audit Report can be found in my testing folder

Back to top

Testing left

  • 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.

Back to top

Validators

HTML

  • W3C HTML Validator
    • Django Template elements not recognized: {{ variable }} {% for %} {% if %} etc.
    • No error

CSS

Javascript

  • Javascript Validator
    • '$' is not defined. This is for jQuery. 'STRIPE' is not defined. This is for Stripe.
    • No error

Chrome DevTools

  • Chrome DevTools
    • Console Navigating through the Website rendered no critical fails/errors in the console that were necessary to fix.

Python

Back to top

Known Issues

  • 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.

Back to top

Deployment

Deployment – Run Locally

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):

  • Python3 to run the application.
  • PIP to install all app requirements.
  • GIT for cloning and version control.

Next, there's a series of steps to take in order to proceed with local deployment:

  • 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)

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

Deployment – Live Website

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:

  • 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:

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/*"

  • 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_key
    • Secret Key: sk_test_key

Congratulations! Your project should be completely setup and ready for remote deployment!

Back to top

Credits

My inspiration comes from:

  • 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

Back to top

Content

Sources of the content used on this site:

  • Baker Ross - E-commerce website specialized in arts and crafts supplies

Back to top

Media

Sources of the images used on this site:

Back to top

Code

Back to top

Acknowledgements

  • 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.

Back to top

About

Modern responsive e-commerce arts and craft supplies site with a customers' work of art gallery for exhibiting customers' pieces of work and getting inspiration while shopping. This e-commerce site is built using HTML, CSS, Material Design for Bootstrap, JavaScript, jQuery, Django, Python, PostgreSQL. (CI Software Development diploma - Milestone 4)

javascriptjquerymaterial-design-bootstrap

Languages

Language:HTML 47.0%Language:Python 33.3%Language:CSS 13.6%Language:JavaScript 6.1%Language:Procfile 0.0%