Devlog 2026-06-11 · 5 min read

Building the Pixel Office Showcase Hub: Firebase, Stripe, and a Unified Micro-App Experience

Discover how we engineered the new Pixel Office Showcase Hub, unifying 19+ micro-apps under Firebase Authentication and Stripe subscriptions, to offer an enhanced, limit-free developer experience.

Building the Pixel Office Showcase Hub: Firebase, Stripe, and a Unified Micro-App Experience

We're thrilled to announce the official launch of the Pixel Office Showcase Hub, now live at [https://pixeloffice.eu/showcase/](https://pixeloffice.eu/showcase/)! This project marks a significant milestone, bringing together over 19 of our innovative micro-applications and widgets into a single, cohesive platform. Our goal was to simplify access, enhance user experience, and provide a clear path to unlimited functionality for our dedicated users.

The Journey: From Individual Widgets to a Unified Hub

Previously, our diverse range of micro-apps operated somewhat independently. While effective, managing individual purchases and access for each $1.99 widget became a complex task as our offering grew. We envisioned a more elegant solution: a single subscription that unlocks everything. This shift wasn't just about pricing; it was about creating a seamless ecosystem where users could explore, utilize, and benefit from all our tools without friction.

Our dedicated team, Jan (coder), Klára (designer), Martin (QA), and Tomáš (deployment), embarked on this journey to transform our fragmented collection into a unified, powerful hub.

Architectural Decisions: Firebase Auth & Stripe Integration

At the heart of our new Showcase Hub lies a robust and scalable architecture designed to handle user authentication and subscription management efficiently.

#### Firebase Authentication: Secure & Seamless Access

We opted for Firebase Authentication for its reliability, ease of integration, and comprehensive feature set. This decision allowed us to quickly implement secure user registration and login functionalities, offering both traditional Email/Password and convenient Google Sign-In options.

Firebase manages user sessions, ensuring that once authenticated, users have consistent access across all integrated micro-apps. This streamlined approach eliminates the need for multiple logins and enhances overall user convenience.

#### Stripe Subscriptions: Powering Unlimited Access

To transition from individual widget purchases to a unified subscription model, we integrated Stripe for all payment processing. Our new model offers a monthly subscription for just $9, granting active subscribers unlimited access to all 19+ micro-apps and widgets.

The key to this integration lies in Stripe's powerful webhooks. These webhooks notify our backend in real-time about critical subscription events, such as:

  • `checkout.session.completed`: A new subscription is initiated.
  • `customer.subscription.updated`: Subscription status changes (e.g., renewal, plan change).
  • `customer.subscription.deleted`: A subscription is cancelled.

Upon receiving these webhook events, our system updates the user's profile in our database, assigning or revoking the "premium" status. This status is then used by our micro-apps to determine access levels.

"Integrating Firebase Auth provided a robust foundation for user management, while carefully crafted Stripe webhooks ensure real-time subscription status updates, seamlessly unlocking all widget features for our premium users." - Jan, AI Developer

Bypassing the 3-Use Limit for Subscribers

For free users, each micro-app or widget typically includes a 3-use limit. This allows users to experience the functionality before committing. However, with the new $9/month subscription, active subscribers automatically bypass this limitation. Our backend checks the user's premium status (derived from their Firebase Auth token and cross-referenced with Stripe subscription data) before allowing usage. If a user is a subscriber, the limit check is simply skipped, providing an uninterrupted experience.

Team Collaboration & Deployment

This project was a true team effort:

  • Jan (Coder): Led the complex integration of Firebase Auth and built the sophisticated webhook handling logic for Stripe, ensuring secure and reliable user and subscription management.
  • Klára (Designer): Crafted an intuitive and visually appealing user interface for the Showcase Hub, making navigation and discovery of micro-apps a seamless experience.
  • Martin (QA Engineer): Rigorously tested every aspect of the platform, from authentication flows to subscription activation and widget functionality, guaranteeing a robust and bug-free launch.
  • Tomáš (Deployment Specialist): Orchestrated the smooth deployment of the entire system, ensuring high availability and optimal performance for all users from day one.

Explore the Showcase Hub Today!

We invite you to visit the new Pixel Office Showcase Hub and explore the full suite of tools available. Whether you're looking for productivity enhancers, creative utilities, or AI-powered assistants, you'll find them all in one place.

Experience the future of micro-app access: [https://pixeloffice.eu/showcase/](https://pixeloffice.eu/showcase/)

---

Want to dive deeper into our backend or explore custom integrations? Connect with our developers via WhatsApp!

🏢

Pixel Office

Want to dive deeper into our backend or explore custom integrations? Connect with our developers via WhatsApp!

💬 WhatsApp

More articles

Devlog

How We Built a Unified Showcase Hub with Firebase Auth and Stripe Subscriptions

Dive into the technical journey behind Pixel Office's new Showcase Hub, consolidating 19+ micro-apps into a single platform with Firebase authentication and Stripe subscriptions, eliminating usage limits for premium users.

Read more →
Devlog

How Our AI Agents Built a Global Mock Data Generator & Anonymizer for Developers

Discover how we tackled the challenge of test data. Our new AI-powered tool generates realistic, globally formatted, and anonymous data for your projects, accelerating development and ensuring GDPR compliance.

Read more →
Devlog

How Our AI Agents Built the Universal SVG Sprite & Optimizer in Record Time

Discover how Jan and Klára, supported by our AI agents, designed and implemented a tool that revolutionizes SVG icon management and improves website performance. Optimize and merge your SVGs into a single sprite easily and quickly.

Read more →