Skip to content
TOLGA İLERİ

Home/Work/Sample IQ

Project / 092026Audio Workflow Platform

Sample IQ

A local-first sample management workspace for producers to organize, preview, search, combine and analyze audio samples inside a single workflow.

Role
Full-Stack Development / Frontend Engineering / API Development / Product Engineering
Type
Product
Stack
React / TypeScript / Vite / Tailwind CSS / ASP.NET Core / C# / SQLite / Entity Framework Core / WaveSurfer.js / Recharts / Docker / nginx
Status
Open Source
GitHub

Overview

Sample IQ is a workflow-oriented sample and sound management application for beatmakers and producers. It combines library organization, waveform preview, metadata-driven search, pack creation, beat sketching and analytics in a React and ASP.NET Core architecture.

Role
Full-Stack Development / Frontend Engineering / API Development / Product Engineering
Year
2026
Type
Product
Stack
React / TypeScript / Vite / Tailwind CSS / ASP.NET Core / C# / SQLite / Entity Framework Core / WaveSurfer.js / Recharts / Docker / nginx

01 / Context

Large audio sample libraries become difficult to navigate as files, metadata and creative ideas spread across different folders and tools. Sample IQ was designed as a focused workspace where producers can manage both the library and the early creative workflow.

02 / Challenge

The product needed to combine traditional CRUD and metadata workflows with browser-based audio playback, drag-and-drop session planning and persistent local state without turning the interface into a complex DAW.

03 / Solution

A typed React SPA communicates with an ASP.NET Core Web API for library and metadata operations. WaveSurfer.js handles waveform playback, Entity Framework Core persists metadata in SQLite, and Docker Compose packages the frontend, API and nginx setup for repeatable deployment.

Responsibilities

  1. 01Built the React and TypeScript frontend architecture.
  2. 02Developed the ASP.NET Core Web API.
  3. 03Implemented searchable sample-library and metadata workflows.
  4. 04Integrated in-browser waveform playback with WaveSurfer.js.
  5. 05Built pack creation and session-board workflows.
  6. 06Added analytics, duplicate detection and reusable import presets.
  7. 07Containerized the application with Docker Compose and nginx.

Key areas

  • Searchable sample library
  • Waveform preview
  • Pack builder
  • Drag-and-drop session board
  • BPM and key compatibility scoring
  • Duplicate detection
  • Library analytics
  • Dockerized deployment

Technology

Architecture

  • React SPA + ASP.NET Core Web API
  • Typed API client
  • REST-based frontend/backend communication
  • Local-first session state

Frontend

  • React 19
  • TypeScript
  • Vite
  • Tailwind CSS
  • React Router
  • WaveSurfer.js
  • Recharts

Backend

  • ASP.NET Core 9 Web API
  • C#
  • Entity Framework Core

Database

  • SQLite

Infra

  • Docker
  • Docker Compose
  • nginx

Integrations

  • WaveSurfer.js
  • Recharts