github-samples / github-samples/tailspin-toys

Add category and publisher filtering to the game list

Open
#63 0 comments 0 reactions 0 assignees View on GitHub

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-testid attributes, 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-testid attributes 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.