NextTailwindTypescripttRPCPrismaPostgresSQLClerkCloudflare R2ModalPython

Resonance

By Osmel Smith
Picture of the author
Published on

Resonance

Duration
5 Weeks
Role
Full-stack
Atmosphere
Minimal
Technology
NextJS
Dashboard page
Dashboard page
Text-to-speech page
Text-to-speech page
Voices mobile page
Voices mobile page
+2

Resonance is an AI-powered text-to-speech platform that turns written text into natural, expressive speech using cloned voices. Users can pick from a library of system voices or create their own by recording or uploading a short audio sample, fine-tune generation parameters, and keep a full history of every generation.

The front-end is built with Next.js, TanStack Form and shadcn/ui, while the back-end relies on tRPC, Prisma and PostgreSQL. Authentication and multi-organization workspaces are handled by Clerk, speech is synthesized by a Chatterbox TTS model deployed on Modal, and all audio is stored in Cloudflare R2, with Sentry monitoring errors in production.

Key Features:

  1. Text-to-Speech Generation: Convert any text into high-quality speech with a single click, powered by a Chatterbox TTS model running on Modal GPUs.
  2. Voice Cloning: Create custom voices by recording directly in the browser or uploading an audio sample, then reuse them across generations.
  3. Voice Library: Browse system and custom voices organized by category and language, with searchable filters and audio previews.
  4. Fine-Grained Controls: Adjust temperature, top-p, top-k and repetition penalty to shape the tone and variability of each generation.
  5. Generation History: Every generation is saved with its text, voice and settings, and can be replayed or revisited at any time.
  6. Built-in Audio Player: Waveform-based playback with wavesurfer.js for listening to previews and generated audio.
  7. Multi-Organization Workspaces: Clerk authentication with organization selection keeps voices and generations scoped per team.
  8. Type-Safe API: End-to-end type safety from database to UI using tRPC, Zod, Prisma and TanStack Query.
  9. Cloud Audio Storage: Voice samples and generated audio are stored in Cloudflare R2 and served through secure, scoped endpoints.
  10. Responsive Design: Resizable panels and drawers adapt the workspace to desktop and mobile without losing functionality.
  11. Error Monitoring: Sentry integration captures client, server and edge errors for reliable production operation.