Notes
Productivity
- Year
- 2024 — 26
- Built with
- React 18, TypeScript, Vite 5, CSS +2 more ↓
(01) Overview
A notes app that stays out of the way. Folders down the side, notes in the middle, the editor on the right — everything saves as you type and is still there when you come back.
(02) Features
- 01FoldersCreate and delete folders, and move a note between them from the editor.
- 02PinningPinned notes stay on top; the rest sort by their last edit.
- 03SearchFilter the current folder as you type.
- 04First line is the titleNo separate title field — the first line names the note and the rest is its preview.
- 05Light and darkFollows the system on the first visit, then remembers your choice.
- 06BackupExport every note and folder as JSON in one click.
(03) Screens
(04) On a phone
Same app, smaller screen.
Captured from the live site at 390 pixels wide — the width of most phones in a hand.
(05) Stack
Six tools, and the job each one does here.
- UIReact18One component and a persisted-state hook
- LanguageTypeScriptThe note model and the app
- BuildVite5Builds to a static site
- StylingCSSHand-written, with light and dark themes on custom properties
- DatalocalStorageNotes, folders and theme
- HostingVercelStatic hosting
(06) Under the hood
- 01
A ten-line usePersist hook mirrors state to localStorage on every change, so there is no save button and no server.
- 02
No runtime dependencies beyond React itself.
- 03
On a phone the three panes become a stack — folders, list, editor — with a back button between each.
- 04
A rebuild of the original Next.js version, which the write-up walks through from Figma to launch.
Next case
Lumora
