Browse Stores
Route: /stores
File: ayts-fe/app/stores/page.tsx
Auth required: No
Purpose
Lists all active stores on the platform. Customers browse and filter stores before clicking through to a store detail page.
Features
- Paginated list of verified + active stores
- Filter by category (Grocery, Pharmacy, Vegetables, etc.)
- Location-based filtering (shows distance per store)
- Search bar that queries
/api/search - Stores sorted by rating descending
Data Fetching
GET /api/stores?status=active&category={category}&limit=20&offset={page}
Includes category data to populate the filter UI.
Key Components
| Component | File |
|---|---|
| Category filter tabs | Inline in stores/page.tsx |
LocationSelector | components/location-selector.tsx |
StoreCardSkeleton | components/store-card-skeleton.tsx |
Store Card Display
Each store card shows:
- Store banner image (from R2)
- Store name
- Category badge
- Star rating (hidden if 0 reviews)
- Distance (if location set)
- Short description
Known Issues / Status
| Item | Status |
|---|---|
| Page renders correctly | ✅ Fixed (categories.map guard added) |
| Active store filter | ✅ Only status: active stores shown |
| Test stores removed | ⚠️ Must clean DB before launch |
| Category filter tabs | ✅ Working |
| Pagination | ✅ Working |
| Empty state | ✅ Shows "No stores found" |
Related Routes
/stores/[id]— Individual store detail/categories— Category-specific view/search— Full-text search