Skip to content
Serafin Sanchez
Audio Stem Extraction with Next.js, Supabase, and FFmpeg preview

Audio Stem Extraction with Next.js, Supabase, and FFmpeg

A modern web app for musicians and producers to extract audio stems, manage credits, and process payments, all in a secure, scalable environment.

Next.js
React
Supabase
FFmpeg
Stripe
AI

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.

Related Projects

Other projects you might find interesting

A zero-friction, real-time polling platform that lets teachers create engaging polls in seconds and get instant feedback from students.
Next.js
React
InstantDB
+2
A sophisticated B2B/B2C e-commerce platform for a 50+ year family-owned manufacturer of custom metal products, featuring role-based pricing, custom orders, and vendor management.
Next.js
Supabase
TypeScript
+2
A modern, responsive developer portfolio built with Next.js 14, featuring MDX content management, dark mode, and a clean design system.
React
Next.js
TypeScript
+2