Show, Don't Tell: Building a Safe Live Demo
Marketing pages are liars by default. They show you pixel-perfect mockups of an app that probably looks completely different once you actually log in.
We didn’t want to do that. We wanted to embed the actual running app directly on our landing page. But letting anyone click around a live database without logging in is a security disaster waiting to happen.
The Single-Use Demo Flow
In v1.6, we built a disposable demo token system. Here’s how it works:
- The landing page requests a disposable demo token from the backend.
- The backend generates a short-lived
login_urland returns it. - The iframe dynamically sets its source to this URL, securely authenticating a temporary session.
No hardcoded credentials. No shared “guest” accounts where people can delete each other’s data. Just a clean, ephemeral instance of the real app.
Ripping Out and Replacing the Theme System
While we were messing with the frontend, we decided to tackle a persistent annoyance: the theme system.
We completely migrated the app theme runtime to next-themes and synced up with the core shadcn/ui primitives. This might sound like a simple CSS toggle, but getting it right—handling system defaults, preventing the dreaded “flash of unstyled content” on load, and cleaning up test environments—required a deep refactor.
We also finally added custom scrollbar styles. It’s the little things.
The Cleanup
With every new feature comes a trail of dust. We spent days reviewing lint issues in the auth flows, optimizing theme boot times, and cleaning up the Playwright end-to-end tests to stabilize the flows.
Meo Mai Moi isn’t just a pet tracker anymore. It’s a living, breathing platform. And with the live demo now working seamlessly, you don’t have to take my word for it. You can just try it yourself.