A modern, responsive music player built with Next.js 15, TypeScript, and Supabase. Features cloud storage, real-time sync, and a beautiful UI with anime.js animations.

• 🎵 Audio Playback: Play, pause, stop, skip, previous/next
• 🔀 Shuffle & Repeat: Multiple repeat modes and shuffle functionality
• 📱 Responsive Design: Works on desktop and mobile
• 🎨 Modern UI: Beautiful animations with anime.js
• ☁️ Cloud Storage: Audio files stored in Supabase Storage
• 🗃️ Metadata Extraction: Automatic ID3 tag parsing
• ❤️ Favorites: Mark songs as favorites
• 📋 Playlists: Create and manage playlists
• 🔍 Search: Find songs by title, artist, or album
• 📊 Queue Management: Add songs to queue and reorder

• Frontend: Next.js 15 (App Router), TypeScript, React
• Styling: Tailwind CSS, anime.js animations
• Backend: Supabase (Postgres + Storage)
• State Management: Zustand
• Audio: HTML5 Audio API
• Metadata: music-metadata library

• Node.js 18+
• npm or yarn
• Supabase account

1. Clone and install dependencies:

   git clone <repository-url>
   cd waVemusiC
   npm install

2. Setup Supabase:

   • Create a new Supabase project
   • Run the database migrations:

     # Apply the initial schema
     supabase db push

   • Or manually run the SQL files in supabase/migrations/

3. Environment Variables: Create .env.local:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Start the development server:

   npm run dev

5. Upload your music:

   # Upload all MP3 files from public/songs directory
   npm run upload:dir
   
   # Or upload individual files
   npm run upload path/to/song.mp3
   
   # Extract metadata only (no upload)
   node scripts/upload.js song.mp3 --metadata-only

The CLI uploader supports multiple formats and automatically extracts metadata:

# Upload single file
node scripts/upload.js song.mp3

# Upload entire directory
node scripts/upload.js /path/to/music/folder/

# View metadata without uploading
node scripts/upload.js song.mp3 --metadata-only

• MP3
• WAV
• FLAC
• OGG
• M4A

• POST /api/upload - Upload audio files with metadata extraction
• GET /api/songs - Get paginated song list with search/filter
• GET /api/stream/[id] - Stream audio files with range support
• GET /api/playlists - Get user playlists
• POST /api/playlists - Create new playlist
• POST /api/favorites/[id] - Toggle favorite status

The app uses the following main tables:

• songs - Audio file metadata
• playlists - User playlists
• playlist_songs - Playlist-song relationships
• user_favorites - User favorite songs
• playback_states - Real-time playback state

├── app/                 # Next.js app router pages
├── components/          # React components
├── contexts/           # React contexts
├── hooks/              # Custom React hooks
├── lib/                # Utility libraries
├── scripts/            # CLI tools
├── store/              # Zustand state management
└── supabase/           # Database migrations

• MusicPlayer - Main audio player component
• AlbumCarousel - Swiper-based album art carousel
• SearchBar - Live search functionality
• useMusicStore - Global state management
• usePlayer - Audio playback logic

1. Connect your GitHub repository to Vercel
2. Add environment variables in Vercel dashboard
3. Deploy automatically on push

npm run build
npm start

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

MIT License - see LICENSE file for details.

For issues and questions, please open a GitHub issue.