Swapp is a French startup with a mobile app for creating digital business cards. They needed a web platform that would allow recipients to view cards via unique URLs.

The data was a mess. The mobile team had already built the backend, and nothing was standardized. Different card types store information in completely different formats. I couldn't predict what shape the data would take until it arrived.

The UI had to build itself. Each card's color scheme, layout, and content blocks are defined in the backend. The frontend needed to read the configuration and assemble the right components on the fly.

I designed a component-based architecture where each content block (links, images, videos, social profiles) is a self-contained module. The app fetches the card type and data structure from Firebase, then dynamically assembles the appropriate components.

For the messy data problem, I built validation layers that check types and formats before rendering. If something unexpected comes through, the system handles it gracefully instead of breaking the UI.

SvelteKit was the right choice here. Its reactivity made it easy to render different card types without performance issues.

The dynamic rendering system supports unlimited card types without code changes

When the mobile team adds new features, the web platform adapts automatically

Unexpected data falls back gracefully instead of breaking the page

Frontend: SvelteKit, TypeScript, Tailwind CSS, Shadcn UI

Backend: Firebase

Deployment: Ubuntu Server