Overview

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. Derek Kniffin was the lead front end developer in the project organizing how the Rails view component was organized and Maria Ferrando was working closely with the design team and 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.

Overall, it took longer than the estimated time to complete this project and we later implemented dark mode post release as well. The longest part was paying off complex tech debt, integrating 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. 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.

Structure

We organized the structure into 3 layers.

I’ll call them Crust, Mantle, Core instead for more own analogy, but we called it something else during my time at Quimbee.

Core

These are your simplest components and every other component or page will depend upon these components.

Example: ButtonComponent, IconCompoment, AvatarComponent

These are your most barebones components and are not specific to any business logic.

Mantle

These are more complex components that use your Core component, but are not exactly specific to business logics or models.

Example: ProgressBarComponent, TableComponent, ModalComponent, CardComponent

Crust

These are very business specific components that may depend on using specific models, setups, and business logic in order to function.

Example: BookmarkCardComponent, CLECardComponent, QuizProgressBarComponent, CourseCardComponent

Other Structures

We later created a few other structures such as Layouts for specific page containers and Basic for a style refresh reference to view specific fonts, colors, typography, and icons.

Things I Worked On

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.

Icon Bank

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

<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>

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 incase the included script couldn’t be loaded, it would cause a handful of feature specs to fail.

StimulusJS Controllers

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 had help from Derek Kniffin to start off with that since the Style Refresh project was when we first adopted StimulusJS. It was a lot nicer and organized to use than JQuery, React, and VueJS.

I alongside Derek also worked on refactoring 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 hell. At the end of the day, Stimulus at its core helps keep Javascript lite by having “server-side rendered HTML at their core, then add sprinkles of JavaScript to make them sparkle”.

Table Component

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.

With the introduction of Coachmark JS in some parts of the application, the TableComponent will need to be redesign in the future to be responsive again as changing the window view with coachmarks enabled can be a buggy experience.

Componentizing The Settings Page

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.

Modals

Derek helped work on a lot of the Stimulus controller part for the modals 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.

Conclusion

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 was a lot larger as we paid off tech debt, had an entire plan to componentize each individual pieces, future proof future implementation, 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 and it couldn’t be done without each and every one of us.