Podcast Subscription App
High-performance podcast subscription UI with virtual scrolling, GraphQL API, Framer Motion animations, and SQLite persistence.
TypeScriptNext.jsGraphQLApolloSQLitePrismaTanStack QueryFramer Motion
About
A polished podcast subscription and management UI built as a technical assignment, demonstrating performance-optimized list handling and smooth animations.
Tech Stack
- Next.js 14 + React 18 + TypeScript
- HeroUI + Tailwind CSS
- GraphQL API with Apollo Server
- SQLite with Prisma ORM
- TanStack Query for server state
- TanStack Virtual for list virtualization
- Framer Motion for animations
Key Implementation Details
- Virtual Scrolling — renders only visible items from 100+ podcasts, keeping the list buttery smooth
- Image Lazy Loading — images load only when entering the viewport
- Memoized Components — React.memo prevents unnecessary re-renders
- Floating Action Button — appears with a spring animation when items are selected, shows dynamic count
- Animated Bottom Drawer — slides up at 75% screen height, scrollable, with save and remove actions
- Persistent State — selections saved to SQLite via Prisma through the GraphQL layer