From 2022-2023, I worked on one of my biggest redesign project at Quimbee. I was the full stack developer on the job coupling together the backend parts of the redesign project while tackling a lot of new modules that needed to be made for the style refresh. I worked with 2 other front end developers in the project organizing how the product was organized in Rails view components and the design team on Figma to ensure that the stylesheets align with the product branding.

We utilized Hotwire StimulusJS for any interactive elements that's needed for our ViewComponents to keep our Javascript light. We had existing custom Javascript scripts for any customization that's page specific as well as outdated Angular 1 code that we also had to refactor as well as part of tech debt to pay off along this project.

We also integrated it with other ongoing backend features such as Stripe checkouts, and paying off tech debts from dependency hell such as removing all JQuery and Angular code in conjunction to the rebranding effort. We were essentially creating new components for each individual pieces, coupling them together to larger components for specific business logic, and then implementing each page one by one.

We organized the structure into 3 layers.

The lowest level layers of components are for the most reusable pieces such as buttons, icons, tables, etc. The layer above that utilizes those components together such as specific cards and progress bars. The highest layer are business related components that utilizes existing business models alongside the lower level components.

Below are some of the various components I've worked on during this project. Some are more internal that requires a subscription to see such as the quizzes progress bar.

I implemented the icon banks via https://ionic.io/ionicons/v4/ and installed it via

For custom icons, there was a helper method that includes those icons and I have the custom icons in our svg-icons folder and the helper method handles on whether we grab a default icon from ion-icons or use the custom one depending on the naming.

There were things that I wish I did a bit differently like having a better way of stubbing custom icons in case the included script couldn’t be loaded.

There were a few StimulusJS controllers I implemented to use in some of the complex pages (most notable the checkout pages). Since we have specific radio buttons that hide/show certain dropdowns depending on how users want to interact with them. Some parts will require a custom complex component that calls a specific hide/show Stimulus controller to hide/show the parts that's needed.

I helped refactor a lot of existing JQuery controllers into StimulusJS controllers. This helps keep the Javascript section lighter and minimize dependency which helps speed up our front end page speed of unused Javascript and dependency issues.

Above is an example of one of the feature that the table component must support. This one is a more complex component because it needs to support for all the different type of states. Most tables must turn into a dropdown component when swapped to mobile view for more responsive navigation.

This was accomplished by the hide/show StimulusJS controller to hide the web view table, and display a dropdown component on mobile view. Depending on certain parameters, some tables will stay the same if dropdown mode is disabled or simply stack the rows as columns instead. This component have many options and parameters which made this complex, but flexible to use with various business requirements.

There were a lot of partial files scattered for the account settings page. A handful of those rows I've made into a specific account setting component and utilize some helper methods to determine what state a user is whether they have a specific subscription to a specific product, expired subscription, cancelled subscription, or trialing subscription. With that I populate each row based on the information given to me.

There's a lot of backend work that's needed to be done for this page due to the complexity of various product purchased or subscription subscribed states. Some products are 1 time purchased based and others are subscription based.

Turning each row into components was the first step to implementing the redesign work for the settings page and allowing it to be reusable and expandable.

This requires Stimulus controller work on top of the Rails compoment as modals are very interactive on where to click to open/close, fit content and buttons, and have a responsive scrolling feature. I helped bug fix various issues that arise when working on modal including items overlapping on modal, text overlaps, scroll bar features, etc.

This was the largest project I've worked on at Quimbee. I've worked on a design overhaul as well in FormulaFolios where we migrated from InDesign to Figma and upgraded Advisor Portal to a new design branding, stylesheet, and make it match with the Figma composition as well as resolve any accessibility violations we found along the way.

The redesign project at Quimbee invovled paying off tech debt, componentizing each individual pieces across the website, future proofing implementations, and improve performances while we were at it. The end result was a success and made things a lot easier to work with in the future. There were various other tasks, components, and progresses I hadn't mentioned in this project that I've worked on but throughout the entire duration of the style refresh project, but it was made possible by a joint collaboration between the design team, dev team, and QAs.