App Summary: Drift Notes

Loaded Source URL

https://producingtechnology.com/65-apps/frazersara_157717_15200531_sf647_jsonapp.html

What the App Does

A "single-file mock application" that recreates a personal blog dashboard from attached JSON, for a blog called Drift Notes about "systems, learning, and building things with intention." It shows: a hero card with title and tagline, a Blog snapshot (Posts 12, Subscribers 348, Avg. read time 6.5 min), a Posts list with two entries (Small Systems, Big Calm — Featured; Debugging Without Panic), an About the author card (Sara Frazer, Hoboken NJ, with interest tags), a Selected post pane for "Small Systems, Big Calm" with two comments (Alex, Jordan), and a Newsletter card (Enabled, frequency options, 2 shown subscribers). Calm navy/near-black palette with soft card outlines and editorial typography.

Things That Didn't Work As Expected

• 12 posts claimed, only 2 shown, with no pagination or "See all" link — the count is decorative.
• "Shown subscribers: 2" is unlabeled and mismatches the 348 subscriber stat; unclear what it means.
• Selected post is pinned. Clicking other posts doesn't appear to swap the detail pane.
• Comments and newsletter are read-only. Likes can't be clicked, there's no comment composer, and no email input or subscribe button despite "Comments enabled" / Newsletter Enabled.
• No way to read a post. Only blurbs are shown — the Selected pane repeats the blurb instead of rendering the article.
• No tags, search, or filters on posts; author interest pills don't filter anything.
• Left side of desktop layout sits mostly empty below the short Posts list.

Prompt to Improve the App

Keep the calm navy aesthetic and editorial typography, but make Drift Notes a functional blog reader:

1. Render all 12 posts, paginated or virtualized, matching the snapshot count.
2. Make posts readable. Clicking a post opens a reading view that renders the full markdown body, with a back control and read progress.
3. Wire up post selection so clicking any post updates the Selected post pane, with a visible selected state.
4. Make comments interactive — add a composer, clickable Like that increments in-memory, and Reply.
5. Build a real newsletter block with email input, frequency radios (Weekly / Monthly / Only-best), and a Subscribe button with confirmation state.
6. Add tags, search, and sort. Show post tags, allow filtering by author interest or post tag, keyword search over title + body, sort by newest/oldest/read length.
7. Clarify ambiguous numbers (e.g., rename "Shown subscribers" to "Featured subscribers" or remove it).
8. Use the empty space on wide viewports by promoting to three columns: Author/Snapshot, Posts, Selected post; single column on narrow screens.
9. Add Export / Import JSON so the single-file mock can round-trip state.