LayLab (Electron + Firebase + Stripe)

LayLab is a desktop app built with Electron. It uses Firebase Auth/Firestore on the client and the official Stripe Payments Firebase Extension to handle subscriptions and a hosted Customer Portal.

Features

• Email/password sign-in and sign-up
• Manage profile display name (username)
• Premium subscription via Stripe Checkout (Firebase Extension)
• Open Stripe Customer Portal to manage subscription
• Frameless window with custom minimize/maximize/close controls

Project Structure

LayLab
├── src
│   ├── main
│   │   └── main.js                # Electron main process
│   ├── preload
│   │   └── preload.js             # Secure bridge exposing window controls
│   └── renderer
│       ├── index.html             # UI (auth and account panel)
│       ├── renderer.js            # Firebase auth + Stripe flows
│       └── assets
│           ├── audio/
│           ├── fonts/
│           ├── images/
│           └── style/
│               └── style.css      # Consolidated app styles
├── package.json
└── README.md

Prerequisites

• Node.js 18+
• A Firebase project (Web App configured)
• Stripe Payments Firebase Extension installed and configured

Configure Firebase

Edit src/renderer/renderer.js and fill firebaseConfig.appId with your Web App appId from Firebase Console.

Ensure the Firebase Extension is deployed in us-central1, and your app’s Security Rules allow the needed reads/writes for customers/* subcollections (during dev).

Run

Install dependencies and start Electron:

npm install
npm start

In‑app Stripe portal overlay

The "Manage subscription" and Checkout now open inside the app using an overlayed webview. Close with the ✕ button. External links from the portal are opened in your default browser.

If you prefer opening in the system browser, change showPortal(url) calls back to window.open(url, '_blank') in src/renderer/renderer.js.

Build

Package the app (uses electron-builder):

npm run build

Notes

• The renderer uses Firebase CDN v10 ESM imports.
• Checkout and Portal use the Stripe Extension. The renderer tries callable, then direct HTTPS, then Firestore fallback.

License

MIT