Building MyZubster: Turning a Marketplace Demo Into a Real Product Experience

Over the past few development sessions, the author has been working on a significant transformation of MyZubster, focusing on the Marketplace, especially in terms of the demo experience, payments, subscriptions, and deployment workflow. Initially, the Marketplace demo showcased only a few categories, but the team has since expanded it to cover all 12 categories, including Seeds, Plants, Produce, Clothing, Accessories, Event Equipment, Tools, Services, Volunteering, Pet Adoption, Lost & Found Pets, and Pet Services. This change ensures that the demo accurately reflects the actual platform structure.

To make the Marketplace demo more interactive, the team added features like category, location, text, and payment-type filtering, richer listing details, and category-specific information. Additionally, a simulated request flow was implemented to avoid creating orders, payments, messages, or personal data during demo interactions.

The team recognized that not every interaction in a marketplace is a product, particularly in categories like volunteering, lost & found pets, and pet adoption. To address this, the demo began incorporating category-specific semantics, allowing for diverse interactions without adhering to a single e-commerce model.

The team also put effort into enhancing the visual demo layer, moving beyond emoji-only cards to dedicated MyZubster Marketplace visuals. These visuals are now integrated into the demo experience, connecting with actual category filters so users can move seamlessly from discovery to exploring demo listings. The team encountered a production bug where the PNG files existed in the repository, but due to routing issues, the browser was intercepting the requests and displaying the SPA HTML instead, leading to a visual discrepancy.

This issue was traced, corrected, and tested before being merged into the normal PR → deployment pipeline.

In terms of payments, the team explored a new architecture where a successful payment doesn't automatically grant access to user entitlements. Instead, payments are separated from entitlements, with Stripe and BTC payments feeding into a unified entitlement model. Consequently, MyZubster Seller and Zorgax are treated as separate products with distinct access rights. The UI now accurately reflects this distinction, allowing users to have a Zorgax free plan while also being a Marketplace Seller.

Finally, the team consolidated the demo experience into the real Marketplace, creating a direct deep link (/marketplace?demo=1) that takes visitors to the demo area. The demo now features automatic focus/scroll behavior, an improved mobile experience, responsive detail modal, and interface translations. The author concludes that the real value of this work lies in the new boundaries established between demo and real transactions, payment vs entitlement, seller vs Zorgax, generic listings vs category-specific behavior, and frontend assets vs production routing.

These boundaries make the system more understandable and safer to extend, positioning MyZubster as a product people can explore rather than just view as a prototype.