beardofedu / beardofedu/agentic-workflows-projects

[SEARCH-001] Search: Product search bar with live filtering

Open
#16 0 comments 0 reactions 0 assignees View on GitHub
enhancement products sprint-3
Dominant language
CSS
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

## Overview
Add a search bar to the header that supports live keyword search across products, with results updating as the user types.

## Acceptance Criteria
- [ ] Search input visible in the header on all pages
- [ ] Debounced live search (300ms) — results appear in a dropdown while typing
- [ ] Results show: product emoji, name, category, and price
- [ ] Clicking a result navigates to the Product Detail Page (#4)
- [ ] "See all results" link opens a full-page `/search?q=` results page
- [ ] No results state with a helpful message
- [ ] Search results are filterable and sortable on the full results page (price asc/desc, rating)
- [ ] Recent searches stored in `localStorage` (up to 5, clearable)
- [ ] Keyboard navigation in the dropdown (↑↓ to move, Enter to select, Esc to close)

## Technical Notes
Phase 1: client-side filtering over the product catalog JSON.
Phase 2 (post-MVP): server-side search with Elasticsearch or similar.

## Depends On
- #4 PDP-001 — search results must link to a complete product detail page

## Blocks
- #23 PERF-001 (search index optimization is part of performance work)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.