Project Overview
Topline is a comprehensive web platform that addresses the complex challenge of audio stem separation in the music industry. Built for musicians, producers, and audio professionals, it leverages cutting-edge AI technology to extract individual components (vocals, drums, bass, instruments) from mixed audio tracks. The platform combines powerful backend processing with an intuitive user experience, featuring a complete credit-based economy, secure user management, and professional-grade audio handling capabilities.
Key Features
๐ต Audio Stem Extraction
- Upload audio files and extract stems (vocals, drums, bass, etc.) using advanced processing through the Moises (MusicAI) API
- Support for various audio formats with chunked uploads for large files
- Real-time waveform display using Wavesurfer.js
๐ณ Credit System & Payments
- Users purchase and spend credits for each stem extraction
- Stripe integration for purchasing credits
- All credit purchases and usages are logged for transparency
- Transaction logging with Stripe integration
๐ค User Management
- Secure sign-up and login via NextAuth.js and Supabase
- User profile management with credit balance tracking
- Role-based access control (user/admin)
- Admin dashboard for user and credit management
๐จ Modern UI/UX
-
Responsive, mobile-friendly interface with real-time feedback
-
Drag-and-drop file upload interface
-
Modern animations with Framer Motion
-
Tailwind CSS with custom color palettes and Radix UI components
Architecture & Backend
Full-Stack Framework
- Next.js (React 19) for both frontend and backend (API routes and server actions)
- TypeScript in strict mode for type safety
- App Router for modern Next.js routing
Database & Authentication
- Supabase (PostgreSQL) stores user profiles, roles, credit balances, and transaction logs
- NextAuth.js with Supabase as the user store
- Row Level Security (RLS) on all sensitive tables
Audio Processing
- FFmpeg (via @ffmpeg/ffmpeg, fluent-ffmpeg) for server-side audio conversion
- MOISES API for advanced audio stem extraction
- Custom memory and duration settings for heavy processing routes
Payment Integration
- Stripe integration for secure, real-time credit purchases
- Webhook handling for payment confirmation
- Comprehensive transaction logging
Security Measures
Authentication & Authorization
- All user actions require authentication via NextAuth.js and Supabase
- Role-based access control (user/admin) enforced at both application and database levels
- Row Level Security (RLS) policies protect user data at the database level
Data Protection
- Users can only access their own data through RLS policies
- No sensitive payment info is stored on the platform (Stripe handles all payment data)
File Security
- Secure file handling with validation and cleanup
- Large file support (up to 26MB per request) with proper memory management
Technical Challenges Overcome
Audio Processing at Scale
- Integrated FFmpeg for efficient, server-side stem extraction
- Handled large files and concurrent requests with optimized serverless functions
- Tuned Vercel serverless functions for memory and execution time
Secure Credit System
- Designed and implemented a transactional credit system with real-time balance updates
- Combined NextAuth.js with Supabase for robust authentication and fine-grained authorization
- Strict database security with comprehensive RLS policies
Performance Optimization
- Enabled chunked uploads and increased server body size limits
- Optimized for serverless deployment with proper resource allocation
- Efficient client-side audio visualization and processing feedback
Impact
Topline App empowers musicians and producers by making professional-grade stem extraction accessible, fast, and secure. It eliminates the need for complex desktop software, allowing users to process audio directly in the browser, manage their credits, and receive results in minutes. The platform's robust credit and payment system ensures fair usage and monetization, while the admin dashboard streamlines management for platform operators.