NextTailwindTypescripttRPCPrismaPostgresSQLClerkCloudflare R2ModalPython
Resonance
By Osmel Smith

- Published on
Resonance
- Duration
- 5 Weeks
- Role
- Full-stack
- Atmosphere
- Minimal
- Technology
- NextJS



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