Frontend: Wire Explore page to real API data #3

New Issue

TopherMayor · 2026-04-26T08:15:02Z

TopherMayor commented

2026-04-26 08:15:02 +00:00

Summary

Replace the hardcoded allComparisons array in src/app/(main)/explore/page.tsx with real API calls.

Implementation

Replace mock data with useEffect + fetch to GET /api/comparisons
Wire search — the existing searchQuery state should trigger API calls (debounced 300ms)
Wire category filters — the existing category buttons should pass as query params
Wire pagination — "Load More" button should fetch next page
Add loading states — skeleton cards during fetch
Add error state — retry button on fetch failure
Link cards to /compare/{slug} (currently links to /compare/${comparison.id} which is wrong — should use slug)

Data Mapping

The API returns items as string[] (just names). Map to the existing card shape:

comparison.items.join(" vs ") → subtitle
comparison.tags → badges
comparison.viewCount → eye icon stat
comparison.slug → link href

Files

Modify: src/app/(main)/explore/page.tsx
Depends on: API endpoint from issue #1

Acceptance Criteria

Explore page loads real comparisons from database
Search filters results in real-time
Category pills filter correctly
Load More fetches next page
Empty state shows when no results
Cards link to correct slug URLs

## Summary Replace the hardcoded `allComparisons` array in `src/app/(main)/explore/page.tsx` with real API calls. ## Implementation 1. **Replace mock data** with `useEffect` + `fetch` to `GET /api/comparisons` 2. **Wire search** — the existing `searchQuery` state should trigger API calls (debounced 300ms) 3. **Wire category filters** — the existing category buttons should pass as query params 4. **Wire pagination** — "Load More" button should fetch next page 5. **Add loading states** — skeleton cards during fetch 6. **Add error state** — retry button on fetch failure 7. **Link cards** to `/compare/{slug}` (currently links to `/compare/${comparison.id}` which is wrong — should use slug) ## Data Mapping The API returns `items` as string[] (just names). Map to the existing card shape: - `comparison.items.join(" vs ")` → subtitle - `comparison.tags` → badges - `comparison.viewCount` → eye icon stat - `comparison.slug` → link href ## Files - Modify: `src/app/(main)/explore/page.tsx` - Depends on: API endpoint from issue #1 ## Acceptance Criteria - [ ] Explore page loads real comparisons from database - [ ] Search filters results in real-time - [ ] Category pills filter correctly - [ ] Load More fetches next page - [ ] Empty state shows when no results - [ ] Cards link to correct slug URLs

TopherMayor added this to the v0.2 - Feed & Profile milestone 2026-04-26 08:15:02 +00:00

TopherMayor added the feature frontend labels 2026-04-26 08:15:02 +00:00

TopherMayor closed this issue

2026-04-28 14:20:27 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: TopherMayor/comparaison#3