Forem: Crackly

Cost-engineering an "AI Generate" button in a freemium product (from $0.08 to $0.029 per click)

Crackly — Sat, 25 Apr 2026 08:10:04 +0000

TL;DR

My coding-interview prep app has a "Generate Visualization" button. Click it on any algorithm problem and Claude Sonnet 4.5 produces a self-contained interactive widget that teaches it — a sliding-window expanding, a two-pointer racing, a DP table filling cell by cell. (That's what the GIF above is showing.)

At naive implementation, each click cost me about $0.08. Workable for Pro subscribers. Ruinous if I let free-tier users click freely.

Through five cost decisions — tiering the call path, prompt caching, output capping, a Haiku gatekeeper, and a Groq fallback on regenerations — I got the per-click cost to $0.029 and pushed free-tier users to a $0-marginal-cost path entirely.

If you're building anything with a "Generate with AI" button in a freemium product, these are the moves that matter before you ship.

The product problem

I'm building Crackly — a DSA interview prep tool. 474 problems, each with an "AI Visual" panel. Press "Generate Visualization" and Claude generates a custom HTML+JS widget that animates the algorithm end-to-end: you watch the two-pointer sweep, the sliding window expand, the recursion tree unfold.

It's the best feature in the product. It's also the most expensive.

A naive build looks like this:

User opens a problem page.
Claude Sonnet 4.5 is called with the problem + a spec for how to generate the visualization.
~15 seconds later, the visualization renders in an iframe.
Cost: ~$0.08 per click at full API pricing (mostly from output tokens — visualizations run ~4,000 output tokens naive).

For Pro users on a $49/quarter plan, that's fine. A Pro user generates maybe 20 of these per month, costing me $1.60 in Claude on $16.33/mo of revenue. ~90% gross margin.

For free users, this is an existential problem. At just 1,000 free DAUs generating one visualization each per day, that's $80/day, $2,400/mo burned by a cohort paying me $0.

The first question any founder shipping an AI feature should ask: what's the marginal cost of a free user's most expensive action? For me it was $0.08, and it was eating my runway.

Here's how I got it down.

Decision 1: Tier the call path. Free users never trigger Claude.

The biggest wins in AI product engineering come from not making the call, not making it cheaper.

I split the "Generate Visualization" button into two code paths:

Free user clicks → Check DB for cached visualization for this exercise. If hit, serve it (~10ms). If miss, show a tasteful "Generating visualizations is a Pro feature — here's a preview of a similar one" state. No Claude call. $0 marginal.

Pro user clicks → Check cache first. If hit, serve it. If miss, generate fresh with Claude, store in cache for the next user, serve.

This is obvious in retrospect but I didn't build it this way at first. My v1 ran Claude on every click regardless of tier. The metrics dashboard told me within a day that this would end me.

The important property: free users benefit from the cache Pro users warm. Every Pro user who generates a fresh visualization populates the DB; every free user who lands on that same problem afterward gets it free. Pro users subsidize free coverage without knowing it, and the DB gets organically richer over time.

No batch job required. No pre-generated library. The cache grows naturally from user behavior.

Decision 2: Prompt caching — 90% off input tokens

Every "Generate Visualization" call uses the same ~2,800-token system prompt. It defines the HTML output contract, the styling rules, the safety constraints, eight example outputs. The only thing that varies between calls is the problem description (~200 tokens).

Anthropic's prompt caching charges ~10% of full input-token price on cache hits. 5-minute TTL, extended to 1 hour on paid plans.

Without caching:
  2,800 tokens × $3.00/MTok = $0.0084 per call (input side)

With caching:
  First call (cache write): 2,800 × $3.75/MTok = $0.0105
  Calls 2..N (cache read): 2,800 × $0.30/MTok = $0.00084 — 10x cheaper

The practical wrinkle: the 5-minute TTL means the cache only stays warm if calls arrive frequently. For organic traffic on a not-yet-launched product, I barely got cache hits on quiet days — the cache would expire between clicks.

Fix: a shared worker that pools requests within TTL windows, so back-to-back calls within 5 minutes share the warm cache. On high-traffic Pro days, cache hit rate climbs to ~85%, and per-call input cost trends toward the $0.00084 floor.

If your system prompt is >500 tokens and identical across calls, this is your biggest free lunch. Cache it.

Decision 3: Output capping — the sneakiest cost sink

Output tokens cost 5x more than input tokens on Sonnet 4.5: $15/MTok out vs $3/MTok in. And models have a bad habit of filling whatever budget you give them.

My first prompt said "generate a complete visualization." No cap, no structural constraint. Typical responses came back at ~4,000 output tokens because Claude kept adding elaborate comments, explanatory headers, <details> sections, inline docstrings — none of which the iframe needed.

I switched to this constraint in the system prompt:

Generate exactly the HTML/JS body. No HTML page wrapper (no <!DOCTYPE>,
<html>, <head>, <body>). No comments. No explanation. Output must be
under 3,500 tokens. If approaching the limit, truncate visual polish
before truncating logic.

Plus max_tokens: 3500 on the API call — a hard cap. If the model tries to exceed it, the response gets truncated mid-output and I detect that server-side and retry with a tighter instruction.

Typical response length dropped from ~4,000 tokens to ~1,850 tokens. A 54% reduction on the expensive side.

Before: 4,000 × $15/MTok = $0.060 per call (output)
After:  1,850 × $15/MTok = $0.0278 per call
Savings: $0.032 per call

At 1,000 Pro-user generations per month, that's $32/mo saved forever. The change was one paragraph in the prompt. Cap your outputs — it doesn't just save money, it forces you to define what you actually need, which produces better outputs anyway.

Decision 4: Groq fallback on regenerations

Pro users have a "Regenerate" button if they don't like the first output. Each regenerate is another call. If I let Pro users regenerate unlimited times at full Sonnet price, my cost per Pro user goes from $1.60/mo to unbounded.

What I built:

First generation: Claude Sonnet 4.5. High quality. Persisted in the cache.
Regenerations 1–5: Groq (Llama 3.3 70B). Free tier: 14,400 req/day. Ephemeral — not persisted in DB.
Regeneration 6+: Rate-limited. "You've hit today's regeneration limit. Back tomorrow."

The insight: tier your inference quality to the user's need at that moment. First-generation quality is what the user judges the product by. Regeneration quality is incrementally useful — they already have a decent visualization, they're asking for a second take. A "good enough" viz from Groq is fine.

First gen to expensive-but-reliable. Regenerations to free-but-decent. Same design pattern applies to many AI features: your first inference run is your hero surface. Your retries, refinements, and exploratory calls can route to cheaper infrastructure without the user ever noticing.

Decision 5: Haiku gatekeeper (offline batch only)

This one runs exactly once per problem, offline, during seed-script runs.

Not every algorithm benefits from visualization. "Return a constant" doesn't. "Sum two integers" doesn't. I didn't want to manually tag 474 problems for visualization-worthiness.

A two-pass filter does the work:

Haiku pass ($0.25/MTok in, $1.25/MTok out): "Given this problem description, is an interactive visualization likely to help a learner understand the algorithm? Reply YES or NO with a one-sentence reason."
Sonnet pass: runs only if Haiku said YES.

Haiku filters out ~13% of problems as "not visualization-worthy." At ~$0.04 full-cost per Sonnet call on the output side, the filter saves about $5 on a full-catalog batch and — more importantly — stops the system from generating awkward animations of trivial operations.

This pattern is underused. Flash / Haiku / GPT-4o-mini are nearly free at classification tasks. If your expensive model is making judgment calls that could be offloaded, offload them.

The per-click economics today

Putting it all together, here's what a Pro user's "Generate Visualization" click costs me after all the engineering:

Component	Amount
Input tokens (2,800 cached at ~90% hit rate)	$0.00084
Output tokens (1,850 × $15/MTok)	$0.02775
Network/infra overhead (Cloud Run + DB write)	$0.001
Per-click total	~$0.029

A typical Pro user generates ~20 visualizations per month. That's $0.58/mo in Claude cost per Pro user, on a $16.33/mo subscription. Gross margin per Pro user: ~96%.

Free users cost me $0 in Claude — they see the cache or see the upgrade nudge.

Cost curve	Before engineering	After engineering
Per-click cost	$0.08	$0.029
Per-Pro-user monthly cost	$1.60	$0.58
Per-Pro-user gross margin	~90%	~96%
Free-user marginal cost	$0.08	$0

A 6-point margin improvement on an AI feature's hero surface is the difference between a company that can pour into growth and one that can't. At 1,000 Pro users that's $720/mo of gross margin I wasn't paying attention to before.

The framework I'd use on any freemium AI product

If you're shipping a "Generate with AI" button, run this checklist before launch:

What's the marginal cost of one click at naive settings? Know this number. If it's >$0.02 and you have free-tier users clicking it, you have a unit-economics problem to solve before you scale.
Tier the call path by user segment. Free users should usually see cached outputs or a graceful paywall state, not trigger fresh inference. Pro users get the live call. This isn't user-hostile — it's the only way freemium AI math works.
What tokens are identical across calls? Those go in a cached system prompt. Prompt caching is the single biggest lever on input cost at scale.
What's your output actually using? If your responses exceed ~2,000 tokens often, your prompt isn't constraining output enough. Cap it in both the instruction and max_tokens.
Is there a cheap model that can route or retry the expensive one? Haiku / Flash / Mini are nearly free at classification. Offload judgment calls and filters.
Can some of your calls run on a free tier? Groq, Gemini free tier, Cerebras. Not for your hero feature — but regenerations, retries, warm-up passes, exploratory runs? Yes. Tier your inference quality to the user's moment-of-need.
What % of your LTV per user does per-user click cost consume? If a single user's typical use of the feature can eat >10% of their subscription price, you've got a hidden margin killer.

None of this is secret. These are rarely applied rigorously because "make it work first" correctly precedes "make it cheap." But the gap between naive and cost-engineered is 3-5x on AI features — which is the difference between a feature you can give away and one you have to meter.

What I'm building this for

All of this cost engineering is in service of Crackly — a DSA interview prep tool I'm shipping at crack-ly.com. The "Generate Visualization" button is one feature among many; the whole product is designed around the principle that teaching should be expensive thinking, not expensive generation. The AI works hardest at the moment you most need help. Everywhere else, it stays out of your way.

It's in private beta. Free tier forever. If you're prepping coding interviews in the next six months, try the free tier — and play with the live "AI Visual" demo embedded on the landing page. If you're building with LLMs and want to compare notes on cost engineering, my inbox is open: admin@crack-ly.com.

Follow me on X at @jobcrackly for more building-in-public from this project.

The 20 LeetCode Patterns That Cover 80% of Coding Interviews

Crackly — Fri, 24 Apr 2026 06:20:24 +0000

The Problem With "Grind 500 Problems"

Every CS student hears the same advice: "Just grind LeetCode." So they do. 200 problems in, they can solve the ones they've seen — but a new problem on an interview screen still looks like Greek.

Here's what's actually happening: problems aren't random. 80% of them are variations of the same 20 patterns. Grinding without pattern recognition is memorizing answers instead of learning to reason.

This guide is the cheat sheet I wish I had before my first FAANG loop. For each pattern you'll get:

What it is (one sentence)
When it shows up in a problem (the trigger phrase)
A worked example
3-5 LeetCode problems that use it

Save this page. Practice one pattern per day for 20 days. Most interview prep courses charge $299 for less.

The 20 Patterns

1. Two Pointers

What: Use two indices that move through an array (same direction or opposite) to avoid nested loops.

Trigger: sorted array, "find a pair", palindrome, "in place" mutation.

def two_sum_sorted(nums, target):
    left, right = 0, len(nums) - 1
    while left < right:
        s = nums[left] + nums[right]
        if s == target: return [left, right]
        if s < target: left += 1
        else: right -= 1

Practice: Two Sum II, Valid Palindrome, 3Sum, Container With Most Water, Remove Duplicates.

2. Sliding Window

What: Maintain a contiguous range [left, right] that grows when valid, shrinks when invalid.

Trigger: "longest/shortest substring/subarray with some constraint".

def longest_no_repeat(s):
    seen, left, best = {}, 0, 0
    for right, c in enumerate(s):
        if c in seen and seen[c] >= left:
            left = seen[c] + 1
        seen[c] = right
        best = max(best, right - left + 1)
    return best

Practice: Longest Substring Without Repeating Characters, Minimum Window Substring, Max Consecutive Ones, Longest Repeating Character Replacement.

3. Fast & Slow Pointers (Floyd's Cycle Detection)

What: One pointer moves 1 step, another moves 2. They meet if there's a cycle.

Trigger: linked list, "detect cycle", "find middle of", "happy number".

def has_cycle(head):
    slow = fast = head
    while fast and fast.next:
        slow = slow.next
        fast = fast.next.next
        if slow == fast: return True
    return False

Practice: Linked List Cycle I & II, Middle of the Linked List, Happy Number.

4. Merge Intervals

What: Sort intervals, then walk through — merge when they overlap.

Trigger: "intervals", "meeting rooms", "merge ranges", "free time".

def merge(intervals):
    intervals.sort(key=lambda x: x[0])
    out = [intervals[0]]
    for start, end in intervals[1:]:
        if start <= out[-1][1]:
            out[-1][1] = max(out[-1][1], end)
        else:
            out.append([start, end])
    return out

Practice: Merge Intervals, Insert Interval, Meeting Rooms I & II, Non-overlapping Intervals.

5. Cyclic Sort

What: When input is numbers in a range [0, n], put each at its index.

Trigger: array of 1..n, "find missing/duplicate", asks for O(1) extra space.

def find_missing(nums):
    i = 0
    while i < len(nums):
        target = nums[i] - 1
        if 0 <= target < len(nums) and nums[target] != nums[i]:
            nums[target], nums[i] = nums[i], nums[target]
        else:
            i += 1
    for j, n in enumerate(nums):
        if n != j + 1: return j + 1
    return len(nums) + 1

Practice: Missing Number, First Missing Positive, Find All Numbers Disappeared in Array.

6. In-Place Linked List Reversal

What: Three pointers (prev, curr, next) to reverse nodes one at a time.

Trigger: "reverse linked list", "reverse in groups", "rotate list".

def reverse(head):
    prev = None
    while head:
        nxt = head.next
        head.next = prev
        prev = head
        head = nxt
    return prev

Practice: Reverse Linked List, Reverse Linked List II, Reverse Nodes in k-Group, Rotate List.

7. Tree BFS (Level Order Traversal)

What: Queue-based, process one level at a time.

Trigger: "level", "depth", "nearest", "shortest path in tree".

from collections import deque
def level_order(root):
    if not root: return []
    q, levels = deque([root]), []
    while q:
        level = []
        for _ in range(len(q)):
            node = q.popleft()
            level.append(node.val)
            if node.left: q.append(node.left)
            if node.right: q.append(node.right)
        levels.append(level)
    return levels

Practice: Binary Tree Level Order Traversal, Zigzag Traversal, Right Side View, Minimum Depth.

8. Tree DFS (Recursive Traversal)

What: Recurse on children, combine results at the node.

Trigger: "path sum", "depth of tree", "count nodes", "lowest common ancestor".

def max_depth(root):
    if not root: return 0
    return 1 + max(max_depth(root.left), max_depth(root.right))

Practice: Path Sum, Path Sum II, Diameter of Binary Tree, Lowest Common Ancestor, Invert Binary Tree.

9. Binary Search

What: Repeatedly halve a sorted search space.

Trigger: sorted array, "find target", "smallest/largest such that", time limit requires O(log n).

def search(nums, target):
    lo, hi = 0, len(nums) - 1
    while lo <= hi:
        mid = (lo + hi) // 2
        if nums[mid] == target: return mid
        if nums[mid] < target: lo = mid + 1
        else: hi = mid - 1
    return -1

Practice: Binary Search, Search in Rotated Sorted Array, Find First & Last Position, Koko Eating Bananas.

10. Top K Elements (Heap)

What: Use a heap of size K to track the top/bottom K items.

Trigger: "top K", "K most frequent", "K closest", "Kth largest".

import heapq
def top_k_frequent(nums, k):
    from collections import Counter
    return [n for n, _ in heapq.nlargest(k, Counter(nums).items(), key=lambda x: x[1])]

Practice: Kth Largest Element, Top K Frequent Elements, K Closest Points to Origin, Find Median from Data Stream.

11. Backtracking

What: Try a choice, recurse, undo. Used to enumerate all possibilities.

Trigger: "all permutations", "all combinations", "all subsets", "N-Queens", "word search".

def permutations(nums):
    result = []
    def backtrack(path, remaining):
        if not remaining: result.append(path[:])
        for i, n in enumerate(remaining):
            path.append(n)
            backtrack(path, remaining[:i] + remaining[i+1:])
            path.pop()
    backtrack([], nums)
    return result

Practice: Subsets, Permutations, Combinations, Word Search, N-Queens, Letter Combinations of Phone Number.

12. 0/1 Knapsack (Dynamic Programming)

What: For each item, decide include/exclude. Fill a DP table by weight.

Trigger: "choose items to maximize value under capacity", "partition array", "subset sum".

def knapsack(weights, values, capacity):
    dp = [0] * (capacity + 1)
    for w, v in zip(weights, values):
        for c in range(capacity, w - 1, -1):
            dp[c] = max(dp[c], dp[c - w] + v)
    return dp[capacity]

Practice: Partition Equal Subset Sum, Target Sum, Last Stone Weight II, Coin Change.

13. Unbounded Knapsack / Coin Change

What: Like knapsack, but each item can be picked infinite times.

Trigger: "minimum coins", "number of ways to make change", "unlimited items".

def coin_change(coins, amount):
    dp = [float('inf')] * (amount + 1)
    dp[0] = 0
    for c in coins:
        for a in range(c, amount + 1):
            dp[a] = min(dp[a], dp[a - c] + 1)
    return dp[amount] if dp[amount] != float('inf') else -1

Practice: Coin Change, Coin Change 2, Minimum Cost For Tickets.

14. Longest Common Subsequence (DP)

What: 2D DP on two sequences, each cell asks "do these characters match?".

Trigger: two strings/sequences, "longest common", "edit distance", "minimum operations".

def lcs(s1, s2):
    m, n = len(s1), len(s2)
    dp = [[0] * (n + 1) for _ in range(m + 1)]
    for i in range(1, m + 1):
        for j in range(1, n + 1):
            if s1[i-1] == s2[j-1]:
                dp[i][j] = 1 + dp[i-1][j-1]
            else:
                dp[i][j] = max(dp[i-1][j], dp[i][j-1])
    return dp[m][n]

Practice: Longest Common Subsequence, Edit Distance, Delete Operation for Two Strings, Longest Palindromic Subsequence.

15. Hash Map Lookup

What: One loop builds a hash; a second (or same) loop queries in O(1).

Trigger: "find pair/triple summing to", "group anagrams", "first non-repeating", "has duplicate".

def two_sum(nums, target):
    seen = {}
    for i, n in enumerate(nums):
        if target - n in seen: return [seen[target - n], i]
        seen[n] = i

Practice: Two Sum, Group Anagrams, Valid Anagram, Contains Duplicate, First Unique Character, Longest Consecutive Sequence.

16. Topological Sort

What: Order nodes in a DAG so every edge goes forward (dependencies before dependents).

Trigger: "course schedule", "build order", "dependency resolution", "can finish tasks".

from collections import defaultdict, deque
def can_finish(num_courses, prerequisites):
    graph, indegree = defaultdict(list), [0] * num_courses
    for a, b in prerequisites:
        graph[b].append(a); indegree[a] += 1
    q = deque([i for i in range(num_courses) if indegree[i] == 0])
    taken = 0
    while q:
        c = q.popleft(); taken += 1
        for nxt in graph[c]:
            indegree[nxt] -= 1
            if indegree[nxt] == 0: q.append(nxt)
    return taken == num_courses

Practice: Course Schedule I & II, Alien Dictionary, Minimum Height Trees.

17. Union Find (Disjoint Set)

What: Track connected components with fast find + union.

Trigger: "connected components", "redundant connection", "number of provinces", "friend circles".

class UF:
    def __init__(self, n): self.p = list(range(n))
    def find(self, x):
        while self.p[x] != x:
            self.p[x] = self.p[self.p[x]]  # path compression
            x = self.p[x]
        return x
    def union(self, a, b):
        ra, rb = self.find(a), self.find(b)
        if ra != rb: self.p[ra] = rb

Practice: Number of Provinces, Redundant Connection, Accounts Merge, Graph Valid Tree.

18. Monotonic Stack

What: Stack that stays increasing (or decreasing) as you push; pop anything that breaks the order.

Trigger: "next greater element", "daily temperatures", "largest rectangle in histogram".

def next_greater(nums):
    out, stack = [-1] * len(nums), []
    for i, n in enumerate(nums):
        while stack and nums[stack[-1]] < n:
            out[stack.pop()] = n
        stack.append(i)
    return out

Practice: Next Greater Element, Daily Temperatures, Largest Rectangle in Histogram, Trapping Rain Water.

19. Dijkstra / Shortest Path

What: Priority-queue BFS from a source node, tracking cumulative weight.

Trigger: "shortest path", "minimum cost to reach", "network delay time", weighted graph.

import heapq
def dijkstra(graph, start):
    dist = {n: float('inf') for n in graph}; dist[start] = 0
    pq = [(0, start)]
    while pq:
        d, u = heapq.heappop(pq)
        if d > dist[u]: continue
        for v, w in graph[u]:
            nd = d + w
            if nd < dist[v]:
                dist[v] = nd
                heapq.heappush(pq, (nd, v))
    return dist

Practice: Network Delay Time, Cheapest Flights Within K Stops, Path With Minimum Effort, Swim in Rising Water.

20. Bit Manipulation

What: Use bitwise operators to encode sets, toggle flags, or pack state.

Trigger: "find the one number", "XOR of pair", "count bits", "subset bitmask DP".

def single_number(nums):
    result = 0
    for n in nums:
        result ^= n
    return result  # XOR cancels pairs, leaves the unique one

Practice: Single Number I/II/III, Counting Bits, Missing Number, Sum of Two Integers (no +), Bitmask DP problems.

The 20-Day Study Plan

Don't do more than one new pattern per day. Solve 2-3 problems per pattern to make it stick:

Days	Patterns
1-4	Two Pointers, Sliding Window, Fast & Slow, Merge Intervals
5-8	Hash Map, Binary Search, Top-K Heap, Cyclic Sort
9-12	Linked List Reversal, Tree BFS, Tree DFS, Topological Sort
13-16	Backtracking, Union Find, Monotonic Stack, Dijkstra
17-20	0/1 Knapsack, Unbounded Knapsack, LCS DP, Bit Manipulation

After 20 days you'll recognize 80% of new problems within the first 30 seconds of reading them. That's the moat separating someone who solved 500 problems from someone who understands 500 problems.

Why Pattern Recognition > Memorization

Anyone can memorize "Two Sum uses a hash map." But when the interviewer hits you with "given a sorted array, find the closest pair sum to target", memorization fails — you have to recognize the underlying pattern (sorted + pair → two pointers).

That's what 20 patterns get you: not solutions, but the shape-recognition senior engineers use in real interviews.

Stop Grinding. Start Learning.

I built Crackly because LeetCode teaches you to solve problems, but doesn't teach you to think about them. Every exercise on Crackly includes:

AI visualizations of the algorithm in motion — watch the two-pointer slide, the sliding-window expand, the DP table fill
Socratic hints that guide you to the answer instead of handing it over
Pattern tags so you can drill by pattern, not by topic

Currently in private beta — join the waitlist at crack-ly.com. First 500 sign-ups get 3 months Pro free.