SwipeMarket

Prediction markets are some of the most information-dense environments on the internet, yet they remain inaccessible to most people. Platforms like Kalshi/Polymarket often present markets as spreadsheets: rows of probabilities, volumes, and liquidity figures that demand you already know exactly what you’re looking for.

We asked a simple question: What if discovering a prediction market felt as effortless as swiping through a social feed?

The mental model was clear. Tinder collapsed infinite choice into a single binary gesture. TikTok made content discovery frictionless. Neither requires a "search" bar because the interface handles the curation. We wanted that same energy for financial markets. We pulled everything from "Will Japan win the WBC?" to "Is BTC going up?" through Liquid and Polymarket API without ever changing apps.

The second spark was AI. A retail trader reading a market card cold has no edge. By integrating Claude as a "pocket analyst" providing a three-bullet brief (bull case, bear case, and a contrarian insight), we shift the playing field.

How We Built It

The stack is Next.js 14 (App Router) with TypeScript, Tailwind CSS, and Framer Motion for the gesture layer. State lives in a single React context backed by useReducer—no external state library or backend database required. Every position and preference is client-side, keeping iteration fast.

The Swipe Engine

Framer Motion’s useMotionValue and useTransform handle the card physics. The card tracks both $x$ and $y$ simultaneously, allowing for four-directional gestures:

$$\text{rotate} = \frac{x}{200} \times 12^\circ$$

  • Left → Buy YES (green stamp)
  • Right → Buy NO (red stamp)
  • Up → Skip
  • Down → Watchlist

A swipe commits at $|x| > 100\text{px}$ or $|v_x| > 500\text{px/s}$, providing a natural feel for both slow deliberate drags and quick flicks.

Market Sourcing

Polymarket’s Gamma API returns the top 200 markets by 24h volume. We score each for "swipeability" using the following formula:

$$S = 0.6 \times (1 - 2|p_{\text{yes}} - 0.5|) + 0.4 \times \min\left(\frac{V}{10^6}, 1\right)$$

Where $p_{\text{yes}}$ is the current YES price and $V$ is total volume. Markets closest to 50/50 with high liquidity float to the top—they are the most interesting to trade and the easiest to explain.

AI Analysis

Every card triggers a Claude Sonnet call enriched with live DuckDuckGo web research. The prompt enforces a strict contract: exactly three bullets, each under 12 words, plus a verdict (STRONG BUY to STRONG SELL) and a confidence score.

Live P&L

The dashboard polls current prices every 5 seconds. P&L per position is calculated as:

$$\text{P&L} = \frac{p_{\text{now}} - p_{\text{entry}}}{p_{\text{entry}}} \times \text{bet amount}$$

Challenges

  • Parsing Claude Reliably: Getting an LLM to output structured data without JSON mode is a battle. We solved this with aggressive regex extraction and a strict system prompt.
  • Gesture Conflicts: Framer Motion naturally prefers one axis. Getting diagonal swipes to resolve correctly—ensuring a slight angle on a "Left" swipe doesn't trigger an "Up"—required tuning thresholds so one axis clearly dominates before committing.
  • HMAC Authentication: Every Liquid API request requires a signed payload:

$$\text{sig} = \text{HMAC-SHA256}(\text{key}, [t, n, \text{METHOD}, \text{path}, \text{query}, H(\text{body})])$$

What We Learned

  1. Gestures > Clicks: The "feel" of a swipe is a product decision as much as an engineering one.
  2. Prompt Engineering is Real Engineering: Small wording changes in the system prompt produced dramatically different output quality and consistency.
  3. Untapped Potential: Most trading UIs are built for professionals. There is a massive audience that wants to have an opinion on sports, politics, or crypto without wading through complex order books.

Built With

Share this project:

Updates