The live website can be found here.

PS Classics is an online database dedicated providing customers with guitars and guitar accessories.

Documentation on user stories, testing and deployment can be found in TESTING.md

This website is designed with these users as the focus.

Visitors can browse and purchase instruments and accessories online.

The registered user has the ability to add reviews to products and save their delivery information to the profile.

The Administrator has the ability to add r, remove and update products in the store

This site is primarily a B2C wesite, and proof of concept for a working ecommerce platform. The goal is to provide the user with an intuitave experience, and the ability to browse and purchase instruments online.

Visitors should be provided with enough information quickly to determine that this is an online shop. The user will be able to navigate the site via the navbar. They will be able to make a profile and leave a review on products. They will be able to make a purchase using a credit card. The user will be able to view upcoming showcases where they can see the products in person. The admin will have the ability to update the store.

The Logo/Brand is always visible at the top left of the page, in the navbar and will verify for the user that they are in the right place. This also acts as a home button which will redirect the user back to the homepage. The homepage will appear first with the navbar providing the user to other pages on the site. On mobile devices the navbar links will be available to the right via a dropdown 'hamburger' icon.

1. Home
2. Shop
3. Showcase
4. Account (Login/Register)
5. Cart

1. Home
2. Shop
3. Showcase
4. Account (My Profile/Logout)
5. Cart

1. Home
2. Shop
3. Showcase
4. Account (My Profile/Product Management/Logout)
5. Cart

1. Update Product
2. Delete Product

These are only accesible to the site admin via the products and product details page.

The wireframes were constructed using paint.net.

The color scheme mainly consists of grey white black and an approximation of dark wood. The background is a blue to dark brown/gold gradient that exists across the entire site. I chose these colors because I believe mimic the imagery of the luthiers workshop.

The site scales relatively well from small screens to large. Some issues can be found however. These will be discussed in the testing section.

The logo is present at all times at the top left of the page. It does not take up a large amount of space, but is prominent across the site and provides the user with a link to back to the homepage at all times.

The user can navigate the site using the navbar. The navbar will collapse on mobile devices and can bia accessed via a 'hamburger icon'.

The hmepage simply contains a hero-image and a text blerb.

By clicking on the 'Shop' link in the navbar the user will be brought to the product directory page. This will list all of the products in the database. Alternatively the user will be brought here with the games filtered by the methods specified above. The store page contains a search bar which allows the user to search for an item via a text input The Store page also contains dropdown filters which allow the user to filter the store by category

• Electric Guitars, Electric Guitar Strings, Electric Guitar Accessories
• Acoustic Guitars, Acoustic Guitar Strings, Acoustic Guitar Accessories
• Bass Guitars, Bass Guitar Strings, Bass Guitar Accessories

The Showcase Page consists of a table listing the upcoming events including the Location, Date, Time and Admission Fee

The account icon will trigger a dropdown menu for the following options

New users can register an account with a username and password.

Users who already have an account can log in here using their username and password.

Logged in users can log out here.

This is is only visible to the admin. It provides a link to the Add Product Page.

The add product page provides the admin with a form where they can input the product fields such as name, description, image, price. The product can then be added to the store.

User can view the products full details by clicking on a product card from either in the store page. This will contain the product's image, description, and the ability to either add the item to the cart or continue shopping. This page also contains the review section whereby users can see reviews left by visitors, or add their own if they are logged in to a registered account

Only visible to the admin on the product card or in the product details page. The delete button will delete the itemn from the database. The edit button will direct the admin to the update product page where they can alter the products details and price

The cart allows the user to see the items they have clicked to purchase. Items can be removed, and quantities can be updated here before proceeding to the checkout

The Checkout will provide users with the ability to input their billing information and purchase the item. The billing information can also be save to the user profile so that they don't need to fill the form fields every thime a purchase is made.

• HTML5 To provide the base structire of the web pages

• CSS3 To provide the styling of pages

• Bootstrap To simplify page layout and use of classes for simpler styling

• Javascript To provide the site interactivity

• jQuery Simplifies interactive web design.

• Font Awesome Provides the icons used across the site

• Google Fonts Provides the fonts used across the site

• Gitpod provides the development environment

• GitHub hosts the files uploaded during production

• Heroku A cloud platform for hosting the app.

• Amazon Web Services For storing image files and css

• Django An open-source Python framework that is designed for quick launches.

• Stripe For processing card payments

• Paint.net For designing the wireframes and editing images used across the site.

The images and data for each product in this project were sourced on thomann.de.

The hero image was sourced from https://stephenarnoldmusic.com/sonic-branding/harp-guitar-banner/

https://www.w3schools.com/ was used for fast queries, mainly to check syntax and css parameters.

The Code Institute provided most of the educational resource required to build this project and this project is modelled heavily on the Boutique Ado Walkthrough project

Stack Overflow contained many helpful threads which were queried during development.

The Slack community and my fellow students at code institute for providing ispiration and assistance.

This website is built purely for educational purposes.