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

> The all-in-one customer feedback tool for product teams

- Site: https://frill.co
- Category: Product Management & Customer Feedback
- Platforms: Web application, Browser extension
- Verdict: **Solid side project** (72/100 vibecodeable)
- Estimated effort: 2-3 weekends of focused development

## Verdict

Build a personal subset for zero recurring cost, but buy the real product if you need a production-grade embeddable widget without maintenance friction.

Building a functional personal clone of Frill's core feedback board, roadmap, and changelog is a realistic undertaking using modern AI coding tools. However, engineering a robust cross-origin embeddable widget that injects cleanly into arbitrary customer websites using Shadow DOM, handling JWT-based SSO verification, and managing asynchronous email notification queues introduces enough edge cases that buying Frill at $25 to $49/mo remains the rational choice for a commercial team.

### What you can't replicate

- Instant trust and migration pathways from competing feedback tools
- Existing ecosystem integrations across 100+ third-party SaaS apps
- Ongoing maintenance and guaranteed uptime of the embed widget script

## What it does

Collect ideas, prioritize what matters, share your roadmap, and announce updates from one tool, embedded in your product.

### Core features

- Ideas Board with voting, comments, and status filtering
- Public Roadmaps with drag-and-drop status management
- Announcements (Changelog) with rich media and email notifications
- Surveys (NPS, CSAT, Idea Polls, Quick Polls)
- Embeddable JavaScript Widget supporting multiple layout styles
- Inline Admin controls for managing items directly on the page
- AI Browser Extension for capturing feedback from support tickets
- MCP Server for AI assistant integration

## The business

### Pricing

- Startup: $25/mo
- Business: $49/mo
- Growth: $149/mo
- Enterprise: $349/mo

Founded 2019.
Team size: ~6 employees.

## The hard parts

- Cross-origin embeddable JavaScript widget that isolates CSS styling and avoids layout breakage
- JWT-based Single Sign-On (SSO) authentication for verified end-users inside widgets
- Real-time vote aggregation, follower notification dispatch, and webhook event queues
- Browser extension architecture for capturing highlighted DOM elements from third-party helpdesks

## How to vibe code Frill

### Prerequisites

- Node.js (free): Required runtime for executing the Next.js framework and building the application.
- GitHub (free): Version control repository and deployment trigger for hosting platforms.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agentic coding tool for scaffolding full-stack applications and handling complex migrations.
- Cursor: AI-native code editor ideal for reviewing diffs and refining front-end UI components and widget styles.

### Stack

- Frontend: Next.js with Tailwind CSS and shadcn/ui components
- Backend: Next.js Server Actions and API Routes
- Database: Turso (SQLite at the edge for lightweight, low-latency queries)
- Auth: better-auth (self-hosted TypeScript auth supporting JWT and session management)
- Payments: None (personal use clone)
- Other: Resend for transactional notification emails, Upstash for background job queues and rate limiting

### Hosting

- Cloudflare (Hosting the Next.js full-stack app, edge API routes, and Turso database connection.): $0-5/mo

### Build guide

1. **Scaffold Monolith & Database Schema** — Initialize a Next.js project with Tailwind CSS, configure better-auth, and set up Turso SQLite tables for users, boards, ideas, votes, roadmap statuses, and changelog announcements.

```
Initialize a Next.js full-stack app with TypeScript, Tailwind CSS, and shadcn/ui. Set up a Turso SQLite database schema using Drizzle ORM containing tables for users, organizations, boards, ideas (with title, description, status, category, vote count), roadmap_items, changelog_entries, and surveys. Implement better-auth with email/password authentication and role-based access control for team administrators versus regular end-users.
```

2. **Build Ideas Board and Voting Engine** — Create the core feedback submission board, category filtering, search functionality, comment threads, and optimistic UI voting mechanics.

```
Create a feature request ideas board page and component set. Build a submission modal supporting rich text or markdown descriptions, category selectors, and image attachments. Implement a secure voting mechanism with optimistic UI updates in React, ensuring authenticated users can vote once per idea. Add comment threads with nested replies and admin status tagging.
```

3. **Develop Public Roadmaps & Status Pipelines** — Build Kanban-style and list-view roadmap columns (Planned, In Progress, Shipped) linked directly to underlying ideas.

```
Build a public roadmap view organized by columns: Under Consideration, Planned, In Progress, and Shipped. Connect roadmap items to the ideas database so that promoting an idea updates its status. Include a drag-and-drop or status-dropdown reordering interface for admins, and automatically trigger follower notification flags when an item moves to Shipped.
```

4. **Implement Changelog Announcements & Email Triggers** — Build a release notes publishing system backed by Resend to automatically notify followers when updates go live.

```
Develop a changelog announcements module allowing admins to publish release notes categorized by New, Improved, or Fixed. Integrate the Resend transactional email API to automatically dispatch notification emails to users following shipped ideas or subscribed to announcements. Add support for boosted pop-up announcement banners inside the application layout.
```

5. **Create Surveys & Quick Polls Module** — Build in-app survey widgets including NPS, CSAT, and Quick Polls with response collection and analytics aggregation.

```
Build an in-app survey module supporting NPS (Net Promoter Score), CSAT, and quick choice polls. Create survey builder views for admins and lightweight embedded survey widgets for end-users. Store responses with user metadata and calculate aggregated score summaries on an admin analytics dashboard.
```

6. **Build Embeddable JavaScript Widget with Shadow DOM** — Package the feedback board and roadmap into an embeddable script-tag widget using Shadow DOM for style isolation.

```
Build an embeddable JavaScript SDK bundle that injects a feedback widget (supporting popover, modal, sidebar, and inline styles) into host websites via a single script tag. Use Shadow DOM encapsulation to prevent CSS leakage between the host application and the widget. Implement JWT-based SSO verification so customer web apps can pass authenticated user identity securely into the widget.
```

### Cost vs paying

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

- Claude Pro AI subscription: $20
- Total: ~$20 one-time

**Ongoing costs (monthly):**

- Cloudflare & Turso free tiers: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $49/mo (Business Plan)
- Build time: 16-24 hours
- AI tool credits: $20 one-time (Claude Pro)
- Break-even: 0 months (free personal build vs paid SaaS)

## Sources

- [Frill Official Website](https://frill.co)
- [Tracxn - Frill Company Profile](https://tracxn.com/d/company/frill)