# How to Vibe Code Your Own ShowTrust (and Stop Paying for It)

> Social proof that sells, live in one prompt

- Site: https://showtrust.to
- Category: SaaS / Marketing Tool
- Verdict: **Solid side project** (72/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a solid personal clone of this testimonial widget builder, though video transcoding and vanilla JS widget scoping will demand meticulous debugging.

ShowTrust is a beautifully scoped micro-SaaS. The dashboard, database models, and collection pages are straightforward CRUD work for an AI coding assistant. However, engineering a lightweight ~5kb script tag that renders natively into arbitrary third-party websites without leaking CSS styles or breaking host page layouts requires careful vanilla JavaScript architecture. Furthermore, setting up reliable video recording chunks, server-side transcoding, and Whisper transcription adds real systems engineering overhead that takes time to polish.

### What you can't replicate

- The exact organic distribution and indie brand equity built by the founder
- The pre-existing ecosystem mindshare around the showtrust-skill.md developer prompt

## What it does

A lightweight testimonial collection and social proof widget builder allowing users to collect text and video feedback, curate approvals, and embed a high-converting Wall of Love.

### Core features

- Multi-tenant dashboard for project management and curation queue
- Hosted custom-branded testimonial collection pages (text, rating, video)
- In-browser video recording via MediaRecorder API with transcoding
- Embeddable vanilla JavaScript client-side widget (~5kb gzipped)
- Five layout engines (masonry, grid, carousel, marquee, list)
- CSS token inheritance and theme customization matching host site
- Social import utility for X (Twitter) and LinkedIn URLs
- Per-domain impression tracking and CTA conversion analytics
- Public REST API, webhooks, and AI coding agent skill file

## The business

### Pricing

- Free Tier: Free — Unlimited testimonials, hosted collection pages, all 5 display layouts, no watermark.
- Pro Tier: $4.99/mo — White-label options, video testimonials, advanced integrations, analytics.

Founded 2026.
Team size: 1.

## The hard parts

- Building a zero-iframe vanilla JS widget that safely injects into third-party sites without breaking host CSS or layout tokens
- In-browser video recording chunks, client upload management, and server-side video transcoding for web playback
- Real-time DOM rendering and layout transitions across diverse host site environments
- Secure web-scraping/metadata fetching for X and LinkedIn import URLs

## How to vibe code ShowTrust

### Prerequisites

- Node.js (free): Required runtime for executing the Next.js full-stack framework and building packages.
- GitHub (free): Source code repository and deployment pipeline integration for Vercel.
- OpenAI Account (pay-as-you-go): Required for API keys to power automatic video transcription via Whisper.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agent for scaffolding the database schema, API routes, dashboard UI, and client widget bundle simultaneously.
- Cursor: Ideal for fine-tuning the complex vanilla JavaScript embed script, CSS isolation, and responsive grid layout styles.

### Stack

- Frontend: Next.js (App Router, Tailwind CSS)
- Backend: Next.js API Routes / Server Actions
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: Stripe
- Other: OpenAI Whisper API (for video transcription), UploadThing (for avatar and video storage)

### Hosting

- Vercel (Hosting the Next.js dashboard, hosted collection pages, and serving the static widget bundle asset.): $0-20/mo
- Turso (Serverless edge SQLite database storing users, projects, testimonials, and analytics events.): $0/mo

### Build guide

1. **Scaffold Project & Database Schema** — Initialize the Next.js App Router project with Tailwind CSS, Drizzle ORM, and Turso, establishing tables for users, projects, testimonials, and analytics.

```
Initialize a new Next.js App Router project with TypeScript and Tailwind CSS. Configure Drizzle ORM to connect to a Turso SQLite database over HTTP. Create database schemas for 'users', 'projects' (with unique collection slugs), 'testimonials' (fields: id, projectId, authorName, authorHandle, authorAvatar, content, rating, type [text/video/social], status [pending/approved/hidden], pinned [boolean], createdAt), and 'analytics_events' (fields: id, projectId, testimonialId, eventType [impression/cta_click], domain, createdAt). Implement basic migrations and test database connectivity.
```

2. **Implement Auth & Dashboard Management UI** — Set up better-auth for secure user authentication and build the admin dashboard for managing projects and the testimonial moderation queue.

```
Integrate better-auth with email/password and GitHub OAuth providers supporting the Turso database. Build a responsive admin dashboard at /dashboard where users can create projects, switch between them, and view an administrative curation queue. The queue must display submitted testimonials with action buttons to approve, hide, pin to top, edit text/typos, and delete. Add a settings page to customize branding and widget appearance.
```

3. **Build Hosted Collection Pages & Video Recording** — Create the public submission page at /[slug] supporting written text ratings and in-browser MediaRecorder video recording.

```
Create a public, custom-branded collection page route at app.showtrust.to/[slug] that loads project configuration dynamically. Implement a submission form supporting star ratings, author details, text feedback, and an in-browser video recording component using the MediaRecorder API (max 90 seconds). Handle video chunk recording, preview playback, and client-side upload handling via UploadThing. Upon submission, store the record with status 'pending' in the database queue.
```

4. **Develop the Embeddable Widget Script & Layouts** — Build the vanilla JavaScript client script (~5kb gzipped) that injects approved testimonials into host websites without iframes, supporting 5 layouts.

```
Develop a vanilla JavaScript client-side widget script packaged as 'showtrustto-widget.js'. The script must parse its own script tag attributes (or global config object) to read the project identifier and requested layout. It must fetch approved testimonials from the backend REST API and dynamically render them directly into the host DOM without using an iframe. Implement CSS scoping to safely inherit host font and color tokens while supporting 5 responsive layout options: masonry, grid, carousel, marquee, and list.
```

5. **Add Social Import, Analytics, and AI Agent Skill File** — Implement URL scraping utilities for X/LinkedIn, impression/conversion tracking endpoints, and the agent skill markdown file.

```
Implement backend endpoints and UI triggers to import testimonials by pasting an X (Twitter) or LinkedIn post URL, fetching author metadata, avatar, and quote text into a card structure. Add tracking endpoints in Next.js to log widget impressions and CTA clicks per domain when the embed script initializes. Finally, create a public static markdown file at /showtrust-skill.md containing clear instructions and prompt templates for AI coding agents (Claude Code, Cursor) to automate widget configuration and HTML snippet installation.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom domain (optional): $12/yr
- AI coding assistant subscription: $20
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Vercel Hobby Hosting: $0/mo
- Turso Database: $0/mo
- OpenAI Whisper API (est. usage): ~$1/mo
- Total: ~$1/mo

- Paying for the SaaS instead: $4.99/mo (Pro tier)
- Build time: 25-35 hours
- AI tool credits: $20 (one month of Claude/Cursor)
- Break-even: Never (built for learning and custom control)

## Sources

- [ShowTrust Official Website](https://showtrust.to)
- [ShowTrust Features Page](https://showtrust.to/features)
- [ShowTrust Agent Skill Documentation](https://showtrust.to/showtrust-skill.md)
- [ShowTrust API Reference](https://showtrust.to/docs/api)