Components

Pages

Vue pages in app/pages/:

index.vue

Home recommendation feed. Features:

• Recommendation cards from GET /api/recommend
• Recommendation quota reads from GET /api/recommend/quota
• refresh and getNew recommendation modes
• Detail hydration through GET /api/movies/:id
• Auth-gated watched and My List actions

search.vue

Search and browse page. Features:

• Debounced title search via GET /api/movies/search
• Client-side genre, rating, sort, watched, and My List filters
• Movie details modal
• Add/remove watched and My List actions with auth prompt fallback

watched.vue

Watched history with filtering tools. Features:

• Search, genre, and runtime filters
• Multiple sort modes
• Remove watched movies (DELETE /api/watched)
• Metadata backfill for old entries missing genres/runtime

mylist.vue

Saved movie list page. Features:

• Reads from GET /api/mylist
• Removes items through DELETE /api/mylist
• Opens cached movie details

profile.vue

Profile/auth page. Displays:

• AuthForm for unauthenticated users
• UserProfileHeader for authenticated users
• WatchedMoviesGrid with modal details

reset-password.vue

Password reset flow page for Supabase password recovery links.

Components

Reusable Vue components in app/components/:

• AuthForm.vue - Login/signup/reset entry UI with hCaptcha and server-backed signup through /api/auth/signup
• MovieCard.vue - Swipe-style recommendation card
• MovieSearchCard.vue - Search result card
• MovieDetails.vue - Modal with enriched movie metadata
• WatchedMoviesGrid.vue - Profile watched grid
• LoginPromptModal.vue - Auth-required prompt when trying to save while logged out
• BottomNav.vue - Main bottom navigation
• UserProfileHeader.vue - Profile header summary
• Skeleton components for loading states (SkeletonMovieCard, SkeletonSearchCard, SkeletonWatchedGrid)

Composables

Shared logic in app/composables/:

useAuth.ts

Session and authentication lifecycle:

• login/signup/logout
• signup posts to /api/auth/signup instead of calling Supabase signup directly from the browser
• Google OAuth sign-in
• reset/update password
• existing-email signup responses switch the UI back to login while preserving the email field
• watched-state sync after auth state changes

useWatchedMovies.ts

Watched movie state management:

• local watched state
• pending watched queue in localStorage
• sync/add/remove through /api/watched

useMyList.ts

My List state management:

• load current saved list from /api/mylist
• add and remove TMDB IDs through /api/mylist

useRecommendationQuota.ts

Recommendation quota helper:

• load the current per-user daily quota from /api/recommend/quota
• reset to the default limit while signed out

useWatchedFilters.ts

Filtering and sorting logic for the watched page:

• title search
• genre filters
• runtime buckets
• sort options
• metadata enrichment for missing genres/runtime

useMovieDetails.ts

Movie data helper:

• cached movie detail fetch (/api/movies/:id)

useSupabase.ts

Typed accessor for the Supabase client injected by the Nuxt plugin.

Layout

default.vue

Main app shell with bottom navigation and page slot.

Types

TypeScript definitions in app/types/:

• movie.ts - TMDB response models, app movie models, watched/pending movie types
• youtube.ts - YouTube-related response typing used by the UI

App Entry

app.vue initializes auth and watched synchronization at application startup.