01
Markdown workspace
Notes can be written as plain Markdown, previewed for reading, and navigated by headings when documents become long enough to need structure.
Full-stack product case study
Built a local-first Markdown notebook for web and desktop.
Nota Notebook is a private writing workspace built around one shared React interface, zero-knowledge web sync, account-free desktop files, recovery flows, saved versions, search, and long-document navigation.
RoleFull-stack product implementation across app, desktop, backend, and deployment
ScopeShared workspace, Electron desktop, auth, encrypted storage, and sync flows
StackReact, TypeScript, Vite, Electron, Web Crypto, Cloudflare Workers, D1
StatusCore flows, multi-browser sync validation, and local production hardening completed
Project scope
The project combines a calm writing interface with platform-specific storage, explicit recovery behavior, and production-minded operational boundaries.
Product
Shared notebook workspace
Editor, Markdown preview, outline navigation, folders, sections, pages, search, trash, snapshots, export, themes, and responsive workspace behavior implemented once for both delivery targets.
Web
Account access separated from notebook access
Email sign-in authorizes encrypted storage, but recovery or an already trusted browser is required to unlock the notebook key. The server stores account data, sessions, and an encrypted notebook blob, not plaintext notes.
Desktop
Account-free local files
The desktop target starts offline, avoids web unlock screens, and saves compatible local JSON notebooks through a restricted Electron bridge with native open and create dialogs.
Operations
Launch hardening
Production guardrails cover auth abuse limits, cleanup scheduling, version-only sync polling, hidden-tab slowdown, browser and API security headers, privacy-safe logging, D1 backup, and rollback procedures.
A notebook that stays simple until the work gets deep.
The product surface is intentionally quiet: fast capture first, then deeper tools only when a note, folder, or writing session needs them.
02
Notebook organization
Sections, folders, root pages, important notes, search, trash, and export keep everyday notes manageable without turning capture into filing work.
03
Privacy-first sync
The web app encrypts notebook data before sync, while the desktop app stays account-free and saves portable local notebook files.
Product demos
Short clips show the features that are easiest to miss in a static screenshot: jumping through long notes, previewing Markdown, searching, and restoring saved versions.
Write Markdown, then preview
The editor keeps writing plain and precise, then switches into a cleaner reading view when needed.
Save and restore versions
Snapshots preserve important drafts so notes can move forward without losing earlier work.
Search across the notebook
Search helps recover notes even when the user remembers the topic better than the folder.
Outline navigation for long notes
Headings become a map for moving through long Markdown documents without manual scrolling.
One workspace, two persistence models.
The shared React workspace owns ordinary notebook behavior. Startup, unlock, sync, and file access are handled by platform-specific adapters.
Web app
The browser encrypts the notebook before sync. Email authentication grants access to encrypted storage, while recovery keys and trusted browsers control access to the notebook key.
- Encrypted notebook blob in D1
- Secure session cookie and route authorization
- Trusted browser unlock
- Recovery key replacement
- Conflict-aware encrypted writes
Desktop app
The desktop target opens directly into the notebook, requires no account, and saves local JSON files through a narrow Electron bridge.
- Offline startup
- Native open and create dialogs
- Autosave to selected JSON file
- Shared editor, search, snapshots, and Markdown behavior
React
TypeScript
Vite
Electron
Web Crypto
Cloudflare Workers
D1
Resend
Key decisions
The case study is strongest where the implementation had to make privacy, recovery, offline use, and launch readiness explicit.
Share behavior, split persistence
Editor behavior, notebook state, search, snapshots, and Markdown tools live in one interface. Web and desktop differences stay in startup and storage services.
Separate authentication from decryption
Email login proves account ownership, but it does not decrypt notes. Recovery or a trusted browser unlocks the notebook key.
Make recovery honest
Wrong keys, cleared browser storage, corrupted trusted-device records, lost-key states, logout behavior, and recovery-key replacement are handled as visible product flows.
Bound encrypted sync conflicts
The server cannot inspect encrypted notebooks to merge them. Multi-browser edits use version checks, conservative refresh or merge behavior, and blocking recovery for unsafe overlaps.
Problem
Build a private writing app that feels calm enough for everyday notes while still handling long documents, saved versions, web sync, desktop files, and recovery.
Constraint
Keep the desktop app account-free and offline while preserving the same editor, folders, search, snapshots, and Markdown behavior used by the web app.
Crypto
Generate a browser-side vault key, encrypt the notebook locally, protect the vault key with recovery and trusted-browser material, and keep plaintext notes and keys out of the backend.
Validation
Exercised first sign-in, recovery-key confirmation, encrypted save, refresh, expired-session return, trust removal, wrong-key rejection, new-browser recovery, corrupt-device fallback, and recovery-key replacement.
Sync
Multi-browser testing covered clean remote updates, forced stale states, independent edits, unsafe overlaps, and desynchronization attempts.
Launch
Local production hardening includes auth abuse controls, cleanup jobs, privacy-safe log checks, security headers, version-only polling, and operational recovery documentation.
Result
A writing tool that supports quick notes, long Markdown documents, local desktop files, encrypted web sync, recovery, and conflict-aware multi-browser behavior without maintaining two separate notebook interfaces.