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.
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
Back to top
-
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
- Transparent navbar when
-
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
- 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 sections:
- Shop now feature
- Order features offered
- Target audience
- Customer reviews
- Share your own fashion style feature
Back to top
- Carousel of 4 slides of 3 images each
- The set of slides gallery is auto played on page load/refresh
Back to top
- 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
- Displays an humoristic image and a message informing the user
- Offers a link to go back to Products page.
Back to top
- 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
- 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
- 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
- Python 3.8 - Used as the back-end programming language.
- Django 3.1.1 - Used as Python web framework.
- Heroku - Used for app hosting.
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 | 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
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
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.
HTML
CSS
Javascript
Chrome DevTools
Python
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):
- 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
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_keySecret Key
: sk_test_key
Congratulations! Your project should be completely setup and ready for remote deployment!
Back to top
Sources of the images used on this site:
-
From static/images sub-directory - Github
- favicon.ico - Flaticon | copyright Freepik
-
From media/home sub-directory - Github
- boutique-min.png - Flaticon | copyright Freepik
-
From media/home/hero_image sub-directory - Github
- hero-image-background-1920-min.jpg - Pixabay | copyright gonghuimin468
-
From media/home/gallery sub-directory - Github
- gallery-background-1920-min.jpg - Pexel | copyright Jessica Lewis
-
From media/home/image_showcases sub-directory - Github
- pexels-lucas-da-miranda-1967902-min.jpg - Pexel | copyright lucas da miranda
- pexels-mentatdgt-1174170-min.jpg - Pexel | copyright mentatdgt
- pexels-omar-lópez-1182825-min.jpg - Pexel | copyright Omar López
-
From media/home/testimonials sub-directory - Github
- pexels-daniel-xavier-1239291-min.jpg - Pexel | copyright Pixabay
- pexels-pixabay-235534-min.jpg - Pexel | copyright Daniel Xavier
- pexels-tim-savage-903661-min.jpg - Pexel | copyright Tim Savage
-
From media/gallery sub-directory - Github
- pexels-anastasiya-lobanovskaya-1035682-min.jpg - Pexel | copyright Anastasiya Lobanovskaya
- pexels-andrea-piacquadio-3782968-min.jpg - Pexel | copyright Andrea Piacquadio
- pexels-andrea-piacquadio-788567-min.jpg - Pexel | copyright Andrea Piacquadio
- pexels-cottonbro-4842567-min.jpg - Pexel | copyright cottonbro
- pexels-cottonbro-5236991-min.jpg - Pexel | copyright cottonbro
- pexels-elle-hughes-1680172-min.jpg - Pexel | copyright Elle Hughes
- pexels-godisable-jacob-871494-min.jpg - Pexel | copyright Godisable Jacob
- pexels-godisable-jacob-923210-min.jpg - Pexel | copyright Godisable Jacob
- pexels-heitor-verdi-2529456-min.jpg - Pexel | copyright Heitor Verdi
- pexels-joshua-abner-3605015-min.jpg - Pexel | copyright Joshua Abner
- pexels-lucas-pezeta-2529375-min.jpg - Pexel | copyright Lucas Pezeta
- pexels-toa-heftiba-şinca-1194412-min.jpg - Pexel | copyright Toa Heftiba Şinca
-
From media/errors sub-directory - Github
- error_500-min.jpg - Freepik | copyright Stories
- error_404-min.jpg - Freepik | copyright Stories
- error_403-min.jpg - Freepik | copyright Stories
- error_400-min.jpg - Freepik | copyright Stories
-
From media/products/no_image sub-directory - Github
- noimage.png - Code institute
-
From media/products/not_found sub-directory - Github
- no-results-found-min.jpg - Free vectors | copyright BSGStudio
-
From media/products/product_images sub-directory - Github
- All product images - Code institute
Back to top
- 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
- Bootstrap 4 documentation - Bootstrap 4
- Creating-a-modal-image-gallery-with-bootstrap-components - css-tricks
- Bootstrap show.bs.modal Event - tutorialspoint
- hidden.bs.modal Bootstrap Event - tutorialspoint
- Favicon in django app - stackoverflow
- Readme file information - Tim Nelson Software Developer and Tutor at Code Institute
- Sending email django
- BadHeaderError with Python emails package, how to fix? stack overflow
Back to top