Back to selected work
2026CloudeProduct design and engineering, end to end

Cloude: a consumer cloud product we designed, built and shipped

A consumer cloud product we built end to end. One Next.js codebase, one design system, one team across web, desktop and React Native. The MVP shipped in two weeks. We stayed and built the final consumer product on top of the same foundation, with end-to-end encryption and hardware-backed keys at the core of the architecture.

Consumer cloudWeb + mobileEnd-to-end encryption
Cloude: a consumer cloud product we designed, built and shipped

We built Cloude end to end. The MVP shipped in two weeks. The team we put on it stayed past the launch and built the final consumer product on top of the same foundation. One engagement, one Next.js codebase, one design system, one team across web, desktop and React Native.

What we shipped

  • 2Weeks to MVPSigned brief to live demo
  • 1CodebaseWeb, desktop, React Native, one design system
  • End to endScopeBrand, product, engineering, security architecture
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.
What the visitor lands on. Brand voice up top, product proof under the fold.

One codebase, two surfaces

The first call we made was structural. A consumer cloud product usually ships its marketing site and its product platform from different repos, with different teams and a translation layer between the two. We argued for one Next.js codebase, one design system, one team. The founder bought the argument.

The trade-off is honest. A unified codebase means the marketing team cannot ship copy without coordinating with the engineering deploy, and the product team has to think about SEO when they refactor a component. We took those costs because the upside was bigger. The marketing site embeds the live Files component instead of a mockup, so what the visitor previews on the landing is what they get when they sign up. The launch quarter shipped in one calendar event, not three.

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.
The Files component embedded in the marketing page is the same React component shipping in the platform. We refactored both to share one data adapter, so the demo workspace and the production database speak the same shape.
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.
We wrote the bullets last, after the platform was at parity with the marketing claim. Every checkmark points at an interaction the production app actually ships.

Engineering for scale before the users existed

The MVP had a small early-access cohort when we started. The seed deck projected an order-of-magnitude increase by year one. We engineered for the projection, not the current load.

The library list is virtualised with a fixed row cap regardless of dataset size, so render cost stays flat as the library grows. Recent files come from a single server query indexed on (owner_id, accessed_at desc), so the query plan stays constant per request. Folder pages and recent views read from a local-first IndexedDB cache, kept in sync with the server through a differential sync engine: only changed bytes travel the wire. A laptop in a tunnel keeps working. A reconnection catches up in one 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.
The home of the product. Sidebar, folder grid, recent files, storage meter. The folder grid is virtualised, so render cost stays flat regardless of how many folders the account holds.
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 groups by Today, Yesterday, Earlier this week, Older. Single server query, indexed on (owner_id, accessed_at desc), so the plan stays constant whether the account holds dozens or thousands of files.

Mobile is React Native, not a thinned web app

The shortcut would have been a PWA wrapped in a WebView. We built native instead. The React Native client consumes the same design tokens as the web through a shared package, so a token bump propagates to every surface in one commit. The bundle is engineered to stay under the Store hot-fetch threshold after tree-shaking, so updates download silently. Transport is HTTP/3 over QUIC. The first interactive frame on a low-end Android budget is the same fixed cost regardless of dataset size: virtualised lists and indexed queries do the heavy lifting on the server, not the device.

Cloude mobile Files screen. Top bar with hamburger, search field, notification bell with unread dot, theme toggle and avatar. Folder cards in a two-column grid for Design, Product, Finance, Photos, Archive. Recent strip with All, Images, Documents, Videos, Audio, Archives tabs. Recent files Brand identity and Coastline at sunset visible. Bottom tab bar with Files, Shared, Recent, Starred, Account.
Files
Cloude mobile Recent screen. Files grouped by Today, Yesterday, Earlier this week. Each row shows type icon, filename, format badge and a star toggle. Bottom tab bar with Recent active.
Recent
Cloude mobile Starred screen. Four starred items: Brand identity FIG, Coastline at sunset JPG, Product launch keynote KEY, Investor update PDF. Each row shows type icon, filename, format badge and a filled star. Bottom tab bar with Starred active.
Starred
Three primary surfaces of the React Native client. Same design tokens as the desktop, layout adapted for the thumb.
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.
The drawer is the entire mobile navigation surface. Destinations, pinned folders, tag chips, storage meter, all on one scroll. We never put navigation in a sub-menu on mobile.

Encryption without the latency tax

This was the hardest engineering call. End-to-end encryption usually shows up at the tax window: extra round trips, longer cold starts, files that open slower. We refused to ship that.

Storage is encrypted at rest with AES-256-GCM. Per-account keys are derived via Argon2id from the user passphrase and never stored on the server. Shared files travel end-to-end encrypted with X25519 key exchange. Private keys live inside the iOS Secure Enclave and the Android StrongBox, hardware-backed and resistant to extraction even on a rooted device. The architecture is zero-knowledge: the server holds opaque blobs and never sees an unwrapped key.

Independent penetration testing runs on a recurring cadence with a third-party security firm. A public vulnerability disclosure program with a researcher bounty has been live since launch.

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.
On the marketing site, security is one section out of three. No fear copy, no padlock icons. Three checkmarks and a screenshot of the production account page.
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.
The same surface in the product. Plan, storage breakdown by type, 2FA toggle, full device list with one-tap sign-out per device. We refused to scatter security across multiple settings pages.

The design system that powers Cloude was built fresh for this engagement and now lives across web, desktop and React Native. We are still maintaining it. The team stayed small throughout, augmented by the studio standing agent governance: no contractor sprawl, no vendor handoff. The vulnerability disclosure program inherited from the security work is still active. The design tokens we shipped on day one are the same tokens running in production today.

Stack

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

Two weeks from brief to live MVP. The studio kept going and shipped the final product on top of the same foundation. The infrastructure they built on day one held up. Encryption on by default, sub-second from any edge. We never had to renegotiate scope.

Founder, CloudeAfter the launch quarter

Operational, today

  • End to endScopeBrand to security architecture, one team
  • 1CodebaseWeb, desktop, React Native, one set of design tokens
  • Day oneTokensThe tokens we shipped at launch are still running in production

Building something that has to last past the seed?

We work with founders and teams that have measurable engineering targets and need them hit before the next round. End to end, one team. Get in touch.

Start a project