← All examples

05 / An everyday app

Pocket Notes

Catch a thought before it goes. Keep it in this browser and choose when to export a copy.

Try now ↓

Your first minute

  1. Write in the note. Valid edits save in this browser.
  2. Watch the save status. If storage fails, keep the tab open.
  3. Export a text file to keep a copy.

Small on purpose

One note, up to 20,000 characters. Browser-local storage is not cloud sync or a backup. No import or rich text.

The app needs JavaScript. There is no account or server connection.

Open it. Run it. Change it.

A whole little project.

Source, focused tests, build scripts and a README. MIT licensed. Nothing depends on a private repository.

AFTER EXTRACTING THE SOURCE ZIP

cd pocket-notes
bun install --frozen-lockfile
bun run test
bun run typecheck
bun run build
bun run start

Install Bun first. Setup downloads the pinned development compiler; the built app runs locally. Read the README for its local URL.

Verify the download hashes

Compare SHA-256 with shasum -a 256 filename.

Source ZIP
a448ed345bb33fca42107a44cf84c15c884e35d4c5e87acdef42ed13b22099cd
Git bundle
1e3c1f7ffef5e3ecd7a3b65f93f450ba57a19e41d0f0da129958ff7ece6a792b

The build story

From an idea
to something you can use.

An error message is only half the job. Your words must still be there after the error.

  1. 01

    PRODUCT · INTENT

    Say what should happen.

    A person approved five small examples that visitors can try, download and learn from. HI keeps the agreed intent in plain sentences.

  2. 02

    DESIGN · EXPERIENCE

    Make the idea visible.

    The gallery and five visual directions were reviewed before implementation. The approved design pairs a clear first action with a usable mobile layout.

  3. 03

    DEVELOPMENT · PLAN & BUILD

    Agree on the rules, then build.

    Whitespace and Unicode stay intact. Failed storage never clears the editor or pretends an edit was saved.

    SpecSync records the contract. A Sol coding agent writes the implementation in an assigned directory. chough records the stage and handoff.

  4. 04

    QA · TEST & REPAIR

    Check what actually happens.

    Tests were written against explicit unimplemented functions first. That failure is a development starting point, not a regression in a working app. Fledge runs the real tests again after implementation.

    34 behavioral tests / 90 assertions passed. An independent agent freshly extracted this source ZIP, installed its pinned dependencies, and passed the documented tests, strict source typecheck and build. Browser interaction was checked separately by the coordinator.

    Browser interaction, accessibility and fresh source extraction are checked separately. A structural SpecSync pass alone cannot prove those behaviors.

  5. 05

    EVERYONE · ACCEPT & RELEASE

    Review the result together.

    The project owner approved the design, scope and finished implementation (site revision d1ad28a3). Merge, publication and deployment are separate decisions.

The actual trail

Read the commits.

This is a project-only export of real development history. Filtering removes unrelated workspace files and redacts author email addresses, so these public commit IDs differ from the originals. Commit times describe saved revisions, not hours of agent effort. The saved Git name is the workspace identity; it does not establish human authorship or review.

  1. 2aec720e3
    test(examples): add failing behavioral tests before app implementation
  2. dc8c3a662
    feat(examples): implement five standalone browser games and apps
Open the Git history on your machine
git clone pocket-notes.bundle pocket-notes-history
cd pocket-notes-history
git log --oneline
git show HEAD

The history retains the apps/pocket-notes/ project path. The source ZIP starts directly at the project root. No private remote is needed.

A closer look.

Pocket Notes running in the browser
Actual browser capture · Actual browser note containing sample text entered through the textarea; saved and reloaded.. Source and capture identity are recorded in the verification package.

Make your own small thing

What would you change?

Start with one sentence about what you want. Keep the change small enough to try, explain and check.

Meet the workflow ↗Try another example →