Candle making requires blending various supplies correctly. Initially, we developed a system for inputting comprehensive product data into the backend. With this foundation established, we created a product configurator that accurately calculates the appropriate wax quantity and wick size based on the chosen container, batch size, and fragrance intensity.
VueJSSolidusAglolia
The UI was the easy part, the technical implementation of a product that can have products was the real challenge. I helped CandleScience to implement a new product type that can have multiple products as its components. I could leverage a custom NuxtJS endpoint to cache the initial Fragrance List which is fetched by Algolia.
NuxtJSCloudflare WorkerAglolia
Typescript & JsonAPI
The initial redesign of candlescience.com has been a result focused effort. To achieve good maintainability and ease the use of the already established JsonAPI I introduced Typescript to the crucial parts of the website.
NuxtJSTypescriptJsonAPI
Always change a running System. Nuxt2 to Nuxt3
As Vue2 approached its end of support on 12/23, we were compelled to upgrade to Nuxt3. Although we refactored parts of the codebase to improve it and eliminate a significant amount of technical debt, this was still the largest project I've worked on, with the primary objective of ensuring that there were no discernible changes for the end customer
VueJSNuxtJSViteVitestComposables
Performance is key
This was not a typical project with a clear beginning and end, but rather an ongoing and engaging initiative to monitor the page and implement performance optimizations whenever viable and appropriate.
CalibreWebpagetestWebPLazyloadIntersectionObserver
Individual Shipping requires a custom checkout
It's an absolute necessity for e-commerce to have fast and reliable shipping. To match the custom shipping options of CandleScience I helped to design and implement a checkout flow that is tailored to their needs.
FigmaVueJSVuexBraintreeSolidus
Accessible E-Commerce
After an comprehensive accessibility audit from an external agency I helped CandleScience to implement the necessary changes to make their e-commerce accessible.
HTMLVueJSNuxtJSDequeLighthouseAxeVoiceOverTalkbackJaws
Applying a new design for a running e-commerce
I helped CandleScience to implement a redesign from scratch. For long-term maintainability I introduced the concept of a small scale design system and self-contained components to establish a coherent user experience with low maintenance effort.
VueJSNuxtJSCircleCINetlifySCSSStyleguideComponent LibraryResponsiveAccessible