How to vibe codeTIDAL

Prerequisites

• Node.jsfree

  Runtime environment for building the web player frontend and local SQLite backend.

• GitHubfree

  Version control and code repository hosting.

AI coding tools

• Claude Code

  Autonomous agentic coding tool for scaffolding the React audio player UI and database schema.

• Cursor

  AI-native code editor for refining audio player state management and CSS layout polish.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with Tailwind CSS and set up Turso SQLite tables for artists, albums, tracks, and user playlists.

   Create a new Next.js application using App Router and Tailwind CSS. Configure a Turso SQLite database client using libSQL. Write a migration script to create tables for users, artists, albums, tracks (with duration, bitrate, and audio file URL fields), and playlists. Ensure proper foreign key relationships and TypeScript interfaces for all database entities. Include error handling for connection failures and basic seed scripts with placeholder local audio tracks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication System Setup

   Implement local authentication using better-auth to secure the personal music dashboard.

   Install and configure better-auth in the Next.js project targeting the Turso SQLite database. Set up email/password authentication endpoints and protected route middleware for the dashboard and player views. Create login and registration forms styled with Tailwind CSS that handle validation errors cleanly and store session tokens securely in HTTP-only cookies.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Audio Player UI and State Management

   Build a persistent bottom audio player component with play, pause, seek, volume control, and queue management.

   Build a robust React audio player component fixed to the bottom of the screen using HTML5 <audio> elements. Create a global audio state store (using Zustand or React Context) that manages current track, playback state, volume, shuffle, repeat, and active play queue. Include track progress bar scrubbing, time elapsed displays, and artwork thumbnail integration.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Catalog Browsing and Album View

   Develop browse pages, artist discography views, and album tracklists allowing users to select and play music.

   Create responsive grid layouts for home discovery, search results, artist detail pages, and album tracklists using Tailwind CSS. Implement client-side search filtering across tracks, albums, and artists. Connect play action buttons on tracks and albums to dispatch actions to the global audio player queue, updating the active play state seamlessly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Personal Library and Playlist Management

   Implement user playlist creation, track favoriting, and local audio file uploads via Cloudflare R2 storage.

   Build a library page where users can view their liked tracks and custom playlists. Add a modal interface for creating new playlists and adding tracks to them. Implement a secure file upload route that pushes user-provided local MP3/FLAC audio files directly to Cloudflare R2 storage and saves the corresponding track metadata record in the Turso database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for TIDAL