ComfyVibes is an e-commerce website that my partner
and I worked on as our final project for our Internet Computing course.
The idea behind the creation and design of ComfyVibes, was to create a clothing website that is aesthetically pleasing, easy to navigate from the user’s perspective,
all while offering as much variety to the customer as possible with a range of options of merchandise to select from.
With that, we decided to focus mainly on Menswear with some Womenswear as well - all comprised of jackets, sweaters, shoes, etc.
Hope you enjoy, and wished this website was real enough to buy from!
___________________________
Software used to create ComfyVibes:
Atom
Code used to create ComfyVibes:
Javascript, HTML&CSS, PHP, MySQL Database
___________________________
COMFYBIVES
HOME PAGE
Figure 1
Figure 1.1
Figure 1.2
Figure 1.3
Figure 1 - When the user reaches the homepage of ComfyVibes, he/she is met with a JavaScript pop-up message that welcomes the person to the website and can log in to their account on the top left corner, with their account information upon clicking "Close".
Figure 1.1 - Once the user of the website logs in to their account (if they do not have an account, they can still proceed to shop as normal as a guest) - the user will be able to access the "About" page to access basic information about the company, its history, etc. Alongside that, the user can view their "Cart" and their account, which is all located in the top left hand corner of the homepage.
Figure 1.2 - When the user reaches the middle of the homepage, the user is met with the option to browse through Mens Sweaters, Jeans, and Jackets by simply clicking "Shop Now!”.
Figure 1.3 - When the user scrolls to the end of the homepage, he/she can tap on the "Sale" page where they can access menswear and womenswear that are on sale. Alongside that, the user can reach the "About Us" page, "Return Policy", and "Contact Us".
LOGIN PAGE
Figure 2
Figure 2.1
Figure 2.2
Figure 2 - In order to create the Login page of "ComfyVibes", my partner and I used the MySQL database. In Figure 2, the user logs in with their designated username and password to access their account.
Figure 2.1 - Once the user is logged in, he/she is met with a message that notifies the user that they have been successfully logged in.
Figure 2.2 - If the user enters wrong information regarding their username and/or password, the user is then notified that the login was unsuccessful given that the designated username and/or password does not match to the corresponding user.
APPAREL - MEN
Figure 3
Figure 3.1
Figure 3.2
Figure 3.3
When the user reaches the Men's Apparel section, he/she is able to view Mens Sweaters, Jeans, and Jackets.
As demonstrated in Figure 3.3, when the user clicks on any merchandise he/she has the ability to pick the size the user would like to purchase, and add the product to their cart while also receiving full details of that product (i.e. - product details, product code, about information, price, etc.).
APPAREL - WOMEN
Figure 4
Figure 4.1
For the Womens' section of Apparel, the user is able to browse through jackets, and receive full product details as well as make a purchase, as demonstrated in Figure 4.1.
SHOES - MEN & WOMEN
Figure 5
Figure 5.1
When the user reaches the "Shoes" section, it is made up of shoes for both men and women to choose from.
As demonstrated in Figure 5.1, when the user selects any pair of shoes he/she will be met with the description of the (product, price, size, etc.) and will be able to add it to their cart for checkout.
APPAREL - WOMEN
Figure 4
Figure 4.1
For the Womens' section of Apparel, the user is able to browse through jackets, and receive full product details as well as make a purchase, as demonstrated in Figure 4.1.
SALE - MEN & WOMEN
Figure 6
Figure 6.1
When the user reaches the "Sale" section, it is comprised of items on sale for both men and women.
CART
Figure 7
Figure 7.1
Figure 7.2
-
Figure 7 - When the user reaches the homepage of ComfyVibes, he/she is met with a JavaScript pop-up that welcomes the person to the website and can log in to their account on the top left corner, with their account information upon tapping "OK".
Figure 7.1 - Once the user of the website logs in (if they have an account, if they do not have one they can still proceed to shop as normal) - the user will be able to access the "About" page to access basic information about the company, as well as their "Cart" and their account, all accessible through top left hand corner.
Figure 7.2 - When the user has made their purchase, a review of their order details is displayed.
THE END!
*Given that this website operates with PHP and MySQL database, I have not been able to find a way to provide the live link (rest assured, the live link does exist - just not on here!).