feat(frontend): replace hardcoded courses with real API, add search, filters, tag chips, and infinite pagination

[portableDD]

Description

/courses renders 6 hardcoded fake courses with no search, no filtering, and no API call. This issue replaces the static list with real backend data, live search, difficulty and tag filters, sort options, and infinite scroll pagination.

Background

• frontend/app/courses/page.tsx defines const courses = [...] — 6 fake entries, no API call
• Backend: GET /api/v1/courses with query params: search, difficulty, tags, sortBy, sortOrder, page, limit
• GET /api/v1/courses/tags returns available tags for filter chips
• frontend/components/course-card.tsx exists and should be reused and extended

Implementation Guide

Remove hardcoded courses array. Create frontend/hooks/use-courses.ts using useInfiniteQuery calling GET /api/v1/courses.

Create frontend/components/courses/course-filters.tsx: debounced search input (300ms), difficulty pill buttons (All/Beginner/Intermediate/Advanced), tag chips populated from GET /courses/tags (multi-select), and a sort selector.

Update CourseCard to display enrollmentCount and an isEnrolled green badge for authenticated users.

Add "Load More" button calling fetchNextPage(). Show loading skeleton grid and empty state with "Clear filters" button.

Acceptance Criteria

• No hardcoded course data in courses/page.tsx
• Real courses fetched from backend via TanStack Query
• Search input debounced 300ms
• Difficulty filter pills filter the list correctly
• Tag filter chips populated from GET /courses/tags
• Sort selector works with sortBy and sortOrder params
• "Load More" pagination works with useInfiniteQuery
• Loading skeletons and empty state both implemented

Complexity: High - 200 points
Join: https://t.me/ByteChainAcademy | Contact: contact@nexacore.org