Diseño e ingeniería para founders de consumer cloud
Una sola codebase Next.js en web, desktop y React Native. Una arquitectura zero-knowledge con claves protegidas por hardware. Una lista que se queda plana a cualquier tamaño de dataset, porque la ingeniería se dimensionó sobre la proyección, no sobre la carga actual.
Los problemas que más escuchamos
Un sitio de marketing en Webflow, un producto en otro repo, y una capa de traducción entre dos equipos
El visitante ve un mockup pulido, se registra, y aterriza en un producto distinto del que prometía la landing. El trimestre del lanzamiento sale en dos eventos que nunca acaban de cuadrar.
Un MVP montado para los usuarios de la semana pasada, no para los del año que viene
La lista de la librería repinta el DOM entero en cada tecla. La consulta de archivos recientes escanea la tabla. El día que cierras el round seed, el producto se ralentiza justo antes de que salga la nota de prensa.
Una PWA dentro de una WebView, vendida como app nativa
El prompt de instalación aparece gris. Las notificaciones push se caen. El reviewer del store la rechaza en la tercera submission, y el lanzamiento se va al trimestre siguiente mientras el equipo reescribe en React Native.
Una historia de privacidad que nadie cree
Marketing dice cifrado, ingeniería dice best-effort, la auditoría de seguridad dice que las claves del cliente viven en el servidor. El producto pierde precisamente los clientes que vinieron por la privacidad.
Cloude · un producto cloud de consumo construido entero
Un producto cloud de consumo en web, desktop y React Native. Una sola codebase Next.js, un solo design system, claves protegidas por hardware en el centro, y un motor de sync que aguanta dentro de un túnel.
Dentro de la build de Cloude
Construimos Cloude en web, desktop y React Native. Una sola codebase Next.js, un solo design system, un solo equipo. El MVP salió en línea, y el equipo que lo había puesto en la pista se quedó después del lanzamiento y construyó el producto de consumo final sobre la misma base. Un solo engagement, una sola codebase, ninguna segunda build.
Una codebase, dos superficies
La primera decisión fue estructural. Un producto cloud de consumo normalmente envía sitio de marketing y plataforma de producto desde repos distintos, con equipos distintos y una capa de traducción en medio. Defendimos una sola codebase Next.js, un solo design system, un solo equipo. El founder compró el argumento.
El trade-off es honesto. Una codebase unificada significa que el equipo de marketing no puede enviar un cambio de copy sin coordinarse con el deploy de ingeniería, y el equipo de producto tiene que pensar en SEO cuando refactoriza un componente. Asumimos esos costes porque la ventaja era mayor. El sitio de marketing incrusta el componente Files en vivo del producto en lugar de un mockup, y lo que el visitante ve en preview en la landing es exactamente lo que recibe al darse de alta. El trimestre del lanzamiento salió en un solo evento de calendario, no en un lanzamiento de marketing seguido de un lanzamiento de producto que nadie sincroniza.
Ingeniería para la escala antes de que existan los usuarios
El MVP tenía una pequeña cohorte de early access cuando empezamos. El deck del seed proyectaba un aumento de un orden de magnitud al cabo del primer año. Hicimos la ingeniería para la proyección, no para la carga actual.
La lista de librería está virtualizada con un tope fijo de filas independientemente del dataset, y el coste de rendering se queda plano mientras la librería crece. Los archivos recientes vienen de una sola consulta de servidor indexada sobre (owner_id, accessed_at desc), y el plan de consulta queda constante por petición. Las páginas de carpeta y los recientes leen de una caché local-first en IndexedDB, mantenida en sync con el servidor a través de un motor de sync diferencial que solo envía los bytes cambiados. Un portátil dentro de un túnel sigue funcionando, y una reconexión recupera en una sola ronda.
Móvil es React Native, no una webapp adelgazada
El atajo habría sido una PWA envuelta en una WebView. Fuimos nativo. El cliente React Native consume los mismos design tokens que el web a través de un package compartido, y un bump de un token se propaga en un solo commit a todas las superficies. El bundle está dimensionado para mantenerse por debajo del umbral de hot-fetch del iOS App Store tras el tree-shaking, así que las actualizaciones se descargan en silencio. El transporte es HTTP/3 sobre QUIC, con migración de conexión que sobrevive a un cambio de Wi-Fi a LTE. El primer frame interactivo en un Android de gama baja es el mismo coste fijo independientemente del dataset, porque la lista virtualizada y la consulta indexada hacen el trabajo pesado del lado del servidor y no del dispositivo.
Cifrado sin impuesto de latencia
Esta fue la decisión de ingeniería más difícil. El cifrado del lado cliente normalmente aparece en la ventana de impuestos, con round trips adicionales, cold starts más largos, archivos que se abren más despacio. Nos negamos a enviar esa experiencia.
El almacenamiento está cifrado en reposo con AES-256-GCM. Las claves por cuenta se derivan vía Argon2id de la passphrase del usuario y no se guardan nunca en el servidor. Los archivos compartidos viajan cifrados con intercambio de claves X25519. Las claves privadas viven dentro del iOS Secure Enclave y del Android StrongBox, protegidas por hardware y resistentes a la extracción incluso en un dispositivo rooted. La arquitectura es zero-knowledge, el servidor contiene solo blobs opacos, y el servidor no ve nunca una clave descifrada.
El penetration testing independiente gira con cadencia recurrente a través de una empresa de seguridad externa. Un programa público de disclosure de vulnerabilidades hereda de ese trabajo y sigue activo. Los clientes verifican la promesa en lugar de creerla de palabra.
Por qué esta forma importa para un founder consumer
Un producto cloud de consumo no es una landing pulida más un file sync genérico. Es el trimestre del lanzamiento en el que marketing y producto salen juntos, el cold-start cuando el usuario abre la app en el tren y la librería pinta antes de que la red responda, el momento en que un investigador lee la arquitectura y reconoce que el cifrado es real, y el día que cierras el round seed y los usuarios se duplican sin que el producto se ralentice. Cloude es la forma de trabajo que cierra todo ese circuito bajo una sola codebase y un solo design system, no tres repos que ven cada uno una parte del usuario.
Lo que el trabajo entregó
Una sola codebase Next.js en web, desktop y React Native. Claves protegidas por hardware en iOS y Android. Una arquitectura zero-knowledge verificada por penetration testing externo. Una lista de librería virtualizada con un coste de rendering constante a cualquier dataset. Un motor de sync diferencial que recupera en una sola ronda tras una reconexión.
Qué entregamos en este vertical
Una codebase, tres superficies
Sitio de marketing, producto web y cliente React Native viven en un solo repo Next.js, con un solo design system. La landing de marketing incrusta el componente Files en vivo del producto, y el visitante ve en preview lo que recibe al registrarse.
Arquitectura zero-knowledge
El servidor contiene solo blobs opacos y no ve nunca una clave descifrada. Las claves por cuenta se derivan de la passphrase del usuario vía Argon2id y no salen nunca del dispositivo.
Claves de cifrado protegidas por hardware
Las claves privadas viven dentro del iOS Secure Enclave y del Android StrongBox. Resisten a la extracción incluso en un dispositivo rooted.
Compartición de archivos cifrada
Los archivos compartidos viajan cifrados con intercambio de claves X25519 entre destinatarios. AES-256-GCM en reposo, sin texto plano en ningún cable.
Motor de sync diferencial
Por el cable solo viajan los bytes cambiados. Un portátil dentro de un túnel sigue funcionando, y una reconexión recupera en una sola ronda.
Caché local-first en IndexedDB
Las páginas de carpeta y los recientes leen del almacenamiento local y se reconcilian con el servidor en segundo plano. El primer paint es instantáneo, la staleness está acotada.
Lista de librería virtualizada
El coste de rendering se queda plano sea cual sea el tamaño del dataset. Mil archivos y un millón de archivos pintan el mismo número de filas.
Plan de consulta indexado para las rutas calientes
Los archivos recientes vienen de una sola consulta de servidor indexada sobre (owner_id, accessed_at desc). El plan de consulta queda constante por petición, sin escaneos completos a escala.
Cliente React Native con design tokens compartidos
El cliente móvil consume los mismos design tokens que el web a través de un package compartido. Un bump de un token se propaga en un solo commit a todas las superficies.
Transporte HTTP/3 sobre QUIC
La migración de conexión sobrevive a un cambio de Wi-Fi a LTE sin un handshake nuevo. El primer frame interactivo en Android se mantiene fijo con cualquier tamaño de dataset.
Bundle listo para el store por debajo del hot-fetch
El bundle de React Native se queda por debajo del umbral de hot-fetch del iOS App Store tras el tree-shaking, así que las actualizaciones se descargan en silencio en segundo plano.
Programa de penetration testing
Empresa de seguridad externa con cadencia recurrente. El informe de cada intervención queda archivado y los findings se siguen hasta la remediation.
Disclosure pública de vulnerabilidades
Un programa de disclosure documentado con tiempos de respuesta declarados. Quien investiga sabe dónde mandar un hallazgo y qué esperar.
Flujo de recuperación para una passphrase perdida
Claves de recuperación opcionales en shards, con una interfaz que deja claro que sin ellas, una passphrase perdida significa datos perdidos.
Un stack que no hace pagar al usuario por la privacidad
Cada capa de esto existe para amortizarse dos veces: la primera cuando estás poniendo en línea la primera versión del producto, la segunda cuando aguantas una revisión de seguridad o un ciclo de prensa sobre privacidad y la arquitectura es la respuesta. Elegimos el stack que aguanta justo en ese segundo momento.
Next.js App Router como único runtime. Sitio de marketing, producto web, y superficie API para el cliente React Native viven todos en un solo repo. Las páginas de marketing renderizan de forma estática y las páginas de producto renderizan de forma dinámica, pero los design tokens, la tipografía y los componentes son los mismos en ambas. El equipo de marketing y el equipo de ingeniería trabajan en la misma codebase, y eso cuesta coordinación en un cambio de copy y ahorra una capa de traducción en un rediseño.
React Native para el cliente móvil, con los mismos design tokens compartidos a través de un único package. Un bump de un token en el design system se propaga en un solo commit a web, desktop y móvil. El bundle se mantiene por debajo del umbral de hot-fetch del iOS App Store tras el tree-shaking, y las actualizaciones se descargan en silencio. El cliente Android se apoya en StrongBox, el cliente iOS en el Secure Enclave, con claves protegidas por hardware y ninguna vía de extracción incluso en un dispositivo rooted.
Arquitectura de datos zero-knowledge. Los archivos se cifran del lado cliente con AES-256-GCM, con claves por cuenta derivadas de la passphrase del usuario vía Argon2id y nunca almacenadas en el servidor. Los archivos compartidos viajan cifrados con intercambio de claves X25519 entre destinatarios. El servidor contiene blobs opacos, acceso solo con URL firmada, y nunca ve una clave descifrada. El informe de penetration testing y el programa público de disclosure de vulnerabilidades dan al cliente algo que verificar en lugar de algo que creer de palabra.
Caché local-first con un motor de sync diferencial. Las páginas de carpeta y los recientes leen primero de IndexedDB y se reconcilian con el servidor en segundo plano. Por el cable solo viajan los bytes cambiados. Un portátil dentro de un túnel sigue funcionando, y una reconexión recupera en una sola ronda. La lista de librería está virtualizada con un tope fijo de filas, así que el coste de rendering se queda plano a cualquier tamaño de dataset, y los archivos recientes vienen de una sola consulta de servidor indexada sobre (owner_id, accessed_at desc), así que el plan de consulta queda constante por petición.
HTTP/3 sobre QUIC para el transporte. La migración de conexión sobrevive a un cambio de Wi-Fi a LTE sin un handshake nuevo. El primer frame interactivo en un Android de gama baja es el mismo coste fijo tanto si la librería tiene mil archivos como un millón, porque la lista virtualizada y la consulta indexada hacen el trabajo pesado del lado correcto del cable.
TypeScript strict del dispositivo al servidor. Los renames quedan seguros, las migraciones de esquema quedan verificables, el bus factor queda en cero. Cuando el ingeniero que construyó el motor de sync deja el equipo, el siguiente lee las firmas de los tipos y lo envía a producción.
Preguntas que hacen los founders
¿Cómo garantizan que no pueden leer los datos del usuario?
Las claves por cuenta se derivan de la passphrase del usuario vía Argon2id y no salen nunca del dispositivo. Los archivos se cifran del lado cliente con AES-256-GCM antes de pisar el cable. El servidor contiene solo blobs opacos, acceso exclusivo con URL firmada. El informe de penetration testing y el programa público de disclosure de vulnerabilidades son la forma en que el cliente verifica la promesa, en lugar de creerla de palabra.
¿Por qué React Native en lugar de una PWA en WebView?
Una WebView no ve ni Secure Enclave ni StrongBox. Las claves protegidas por hardware no son negociables en un producto de privacidad, así que el cliente móvil tiene que ser nativo. El cliente React Native reutiliza también los design tokens del package web, y el coste de ir nativo se paga una sola vez a nivel de design system, no en cada superficie.
¿Cómo evitan que el cifrado ralentice el producto?
Sin round trips adicionales en la ruta de lectura. El descifrado ocurre del lado cliente después de que los bytes han llegado. Las claves compartidas se intercambian vía X25519, lo bastante rápido como para que el cold-start de abrir un archivo compartido no se sienta distinto de uno no compartido. El coste de latencia que la mayoría de productos paga por el cifrado del lado cliente es casi todo arquitectónico, no criptográfico.
¿Y si el usuario pierde la passphrase?
En el alta ofrecemos claves de recuperación opcionales en shards, con una interfaz que deja claro que sin ellas, una passphrase perdida significa datos perdidos. Nos negamos a enviar una vía de recuperación backdoor que se anuncie privada y no lo sea.
¿Cómo escalan antes de que lleguen los usuarios?
La lista de librería está virtualizada, así que el coste de rendering se queda plano a cualquier dataset. Los archivos recientes vienen de una sola consulta indexada, así que el plan de consulta queda constante por petición. Las vistas de carpeta y recientes leen de la caché local en IndexedDB, así que el primer paint es instantáneo independientemente de la red. Diseñamos sobre la proyección, no sobre la carga actual.
¿Cómo gestionan la review de los stores?
Hemos enviado iOS y Android a través de las pipelines de review de Apple y Google para un producto de privacidad, así que conocemos las preguntas que el reviewer hará sobre criptografía, borrado de cuenta y export de datos. El bundle se queda por debajo del umbral de hot-fetch del iOS, y las actualizaciones silenciosas funcionan.
¿Se ocupan ustedes del penetration testing?
No. Trabajamos junto a la empresa de seguridad que traen ustedes, o sugerimos partners con los que ya hemos enviado proyectos. Los resultados de la intervención se archivan en la carpeta de compliance del cliente, y los findings entran en nuestro tracker para la remediation.
¿Qué pasa cuando el usuario está sin red?
La caché local-first mantiene todas las lecturas funcionando. Las escrituras se ponen en cola en IndexedDB y se reproducen cuando vuelve el enlace. El motor de sync diferencial solo envía los bytes cambiados en la reconexión, y una ventana de offline larga no se convierte en una sync larga.
Cuéntanos tu producto consumer
Una llamada para enmarcar el proyecto, un número concreto en la primera respuesta, sin teatro de agencia y sin pitch deck de case studies que parecen todos iguales.