PROYECTO 02 PLATAFORMA SAAS · PRODUCTO DIGITAL · 2026

DPPora

Diseño y desarrollo de una plataforma SaaS completa para Pasaportes Digitales de Producto.

“Convertir una normativa compleja en un flujo de trabajo práctico.”

Página principal de DPPora en español en móvil
Página principal de DPPora en inglés en móvil
Caso de estudio

De una obligación regulatoria emergente a un producto SaaS operativo

DPPora nació para resolver un problema concreto: ayudar a fabricantes y operadores económicos a preparar, estructurar, publicar y mantener Pasaportes Digitales de Producto sin depender de hojas de cálculo, procesos fragmentados o interfaces empresariales complejas. FARO definió el producto, diseñó la experiencia, construyó la arquitectura técnica e integró los sistemas externos necesarios para convertir esa idea en una plataforma funcional.

SaaS multilingüe Cloudflare + Supabase Pagos MONEI Responsive
01

El reto

El Pasaporte Digital de Producto no es una única página ni un simple código QR. Es un sistema vivo de datos de producto, identidad empresarial, evidencias, requisitos regulatorios, versiones, traducciones y acceso público permanente.

Complejidad regulatoria

La plataforma debía distinguir entre requisitos vigentes, marcos adoptados, fechas vinculantes y esquemas todavía pendientes, sin presentar como obligatorio lo que aún no lo es.

Datos estructurados

La información debía organizarse alrededor de organizaciones, productos, identificadores, materiales, evidencias, datos regulatorios y versiones publicadas.

Experiencia accesible

Un proceso técnicamente complejo debía convertirse en un recorrido guiado que pudiera utilizar una PYME sin un equipo interno especializado en cumplimiento.

Escalabilidad SaaS

El producto necesitaba planes, límites de publicación, equipos, facturación, upgrades, downgrades y control de derechos sin duplicar reglas de negocio.

02

Estrategia de producto

Antes de construir pantallas, definimos el modelo operativo: una organización mantiene un catálogo; cada producto conserva un registro estructurado; el pasaporte se prepara por etapas; la publicación crea una salida pública permanente; y los cambios posteriores pueden evolucionar sin destruir el historial.

La interfaz pública se diseñó alrededor de una idea sencilla: “datos de producto que se convierten en confianza duradera”. En paralelo, el área privada se concibió como un espacio de trabajo guiado, con estados claros, validaciones progresivas y próximos pasos visibles.

Página principal de DPPora en escritorio
La experiencia pública de DPPora comunica la propuesta de valor y conecta directamente con la creación del primer pasaporte.
03

Arquitectura e infraestructura

La plataforma combina Cloudflare para entrega global y lógica en el edge con Supabase para autenticación, PostgreSQL, almacenamiento y servicios de backend. La separación entre interfaz, datos, traducción y servicios externos permite evolucionar cada parte sin convertir el producto en un monolito difícil de mantener.

Modelo de datos

Organizaciones, usuarios, productos, pasaportes, versiones, evidencias, suscripciones y eventos se estructuran como entidades relacionadas.

Seguridad

Autenticación, control de acceso por organización, Turnstile en puntos sensibles y validación de operaciones de servidor.

Edge y caché

Cloudflare se utiliza para distribución, protección y procesos que se benefician de ejecución y caché cercanas al visitante.

Servicios externos

Las integraciones se aíslan detrás de rutas y funciones específicas para evitar acoplar toda la aplicación a un proveedor concreto.

04

Verificación empresarial y registros

El alta de una organización no se limita a pedir que el usuario escriba un nombre. DPPora incorpora búsquedas de registros empresariales según la jurisdicción. Para Reino Unido, por ejemplo, la plataforma consulta Companies House y devuelve los datos registrados para que el usuario los confirme.

Para empresas de la UE se incorporó validación VIES cuando corresponde. El flujo contempla además profesionales individuales y jurisdicciones donde la búsqueda automática no está disponible, permitiendo continuar con entrada manual sin romper el proceso.

Búsqueda de empresa en Companies House desde DPPora
Ejemplo real del flujo de registro: búsqueda de una sociedad británica, recuperación de los datos y estado “Registry confirmed”.
05

Catálogo y flujo de creación

El espacio de trabajo organiza los productos por estado del pasaporte y permite buscar por nombre, SKU, GTIN, UPI, fecha o material. Cada producto avanza por un proceso de cuatro etapas: identidad, datos del pasaporte, información regulatoria de la UE y previsualización/publicación.

El objetivo fue que la plataforma explicara qué falta y qué viene después. Los estados, mensajes de ayuda y validaciones reducen la posibilidad de publicar un registro incompleto o incoherente.

Catálogo de productos del espacio de trabajo DPPora
Catálogo del espacio de trabajo con búsqueda, filtros, estado del pasaporte y acceso directo a cumplimiento UE.
06

Identidad de producto, materiales y evidencias

DPPora acepta identificadores como GTIN/EAN y SKU, e incorpora escaneo de códigos de barras para acelerar la captura. Los materiales incluyen porcentaje y país de origen, con validación para asegurar que la composición alcanza exactamente el 100%.

Además de la composición, el registro puede almacenar instrucciones de reparación, reciclaje, sostenibilidad y documentos de evidencia. Los tooltips explican el propósito de campos complejos en el propio contexto de trabajo.

Composición de materiales validada en DPPora
Validación de composición al 100%, procedencia por material y campos de reparación, reciclaje y sostenibilidad.
Escáner de códigos de barras de DPPora
Escáner de EAN/UPC integrado para completar el GTIN desde la cámara cuando el dispositivo lo permite.
07

Preparación regulatoria de la UE

Una de las decisiones más importantes fue no fingir que todos los esquemas DPP están completamente definidos. El módulo de información regulatoria separa la preparación voluntaria de los esquemas obligatorios y conserva identificadores de esquema, versión, estado de registro y campos de correlación para futuras integraciones.

Esto permite que los clientes organicen datos ahora y evolucionen sus registros a medida que los actos delegados, esquemas semánticos y sistemas oficiales se concreten.

Preparación del registro regulatorio de la UE en DPPora
El registro muestra de forma explícita el estado del esquema y evita presentar como obligatorio un requisito todavía pendiente.
08

Traducción y publicación multilingüe

El producto se diseñó para un mercado europeo desde el principio. La interfaz pública y el portal se localizan, y los pasaportes publicados pueden servirse en varios idiomas. La traducción automática se almacena en caché para evitar repetir trabajo innecesario y puede corregirse manualmente cuando se requiere una versión editorial.

La arquitectura mantiene separada la versión fuente del contenido traducido para que una actualización del pasaporte pueda invalidar o actualizar las traducciones afectadas sin perder control de la versión.

Traducciones y evidencias en el editor de pasaportes
Evidencias y traducciones forman parte del mismo flujo de preparación; las traducciones automáticas pueden revisarse manualmente.
09

QR permanente y pasaporte público

Al publicar, DPPora genera una URL permanente y un código QR descargable que puede incorporarse al producto o a su embalaje. El QR no apunta a una imagen estática: abre el registro público mantenido por la plataforma.

La publicación se diseñó como una transición clara de “borrador” a “live”, mostrando al operador exactamente qué enlace y QR debe utilizar.

Pasaporte DPPora publicado con URL y código QR
Vista de publicación con URL permanente, UPI y código QR descargable.
10

Facturación, planes y derechos

La capa comercial se construyó como parte del producto, no como un añadido externo. Los planes controlan límites de pasaportes publicados, usuarios y capacidades. El panel muestra el consumo actual, la próxima renovación y el siguiente importe previsto.

Los upgrades calculan el importe prorrateado, IVA cuando corresponde, cantidad debida hoy y siguiente cobro. Los cambios de periodicidad y downgrades se manejan como operaciones explícitas para evitar cambios de suscripción ambiguos.

Resumen de plan y uso en DPPora
Panel de organización con plan activo, uso de pasaportes, próxima renovación, siguiente pago y acceso de equipo.
Cálculo de upgrade de suscripción DPPora
Flujo de upgrade con precio prorrateado, IVA, importe debido hoy y siguiente pago antes de confirmar.
11

Regulación como producto

DPPora no se limita al área privada. Se creó un tracker regulatorio público que distingue fechas vinculantes, marcos adoptados y prioridades ESPR. Cada sector puede mostrar qué preparar y enlazar a la fuente oficial correspondiente.

Esta capa convierte la investigación regulatoria en una herramienta útil para adquisición, educación del mercado y preparación del cliente antes de registrarse.

Tracker de regulación europea DPPora
Tracker regulatorio de DPP con estados diferenciados y referencias a fuentes oficiales de la UE.
12

Responsive, estados y microinteracciones

El portal y la web pública se probaron y ajustaron para móvil, incluyendo navegación compacta, formularios largos, selectores de idioma, modales, teclado móvil y controles que podían desbordarse en pantallas pequeñas.

También se trabajaron estados intermedios —como la apertura del espacio de trabajo o la actualización de una suscripción— para que operaciones asíncronas no parecieran bloqueos o errores.

Página principal de DPPora en móvil
La experiencia pública conserva jerarquía, CTA y selector de idioma en una pantalla móvil estrecha.
13

Tecnologías e integraciones

La solución combina infraestructura gestionada con código personalizado para mantener velocidad de desarrollo sin sacrificar control sobre datos, lógica de negocio o experiencia.

Cloudflare
Supabase / PostgreSQL
Google Sign-In
Cloudflare Turnstile
MONEI
Traducción multilingüe
QR / UPI
GTIN / EAN
VIES / Companies House
JavaScript
HTML5
CSS3
14

Resultado

4

etapas de pasaporte

Flujo guiado desde identidad hasta publicación.

100%

composición validada

Control matemático de la suma de materiales.

QR

permanente

Enlace público descargable para cada pasaporte publicado.

EU

preparado para evolución

Modelo versionado para adaptar esquemas y registros futuros.

El resultado es una plataforma SaaS funcional que une producto, cumplimiento, traducción, publicación, facturación y administración en un único flujo. Más importante aún, la arquitectura está preparada para evolucionar a medida que maduren los requisitos europeos de DPP.

15

Qué demuestra este proyecto

Producto, no solo desarrollo

FARO participó en la definición del flujo, prioridades, estados, mensajes y modelo comercial, además de escribir el software.

Integraciones reales

Registros empresariales, pagos, autenticación, traducción, QR y servicios cloud se integraron en una experiencia coherente.

Diseño para normativa cambiante

El sistema distingue preparación de obligación y utiliza versiones para evitar que los cambios regulatorios invaliden el producto.

Iteración sobre producción

El desarrollo incluyó pruebas reales de registro, pagos, dispositivos, idiomas y publicación, corrigiendo fricciones a medida que aparecían.

¿Necesitas convertir un proceso complejo en una plataforma usable?

FARO diseña y desarrolla productos digitales a medida, desde la arquitectura y UX hasta integraciones, pagos y puesta en producción.

Hablar con FARO