Groom - AI-powered in-app onboarding SDK for SaaS The problem New users land in a SaaS product wi...Groom - AI-powered in-app onboarding SDK for SaaS The problem New users land in a SaaS product wi...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Groom - AI-powered in-app onboarding SDK for SaaS
The problem
New users land in a SaaS product with no guide and quietly leave. Existing onboarding tools need engineers to hand-build tours for every flow, and those tours break the moment the UI changes. We set out to build a layer that drops into any web app with one script tag, understands the live page, and walks users through multi-step tasks on demand.
What I built
Zero-dependency SDK, 23 KB gzipped. Injected with a single script tag and running inside customer apps we don't control. Ships as one IIFE via S3 and CloudFront with beta and stable channels.
Live DOM perception. A budgeted depth-first walk that descends into shadow roots and same-origin iframes, measures geometry against each element's own frame, hit-tests for occlusion, and degrades gracefully under a 180 KB payload budget.
Resilient element targeting. A five-tier selector resolution chain, re-resolution on re-render, delegated capture-phase listeners that survive React reconciliation, and a token system that cancels superseded async steps.
Cross-page guided flows. A state machine persisted across full page loads with a split plan/progress store, 30-minute TTL, resume-at-destination detection, and cross-page back navigation.
Constrained AI design. The LLM only resolves which element matches the user's intent; the step sequence is built deterministically by BFS over recorded navigation edges and verified before display. Accurate and cheap.
Full product dashboard. 24-route Next.js app with analytics across 14 aggregated metrics, an onboarding wizard, integrations, AI settings, and subscriptions, with single-flight token refresh and persisted auth state.
Scale
Around 44,000 lines of TypeScript across three repos, 66 API endpoints, 23 data models, 900+ commits over roughly eight months. Shipped to production infrastructure and accepted into the NVIDIA Inception program.
Running code inside someone else's app teaches you that the DOM you measured a second ago no longer exists. Most of the engineering value in Groom is in the recovery paths, not the happy path.
That works. If the screen recording clearly demonstrates the product, your written explanation can carry the “what I built and why” story.
Here’s a polished version you can use for your Contra challenge submission:
What I built & why
I built PawRoute, a smart booking and automation experience for a fictional solo mobile dog groomer, Maya, based in Austin, Texas.
I chose mobile dog grooming because booking isn't as simple as finding an empty calendar slot. Every new inquiry can require the owner to check the customer's location, understand the dog’s needs, recommend a service, calculate pricing, find a time that works with the driving route, confirm the appointment, send reminders, and handle cancellations.
I wanted to answer one question:
How can I turn “Can I book?” into “You’re booked” with as little work from the business owner as possible?
So I designed PawRoute around a simple 3-step customer booking experience. Customers provide their location and dog details, receive a recommended service with clear pricing, and choose from available appointment times.
I also created Best Route Match, which prioritizes appointments when Maya is already working nearby instead of treating every available time equally.
Behind the customer experience, PawRoute handles the repetitive work: booking confirmations, reminders, customer information, route updates, rescheduling, and automation activity.
I also designed an owner dashboard where Maya can see appointments, customers, her driving schedule, and what PawRoute has automated.
Finally, I added a cancellation-recovery workflow. When an appointment opens up, PawRoute can help identify suitable waitlisted customers and refill the slot instead of requiring Maya to manually message people.
The goal wasn't simply to build another booking website. It was to design a system where the customer sees simplicity while the complexity is handled behind the scenes.
3 steps for customers. Less scheduling work for Maya.