Own product

DJ Trainr

Upload the recording of your set and I'll tell you where you went wrong. Without uploading anything to any server.

View product →

Tech stack

  • React 19 + TypeScript + Vite
  • Tailwind + shadcn/Radix UI
  • Web Audio API + Web Workers
  • Essentia.js (WebAssembly)
  • 100% in-browser analysis
  • Supabase (auth + database)
  • Stripe (B2B subscriptions)
  • Deployed on Vercel

The technical challenge

The challenge isn't the UI. It's analyzing a complete DJ set (MP3, WAV, FLAC, up to 2 GB) directly in the user's browser, without sending it to any server, and without freezing the interface while it's processing.

The pipeline runs inside a Web Worker: the audio is decoded with AudioContext, downmixed to mono, and several analyses run in parallel. Essentia.js (compiled to WebAssembly) detects BPM and beat positions with multifeature ML. A custom FFT breaks the spectrum down into four bands. An onset detector computes the variance of IOI to identify trainwrecks (beats out of sync during a transition). An alert engine cross-references signals to detect bass clashes, dead silences, listener fatigue and abrupt transitions, with timestamps snapped to the nearest beat.

With all of that, a 0-100 score is computed from four weighted sub-metrics (technique, energy, flow, narrative) and medals are unlocked. Plus an automatic detection system to distinguish a real mix from a single track, so scores aren't shown to anyone uploading something that isn't a mix.

Process and decisions

The most important decision was processing everything client-side. The DJ's audio is never uploaded. That means zero storage infrastructure, zero variable costs per analysis and real privacy by default. In exchange, the user's browser bears the full weight of the analysis, so the architecture had to be solid.

The heavy lifting lives in a dedicated Web Worker so the UI never freezes. For the music algorithms (BPM, beats, key) Essentia.js compiled to WebAssembly was the choice, because rewriting those algorithms by hand to reach pro MIR quality was unfeasible. What Essentia doesn't cover well (the alert engine, scoring, transition detection, IOI for trainwrecks) is built with custom DSP.

The business model is dual. The individual version has a free tier (analyze one set and see the full report) that works as an acquisition engine, plus account features (history, progression, saved medals) behind a Supabase login. On top of that sits the B2B layer for DJ academies: a free 30-day Trial plan, Starter (€49/month), Pro (€99/month) and custom Enterprise. Plans are billed through Stripe.

Traction

100% in-browserProcessing
0 bytesAudio sent to the server
2 GBMaximum file size
ES · EN · FR · DE (auto-detected)Languages

What does this mean for your project?

If you have in mind a tool that needs to process heavy files (audio, video, images, documents) without the user uploading them to a server, this project proves it can be built. Web Audio API, Web Workers, integration of WebAssembly-compiled libraries from a modern React stack, and privacy-by-default design.

It also serves as an example of a SaaS with a dual B2C + B2B model on the same codebase. The individual app is freemium and works as an acquisition engine. On top of it there's a B2B product for academies with a teacher dashboard, organizations (teacher/student hierarchy with RLS in Supabase), assignments with due dates and criteria, teacher feedback visible to the student, customizable rubrics (each academy tunes the scoring weights) and Stripe subscriptions. The same architecture fits other products where an individual user later becomes a user inside an organization that pays.

And if you need to integrate ML models or heavy algorithms into a modern web app without jumping to a Python/GPU infrastructure, the Essentia.js (WASM) + Web Workers pattern applies just the same to other domains: image processing, OCR, local translation, text analysis. Same logic.

Want something similar?

Tell me what you have in mind and I'll tell you what I can do.

Let's talk