Skip to main content
← All notes
Building

The homepage passes filter state through the URL so the notes page opens where you left off

software

The homepage shows a notes section at the bottom with the same sentence-style filter as the full notes page. Check out everything in all topics. The two inline select elements let visitors filter by type and tag before they leave the homepage. The HomeNotesFilter component limits the visible results to three cards. If the filtered set contains more than three notes, a link appears below — View all 47 notes with an arrow. That link is not a static path to /notes. It carries the active filter state as query parameters. If the visitor selected tips in accessibility, the link points to /notes?type=tip&tag=accessibility. If they selected updates in all topics, the link points to /notes?type=update with no tag parameter. If both filters are set to their defaults, the link points to /notes with no query string at all. The URL construction handles the parameter joining inline — a question mark before the first parameter, an ampersand between two parameters, and nothing when a parameter is at its default value. The result is that clicking through to the full notes page preserves the visitor's intent. They do not land on an unfiltered list and have to re-select the same filters. The homepage filter acts as a preview and the URL acts as a handoff. The same HomeNotesFilter component also handles the empty state — if no notes match the filter combination, a centred message replaces the grid. The component never makes a network request because the entire notes array is a static import. Filtering is a synchronous array operation that completes before the next render.

Comments coming soon

Sign in with TikTok to leave a comment. Coming soon.