Resumen
TradeIt convierte la entrega informal de cartas en una transacción clara y compartida. En lugar de obligar a dos coleccionistas a comparar precios en varias pestañas, recordar qué ha ofrecido cada uno y confiar en que nada ha cambiado antes de cerrar el trato, la app muestra a ambos la misma versión del intercambio en tiempo real.
El producto conecta cuatro partes de la experiencia TCG que suelen estar separadas: valoración con datos de mercado, un intercambio sincronizado entre dos personas, gestión de colecciones y descubrimiento local. Trabajé tanto en el producto móvil como en su landing pública, dando forma a la experiencia desde el primer contacto de captación hasta la confirmación final alrededor de la mesa.
Diseñar confianza para un intercambio presencial
Un coleccionista crea una sala y comparte un QR o un código único de seis caracteres. La otra persona entra desde un segundo dispositivo y ambos ven cómo se actualiza el trato al añadir, retirar o ajustar cartas. El modo individual también permite preparar y comparar los dos lados antes de quedar con otra persona.
El trabajo importante está en los casos que una simple calculadora de valor no resuelve:
- Cada lado tiene un propietario claro cuando están presentes los dos participantes.
- Los pulsos de presencia indican si la otra persona sigue conectada.
- La cantidad, la variante de precio y los ajustes manuales permanecen asociados a cada carta.
- El balance explica qué lado debería añadir valor, en vez de mostrar una cifra sin contexto.
- Las dos personas deben confirmar la selección final.
- Cualquier cambio invalida automáticamente las confirmaciones anteriores, evitando aprobar un trato desactualizado.
Datos de mercado para tomar una decisión
La búsqueda de cartas utiliza TCGdex y muestra referencias de Cardmarket en EUR y TCGplayer en USD cuando esos datos están disponibles. La interfaz distingue variantes como normal, reverse, holo y primera edición, en vez de tratar todas las impresiones como el mismo producto.
Los precios sugeridos son un punto de partida, no una decisión impuesta. Cada persona puede elegir la impresión correcta, cambiar la cantidad y ajustar el precio para reflejar el estado de la carta o el acuerdo alcanzado en persona. TradeIt recalcula inmediatamente los dos totales y la diferencia de compensación.
Cerrar el ciclo de la colección
TradeIt no trata un intercambio completado como un evento aislado. Los coleccionistas pueden crear álbumes, organizar cartas en listas de Tengo y Busco, consultar esas listas mientras preparan un trato y seguir el valor aproximado de su colección.
Al finalizar una sala, la app cruza las cartas intercambiadas con los álbumes y propone los cambios exactos: reducir las cartas entregadas, eliminar deseos ya cumplidos y añadir las cartas recibidas a la colección. La persona conserva el control sobre la actualización y, al aplicarla, vuelve al álbum con una respuesta visual.
Llevar el producto más allá de la mesa
La capa local ayuda a encontrar dónde puede ocurrir el siguiente intercambio. El mapa reúne tiendas y puntos comunitarios, con perfiles que muestran juegos compatibles, dirección, horario y días dedicados al trading. Los responsables pueden publicar eventos únicos o semanales; los coleccionistas pueden seguir lugares y dejar valoraciones y reseñas.
Las altas de espacios y eventos pasan por un estado de aprobación, mientras los datos públicos, las acciones del propietario y las reseñas se separan mediante políticas de base de datos. Así se construye una red local útil sin convertir inmediatamente cualquier ubicación enviada en información oficial.
Ingeniería para un flujo compartido y en vivo
La app móvil está construida con Expo, React Native, TypeScript y Expo Router. Supabase aporta autenticación, Postgres, seguridad a nivel de fila y suscripciones Realtime para salas, participantes, cartas y confirmaciones.
Las restricciones y triggers de base de datos sostienen varias reglas críticas del producto: los códigos de sala se generan de forma única, cada persona solo puede modificar los datos que le corresponden, una sala finalizada queda bloqueada y las confirmaciones se reinician cuando cambia el trato. Así, la confianza no depende únicamente del código de interfaz.
La arquitectura más amplia también incluye:
- Localización persistente de la app en castellano e inglés, con gestión del idioma de búsqueda de cartas.
- Stripe PaymentSheet y Edge Functions autenticadas de Supabase para suscripciones Pro y Store+.
- Soporte publicitario para la experiencia móvil gratuita.
- Una experiencia actual centrada en Pokémon TCG, mostrando el resto de juegos explícitamente como próximos en lugar de presentarlos como terminados.
Convertir el producto en una experiencia de captación
La landing en Astro tenía que explicar un producto de dos personas y varios pasos sin hacer que la primera visita pareciese técnica. La estructuré alrededor de una sola promesa: conseguir que un intercambio presencial sea fácil de entender y justo para ambas partes.
Narrativa de producto
La página presenta cuatro beneficios concretos antes de explicar el funcionamiento: referencias de mercado en vivo, intercambios mediante QR, lugares cercanos e historial. Después reduce la interacción principal a cuatro pasos visuales que imitan lo que hacen dos personas alrededor de una mesa: abrir, escanear y comparar, confirmar y completar.
Dirección visual
Una composición de cielo abierto, gradientes suaves y un gran mockup del teléfono mantiene el producto cercano y legible. La entrega física de una carta ancla el hero en el comportamiento real que resuelve la app, mientras las imágenes de interfaz vinculan las promesas a un producto funcional.
Contenido y descubrimiento
La web en inglés y castellano va más allá de una landing de lanzamiento. Incluye un comprobador interactivo de precios Pokémon con desglose de Cardmarket y TCGplayer, alternativas de búsqueda por idioma, fichas detalladas y paginación. Un hub de recursos estructurado, guías prácticas, sitemap, páginas legales y llamadas recurrentes a Google Play apoyan tanto el posicionamiento como la conversión.
Mi rol
Diseño de Producto · Desarrollo Móvil y Web
Puntos destacados
- Diseñé un modelo de intercambio compartido basado en presencia en vivo, propiedad explícita, confirmación mutua y reinicio automático de aprobaciones obsoletas.
- Conecté datos de mercado por variante con cantidades y precios editables, totales y un balance explicado en lenguaje directo.
- Construí la reconciliación posterior al intercambio entre las salas y los álbumes Tengo/Busco.
- Desarrollé la capa local para tiendas, puntos de intercambio, horarios, eventos, seguidores, valoraciones y reseñas.
- Implementé la arquitectura móvil con Expo y Supabase, incluyendo Realtime, RLS, triggers, autenticación e infraestructura de suscripciones.
- Construí la web bilingüe en Astro, el comprobador interactivo de precios, el hub de recursos y la estructura de contenido orientada a búsquedas.
Stack del producto
- Expo SDK 54, React Native, TypeScript y Expo Router
- Supabase Auth, Postgres, Realtime, Storage, RLS y Edge Functions
- TCGdex con referencias de mercado de Cardmarket y TCGplayer
- Lectura y generación de QR con soporte de cámara nativa
- Suscripciones con Stripe e integración de Google Mobile Ads
- Astro 6, Tailwind CSS, contenido bilingüe y rutas SEO estáticas
- Versión Android disponible en Google Play