Floorigami

In early 2020, I worked on an ecommerce product for Shaw Floors that enabled customers to mix-and-match flooring styles to create a custom "tiled" look in their rooms. Users can enter the size of the room they're shopping for, and the site will calculate their cost based on square footage.

The site was content-driven, and I worked with a team of back-end developers who decided to implement the back-end with Kentico. I led the front-end effort and implemented the front-end with Vue.js, HTML, and Less.

I reached for Vue as the framework because I knew several of the components would require somewhat complex logic for the user interactions. For example:

• Looping over items on the product landing page was a perfect candidate for the v-for directive, especially since we had a filter that allowed users to change how items are sorted (featured, alphabetically, or by price). I built a search panel that would also list search results and resources with the same directive, only without the need for filtering.

• There is a calculator for users to input the dimensions or square footage or their room and view the number of boxes they'd need to order to cover the space. This needed to be reactive, meaning it would need to automatically update the count of boxes whenever the input changed, so this was a use case for two-way data binding with v-model.

• Finally, I built the functionality for Add to Cart and Save for Later with a panel that allowed users to increment or decrement the number of boxes for each item in their cart and display a running subtotal. The subtotal was a computed value that would need to automatically update, I achieved this with the v-bind directive.

There are a few other instances of components that benefited from built-in directives, but I won't list every single one. If I hadn't implemented Vue or any other front-end framework on this project, I would've had to manually handle re-rendering elements on the page whenever user input changed. By committing to the decision, I was able to write fewer lines of custom code, prevent potential bugs for edge cases, and deliver a working product within a reasonable timeline.