Skip to content

feat: add Explore Videos page with pagination#53

Merged
aar0np merged 7 commits intomainfrom
ui-updates
Feb 20, 2026
Merged

feat: add Explore Videos page with pagination#53
aar0np merged 7 commits intomainfrom
ui-updates

Conversation

@pmcfadin
Copy link
Contributor

Summary

  • Adds new /explore page with paginated grid of latest videos (12 per page) using GET /api/v1/videos/latest
  • Pagination controls: prev/next buttons, numbered pages with ellipsis, "Showing X–Y of Z videos" indicator
  • Loading skeleton, error, and empty states matching existing codebase patterns
  • keepPreviousData on the query to avoid skeleton flash between page transitions
  • Scroll-to-top on page change
  • "Explore" nav link added to header
  • Hero "Explore Videos" button wired to /explore route
  • Lazy-loaded route in App.tsx for code splitting

Closes #52

Test plan

  • Click "Explore Videos" button on home hero — navigates to /explore
  • Click "Explore" in header nav — navigates to /explore
  • Verify video grid loads with up to 12 cards per page
  • Page through using pagination controls; verify data updates and scroll resets to top
  • Verify "Showing X–Y of Z" updates correctly per page
  • Throttle network in DevTools — verify loading skeletons appear
  • Disconnect network — verify error state renders
  • Verify responsive layout (1/2/3/4 columns at breakpoints)
  • Verify video cards link to correct /watch/:id routes

pmcfadin and others added 7 commits February 19, 2026 15:27
Add educational tooltips covering core Cassandra data modeling patterns:
- latest-videos-timeseries: time-series bucketing with day partition key
- registration-dual-table: dual-table writes (users + user_credentials)
- login-credential-lookup: email partition key lookup + counter table
- comments-denormalization: same data, different partition key pattern
- trending-video-activity: time-series partitions for trend computation
- playback-stats-counters: multi-counter table (views, play time, etc.)
- ratings-data-model: counter aggregation + composite key with upsert

Wired into Home, Auth, CommentsSection, Trending, Creator, and Watch pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Delete App.css (old Vite template styles, never imported)
- Delete Index.tsx wrapper, import Home directly in App.tsx
- Delete 21 unused shadcn/ui primitives (accordion, alert-dialog, etc.)
- Delete unreferenced educational feature MDs from public/ and src/data/

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Only contained a README with a future Playwright strategy — no tests,
config, or dependencies exist yet. Can be recreated when E2E is implemented.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace placeholder "KV" square with killrvideo-logo.png in header
- Link Developer Docs button to docs.datastax.com/en/astra-db-serverless

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
New /explore route showing a paginated grid of latest videos (12 per page)
with prev/next navigation, page numbers, and item count indicator.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix video.views → video.viewCount to display actual view counts
- Add scroll-to-top on page change
- Add keepPreviousData to useLatestVideos to avoid skeleton flash between pages
Copy link
Collaborator

@aar0np aar0np left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@aar0np aar0np merged commit 6b3c6d8 into main Feb 20, 2026
4 checks passed
@pmcfadin pmcfadin deleted the ui-updates branch February 24, 2026 19:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: add Explore Videos page with pagination

2 participants