- 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.
Nr.47 - Glamorous and Fashion-ForwardThis 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"
- 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***
- For more on Bootstrap toasts.
- For CSS triangle.
- Django tutorial FreeCodeCamp.
- Django documentation
- 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.
Both AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY can be obtained from AWS Services.