Resum
TradeIt converteix l’entrega informal de cartes en una transacció clara i compartida. En lloc d’obligar dos col·leccionistes a comparar preus en diverses pestanyes, recordar què ha ofert cadascú i confiar que res no ha canviat abans de tancar el tracte, l’app mostra a tots dos la mateixa versió de l’intercanvi en temps real.
El producte connecta quatre parts de l’experiència TCG que habitualment estan separades: valoració amb dades de mercat, un intercanvi sincronitzat entre dues persones, gestió de col·leccions i descobriment local. Vaig treballar tant en el producte mòbil com en la seva landing pública, donant forma a l’experiència des del primer contacte de captació fins a la confirmació final al voltant de la taula.
Dissenyar confiança per a un intercanvi presencial
Un col·leccionista crea una sala i comparteix un QR o un codi únic de sis caràcters. L’altra persona hi entra des d’un segon dispositiu i tots dos veuen com s’actualitza el tracte en afegir, retirar o ajustar cartes. El mode individual també permet preparar i comparar els dos costats abans de quedar amb algú.
La feina important es troba en els casos que una simple calculadora de valor no resol:
- Cada costat té un propietari clar quan hi ha els dos participants.
- Els senyals de presència indiquen si l’altra persona continua connectada.
- La quantitat, la variant de preu i els ajustos manuals es mantenen associats a cada carta.
- El balanç explica quin costat hauria d’afegir valor, en lloc de mostrar una xifra sense context.
- Totes dues persones han de confirmar la selecció final.
- Qualsevol canvi invalida automàticament les confirmacions anteriors i evita aprovar un tracte desactualitzat.
Dades de mercat per prendre una decisió
La cerca de cartes utilitza TCGdex i mostra referències de Cardmarket en EUR i TCGplayer en USD quan aquestes dades estan disponibles. La interfície diferencia variants com normal, reverse, holo i primera edició, en comptes de tractar totes les impressions com el mateix producte.
Els preus suggerits són un punt de partida, no una decisió imposada. Cada persona pot triar la impressió correcta, canviar la quantitat i ajustar el preu per reflectir l’estat de la carta o l’acord assolit en persona. TradeIt recalcula immediatament els dos totals i la diferència de compensació.
Tancar el cicle de la col·lecció
TradeIt no tracta un intercanvi completat com un esdeveniment aïllat. Els col·leccionistes poden crear àlbums, organitzar cartes en llistes de Tinc i Busco, consultar aquestes llistes mentre preparen un tracte i seguir el valor aproximat de la seva col·lecció.
En finalitzar una sala, l’app creua les cartes intercanviades amb els àlbums i proposa els canvis exactes: reduir les cartes entregades, eliminar desitjos ja complerts i afegir les cartes rebudes a la col·lecció. La persona manté el control de l’actualització i, quan l’aplica, torna a l’àlbum amb una resposta visual.
Portar el producte més enllà de la taula
La capa local ajuda a trobar on pot passar el següent intercanvi. El mapa reuneix botigues i punts comunitaris, amb perfils que mostren jocs compatibles, adreça, horaris i dies dedicats al trading. Els responsables poden publicar esdeveniments únics o setmanals; els col·leccionistes poden seguir llocs i deixar valoracions i ressenyes.
Les altes d’espais i esdeveniments passen per un estat d’aprovació, mentre que les dades públiques, les accions del propietari i les ressenyes se separen mitjançant polítiques de base de dades. Així es construeix una xarxa local útil sense convertir immediatament qualsevol ubicació enviada en informació oficial.
Enginyeria per a un flux compartit i en viu
L’app mòbil està construïda amb Expo, React Native, TypeScript i Expo Router. Supabase aporta autenticació, Postgres, seguretat a nivell de fila i subscripcions Realtime per a sales, participants, cartes i confirmacions.
Les restriccions i els triggers de base de dades sostenen diverses regles crítiques del producte: els codis de sala es generen de manera única, cada persona només pot modificar les dades que li corresponen, una sala finalitzada queda bloquejada i les confirmacions es reinicien quan canvia el tracte. Així, la confiança no depèn únicament del codi d’interfície.
L’arquitectura més àmplia també inclou:
- Localització persistent de l’app en castellà i anglès, amb gestió de l’idioma de cerca de cartes.
- Stripe PaymentSheet i Edge Functions autenticades de Supabase per a subscripcions Pro i Store+.
- Suport publicitari per a l’experiència mòbil gratuïta.
- Una experiència actual centrada en Pokémon TCG, mostrant la resta de jocs explícitament com a pròxims en lloc de presentar-los com a acabats.
Convertir el producte en una experiència de captació
La landing amb Astro havia d’explicar un producte de dues persones i diversos passos sense fer que la primera visita semblés tècnica. La vaig estructurar al voltant d’una sola promesa: aconseguir que un intercanvi presencial sigui fàcil d’entendre i just per a totes dues parts.
Narrativa de producte
La pàgina presenta quatre beneficis concrets abans d’explicar el funcionament: referències de mercat en viu, intercanvis mitjançant QR, llocs propers i historial. Després redueix la interacció principal a quatre passos visuals que imiten el que fan dues persones al voltant d’una taula: obrir, escanejar i comparar, confirmar i completar.
Direcció visual
Una composició de cel obert, gradients suaus i un gran mockup del telèfon manté el producte proper i llegible. L’entrega física d’una carta situa el hero en el comportament real que resol l’app, mentre les imatges d’interfície vinculen les promeses a un producte funcional.
Contingut i descobriment
El web en anglès i castellà va més enllà d’una landing de llançament. Inclou un comprovador interactiu de preus Pokémon amb desglossament de Cardmarket i TCGplayer, alternatives de cerca per idioma, fitxes detallades i paginació. Un hub de recursos estructurat, guies pràctiques, sitemap, pàgines legals i crides recurrents a Google Play donen suport tant al posicionament com a la conversió.
El meu rol
Disseny de Producte · Desenvolupament Mòbil i Web
Punts destacats
- Vaig dissenyar un model d’intercanvi compartit basat en presència en viu, propietat explícita, confirmació mútua i reinici automàtic d’aprovacions obsoletes.
- Vaig connectar dades de mercat per variant amb quantitats i preus editables, totals i un balanç explicat en llenguatge directe.
- Vaig construir la conciliació posterior a l’intercanvi entre les sales i els àlbums Tinc/Busco.
- Vaig desenvolupar la capa local per a botigues, punts d’intercanvi, horaris, esdeveniments, seguidors, valoracions i ressenyes.
- Vaig implementar l’arquitectura mòbil amb Expo i Supabase, incloent-hi Realtime, RLS, triggers, autenticació i infraestructura de subscripcions.
- Vaig construir el web bilingüe amb Astro, el comprovador interactiu de preus, el hub de recursos i l’estructura de contingut orientada a cerques.
Stack del producte
- Expo SDK 54, React Native, TypeScript i Expo Router
- Supabase Auth, Postgres, Realtime, Storage, RLS i Edge Functions
- TCGdex amb referències de mercat de Cardmarket i TCGplayer
- Lectura i generació de QR amb suport de càmera nativa
- Subscripcions amb Stripe i integració de Google Mobile Ads
- Astro 6, Tailwind CSS, contingut bilingüe i rutes SEO estàtiques
- Versió Android disponible a Google Play