Less searching.
More signal.
Issue Lens is a small frontend experiment in making a backlog understandable: a searchable issue table with status filters and a view you can share.
- Role
- Frontend implementation
- Stack
- HTML, CSS, JavaScript
- Data
- Local sample records
- Status
- Working UI demo
01. The problem and scope
A list becomes harder to use when the controls and the displayed state disagree. This project explores a focused issue view with eight local sample records. It does not connect to GitHub, accept new issues or manage permissions.
02. My contribution
The example covers the complete frontend: semantic table markup, the filtering logic, query-string state and the empty-results message. The scope is deliberately small enough for someone to inspect the source and understand it in one sitting.
03. The implementation
The initial issue list lives in HTML, so the content is available without JavaScript. The script reveals the controls, reads the query and category from the URL, and derives visibility from those two values. A result count announces changes without moving focus.
HTML issue rows
↓
URL query + selected status
↓
Combined predicate
↓
Visible rows + count + empty state04. The decision that mattered
I kept the table as the source of displayed content rather than maintaining a second copy of the records in JavaScript. That avoids synchronizing two datasets in this small static example. For a larger application, I would move data access behind a tested API boundary and define loading and failure states.
05. What the demo demonstrates
Search and status filters combine. The Clear filters button restores the list and returns focus to search. The URL keeps the current query and status so reloading retains the view. Unknown category values fall back to All statuses. This is a working UI outcome, not a claim about customer productivity.
06. Checks and next steps
Check a matching query, no results, combined filters, a URL reload and keyboard interaction. On a small screen the table can scroll within a named region. Before connecting live data, add authentication, authorization, server-side filtering and explicit API error handling appropriate to your application.
Run it and read the source
Download the source ZIP and open its index.html. The source package contains the working demo, its local styles and script, third-party licenses and a README with the file map and suggested checks. It needs no package installation or API key.
In your own portfolio, link to the actual repository and deployed demo for your project. This example offers the real source files directly instead of inventing a GitHub account. The publishing guide explains where to add your repository URL.