When I first started this project, I was not familiar with the customized settings required to calculate a dog’s calorie needs. I had experience with Shopify and initially tried using it for this project. However, Shopify was too costly, and I needed to rely on plugins to achieve the level of customization required. Unfortunately, I could not find suitable plugins to accomplish this.

After researching open-source eCommerce platforms, I discovered MedusaJS, an open-source platform built with Node.js and React.js. However, the version available at the time was 1.x.x, and I couldn’t find sufficient documentation for implementing a subscription model. Therefore, I decided to trust my instincts and proceed with a custom solution.

I chose .NET Core as the backend, Vue.js for the frontend, PostgreSQL as the database, and Stripe as the payment gateway. I had previously used Stripe in another project, so I was familiar with its functionality and features.

The primary reason for decoupling the frontend and backend was to ensure the project’s scalability and maintainability. This approach also allows for potential UI/UX changes to the customer-facing sections in the future. The backend was built using .NET Core to create APIs, Vue.js was used for the frontend because of its simplicity and ease of use, and PostgreSQL was chosen for the database as it is open-source, highly scalable, and free to use.

Initially, I was unfamiliar with implementing a subscription-based business model. Previously, my experience was limited to building webshops using platforms like WooCommerce and Shopify, which primarily featured multiple products and a straightforward checkout process. This project was different, so I conducted extensive research on subscription models, including resources from Chargebee’s subscription management documentation . Stripe’s built-in subscription model feature made it the easiest option to integrate into the application, especially given its compatibility with .NET Core.

At one point during the project development, the client frequently requested changes to the website’s color scheme. Although I had created separate components for UI elements, manually changing the colors for buttons and other components was time-consuming and added little value. Since I was already using Vue.js for the frontend (a framework I chose and mastered for its simplicity), I decided to explore PrimeVue, a UI library framework. PrimeVue 4.0.0 Beta, which included design tokens, was released around that time.

I decided to migrate the project to PrimeVue 4.0. Configuring it took very little time—less than half an hour—as I already had all the necessary components. The major benefit of using PrimeVue’s design tokens was the ability to change the entire website’s color scheme effortlessly by simply updating the tokens. This gave me the flexibility to address the client’s requests regarding color changes efficiently and with minimal effort. Thanks to the Styled Mode 💖 and Design Tokens PrimeVue Styled Mode , I could confidently meet client expectations while saving significant time and effort.