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