View Page

A straightforward redesign following a specified design. Most of this page is just CSS overriding the Yotpo plugin/app's control of this page, except for the Beauty Challenges section.

The Beauty Challenges section consumes Yotpo's Loyalty API. It searches through all available Earning Rules (which are things like Spend X to get 50 points) and through Shopify's Liquid I've added a block system to allow a user to customize which Earning Rules (based on the Earning Rule ID) are visible on this page, which are specifically only certain Beauty Challenges.

The Beauty Challenge tiles are created by taking the Earning Rule's point value (20 points), the details of how to progress/complete a challenge (Spend X to get 20 points), and include an expiry date for the earning rule. All of these options are customizable within the Yotpo app dashboard on Shopify.

The API also fetches a customer's action history (which earning rules, rewards, etc has a customer claimed successfully) and if a customer has successfully completed a Beauty Challenge, it marks the challenge as completed.

View CodeSandbox prototype

A work in progress. I collection action figures (primarily Transformers, some Lego, some others). While other alternatives to maintaining a database of items exist (other websites or apps, or an Excel file even), I wanted to make something myself.

At the moment: it's just a to-do list, but theres a long list of features to be added.

Current stack: React front-end only

Future stack: React plus MongoDB/Express/Node

View Page

While the online store transitioned to the Shopify 2.0 themes, which another developer was handling, I was in charge of creating the 2.0 collection template.

The new functionality of the collection page was to have endless scrolling along with filters specifically for the brands available on each collection.

Shopify by default doesn't support endless scrolling pagination, but with some HTTP request tricks, you CAN add parts of pages or in this case, the product card elements, on to the same page.

Since the content loads fast enough, it also lets me delete and update parts of the page, which is how the brand filter works. Click on any of the "Brand" tags on the lower left hand panel, and it'll delete all products on the page and load in products that match the Brand filter.

Almost all the main collections use this template, so you can browse larger or smaller collections.

There have been significant changes to the endless scrolling/filtering system for collections since I left Sukoshi Mart: the collections no longer have endless scrolling, the brand filtering still exists, but keeps things paginated.

View Codepen Prototype

Given the task of entirely recreating the Help Centre page on The Brick's website, I took inspiration from various other online stores, but one design I liked was Staples' Help Centre.

It looks fairly similar to the Staples design, but there was one thing that bothered me about it: searching for anything required loading a new page of search results. The Brick's Help Centre is fairly small, in comparison, so I thought it'd be a waste of resources to have a search system just for the help centre.

Instead, I thought about previous projects I have worked on, and remembered an instant search/filter system I tried making before, which filtered out data coming in from an HTTP request.

This Help Centre page instead has an instant search filter that hides elements that don't contain the current search term. It uses a CDN version of a NPM module, Mark.js, which highlights and removes the highlight from the search term, as the user types out a search term.

View Codepen Prototype
View Live version

A little UI element that displays what a product would cost if you purchased it with either the red The Brick card or the green The Brick card, which had different payment setups.

If the live link doesn't work, just find any other product on The Brick. There should always be an element (as of 2024 at least) near the product price that shows the finance cost.

While the live product design is just some basic styling and no actual moving parts, I was very proud of how this looked and felt to use.

View Codepen Source

Originally built as a Skyrim rogue-like run generator, as part of a massive Skyrim mod setup I was using to create a rogue-like Skyrim (after you'd die, you'd create a new character and start from scratch).

I switched it up since Skyrim Special Edition got a major update which broke a big chunk of my mods, and I was playing Elden Ring and thought of modifying it for Elden Ring.

View Codepen Source

A basic to do list in Vue, but with some design/styling I think works really well.

View Codepen Source

A timer built in Vue, with a few different time options.