ProjectsShelfmark
Shelfmark
Version 1
Stack
- Next.js
- React
- TypeScript
- Tailwind
- Zod
- TanStack Form
- TanStack Pacer
- Drizzle
What it is
A browser-local bookmark demo for saving, searching, filtering and pinning links.
Why it exists
Outside my day job, I chose a useful supplied design to keep growing my frontend craft and build a deployed bookmark-interface reference. Its cards of links also got me thinking about where all my own projects should live.
How it works
Add, find, filter, pin, and return with sample links and browser-local state. Version 1 names the storage boundary instead of implying account sync.
Story
A saved link needs a way back.
Saving a link gives an interface its first action. Finding that link again gives it a reason to exist. Shelfmark let me work on both through a design I could turn into a deployed app.
It was one of a set of focused builds, each on a smaller part of an interface. For Shelfmark, that part was a collection someone could change and return to.
I chose the design and set my review checklist as the bar; AI coding agents wrote the code, in Next.js with TypeScript. The build lets someone add links, find and filter them, and pin the ones they want to reach again. The collection stays in that browser. The sample links make the management controls available to try before anyone adds their own.
The cards of links got me thinking about a different collection: the projects I'm building. I needed a place to put all of them, where I could find them, the current ones especially, very easily. Shelfmark became a base template for thinking about that need and what would be valuable there.
This portfolio is where I'm meeting it, with projects grouped where that helps. Shelfmark is where that idea started.
Design: Frontend Mentor's Bookmark manager app (opens in a new tab). Build: Royer Adames, with AI agents.