Visit the live Website : What You Need ➡️.
- Code Validation
- Lighthouse
- Cross Browsers Testing
- Manual Testing
- User Stories Testing
- Further Testing
All code validation has been done using text input. The code was copied from the source code in the browser. This allows to check HTML without getting error because of Jinja templating language.
W3C Markup Validation Service and W3C CSS Validation Service have been used to check all the pages of the website for semantic and syntax errors. The results show no errors and the code is valid.
JSHint was used to validate the JavaScript code for semantic and syntax errors. No warnings or error were found.
The results are positive, and the code is valid.
PEP8 online was used to validate the Python code for semantic and syntax errors.
The results are positive, and the code is valid.
- 3 warnings were found:
Two of those warnings are comming from signals beeing imported in apps.py of the checkout and products apps. They are designed to be used that way from my best knowledge and therefore were left with the warning.
the third warning is for 3 line too long from the Django boilerplate in settings.py. After discussing if I should mention this in the README with some colleagues, I realised that it was quite a pickle between beeing a professional or an amateur.
when running flake8 in the terminal the only other warnings are coming for auto-generated files from django (migrations).
Lighthouse is a tool provided by Google Chrome DevTools and allows to identify the site performance, accessibility and user experience on Mobile and Desktop.
All the pages from the website have been tested with Lighthouse.
Score given by the lighthouse are very good for the exception of performance issue on smartphone and some contrast issue that are negligeable.
- Manual testing was executed on several browsers (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari and Opera) and shows good functionality across them all.
- The responsiveness of the website for different viewport sizes was tested by dragging the window up, down, left and right.
- The following tests have been executed several times at different viewport breakpoints and on different devices.
- Friends, fellow Code Institute students and family members tested the website on different devices.
- Buttons change state/style
- on hover ✔️
- on focus ✔️
- on active ✔️
- on click and expected behavior happens ✔️
- Link change state/style
- on hover ✔️
- on focus ✔️
- on active ✔️
- on click and expected behavior happens ✔️
- Forms validation
- inputs/ content ✔️
- on submit ✔️
- Modal Triggers ✔️
- Clicking on the callout button brings the user to see all the products available on the website.
- The contact-us button is functional and redirect the user to the correct page section.
- The About-us button is functional and redirect the user to the correct page section.
- The Terms and Conditions of Use button is functional and redirect the user to the correct page.
- Clicking on contact us direct the user to the contact us page correctly.
- The contact us form information fields are prefilled is the user is registered and signed-in.
- If the form is not filled correctly, the user cannot submit/send.
- Feedback is given to the user for requested fields and incorrect values.
- When the form is filled in correctly the user can submit/send.
- Feedback is given for successfully sending message.
- An email confirmation is sent to the user and the message is saved successfully.
- Stacking and display of the products is responsive.
- The total number of products is displayed and adjust accordingly.
- More detailed search is available through the search menu.
- The sorting button is displayed and toggles when clicked.
- Sorting options are functional and display the correct and appropriate content.
- Price low to hight ✔️
- Price hight to low ✔️
- Rating hight to low ✔️
- Name Abc ✔️
- Name Zyx ✔️
- Sorting options are functional and display the correct and appropriate content.
- Clicking on a product brings the user on the product details page.
- All information are displayed.
- The quantity button to adjust the number of items is functional
- Add to bag button is functional.
- Reviews are displayed correctly.
- A move to wishlist button is displayed correctly.
- A back button allows the user to return the all products or the corresponding category search.
- Upon clicking the user is redirected to the correct page.
- Reviews are displayed correctly.
- Submit a review is only available and displayed if signed-in.
- A message informs the user that leaving a review is possible if signed-in.
- Submitting a review is functional.
- Feedback is given on submit.
- The product rating is updated successfully on submit.
- Search bar is displayed.
- Search categories are displayed.
- All categories are displayed.
- Each category present the correct information.
- When a category is selected, it displays the correct products.
- All categories are displayed.
- Sorting button is displayed with the search result page.
- Clicking on the Shopping bag icon brings the user to the correct page.
- Products and related information are displayed correctly.
- The quantity button to adjust the number of items is functional
- The delete item(s) button is displayed correctly.
- Subtotal is displayed correctly.
- The subtotal adjusts with the quantity accordingly.
- Delivery cost and Grand Total are displayed correctly.
- Delivery cost and Grand Total adjust with items and quantity accordingly.
- Keep shopping button is displayed correctly.
- When keep shopping button is clicked, the user is directed to the all products page.
- Proceed to checkout button is displayed correctly.
- When proceed to checkout is clicked, the user is directed to the checkout page.
- The shopping bag content remains in the browser unless the cache is clear or a purchase is made.
- It is clear when the bag is empty or contains items.
- The checkout page is displayed correctly.
- The order summary/details correspond to the shopping bag content.
- Products information with quantity and price are displayed correctly.
- Delivery cost and Grand Total are displayed correctly.
- If the user is signed-in and had previously added its details, the checkout form is correctly prefilled.
- If the form is not filled in correctly the user is given feedback, and he will not be able to submit the form.
- An option to save the delivery details is available.
- When the form is correctly filled and the user clicks on the complete order button, he is directed to the order confirmation page.
- Payment is processed.
- The payment intent is successfully created on Stripe.
- The payment amount corresponds to the shopping bag and order amount.
- A feedback message is displayed.
- A summary of the order is correctly displayed with the items, prices and delivery details.
- A confirmation email is correctly sent to the customer.
- The order is correctly added to the database.
- If the user close the page before the order is completed:
- The payment is processed correctly on Stripe using a webhook.
- The order is created correctly in the database.
- The email confirmation is correctly sent.
- Payment is processed.
- Clicking on the profile icon toggles different options depending on the user status:
- Create an account page is displayed correctly.
- An option to sign-in is provided if already a customer.
- If the form is not filled correctly the user will not be able to submit.
- When the form is filled correctly, the user is directed to the verify email page and a feedback message appears.
- The email confirmation is correctly sent to the email provided upon registration.
- Clicking the link provided in the email confirmation directs the user to the confirm email address page.
- When clicking on confirmation, the user is directed to the sign-in page.
- A confirmation feedback message is displayed.
- Sign-in page is displayed correctly.
- If the form is not filled correctly the user will not be able to submit.
- When the form is correctly filled, the user is successfully signed-in.
- A successful feedback message is displayed.
- If forgotten password is clicked, the user is directed to the password reset page.
- When clicking on reset password, upon giving a correct and existing email/username, the user receive an email to reset their password.
- Feedback is given to the user if the username/email does not exist or if successful.
- In the email received, clicking on the link given to reset the password, the user will be directed to the change password page.
- Clicking on change password upon entering a new correct password twice, a message informs the user that the password was successfully changed.
- Signing-in with the new credentials will allow the user to access his account successfully.
- If the user try to change his password with a previously used link he will be redirected to the bad token page explaining that the link was invalid. A new link is provided and directs the user to the reset password page.
- Signing-out directs the user to the home page.
- Account details page is displayed correctly.
- If the user has not previously saved any information an empty form is displayed inviting the user to enter his information.
- If the user has previously saved delivery information a prefilled form is displayed.
- Orders history page is displayed correctly.
- Orders are displayed from the most recent to the oldest.
- Clicking on the Order details button directs the user to the order details page correctly.
- The order details page is displayed correctly.
- The back button is displayed correctly and directs the user back to the orders history page.
- To add an item to the wishlist, the user must be registered and signed-in.
- A heart icon, for adding to the wishlist, is displayed correctly on the products.
- The wishlist page is displayed correctly.
- The user can remove an item from the wishlist.
- The user can add an item to the bag by clicking the add to bag button.
When clicking on the profile icon, if the user is a superuser/Admin an extra link is displayed: Products management.
-
Clicking on the store management link directs the superuser to the store management page correctly.
The search and sort options for a superuser are the same as a user, so the superuser can browse the products exactly the same way. The difference is that with superuser credentials, when selecting a product, other options are available: Edit/Modify and Delete.
-
When clicking on add product button the superuser is correctly directed to the add product page.
-
- If the form is not filled correctly the superuser will not be able to submit.
- Feedback is given to the superuser for requested fields and incorrect values.
- When the form is filled in correctly the superuser can submit.
- Feedback is given for successfully adding product.
- The product is correctly created in the database.
- Superuser is directed to products details page.
-
A product can be modified or deleted by clicking on Edit or Delete links.
- When clicking on the edit link, the superuser is correctly directed to edit product page.
- If the form is not filled correctly the superuser will not be able to submit.
- Feedback is given to the superuser for requested fields and incorrect values.
- When the form is filled in correctly the superuser can submit.
- Feedback is given for successfully modifying product.
- The product is correctly modified in the database.
- Superuser is directed to the product details page.
-
When clicking on the delete button, the superuser will be prompted with a modal (defensive design) for confirming the action.
-
As a user, I want a user-friendly, simple and interactive website.
- The website is build with simplicity and consistency.
- The website uses clean and spacious design.
- The website applies all the accessibility protocols for an easy and good user experience for all.
- The Navigation bar is fixed and always accessible providing quick access to the main features of the website.
- The Navigation bar is designed to provide users with feedback on where they are "located" on the website.
- All action taken by the user is met with feedbacks providing an interactive interface and playful content.
-
As a user, I want to be able to access the website on different devices with the same experience.
- Content size and arrangement is adjusted with the viewport size without compromising features.
- All features are kept the same regardless viewport sizes, providing the same experience no matter the device.
-
As a user, I want to find out what is the website purposes.
- The home page provides all the information that a new user needs.
- The About section of the home page describes the website goals and motivation.
- The home page content provides information on the website focus.
-
As a user, I want to search products by category.
-
As a user, I want to search for specific products.
- The menu provides a search button that opens the search options.
- The search options include a search bar that provide the user with the mean of search per keywords or for a specific item.
-
As a user, I want to see more details about a product.
-
As a customer, I want to easily identify what is the price of the product.
-
As a customer, I want to easily identify if the product is available.
-
As a customer, I want to add/remove/edit product(s) in my shopping bag.
- The shopping bag provides the user with all the features needed.
- Users can add items to their bag from products, product details and wishlist page.
- Users can modify the quantity of an item using plus or minus button or by direct input and clicking update.
- Users can remove product from their bag with the remove button.
-
As a customer, I want to easily access my shopping bag.
-
As a customer, I want to make a purchase.
-
As a customer, I want the purchase process to be easy and secure.
- The website provides a full payment system implemented with stripe payment system.
- By clicking on the Secure Checkout button of the shopping bag, the user will access the checkout payment and delivery page.
- Completing the checkout by clicking on Complete Order on the checkout page will place the order and process the payment.
- The process is secure and quick.
- All relevant information will be prefilled if the user is register, signed-in and had previously provided and saved those details. This will potentially be true for a second purchase or purchase made after searching the website content.
-
As a customer, I want to be notified of the purchase I have made and be provided with a receipt.
- Feedback is provided via a popup message to the user on a successful purchase.
- An email confirmation is sent to the user with the order details and delivery address.
-
As a customer, I want to contact the website owner about a past order.
- A contact us section is available on the home page or via the home button in the navigation menu.
- An unregistered user can report an issue by answering the email confirmation of the order received when purchasing a product.
- If the user is registered and signed-in, orders history is accessible via the profile button in the navigation menu.
- Secure registration features are available on the Django framework.
- Those features have been implemented and user can securely create/access an account.
-
As a user, I want to create an account.
- Create an account is accessible from the profile button of the navigation menu.
-
As registered user, I want to sign-in and sign-out easily.
- Signing-in and out of the website is easily accessible from the profile button of the navigation menu.
-
As registered user, I want to change my password if forgotten or not safe anymore.
- When signing-in, the user have the option to click on reset password in order to generate a different password if it became unsecure or forgotten.
-
As signed-in user, I want to save/update information to my profile for a better and easier experience.
- Account details is accessible from the profile button of the navigation menu.
- The account details page stores all the delivery information about the user and prefilled all relevant fields accordingly when the user is signed-in.
-
As signed-in user, I want to save products I like for a future purchase.
- Signed-in users have the possibility to saved products to their wishlist by clicking the heart icon available on a product.
-
As signed-in user, I want to see/edit my wishlist.
- Signed-in user can access their wishlist via the profile button of the navigation menu.
- Users can delete item from their wishlist.
- Users can create different wishlist.
- User can add to their bag from the wishlist
-
As signed-in user, I want to access my previous orders.
- Signed-in users can access their order history via the profile button of the navigation menu.
-
As signed-in user, I want to leave a review on a product.
- Signed-in users can write review on a product from the review form available on the product details page.
- When a user with admin credentials sign-in, a Store management page is accessible from the profile button of the navigation menu.
- The admin/superuser status provides access to extra features.
-
As an Admin, I want to add/edit/delete products.
- Admin can access modify or delete features from the product details page.
- Admin can add a product with the add product button of the Store management page.
-
As an Admin, I want to see orders.
- Admin can see orders from the Django admin interface.
-
As an Admin, I want to manage customer queries.
- Admin can access and deal with customer queries from see messages button of the Store management page.
-
The website has been tested by fellow students, slack community, friends and family.
-
All the issues raised have been addressed.