• As a shopper I want a mobile friendly website layout so I can use my phone for making purchses.
• As a shopper I want to view a list of all the products in stock so I can select some for purchase.
• As a shopper I also want to see the details of a particular product so I can learn more about its description, available sizes, price.
• As a shopper I want to see my shopping basket at all times so I can stay within budget.
• As a shopper I want to be able to easily identify deals and specials so I can take advantage of the savings.


• As a shopper I like to be able to sort products by name, description or category so I can identify the best priced or best rated product according to my needs.
• As a shopper I want to easily identify the number of results for my search so to know if the product I am looking for is available.
• As a shopper I want to select size and quantity of a product and be able to adjust these in the shopping basket to ensure I get the right item.
• As a shopper I want to easily enter my payment information and feel confident this data is safe to check out hassle free.
• As a shopper I like to be able to see an order confirmation after checking out to ensure there are no mistakes in the order.


• As a site user I want to be able to register so I can have a personal account where to see my profile.
• As a site user I want to have an easy login/logout process to access my account information.
• As a site user I want to easily be able to recover access to my account if I forget my password.
• As a site user I want to receive an email confirmations to know my registration was successful and to see order confirmations.


• As a store owner I want to be able to add, update and remove items so to have an up to date database of products, with new products in, changes in prices or images/description and removing products that aren't available for sale any longer.

• HTML5
• CSS3
• Python 3.8.2
• Django 3.0.7 | as python web framework
• Javascript
• Git | to handle version control
• GitHub | to store the project code remotely
• PIP | to install the tools needed for this project.
• Stripe | as payment platform
• Heroku | for deployment
• AWS S3 Bucket | to store static files
• Django Crispy Forms | to style django forms
• Postgresql

• Google Fonts | to style the website fonts
• Font Awesome | to provide icons for the online store
• Bootstrap 4 | to simplify the structure of the website and make the website responsive
• jQuery

Product review page for customers to give feedback on purchased products.

Wishlist for users to pick products and "favourite" them before deciding on a purchase.

Fashion blog showcasing the products available thru the website.

Social media linking.

This blend of gold, purple and black bring to mind words such as wealth and extravagance. Accordingly, this combination can be applied to designs related to fashion, luxury and high-end products.

• #806543
• #33266e
• #111111
• #542f34
• #a6607c

• HomePage Image by Anastasia Gepp from Pixabay
• Photo by Khaled Ghareeb on Unsplash here. Catalogue:1568252542512.jpg
• Photo by Khaled Ghareeb on Unsplash here. Catalogue:1568251723346.jpg
• Photo by Anna Logacheva on Unsplash here. Catalogue:1559034750.jpg
• Photo by Anna Logacheva on Unsplash here. Catalogue:2669.jpg
• Photo by Bella Zhong from Pexels here. Catalogue:3782786.jpg
• Photo by flat hito from Pexels here. Catalogue:904350.jpg
• Photo by Caroline Attwood on Unsplash here. Catalogue:1586495777744.jpg
• Photo by Alexandra Maria from Pexels here. Catalogue:336372.jpg
• Photo by Laura Chouette on Unsplash here. Catalogue:1584096006933.jpg
• Photo by Laura Chouette on Unsplash here. Catalogue:1590156352256.jpg
• Photo by Scott Webb from Pexels here. Catalogue:66354.jpg
• Photo by Jess @ Harper Sunday on Unsplash here. Catalogue:1588056421330.jpg
• Photo by Sabrinna Ringquist on Unsplash here. Catalogue:1586104237516.jpg
• Photo by Sabrinna Ringquist on Unsplash here. Catalogue:1588445046108.jpg
• Photo by Laura Chouette on Unsplash here. Catalogue:1588680388198.jpg
• Photo by Laura Chouette on Unsplash here. Catalogue:1588159343745.jpg
• Photo by Laura Chouette on Unsplash here. Catalogue:1587467495807.jpg
• Photo by Laura Chouette on Unsplash here. Catalogue:1587017539504.jpg
• Photo by Laura Chouette on Unsplash here. Catalogue:1582121600983.jpg
• Photo by Laura Chouette on Unsplash here. Catalogue:1590739209058.jpg
• 'No image available' photo Author: Ahkâm

• The product descriptions used to create my datasets were taken from JJ's House Website and Littlewoods Ireland.
• The logo was created in Canva.
• The favicon was created with the Favicon & App Icon Generator.
• All the images were compressed in TinyJPG.
• I used {JSON formatter} to validate my datasets.

• Create requirements.txt file CLI --> pip freeze > requirements.txt
• Create Procfile (web gunicorn fab_by_tiny.wsgi:application)
• git add and git commit the new requirements and Procfile, then git push the project to GitHub
• Login to Heroku through terminal --> heroku login
• Create Heroku App. Give it a name and set the region to whichever location closer to you
• From the Heroku dashboard of your newly created application click:
• -->Deploy
• -->Deployment method
• -->GitHub
• Confirm the linking of the Heroku app to the correct GitHub repository
• In the Heroku app dashboard click on --> Settings --> Reveal Config Vars
• Set the following config vars:
• "DEVELOPMENT": "1",
• "DEBUG": "True",
• "SECRET_KEY": "django_secret_key",
• "EMAIL_ADDRESS": "your_email_address",
• "EMAIL_PASSWORD": "your_email_password",
• "DATABASE_URL": "your_database_url",
• "STRIPE_PUBLISHABLE": "your_pk_test_number",
• "STRIPE_SECRET": "your_sk_test_number",
• "AWS_SECRET_KEY_ID": "your_aws_secret_key_id",
• "AWS_SECRET_ACCESS_KEY": "your_aws_secret_access_key_id"

Both AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY can be obtained from AWS Services.

Testing

The responsiveness of the website was checked mainly in Dev Tools.

Manual Testing

Manual testing was performed on the following made and model devices: iPhone11, iPhone X, iPad Pro, Motorola Moto G Play, Samsung J7 Prime, iPhone6
• Click --> logo and verify being redirected to home page.
• Click --> home and verify being redirected to home page.
• Click --> login and verify being redirected to the sign in page.
• Click --> register and verify being redirected to the register page.
• Click --> product management and verify being redirected to the product management page.
• Click --> profile and verify being redirected to the profile and order history page.
• Click --> basket icon and verify being redirected to the basket page.
• Click --> checkout and verify being redirected to the checkout page.
• Log in with an unregistered username and password and verify that an error message appears.
• Log in with a registered username but wrong password and verify an error message appears.
• Log in with a registered username and correct password and verify being redirected to the home page.
• Close the page and open it again and verify the user is still logged in.
• Log out and verify being redirect to the logout page.
• Refresh the page and check if you are still logged out.
• Register with a username already being used and verify an error message is displayed.
• Register with an invalid email address and verify an error message is displayed.
• Fill in the form correctly and click --> checkout securely.
• Check all CRUD operations working properly under product management
***ongoing***

Validation

CSS

Jigsaw was used for validation of css code.

HTML

HTML validator was used for validation of HTML code. Errors were thrown on the raw HTML code by the use of Jinja2 templating language which was not recognised by the validator.

Python

PEP8 was used to validate Python code and did not generate significant any errors.

HTML Beautifier

Minify Code was used to beautify HTML code.

Resources used

• For more on Bootstrap toasts.
• For CSS triangle.
• Django tutorial FreeCodeCamp.
• Django documentation

Acknowledgements

• The Code Institute Slack community, where I have found many answers to many questions and learned a huge amount by reading through the posts.
• w3schools.
• Stack Overflow.

Disclaimer

The contents of this website are for educational purposes only.