Shoes And More

View the live website here

</br>

Welcome to the Shoes and More website! Shoes and More is an e-commerce website that sells shoes and accessories (bags, wallets, etc). It's completed with an authentication mechanism and stripe payments to allow users to safely purchased products from the site.

Please note that this website was created for the Code Institute’s Milestone Project 4 as part of their Diploma in Full Stack Software Development. The requirements are to make a full-stack website, using HTML, CSS, JavaScript, Django+Python, relational database, stripe payments, and other additional libraries as needed.

<br/>

Table of Contents

1. UX Development Planes
   A. Strategy Plane

   • Project Goals, User Goals, and Site Owner Goals
   • User Stories

   B. Scope Plane
   C. Structure Plane
   D. Skeleton Plane (Wireframes)
   E. Surface Plane (High Fidelity Mock-ups)

   • Color Scheme
   • Typography

2. Database Design

3. Features
   A. General Design Features
   B. Page Features
   C. Features to be Implemented in The Future

4. Testing
   Go to TESTING.md

5. Issues and Bugs

6. Technology Used
   A. Main Languanges
   B. Libraries and Frameworks
   C. Packages / Dependencies
   D. Database, Payment Service, and Cloud Storage
   E Tools and Programs

7. Deployment
   A. How To Use This Project
   B. Deployment to Heroku
   C. AWS Bucket Creation
   D. Connect Django to AWS Bucket

8. Credits
   A. Code
   B. Images
   C. Contents

9. Acknowledgements

---

<br/>

UX DEVELOPMENT PLANE

A. Strategy Plane

Project Goals

The primary goal of this project is to create an e-commerce website that works perfectly, is visually appealing in design, and intuitive for a first-time user. It allows users to perform not only the basic functionalities in an e-commerce website (such as sign up/login, ability to purchase items, and perform payments), but also to ensure that users have a great experience and more interactivity within the site through additional functionalities such as put items into their wishlist, and write reviews, and reading articles.

User Goals

The user is looking for:

• An online store/ website that is straightforward and intuitive to use, easy to navigate, and to make a purchase on the website.
• An online store/ website where the user can have other additional activities and engage more store.

The target user for this site is:

• Young adults, between 18 - 40
• Fun, fashionable people
• People who enjoy the convenience of using technology and social media

Site Owner Goals

The site owner is looking to:

• Be able to make money by providing products (and services) to the users.
• Manage products on the website.

User Stories

As a shopper I want to be able to:

1. Quickly identify what products/services the site sells.
2. Quickly identify deals and special offers.
3. Search for a product.
4. Identify a glimpse of the most popular products.
5. View all products, and easily navigate between categories.
6. Sort by price, by rating, and by popularity.
7. View the individual product's page and read the relevant information.
8. Read a product's review.
9. Easily select the size and quantity of the product, and add it to the shopping bag.
10. View the shopping bag with products added to it.
11. Update the shopping bag by adjusting the quantity of the products, or removing them from the shopping bag.
12. Check out and easily enter my payment information.
13. Feel my personal and payment information is safe and secure.
14. View an order confirmation after purchasing.
15. Receive an email confirmation after purchase.
16. Read relevant articles/ blogs about shoes or accessories.
17. Easily navigate within the site, through Navigation Bar and Footer.
18. Easily register for an account.
19. Find the FAQ section for my questions.
20. Contact the shop via a contact form.

As a registered user/ shopper, I want to be able to:

1. Access all functionalities that an unregistered shopper can do.
2. Easily log in or log out.
3. Easily recover my password in case I forget it.
4. Receive an email confirmation after registering.
5. Have a personalized user profile where I can see my order history and change my information.
6. Review products that I have purchased before.
7. Edit and delete my reviews.
8. Add products to the wishlist, so I can quickly find products I'd like to purchase.
9. Remove products from the wishlist, so I can remove products I don't wish to purchase.
10. Easily put the wishlist products into the shopping bag.

As an admin and store management, I want to be able to:

1. Add a product.
2. Edit or update a product.
3. Delete a product.

Back to top ↑

<br/>

B. Scope Plane

Based on all goals and user stories, a scope was defined for the site with room for future improvements.

Functional Requirements

The unregistered users will be able to:

• Sign up to the site by providing the username, email, and password.
• View all products and sort them by price, rating, and color.
• Search for products.
• View the product's detail.
• Add products to the shopping bag.
• Update and remove items in the shopping bag.
• Checkout and make a payment.
• Receive an email confirmation of the transaction.

The registered users will be able to:

• Do all things that unregistered users are able to do.
• Log in to the site by providing a username and password.
• View the profile page.
• Update delivery/contact information on their profile page.
• View order history on their profile page.
• Write reviews for products that they have purchased.
• Edit those reviews.
• Delete those reviews.
• Add products to their wishlist.
• Remove products from the wishlist.

The admin/ site owners will be able to:

• Have all functionalities as a registered user.
• Add a product to the site.
• Edit or update a product.
• Delete a product.

Non-functional Requirements

Users will be able to:

• View articles/ blogs about shoes, accessories, and fashion in general.
• View the FAQ page to find answers to their questions.
• Send a message to the store via contact form.
• Navigate easily and intuitively throughout the site.

<br/>

C. Structure Plane

The website was organized in a Hierarchical Tree Structure that ensures the user can navigate easily and intuitively. Below is the website workflow (which was designed using Creately).

There's a clear page access separation between unregistered users and registered users. While unregistered users can still purchase products and receive the confirmation via email, they are not able to:

• View their order history
• Give reviews (and edit or delete their reviews accordingly)
• Make a favorite list of products.

Those features mentioned are available for registered users.

Back to top ↑

<br/>

D. Skeleton Plane

Wireframes were created using Figma to design the navigation and interface of the website. The wireframes were created only for deskt