An infinite-scrolling gallery of popular Spotify tracks, backed by Supabase and paginated 20 at a time.
🚀 Try it live →
A practice project exploring scroll-driven pagination against a real dataset. Track artwork lives in a Supabase Postgres table and is fetched in pages of 20 from a Next.js Route Handler — when the container's bottom hits the viewport, the next offset loads. Searching by artist switches to a wider range query (200 rows) and resets the feed.
✨ Features
- Scroll-triggered pagination using
getBoundingClientRectagainst the viewport - Debounced artist-name search powered by Supabase
ilikefiltering - Progressive image loading via a custom
BlurredImagecomponent - Skeleton placeholders while the first page resolves
- Dark/light theme toggle via
next-themes - Typed Supabase client with generated
Databasetypes - shadcn/ui primitives on top of Radix + Tailwind
🛠️ Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 13 (App Router) |
| Language | TypeScript |
| UI | React 18, Tailwind CSS, shadcn/ui, Radix Slot |
| Icons | lucide-react |
| Theming | next-themes |
| Data | Supabase (Postgres) via @supabase/supabase-js |
| Async state | TanStack Query |
| Utilities | clsx, tailwind-merge, lodash |
🙌 Credits
Built by Mohamed Gado.