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

> Resume & Job Search Tools: Land Interviews 6X Faster

- Site: https://tealhq.com
- Category: Career SaaS / Job Search CRM
- Verdict: **Solid side project** (72/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a personal subset for yourself, but keep paying if you want their massive programmatic SEO content library or automated browser scraper network.

Building a personal job tracker and AI resume generator with Next.js and Supabase is entirely straightforward for an AI coding agent. The real friction points will be writing a robust Chrome extension that survives LinkedIn DOM updates and engineering an accurate ATS keyword matcher that goes beyond naive string matching.

### What you can't replicate

- 4 million registered active users and community network
- Massive programmatic SEO library of 2,000+ resume examples and career paths
- Acquisitions and pre-built content partnerships

## What it does

An all-in-one career growth and job search platform acting as an operating system for job seekers, combining an AI resume builder, job tracker, and keyword match scanner.

### Core features

- Resume CRUD with multi-template rendering and PDF export
- Job application tracker Kanban/CRM board
- Job description keyword extraction and resume matching score algorithm
- AI resume bullet and cover letter generator via LLM integration
- Chrome extension for clipping job postings from external boards
- Email templates and application stage management

## The business

### Pricing

- Free Forever: Free — Basic job tracker, limited resume templates, top 5 keywords, and restricted AI credits.
- Teal+ Weekly: $13/week — Billed weekly for active job seekers wanting full access during transitions.
- Teal+ Monthly: $29/mo — Billed every 30 days for ongoing search management.

### Funding

$20.7M raised.
- Seed Round
- Seed Extension (2025/2026)
Investors: City Light Capital, Flybridge Capital Partners, Rethink Education, Lerer Hippeau, Human Ventures, Gaingels, Oceans Ventures

Founded 2018.
Team size: 250-280+.

## The hard parts

- Reliable Chrome extension DOM scraping across dynamic external sites like LinkedIn and Greenhouse without breaking on layout changes
- Precise ATS keyword matching and TF-IDF/semantic gap analysis between unstructured job descriptions and resume text
- Complex PDF layout engine rendering pixel-perfect resumes across dozens of design templates

## How to vibe code Teal

### Prerequisites

- Node.js (free): Required runtime for the Next.js full-stack application and build tools.
- GitHub (free): Source control and deployment pipeline connection for Vercel.
- Anthropic API Key (pay-as-you-go): Powers AI resume bullet generation, cover letter writing, and summary tailoring.

### Recommended AI tools

- Claude Code: Best-in-class agentic coding tool for scaffolding full-stack CRUD apps, databases, and API integrations.
- Cursor: Ideal for fine-tuning React components, Tailwind styling, and resume PDF templates with visual diffs.

### Stack

- Frontend: Next.js with Tailwind CSS and react-pdf
- Backend: Next.js App Router API Routes
- Database: Supabase (Postgres)
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK, Anthropic API, Chrome Extension Manifest V3

### Hosting

- Vercel (Hosting the Next.js web application and serverless API endpoints): $0/mo (Hobby tier)
- Supabase (Relational PostgreSQL database storage for resumes, jobs, and user data): $0/mo (Free tier)

### Build guide

1. **Project Scaffolding & Auth Setup** — Initialize the Next.js 16 app with Tailwind CSS 4, configure Supabase as the database, and integrate better-auth for secure user authentication.

```
Create a new Next.js 16 project using the App Router, TypeScript, and Tailwind CSS 4. Initialize a Supabase client connection and set up better-auth with email/password authentication. Create database tables for users, resumes, resume_sections, and job_tracker with proper foreign key relationships, timestamps, and indexes. Implement login and registration pages with form validation and redirect flows upon successful authentication.
```

2. **Resume Builder & Structured Editor** — Build the resume management dashboard with JSON-backed structured data for experience, education, skills, and summary sections.

```
Build a resume builder dashboard in Next.js where users can create, edit, and delete multiple resumes. Implement a stateful form structure capturing contact info, professional summaries, work experience (with bullet points), education, and skills. Store these as structured JSON blobs in the Supabase database. Add a live preview pane that renders the resume data in real-time using clean Tailwind CSS formatting.
```

3. **AI Resume Bullet & Cover Letter Generator** — Integrate the Vercel AI SDK and Anthropic API to generate tailored resume bullet points and professional summaries based on job descriptions.

```
Integrate the Vercel AI SDK and Anthropic API (Claude Sonnet) into the resume builder. Create server actions that take a user's raw job experience description and a target job description, then generate metric-focused resume bullet points or a tailored professional summary. Add UI components allowing users to accept, edit, or regenerate AI outputs with a single click, tracking token usage against local state.
```

4. **Job Application Tracker CRM** — Construct a Kanban board and list view CRM to manage job opportunities across application stages from bookmarked to offer.

```
Build a Job Application Tracker CRM view with both a Kanban board (columns: Bookmarked, Applied, Interviewing, Offer, Rejected) and a tabular list view. Connect this to a 'jobs' table in Supabase tracking company name, role title, job description text, salary range, application URL, and stage. Implement drag-and-drop or status dropdown updates with instant optimistic UI state changes.
```

5. **ATS Keyword Matcher & Scorer** — Implement a text analysis utility that compares a resume against a target job description to compute a match score and highlight missing keyword gaps.

```
Create an ATS keyword matching utility in TypeScript. Given a resume text blob and a job description text blob, parse both to extract hard and soft skill keywords, compute an overlap percentage match score, and generate a categorized list of matched vs. missing keywords. Build a dedicated UI panel showing this Match Score alongside actionable recommendations for resume optimization.
```

6. **Chrome Extension for Job Clipping** — Develop a Chrome Extension (Manifest V3) that extracts job title, company, and description from external job boards and saves them to the backend API.

```
Build a Chrome Extension using Manifest V3 with a popup UI and a content script. The content script should inspect DOM elements on major job boards (LinkedIn, Indeed, Greenhouse) to extract the job title, company name, salary if listed, and full job description text. Provide a 'Save to Tracker' button in the extension popup that authenticates via user session tokens and pushes the scraped job data directly to the Next.js backend API.
```

### Cost vs paying

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

- Domain name (optional): $12 one-time
- Anthropic API credits: $10 one-time
- Total: ~$22 one-time

**Ongoing costs (monthly):**

- Anthropic API usage (personal job hunt volume): ~$5/mo
- Vercel & Supabase hosting: $0/mo
- Total: ~$5/mo

- Paying for the SaaS instead: $29/mo
- Build time: 35-45 hours
- AI tool credits: $20 (Claude Pro)
- Break-even: 1 month of Teal+

## Sources

- [Teal Homepage](https://tealhq.com)
- [Teal Pricing Page](https://tealhq.com/pricing)
- [Teal About Page](https://tealhq.com/about)