github-samples / github-samples/tailspin-toys
Add a search box to find games by title
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8
- Forks
- 53
- Avg merge
- 20h 1m
- Merged PRs (30d)
- 4
Description
Players who already know what they're looking for shouldn't have to scan the whole catalog. Adding a simple search box on the game list page lets users quickly narrow the list by title, improving discoverability alongside the planned category and publisher filters. This builds on the existing game list data layer without changing the data model.
Acceptance criteria
- The game list page includes a search input that filters games by title
- Matching is case-insensitive and updates the visible list as the user types or submits
- An appropriate empty state is shown when no games match the search
- The search input follows the project's accessibility guidelines (labeling, keyboard navigation, visible focus states) and includes a
data-testidattribute - Unit tests cover any new data-layer/search helper and Playwright e2e tests cover the search behavior
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the game list page and trace the existing game list data layer to find where title filtering belongs. Add the accessible search input and empty state, then run the relevant unit tests and Playwright e2e tests; done means case-insensitive filtering updates the visible list and all acceptance criteria pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- playwright, typescript
- Domain
- accessibility, frontend, testing-qa
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100