Overview
TradeIt turns an informal card handoff into a clear, shared transaction. Instead of asking two collectors to compare prices across several tabs, remember who offered what, and trust that nothing changed before the handshake, the app gives both people the same live view of the deal.
The product connects four parts of the trading-card experience that are usually fragmented: market-aware valuation, a synchronized two-person exchange, collection management, and local discovery. I worked across the mobile product and its public-facing landing page, shaping the experience from the first acquisition touchpoint to the final confirmation at the table.
Designing trust into a face-to-face trade
One collector creates a room and shares a QR code or unique six-character code. The other joins from a second device, and both see the trade update in real time as cards are added, removed, or adjusted. A solo mode also lets one person prepare and compare both sides before meeting someone else.
The important work happens around edge cases that a simple value calculator misses:
- Each side has a clear owner once both participants are present.
- Presence heartbeats show whether the other trader is still connected.
- Card quantities, price variants, and manual price adjustments remain attached to each item.
- The balance explains which side should add value instead of showing an unexplained number.
- Both people must confirm the final selection.
- Any change to the trade automatically invalidates earlier confirmations, preventing approval of an outdated deal.
Market data that supports a decision
Card search is backed by TCGdex and exposes price references from Cardmarket in EUR and TCGplayer in USD when the source data is available. The interface handles variants such as normal, reverse, holo, and first edition rather than treating every printing as the same product.
Suggested prices are a starting point, not a forced verdict. Traders can choose the relevant printing, change quantity, and override the price to account for condition or a deal they have agreed in person. TradeIt then recalculates both totals and the compensation difference immediately.
Closing the collection loop
TradeIt does not treat a completed exchange as an isolated event. Collectors can create albums, organize cards into Have and Want lists, search those lists while building a trade, and track an approximate collection value.
After a room is finalized, the app matches traded cards against the collector’s albums and proposes the exact updates: decrease cards that were given away, clear fulfilled wants, and add received cards to the owned collection. The user remains in control of the update, and the app returns them to the album with visual feedback once it is applied.
Extending the product beyond the table
The local layer helps players find where a trade can happen. A map combines card shops and community trading spots, with profiles for supported games, addresses, opening hours, and dedicated trading days. Owners can publish one-off or weekly events; collectors can follow places and leave ratings and reviews.
Store and event submissions use an approval state, while public data, owner actions, and user-generated reviews are separated through database policies. This creates a foundation for a useful local network without making every submitted location immediately authoritative.
Engineering for a shared, live workflow
The mobile app is built with Expo, React Native, TypeScript, and Expo Router. Supabase provides authentication, Postgres, row-level security, and Realtime subscriptions for rooms, participants, trade items, and confirmations.
Database constraints and triggers carry some of the most important product rules: room codes are generated uniquely, users can only change the data they are allowed to own, confirmed rooms become immutable, and confirmations reset whenever the deal changes. This keeps trust-critical behavior out of presentation code alone.
The wider product architecture also includes:
- Persistent Spanish and English app localization, with card-search locale handling.
- Stripe PaymentSheet and authenticated Supabase Edge Functions for Pro and Store+ subscriptions.
- Ad support for the free mobile experience.
- A current Pokémon TCG experience with other games explicitly gated as coming soon rather than presented as finished.
Turning the product into an acquisition experience
The Astro landing page had to explain a multi-step, two-person product without making the first visit feel technical. I structured it around one promise: make an in-person trade understandable and fair for both people.
Product storytelling
The page introduces four concrete benefits before explaining the workflow: live market references, QR-based exchanges, nearby places to trade, and exchange history. The main interaction is then reduced to four visual steps that mirror what two people do at a table: open, scan and compare, confirm, and complete.
Visual direction
An open-sky composition, soft gradients, and a large phone mockup make the product feel friendly and legible. A physical card handoff anchors the hero in the real-world behavior the app supports, while the interface imagery keeps the claims tied to a working product.
Content and discoverability
The English and Spanish site goes beyond a single launch page. It includes an interactive Pokémon price checker with Cardmarket and TCGplayer breakdowns, localized search fallbacks, detailed card views, and pagination. A structured resource hub, practical trading guides, sitemap, legal pages, and repeated Google Play calls to action support both search discovery and conversion.
My role
Product Design · Mobile & Web Development
Highlights
- Designed a shared exchange model around live presence, explicit ownership, mutual confirmation, and automatic stale-confirmation resets.
- Connected variant-aware market data to editable quantities, prices, totals, and a plain-language value balance.
- Built the post-trade reconciliation flow between rooms and Have/Want albums.
- Developed the local discovery layer for shops, trading spots, schedules, events, follows, ratings, and reviews.
- Implemented the mobile architecture with Expo and Supabase, including Realtime, RLS, database triggers, authentication, and subscription infrastructure.
- Built the bilingual Astro acquisition site, interactive price checker, resource hub, and search-oriented content structure.
Product stack
- Expo SDK 54, React Native, TypeScript, and Expo Router
- Supabase Auth, Postgres, Realtime, Storage, RLS, and Edge Functions
- TCGdex with Cardmarket and TCGplayer market references
- QR scanning and generation with native camera support
- Stripe subscriptions and Google Mobile Ads integration
- Astro 6, Tailwind CSS, bilingual content, and static SEO routes
- Android release available on Google Play