SHOE ADDICTION WEB STORE

OVERVIEW

Shoe Addiction is a website made as an academic project. We worked on it for 11 weeks, combining front-end design with back-end functionality to create an e-commerce experience where users can interact with the website's elements.

IDEATION

Our project aimed to understand client-server techniques while adding products to the website and constructing a real-time interactive database. We explored different e-commerce websites during the ideation process on Figjam, considering ideas like clothing, candy, video games, etc.

Eventually, we chose to create a shoe store website due to our team's shared interest in sneaker culture. We believed that by incorporating various shoe brands, styles, colors, etc., we could develop an extensive database for users to explore a diverse range of products.

RESEARCH

We studied existing shoe websites to understand their user experience and identified the necessary features to meet the project's front-end and back-end requirements. As a team, we brainstormed a list of features to determine which ones to include. Our research helped us identify the essential needs for an e-commerce shoe website.

Filter products in database by characteristics (colour, brand, size)

Add products to cart for future purchases

Sign-up/Sign-in page to store & retrieve user provided data

Favourite items as a signed in account

PROBLEM STATEMENT

Based on our research of existing shoe websites, our user experience aims to provide users with control over the content from our database. They should be able to search for shoes based on specific criteria such as brand or size. Additionally, we offer users the option to create an account for accessing advanced database features, while also allowing visitors to access basic features like product filtering without providing personal information.

DESIGN

FRONT-END

We wire-framed the website in Figma, selecting the pages to include and designing separate homepages for visitors and registered users. We created layouts for product pages and finalized the color palette and fonts. Shoe images were collected and utilized for banners, product images, and a homepage carousel.

With the design decisions settled, I started coding the front-end using HTML/CSS and Javascript, closely replicating the design and adding interactive features like hover animations for buttons.

BACK-END

While developing the website's back-end, we prioritized working on the database as it played a crucial role in various functionalities. We created an Entity-Relationship (ER) diagram to visualize the required data, including user account information, product details, and user-related data such as carts and favorites.

ER Diagram shows the logical relationships between entities in a database.

Using MySQLite, we customized the database to allow users to update or delete specific rows, such as items in the cart. Once the database was populated, we utilized MySQLite, PHP, AJAX, and JSON to build the website.

MySQL Database

MySQL handled database control, PHP connected the database to the HTML for user interaction, and AJAX with JSON facilitated asynchronous updates without page reloads. This was evident in the product filtering section, enabling visitors to browse products based on their preferences.

Database Functionality

RESULTS

The project resulted in a functional e-commerce website that fulfilled all the mentioned tasks. The database retrieved real-time data and updated the page accordingly, displaying information based on criteria such as shoe sizes. User information was also stored, enabling the creation of user accounts and saved products.

Check out a run through of the completed website:

LESSONS LEARNED

This project was a test for my team and I to implement newly learned coding languages. A challenge was grasping PHP, AJAX, and JSON and applying them uniquely to the website. Connecting the site to the database and integrating data retrieval with front-end elements was difficult but rewarding, as it expanded my skill set for future web applications.

A focus for improvement would be enhancing my understanding of JSON and AJAX for future projects. Overall, I take pride in our team's work, and this hands-on experience in back-end development has provided insights for the web development process as a whole.

PHP code for database connection is one of the many thing I learned

Check Out My Other Projects

FH Call Center Redesign

Valorant

Vancity Cycling

Pom & Chi

Recur

Styler