Clio: Talent Market

Wallet Connection
Main UI Page
MAIN UI Page (cont.)
Individual Trading Market
Portfolio Page
Early Access Episode

What Inspired Us

People-driven markets today are built on hype, not on real talent growth or long-term potential.
They explode fast, die faster, and never create lasting value. We wanted to build something different, a people-market that measures trajectory, not virality.

The Gap We Saw

Everything in the current landscape monetizes attention and speculation. What’s missing is the one force that actually sustains value: community. It might sound simple, but strong community leads to long-term monetization. That’s the core insight behind Clio.

We built Clio around identity + incentive + culture.
You don’t earn because you’re trending; you earn because you support, discover, and witness real progress.

How We Built It

Clio’s architecture is designed to combine on-chain guarantees with a responsive frontend, creating a seamless people-market experience.

On-Chain Architecture

ClioRegistry: Maintains the artist roster.
ClioFactory: Mints ClioArtistToken and registers artists.
ClioMarket: Implements a USDC-only linear bonding curve per artist, paying a fee to the artist wallet and tracking reserves per artist.

Flow:

approve USDC →
buy(artistId, tokenAmount, maxUsdcIn) mints tokens and pays fee →
sell(artistId, tokenAmount, minUsdcOut) burns tokens and releases USDC from reserves (fee skimmed).

Curves are pre-initialized (basePriceWad, slope, feeBps) and enforced using quoteBuy/quoteSell math.

Frontend Design

Built with Next.js 13 App Router + TypeScript, using wagmi v2 + viem for Ethereum interactions.
Pages fetch artist metadata directly from the on-chain registry and market price, enriched with mock visuals and the deployedArtists mapping for live addresses.
React hooks wrap buy/sell/approve logic, read balances and allowances, and gate the UI with slippage checks, allowance verification, and balance guards.

Data Flow

Direct contract reads power prices, allowances, and balances.
No indexer yet, so volume and market cap are placeholders.
USDC uses 6 decimals, while on-chain prices use 18-decimal wad format, converted client-side.

Tech Stack

Contracts: Solidity 0.8.20, OpenZeppelin ERC20 + SafeERC20/ReentrancyGuard, Hardhat for builds and deploys, targeting Base Sepolia.
Frontend: Next.js 13, TypeScript, Tailwind CSS, wagmi v2 + viem, Prisma (for DB, not in buy/sell flow), npm workspaces (root, contracts, web).
Tooling: Generated ABIs in abis/, config in contracts.ts, deployment/seeding scripts.

Engineering Challenges

Allowance UX: Needed to read USDC allowance and hide/disable approve when sufficient, avoiding double-approval friction.
Slippage & Pricing Units: Handling USDC 6 decimals vs 18-decimal wad on-chain prices; exposed maxUsdcIn on buys to prevent reverts.
Curve Initialization & IDs: Ensured correct artistId mapping (0–9) and pre-initialized curves to prevent “curve not initialized” errors.
Balance Enforcement: Prevented sells above wallet balance using additional reads and UI guards.
Data Gaps: Without an indexer, bridged on-chain data with mock visuals and the deployed mapping to keep the UX coherent.

Designing the Experience

We spent significant time designing the Discovery Feed.
It’s the central place where users don’t just scroll; they evaluate in investing in real human trajectory.

It has to feel:

interactive
investment-driven
identity-forward

Each card reflects someone’s potential through consistency signals, progress updates, and verified milestones.

Challenges We Faced

One of the hardest problems was figuring out how to score success without turning the platform into another popularity contest. We experimented with identity layers, milestone proofs, and community-supported signals.

What’s Next

One feature we’re excited to build next is a Credibility Score.
It’s a metric that evaluates actual potential and enables data-driven decision making. Close to a composite index of consistency, milestones, and cultural proof-of-work.