Torna ai lavori
Product design2026CloudeProduct design and engineering

Cloude: un prodotto cloud consumer, dal brand alla sicurezza

Un prodotto cloud consumer che abbiamo costruito per intero. Una sola codebase Next.js, un solo design system, un solo team su web, desktop e React Native. L'MVP è andato live in due settimane. Siamo rimasti e abbiamo costruito sopra il prodotto consumer finale, sulla stessa base, con crittografia end-to-end e chiavi protette dall'hardware al centro dell'architettura.

Consumer cloudWeb + mobileEnd-to-end encryption
Cloude: un prodotto cloud consumer, dal brand alla sicurezza

Abbiamo costruito Cloude per intero. L'MVP è andato live in due settimane. Il team che ci abbiamo messo è rimasto anche dopo il lancio e ha costruito il prodotto consumer finale sulla stessa base. Un solo incarico, una sola codebase Next.js, un solo design system, un solo team su web, desktop e React Native.

Cosa abbiamo costruito

  • 2Settimane all'MVPDal brief firmato alla demo live
  • 1CodebaseWeb, desktop, React Native, un solo design system
  • TuttoScopeBrand, product, engineering, architettura di sicurezza
Cloude marketing homepage hero. Header with brand mark, Product, Security, Press nav, theme toggle, Sign in link and Open Cloude button. Centred headline All your stuff, in one beautiful place over organic pink and orange blob art. Subline about a drive that finally feels yours. Open Cloude button below. Top edge of the in-app Files preview peeks under the fold.
Quello su cui il visitatore atterra. Voce del brand in alto, prova del prodotto sotto la fold.

Una codebase, due interfacce

La prima decisione è stata strutturale. Un prodotto cloud consumer di solito rilascia sito di marketing e piattaforma da repo diversi, con team diversi e una traduzione continua fra i due. Abbiamo spinto per una sola codebase Next.js, un solo design system, un solo team. Il founder si è convinto.

Il trade-off è onesto. Una codebase unica significa che il team di marketing non rilascia copy senza coordinarsi col deploy di engineering, e il team di prodotto deve pensare alla SEO quando refattorizza un componente. Abbiamo accettato quei costi perché il vantaggio era più grande. Il sito di marketing incastona il componente Files in produzione invece di un mockup: quello che il visitatore vede sulla landing è quello che riceve quando si registra. Il lancio è andato live in un'unica data, non tre.

Cloude marketing homepage product showcase. Same header. Below the hero, the live Cloude Files dashboard is rendered full-width on a soft pink-to-peach gradient. Sidebar with Upload button, primary destinations and pinned folders. Folder grid for Design, Product, Finance, Photos, Archive. Recent files list visible.
Il componente Files incastonato nella pagina di marketing è lo stesso componente React che gira in produzione sulla piattaforma. Abbiamo refattorizzato entrambi per condividere lo stesso adapter dati, così il workspace di demo e il database di produzione condividono la stessa forma dei dati.
Cloude marketing Files section. Top of frame fades from the orange-pink gradient into white. Section overline FILES, headline Every file, exactly where you remember it. Three checkmark bullets about grid-list toggle, hover-to-preview and drop targets. Right side shows a desktop-frame screenshot of the Cloude Files page.
Abbiamo scritto i bullet per ultimi, dopo che la piattaforma era alla pari con la promessa di marketing. Ogni check punta a un'interazione che l'app in produzione fa davvero.

Ingegnerizzato per scalare prima che gli utenti esistessero

L'MVP partiva con una piccola coorte di early-access. Il deck della seed prevedeva un ordine di grandezza in più entro fine anno. Abbiamo dimensionato per la proiezione, non per il carico del momento.

La lista della libreria è virtualizzata con un cap di righe fisso indipendentemente dalla dimensione del dataset, così il costo di render resta piatto al crescere dei file. I file recenti vengono da una singola query server-side indicizzata su (owner_id, accessed_at desc), e il piano della query resta costante per ogni richiesta. Cartelle e viste recenti pescano da una cache locale-first IndexedDB tenuta in sync col server tramite un motore di sync differenziale: viaggiano in rete solo i byte cambiati. Un portatile in galleria continua a funzionare. Una riconnessione recupera in un singolo round.

Cloude desktop Files page in light mode. Sidebar with Files, Shared, Recent, Starred, Trash, Account, plus pinned folders Design, Product, Photos and tag chips Work, Personal, Family, Travel. Top row of folder cards: Design, Product hovered, Finance, Photos, Archive. Recent files list with type badges, sizes and timestamps. Storage meter at the bottom of the sidebar.
La home del prodotto. Sidebar, griglia di cartelle, file recenti, indicatore di storage. La griglia di cartelle è virtualizzata, così il costo di render resta piatto indipendentemente da quante cartelle ha l'account.
Cloude desktop Recent page in light mode. Tab strip with All, Images, Documents, Videos, Audio, Archives. Files grouped by Today, Yesterday, Earlier this week, Older. Each row shows type icon, filename, format badge, size and relative time. Same sidebar as the Files page.
Recent raggruppa per Oggi, Ieri, In settimana, Prima. Query server unica, indicizzata su (owner_id, accessed_at desc), così il piano resta costante che l'account abbia decine o migliaia di file.

Mobile è React Native, non un'app web travestita

La scorciatoia sarebbe stata una PWA dentro una WebView. Abbiamo costruito nativo. Il client React Native consuma gli stessi design token del web tramite un package condiviso, così un bump dei token si propaga a ogni interfaccia in un solo commit. Il bundle è ingegnerizzato per restare sotto la soglia di hot-fetch dello Store dopo il tree-shaking: gli aggiornamenti vengono scaricati in silenzio. Il trasporto è HTTP/3 su QUIC. Il primo frame interattivo su un Android di fascia bassa ha lo stesso costo fisso indipendentemente dalla dimensione del dataset: liste virtualizzate e query indicizzate fanno il lavoro pesante sul server, non sul dispositivo.

Cloude mobile navigation drawer open over the Account screen. Drawer shows the brand mark, an Upload button, primary destinations Files, Shared, Recent, Starred, Trash, Account, pinned folders Design, Product, Photos with file counts, and tag chips Work, Personal, Family, Travel. Storage meter and Earn free storage card at the bottom.
Il drawer è l'intera interfaccia di navigazione su mobile. Destinazioni, cartelle pinnate, chip dei tag, indicatore di storage, tutto in un singolo scroll. Su mobile non abbiamo mai messo la navigazione in un sub-menu.

Crittografia senza il costo della latenza

È stata la decisione di engineering più dura. La crittografia end-to-end di solito presenta il conto: round trip extra, cold start più lunghi, file che si aprono più piano. Quel conto non l'abbiamo voluto pagare.

Lo storage è cifrato a riposo con AES-256-GCM. Le chiavi per account sono derivate via Argon2id dalla passphrase utente e non vengono mai salvate sul server. I file condivisi viaggiano cifrati end-to-end con scambio X25519. Le chiavi private risiedono nel Secure Enclave di iOS e nello StrongBox di Android, protette dall'hardware e resistenti all'estrazione anche su dispositivo rooted. L'architettura è zero-knowledge: il server tiene blob opachi e non vede mai una chiave in chiaro.

Penetration test indipendenti vengono eseguiti a cadenza regolare da una società di sicurezza esterna. Un programma di vulnerability disclosure pubblico con bounty per i ricercatori è attivo dal lancio.

Cloude marketing Account section. Header active state on Security with floating peach and pink blob accents. Section overline ACCOUNT, headline Your drive, all in one screen. Three checkmark bullets about storage breakdown, two-factor on by default and active sessions. Right side shows a desktop-frame screenshot of the Cloude Account page.
Sul sito di marketing, la sicurezza è una sezione su tre. Niente copy allarmistico, niente icone lucchetto. Tre check e uno screenshot della pagina account in produzione.
Cloude desktop Account page in light mode. Profile header for Alex Morgan with avatar and member-since date. Plan card with Cloude Pro, 200 GB tier and Upgrade button. Storage breakdown by type with coloured legend for Videos, Images, Design, Documents, Archives, Audio. Security section with two-factor toggle on, password row, notifications row. Devices list with current Chrome session and Safari iOS sign-out option.
La stessa interfaccia nel prodotto. Piano, ripartizione storage per tipo, toggle 2FA, lista device completa con sign-out a un tap per ognuno. Abbiamo rifiutato di sparpagliare la sicurezza su più pagine di impostazioni.

Il design system che fa girare Cloude è stato costruito da zero per questo incarico e oggi gira su web, desktop e React Native. Lo manteniamo ancora noi. Il team è rimasto piccolo per tutta la durata, affiancato dalla governance ad agenti dello studio: nessuna proliferazione di contractor, nessun passaggio a fornitori. Il programma di vulnerability disclosure ereditato dal lavoro di sicurezza è ancora attivo. I design token che abbiamo rilasciato il primo giorno sono gli stessi che girano in produzione oggi.

Stack

  • Next.js16
  • React19
  • TypeScript5
  • React Native
  • Postgres16
  • Supabase
  • Cloudflare R2
  • Vercel Edge
  • Sentry
  • Meilisearch

Due settimane dal brief all'MVP live. Lo studio è andato avanti e ha rilasciato il prodotto finale sulla stessa base. L'infrastruttura che hanno tirato su il primo giorno ha tenuto. Crittografia attiva di default, latenza sotto il secondo da qualunque edge. Non abbiamo mai rinegoziato lo scope.

Founder, CloudeDopo il trimestre di lancio

Operativo, oggi

  • TuttoScopeDal brand all'architettura di sicurezza, un solo team
  • 1CodebaseWeb, desktop, React Native, un solo set di design token
  • Dal primo giornoTokenI token che abbiamo rilasciato al lancio girano ancora in produzione

Stai costruendo qualcosa che deve durare oltre la seed?

Lavoriamo con founder e team che hanno target di engineering misurabili e devono centrarli prima del round successivo. Dal brand alla sicurezza, un solo team. Scrivici.

Avvia un progetto