Records

An interactive 3D web application that visualizes monthly Spotify top tracks in an immersive environment and supports real-time live listening visualizers.

Core Features

• Interactive 3D Scene: Visualizes top tracks in an interactive WebGL scroll tunnel powered by React Three Fiber.
• Top 10 Snapshot Exporter: Generates high-quality vertical 9:16 mobile story images optimized for social sharing.
• Real-Time Live Visualizer: Streamers can share a permanent link (/live?stream=id) displaying their active Spotify playback with an animated mechanical turntable, spinning vinyl disc, and continuous OAuth background updates.
• Secure Multi-Client Sharing: Share token generator backed by a PostgreSQL database and Drizzle ORM.

Tech

• Framework: Next.js
• Database: PostgreSQL
• ORM: Drizzle ORM
• Graphics: Three.js and React Three Fiber
• Animations: Framer Motion

Development Setup

1. Environment Variables

Create a .env file in the root directory:

DATABASE_URL=postgresql://user:password@localhost:5432/dbname
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
NEXT_PUBLIC_SPOTIFY_REDIRECT_URI=http://127.0.0.1:3000/api/callback

2. Install Dependencies

bun install

3. Run Database Migrations

Generate and push your schema to the PostgreSQL database:

bun run db:push

4. Start Development Server

bun run dev