github-samples / github-samples/tailspin-toys
Add category and publisher filtering to the game list
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8
- Forks
- 53
- Avg merge
- 20h 1m
- Merged PRs (30d)
- 4
Description
Closes #8
Description
Adds filtering controls to the game list page so users can narrow results by category and/or publisher. The game catalog's existing data model already includes categories and publishers, so this builds on existing structures without schema changes.
Related Issue
Closes #8 — Allow users to filter games by category and publisher
Type of Change
- 🐛 Bug fix (non-breaking change that fixes an issue)
- ✨ New feature (non-breaking change that adds functionality)
- 💥 Breaking change (fix or feature that would cause existing functionality to change)
- 📚 Documentation update
- 🧪 Test update
- 🔧 Refactor (no functional changes)
Changes Made
- Extended data-access helpers in
src/lib/to support filtering games by category and publisher - Added support for combining category and publisher filters simultaneously
- Implemented accessible filter UI controls with
data-testidattributes, ARIA labels, keyboard navigation, and visible focus states
Testing
Data Layer Changes
- Ran
npm run test:unit- all tests pass - Added/updated Vitest unit tests for filtering helpers
- Generated a migration (
npm run db:generate) for any schema change
Frontend Changes
- Ran
npm run test:e2e- all tests pass - Added
data-testidattributes to interactive elements - Verified build succeeds (
npm run build)
Checklist
- My code follows the project's coding standards
- I have used explicit TypeScript types for function parameters and return values
- I have built the UI with Astro components and Tailwind CSS utility classes (dark theme)
- I have updated documentation (README, instruction files) if needed
- My changes are focused on a single concern
- I have written clear commit messages explaining what and why
Additional Notes
This pairs naturally with the search feature in issue #2. Together, search and filtering would substantially improve how users discover games in the catalog.
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 by reading the existing data-access helpers in src/lib/ and the game list page to understand the current catalog flow and available categories and publishers. Run npm run test:unit and npm run test:e2e before making changes. Done means category and publisher filters work independently and together, with accessible controls, passing tests, and a successful npm run build.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- backend, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100