Technical Stack Breakdown

Core Framework & Runtime

TanStack Start (@tanstack/react-start)

A full-stack React framework that provides server-side rendering (SSR), file-based routing, and seamless integration between client and server code. It enables building modern web applications with React while maintaining excellent performance through SSR capabilities.

React 19 (react, react-dom)

The latest version of React, providing the component-based UI library foundation. React 19 includes improvements to concurrent rendering, server components support, and enhanced developer experience.

Vite (vite)

A fast, modern build tool and development server that provides instant hot module replacement (HMR) and optimized production builds. Used as the build tooling foundation for the entire application.

Routing & Data Fetching

TanStack Router (@tanstack/react-router)

A type-safe, file-based routing solution for React applications. Provides declarative routing with TypeScript support, route loaders, and seamless integration with data fetching libraries. Includes devtools for debugging routes during development.

TanStack Query (@tanstack/react-query)

A powerful data synchronization library for React that handles server state management, caching, background updates, and synchronization. Provides hooks for fetching, caching, and updating server data with minimal boilerplate. Includes devtools for monitoring queries and mutations.

TanStack Router SSR Query (@tanstack/react-router-ssr-query)

Bridges TanStack Router and TanStack Query for server-side rendering, enabling data prefetching during SSR and seamless hydration on the client.

Database & ORM

Drizzle ORM (drizzle-orm)

A lightweight, performant TypeScript ORM that provides type-safe database queries and schema definitions. Uses a SQL-like query builder API that's both powerful and intuitive, with excellent TypeScript inference.

Drizzle Kit (drizzle-kit)

The companion CLI tool for Drizzle ORM that handles database migrations, schema generation, and provides a database studio interface for visual database management.

PostgreSQL (pg)

The official PostgreSQL client library for Node.js, providing the low-level database connection and query execution capabilities that Drizzle ORM uses under the hood.

Authentication

Better Auth (better-auth)

A modern authentication library that provides a complete auth solution with support for multiple providers, session management, email verification, and secure password handling. Designed to be framework-agnostic and highly customizable.

Cloud Storage

AWS SDK for S3 (@aws-sdk/client-s3, @aws-sdk/s3-request-presigner)

Provides client-side and server-side integration with Amazon S3 for storing and retrieving files (audio files, cover images). The request presigner enables generating secure, time-limited URLs for direct client-to-S3 uploads and downloads without exposing credentials.

Payment Processing

Stripe (stripe)

The official Stripe Node.js SDK for handling payment processing, subscription management, webhook handling, and customer management. Enables the subscription tier system (free, basic, pro) with recurring billing capabilities.

UI Component Libraries

Radix UI (@radix-ui/*)

A collection of low-level, accessible, unstyled UI component primitives. Provides the foundation for building custom design systems with full accessibility support, keyboard navigation, and ARIA attributes. Components include:

• Dialog: Modal dialogs and overlays
• Dropdown Menu: Context menus and dropdowns
• Select: Customizable select components
• Checkbox: Accessible checkbox inputs
• Label: Form label components
• Slider: Range input controls
• Slot: Composition utility for component props

Lucide React (lucide-react)

A comprehensive icon library with hundreds of beautifully designed, tree-shakeable SVG icons. Provides consistent iconography throughout the application.

Styling & Design System

Tailwind CSS (tailwindcss, @tailwindcss/vite, @tailwindcss/postcss)

A utility-first CSS framework that enables rapid UI development through utility classes. Tailwind CSS v4 provides improved performance and a more streamlined configuration. The Vite plugin enables PostCSS integration for optimal build performance.

Tailwind Merge (tailwind-merge)

A utility function that intelligently merges Tailwind CSS classes, resolving conflicts and ensuring the correct classes are applied when conditionally combining class strings.

Tailwind CSS Animate (tailwindcss-animate)

Provides additional animation utilities and keyframes for Tailwind CSS, enabling smooth transitions and animations throughout the UI.

Class Variance Authority (class-variance-authority)

A utility for creating type-safe, composable component variants. Works seamlessly with Tailwind CSS and enables building component APIs with variant props (e.g., size, variant, color).

CLSX (clsx)

A tiny utility for constructing className strings conditionally. Often used in combination with tailwind-merge for dynamic class management.

Form Management

React Hook Form (react-hook-form)

A performant, flexible form library with easy-to-use validation. Minimizes re-renders and provides excellent developer experience for complex forms.

Hookform Resolvers (@hookform/resolvers)

Bridges React Hook Form with validation libraries like Zod, enabling schema-based form validation.

Zod (zod)

A TypeScript-first schema validation library that provides runtime type checking and validation. Used for form validation, API request/response validation, and type inference.

Drag & Drop

DnD Kit (@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities)

A modern, lightweight drag-and-drop library for React. Provides accessible drag-and-drop functionality with keyboard support and screen reader compatibility. Used for reordering playlist songs and other sortable lists.

File Uploads

React Dropzone (react-dropzone)

A React component library for handling file uploads with drag-and-drop support. Provides a clean API for file selection, validation, and upload progress tracking.

UI Feedback & Notifications

Sonner (sonner)

A toast notification library that provides beautiful, accessible toast messages for user feedback. Lightweight and highly customizable.

NProgress (nprogress)

A lightweight progress bar library that displays a loading indicator at the top of the page during route transitions and data fetching operations.

HTTP Client

Redaxios (redaxios)

A lightweight Axios-like HTTP client that uses the native Fetch API. Provides a familiar API while maintaining a smaller bundle size.

Development Tools

TypeScript (typescript)

The primary programming language, providing static type checking, enhanced IDE support, and improved code maintainability throughout the application.

Vite TSConfig Paths (vite-tsconfig-paths)

A Vite plugin that enables TypeScript path aliases (like ~/components) to work seamlessly in both development and production builds.

React DevTools & Router DevTools

Development tools for debugging React components, TanStack Query state, and TanStack Router navigation. These are automatically included in development builds for enhanced debugging capabilities.

Infrastructure & Deployment

Docker Compose (docker-compose.yml)

Used for local development database setup, providing a containerized PostgreSQL instance that can be easily started and stopped.

Architecture Patterns

The application follows a modern full-stack architecture with:

• File-based routing through TanStack Router
• Server-side rendering for improved SEO and initial load performance
• Type-safe database queries through Drizzle ORM
• Optimistic updates and caching through TanStack Query
• Component composition with Radix UI primitives
• Utility-first styling with Tailwind CSS
• Schema-driven validation with Zod
• Modular architecture with clear separation between routes, components, hooks, queries, and data access layers