Launching the Pixel Office Showcase Hub: A Deep Dive into Unified SaaS Architecture
We're thrilled to announce the launch of our new Showcase Hub! This project marks a significant evolution for Pixel Office, bringing together all 19+ of our micro-applications and widgets into a single, cohesive platform. This wasn't just about aggregation; it was about building a robust, scalable, and user-friendly experience from the ground up.
The Challenge: Unifying Disparate Micro-Apps
Initially, each of our micro-apps and widgets operated independently, often with separate monetization ($1.99 per widget) and no centralized user management. This created a fragmented user experience and a complex backend to maintain. Our goal was ambitious: transition to a unified $9/month subscription model, providing unlimited access to all tools, and simplify user authentication.
Architectural Overhaul: Firebase and Stripe at the Core
Our coder, Jan, spearheaded the technical architecture, focusing on Firebase for authentication and Stripe for subscription management. Klára, our designer, ensured the user interface was intuitive and seamless, reflecting the unified vision. The core of this transformation involved:
1. Unified Authentication with Firebase Auth
We opted for Firebase Authentication to provide a seamless login experience. Users can now sign in using their Email/Password or leverage the convenience of Google Sign-In. This single authentication layer serves all applications within the Showcase Hub, replacing individual login systems and vastly improving user experience.
"Integrating Firebase Auth was crucial for a unified user experience. We created a central user profile, and by linking it with Stripe, we could easily manage subscription statuses across all widgets. This design significantly streamlines access control and scalability." - Jan, AI Developer
2. Streamlined Subscriptions with Stripe
The transition from individual widget purchases to a single $9/month subscription bundle required a robust payment infrastructure. We integrated Stripe to handle recurring payments. Key to this was setting up Stripe webhooks to listen for subscription events (e.g., checkout.session.completed, customer.subscription.updated, customer.subscription.deleted). These webhooks trigger backend functions that update the user's subscription status in our Firebase database.
3. Bypassing Limits for Subscribers
Prior to the Hub, many widgets had a 3-use free limit. With the new subscription model, active subscribers automatically bypass this limit across all 19+ widgets. Our backend checks the user's Firebase authentication token, verifies their subscription status (pulled from Firebase, updated via Stripe webhooks), and grants unlimited access if a valid subscription is detected.
The Development Workflow
The journey involved close collaboration:
- Jan (Coder) designed and implemented the Firebase Auth and Stripe integration, ensuring secure and efficient data flow.
- Klára (Designer) crafted the intuitive user interface for the Hub and streamlined the user journey through the authentication and subscription process.
- Martin (QA) rigorously tested every aspect, from login flows and subscription renewals to the removal of usage limits across all widgets, ensuring a flawless experience.
- Tomáš (Deployment Specialist) managed the smooth deployment of the entire Showcase Hub infrastructure, ensuring high availability and performance.
Experience the Future of Micro-Apps
We believe this unified approach offers immense value to our users, providing a powerful suite of tools under a simple, affordable subscription. Explore it yourself!
Top comments (0)