Giters

sctlcd / boutique-ado-customized-latest-version

Modern responsive e-commerce website for fashion shopping using HTML, CSS, Bootstrap 4, JavaScript, jQuery, Django, Python, PostgreSQL

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

bootstrap4javascriptjquery

Boutique Ado

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


Boutique Ado

User interface improvements, look and feel, presentation, interactivity, adding features relative to user interface improvements (image gallery, go to page bottom button, highlighting menu/sub-menu items, "Home" icon link on mobile devices, navbar display change on its hover position and on window scroll position) to the initial Boutique Ado website version.

Table of Contents

  1. About

  2. Initial website user interface

  3. Adding Features

  4. Technologies Used

  5. Testing

  6. Credits

About

The purpose of this project is to improve the user interfaces: the look and feel, the presentation and the interactivity of the initial Boutique Ado website version and adding features relative to user interface improvements (image gallery, go to page bottom button, highlighting menu/sub-menu items, "Home" icon link on mobile devices, navbar display change on its hover position and on window scroll position).
User interface improvements: responsive website using HTML, CSS, Bootstrap 4, JavaScript, jQuery

Initial website user interface

Initial website user interface

Initial website user interface



Back to top

Adding Features

Navigation bar

Description

  • 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
    • Sky blue line on the bottom of the navbar (including the navbar collapse menu when this one is pulled down) when the page is scrolled
    • Menu item highlighted when hovered or selected/pulled down
    • Sub-menu item highlighted when hovered
    • "My account" menu closes when the user clicks anywhere in the page
    • Search button colour change when hovered or selected

  • Specific desktop :

    • Dropdown menus: dark grey box shadow
    • "Gallery" icon link added in the desktop top nav
    • Navbar item sub-menu closes when the user clicks anywhere in the page
    • Logo of the website
    • Favicon

  • Specific mobile :

    • Dropdown menus: light grey box shadow
    • "Home" and "Gallery" icon links added in the mobile top header
    • Search input field in the mobile top header closes when the user clicks anywhere in the page
    • Navbar item sub-menu closes when the user clicks in the header of the page
    • Navbar collapse menu closes when the user clicks on "Search" or "My Account" icon links and when the user clicks in the body of the page (apart from the header) or in the footer.

Back to top

Footer

Description

  • Newsletter subscription in the purpose of the website presentation (not implemented)
  • Links to additional website pages in the purpose of the website presentation (page links not implemented)
  • Social media links
  • A copyright mention is displayed with my name beside a GitHub icon link which opens my Github

Back to top

Landing page

Description

  • Landing page sections:
    • Shop now feature
    • Order features offered
    • Target audience
    • Customer reviews
    • Share your own fashion style feature

Back to top

Set of slides gallery

Description

  • Carousel of 4 slides of 3 images each
  • The set of slides gallery is auto played on page load/refresh

Back to top

Modal image gallery

Description

  • On click on each images of the set of slides gallery a modal image gallery opens whose purpose is to display the images in bigger size.
  • The modal image gallery opens on the image selected in the set of slides gallery.
  • The modal image gallery is auto played on page load/refresh
  • When the modal image gallery opens it pauses the cycling of the set of slides gallery. The modal image gallery cycling is maintained.
  • When the modal image gallery closes it resumes the cycling of the set of slides gallery.

Back to top

No result found page

Description

  • Displays an humoristic image and a message informing the user
  • Offers a link to go back to Products page.

Back to top

Go to page bottom button

Description

  • Adding a go to page bottom button, in addition to the page up button in products pages in desktop and mobile devices and in bag page in mobile version.

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

Back to top

Front-End Technologies

  • HTML - Used as the base_master for markup text.
  • CSS - Used as the base_master for cascading styles.
  • Bootstrap 4 - Used as responsive front-end framework, mobile first projects design.
  • JavaScript - Used for user interactions.
  • jQuery 3.5.1 - JavaScript library, used to simplify some of the DOM manipulations.

Back to top

Back-End Technologies

Back to top

Testing

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 Galaxy Fold iPad iPad Pro Desktop 1024px Desktop > 1200px
website is responsive <= 767 px Good Good Good Good Good Good Good Good Good Good n/a n/a n/a n/a
website is responsive >= 768 px n/a n/a n/a n/a n/a n/a n/a n/a n/a n/a Good Good Good Good
base_master.html
Navigation bar: logo / links / search Good Good Good Good Good Good Good Good Good Good Good Good Good Good
Content page: Images / icons text / links / buttons / text Good Good Good Good Good Good Good Good Good Good Good Good Good Good
Footer: text / links Good Good Good Good Good Good Good Good Good Good Good Good Good Good
base_extension.html
Navigation bar: logo / links / search Good Good Good Good Good Good Good Good Good Good Good Good Good Good
Content page: Images / icons text / links / buttons / text Good Good Good Good Good Good Good Good Good Good Good Good Good Good
Footer: text / links Good Good Good Good Good Good Good Good Good Good Good Good Good Good
gallery.html
Content page: Carousel / modal / images / buttons / text Good Good Good Good Good Good Good Good Good Good Good Good Good Good
no_results_found.html
Content page: Images / links / text Good Good Good Good Good Good Good Good Good Good Good Good Good Good
products.html
Content page: Images / links / buttons / text Good Good Good Good Good Good Good Good Good Good Good Good Good Good

Back to top

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

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.

Validators

HTML

CSS

Javascript

Chrome DevTools

Python

Known Issues

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/boutique-ado-customized-latest-version.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 boutique-ado-customized-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

Media

Sources of the images used on this site:

Back to top

Code

Back to top

About

Modern responsive e-commerce website for fashion shopping using HTML, CSS, Bootstrap 4, JavaScript, jQuery, Django, Python, PostgreSQL

bootstrap4javascriptjquery

Languages

Language:HTML 52.2%Language:Python 29.1%Language:CSS 12.6%Language:JavaScript 6.1%Language:Procfile 0.0%