- Notes can be lost if browser data is cleared.
- Private browsing or device changes can make data unavailable.
- No cloud sync means recovery depends on user backups.
Case study 02 · Web application
Private notes,
without the noise.
Shiye Notes is a warm, distraction-free writing space that saves automatically and keeps every note on the user's own device.
RoleUI & frontend
StackHTML · CSS · JavaScript
StorageBrowser LocalStorage
LanguageChinese interface
Problem
Small thoughts should not require a large productivity system.
Many note tools begin with accounts, cloud sync, workspaces, and configuration. For quick private writing, that overhead interrupts the moment and creates uncertainty about where personal text goes.
Solution
I built a single-page notebook that is ready from the first click.
Automatic saving
Edits persist after a short delay, with a visible status so writers never need to manage save actions.
Fast retrieval
Search filters both title and body; pinning keeps important notes at the top.
Calm writing surface
Editorial typography, generous space, reading time, and character counts support writing without turning it into a dashboard.
My role
I designed the visual system and implemented the complete browser application.
That included note state and persistence, create/edit/delete flows, search and sorting, keyboard shortcuts, responsive navigation, empty states, accessibility labels, automated unit tests, and browser smoke testing.
Decisions
The technical architecture follows the promise made to the user.
LocalStorage by design
No server means no account friction and no transmission of private note content.
Separated state logic
Pure note-store functions are kept apart from DOM behavior so creation, sorting, search, serialization, and recovery can be tested.
Responsive, not reduced
On mobile, the note list becomes a drawer while the full editor remains usable.
Outcome
7/7
core state tests pass, covering note creation, updates, deletion, pinned sorting, search, serialization, and malformed-data recovery.
What I learned
Local-first software still needs explicit trust cues. Save status, recovery behavior, and a clear explanation of where data lives matter as much as the storage API itself.
Next
Portability
Add JSON export and import so users can own and move their notes.
Optional security
Explore client-side encryption without changing the no-account model.
Writing tools
Add lightweight Markdown shortcuts and theme controls while protecting the calm interface.