Collectr Clone

Collectr clone · Collection tracker app · built by the Vibecode team

This rebuilds Collectr, the trading card portfolio app, with its real name, dark look, teal charts and gold PRO tag. You open on your portfolio's value with a chart you can scrub, your most valuable cards and a grid of cards, slabs and sealed boxes. Card pages tilt with a holo shine and show Raw, Graded and population prices, and set checklists track what you own and what's missing. The scanner sends a photo to a real vision model that identifies the card and adds it to a running total. Collectr Social and a Shop with live auctions and bidding round it out. Every game, card and illustration is original.

  • iPhone · Swift
  • Hand-built
  • Free to remix
Collectr Clone, collection tracker app built with Vibecode
Remix this template

Remix copies the working app into your account for free, exactly as we built it. It runs in Vibecode's cloud iOS simulator, in your browser.

The prompt that builds it

We wrote Collectr Clone by hand. This prompt describes the finished app: paste it into a new app to build your own version, or change it first.

Prompt · 894 words

Build a polished native iOS clone of Collectr, the trading-card portfolio app, in SwiftUI: a stock-style portfolio of your cards, slabs and sealed product, card pages with Raw / Graded / Pop prices, set checklists, a camera scanner that identifies cards with AI, Collectr Social and a deals marketplace.

It is Collectr on screen, in its dark theme: its name, a COLLECTR wordmark with a double-line C (draw it in SwiftUI), pure black backgrounds, #141416 panels with 1 px #2A2A2F strokes, teal #34C4A4 accents, green gains #34C48C with ▲, red losses #E5484D, a gold #F5C518 "PRO" tag, and its words ("Overview", "Performance", "Portfolio", "Most Valuable", "View All", "Market Movers", "Trade Analyzer", "Bulk Actions", "Export", "View Sold Listings", "Raw", "Graded", "Pop.", "Auction Ending Soon! Current Bid:", "Total:", "Following", "For You", "Your Posts"). All trading card games, sets, cards and art are ORIGINAL: five made-up games (Elemon, a creature battler; Arcana, a spell duel; Duel Monarchs; Grand Voyage, pirates; Lumen, storybook) with 23 cards and 7 sealed products. Generate the card illustrations (no text, no logos) and draw every card frame in SwiftUI: name, HP or cost, element coins, attacks or rules text, set code and number, holo foil sheen on rare cards. Draw booster packs, booster boxes and graded slabs (red PSA-style label: year, set, #number name, "GEM MINT 10") in code too. The user is Maya Okafor (@mayapulls).

SHELL
Tabs: Portfolio, Search, Scan, Social, Shop. Scan opens a full-screen scanner. Opens straight on Portfolio: no onboarding, login, paywall or permission prompt.

SCREENS
1. Portfolio: "Overview" (teal underline) | "Performance PRO"; "$ USD ▾" currency chip. "Portfolio Vintage ▾" (picker: All, Vintage, Modern, Sealed, or create one) and the avatar. Huge value "$12,674.02 USD" with an eye to hide it, "+$1,021.27 in the last 30 days" in green. Full-width teal area chart; drag to scrub (value and date follow the finger). Range pills 1D 7D 1M 3M 6M MAX (MAX has the PRO tag). Four round actions: Market Movers (rainbow ring), Trade Analyzer, Bulk Actions, Export. "Most Valuable" panel: name, grader + grade ("PSA Gem Mint 10", "Moderately Played", "Sealed"), price and %. Collection grid (2 columns): chips All / Cards / Graded / Sealed, sort menu, game filter; tiles show the card, slab or box, name, set (teal), rarity • number, grade, Qty and price with change. Bulk Actions = select tiles, move to a portfolio or delete.
2. Performance (PRO): Profit & Loss (market value, cost basis, unrealized gain, return), Top Gainers / Losers, Value by TCG bar.
3. Card page: big card that tilts in 3D with the foil sliding as you drag; glow in the card's colour; red typewriter "Auction Ending Soon! Current Bid: $820.00"; panel with name + gold star (watchlist), game • set (teal, opens the checklist), rarity • number, "View Sold Listings" pill with a rainbow outline (sheet of recent sales), price + change. Raw (NM LP MP HP DMG chips) / Graded (PSA 10, PSA 9, PSA 8, BGS 10, BGS 9.5, CGC 10 chips: the card turns into a slab and the price updates) / Pop. (population bars) and a price chart (1M 3M 6M MAX). "In Your Collection" with quantity steppers. Sticky "Add to Collection": condition or grade, quantity, portfolio, price paid.
4. Search: camera button, "Search for products", TCG grid of game wordmarks, Trending Today; results grid with a teal + to quick-add. Game page lists sets with progress; set Checklist: "124 of 201 collected", All / Owned / Missing, 3-column grid where missing cards are grey; tap to tick.
5. Scanner: dark green screen, "TCG ▾" bar, viewfinder with white corners and a teal scan sweep while identifying, tray of scanned cards with prices, gold "Total: $592.15", gallery button, white ring shutter, "Next →" to a review sheet (condition per card, portfolio, "Add 2 to Modern"). Identification is real: the photo goes to the backend, which asks a vision model (strict JSON) which catalog id it shows. On the simulator, the camera is a card lying on a felt playmat.
6. Social: search users and hashtags, chat, bell, +; Following / For You / Your Posts; posts with avatar, verified badge, photo or a fanned card showcase, double-tap or heart to like, comments sheet, tagged cards with prices. + makes a showcase from your own cards.
7. Shop: Featured (Buy It Now), From Your Watchlist (starred items' auctions: "Ends: 4 hrs", bids), Auctions Ending Soon - Graded with live countdowns. Listing sheet: place a bid (you become the high bidder) or Buy Now (adds it to your collection).
8. Account: currency (USD, CAD, EUR, GBP, JPY, AUD, BTC), hide value, portfolios, Export & Backup (CSV export, JSON backup and restore), Collectr PRO screen (Custom Icons, Unlimited Scanning, Seamless Exports, P&L Tracking, Home Screen Widgets, Set Analytics; $4.99/mo yearly, $7.99 monthly; the trial unlocks PRO locally).

RULES
Prices: each product has today's price, a 30-day change and 5-year growth; history is a seeded random walk that always ends today, so charts never look stale. Grades and conditions are price multipliers. Values follow the chosen currency everywhere. SwiftData stores the collection, watchlist, checklist ticks and posts; seed a realistic demo collection (28 lines, about $17,000) on first launch.

REMIX-READY
Brand/Theme.swift (name, words, colours), Data/Catalog.swift (games, sets, products), Data/Fixtures.swift (collection, posts, listings), one file per card frame, features in small files, README.md with a file map.
All templates