# Build and Deploy a Full Stack ElevenLabs Clone with Next.js 16

Source: https://www.youtube.com/watch?v=e_MO-Rcz_MA
Recap page: https://rapidrecap.app/video/e_MO-Rcz_MA
Generated: 2026-02-28T13:33:20.025+00:00

---
## Quick Overview

The tutorial guides the user through building Resonance, a full-stack AI voice generation platform clone using Next.js 16, Clerk for authentication, and self-hosting the Chatterbox text-to-speech model on a serverless GPU, integrating usage-based billing via Polar and database management with Prisma and Postgres.

**Key Points:**
- The project builds Resonance, a platform featuring user authentication, team workspaces, custom voice creation, and usage-based billing, utilizing self-hosted Chatterbox text-to-speech for the entire voice generation pipeline.
- The setup requires Next.js version 16.1.6, TypeScript, ESLint, Tailwind CSS, and the App Router, with an initial step involving the initialization of Shadcn/ui components using version 3.8.5.
- Clerk manages authentication and multi-tenancy, requiring wrapping the app with ClerkProvider in layout.tsx, setting environment keys, and creating a proxy middleware to enforce login and organization selection before accessing protected routes.
- Custom sign-in, sign-up, and organization selection pages are implemented using Clerk's components within Next.js optional catch-all routes (e.g., /app/signin/[...signin]/page.tsx) for custom branding and flow control.
- The data layer uses Prisma with Postgres, defining models for 'Voice' (distinguishing system vs. custom voices) and 'Generation' (tracking text prompts, parameters like temperature, and linking optionally to a voice).
- The tutorial emphasizes setting up deployment infrastructure using Railway for zero cold starts and mentions Sentry for error monitoring and Code Rabbit for PR reviews.
- Monetization is powered by Polar, which tracks every generation and bills organizations based on custom pricing tiers for voice creation and characters generated.

**Context:** This video is a comprehensive technical tutorial demonstrating how to build a complex Software as a Service (SaaS) application named Resonance, which functions as an AI voice generation platform similar to ElevenLabs. The core differentiator is avoiding paid third-party APIs by self-hosting the open-source Chatterbox text-to-speech model on a serverless GPU, giving the builder complete ownership of the pipeline. The setup begins with establishing a modern Next.js 16 foundation, integrating UI components via Shadcn/ui, and layering critical enterprise features like multi-tenant authentication and usage-based billing.

## Detailed Analysis

The project begins with setting up the foundation: Next.js 16.1.6, TypeScript, Tailwind CSS v4, and initializing Shadcn/ui (v3.8.5) to gain access to customizable foundational components like the button, which is immediately tested and modified to show source code accessibility. Key configuration changes include updating the root layout to use the Inter font and adding the Toaster component from Sonner. Authentication is secured using Clerk, requiring the installation of clerk/nextjs and setting up environment variables (NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY) in an ignored .env file. A crucial step involves creating a proxy middleware in the source directory to enforce authentication, ensuring users must be logged in and belong to an organization before accessing the main application routes, redirecting unauthenticated users to sign-in or organization selection pages. The tutorial details creating custom pages for sign-in, sign-up (using optional catch-all routes), and organization selection (using OrganizationList). Once authenticated, the main page displays the UserButton and OrganizationSwitcher components from Clerk, showcasing the integrated user management system that supports inviting new members. Finally, the backend data structure is established using Prisma with a Postgres database, requiring installation of packages like prisma-adapter-postgresql and t3-oss/env-nextjs. Two main models, Voice and Generation, are defined in schema.prisma: Voice distinguishes between system and custom voices and includes a category enum, while Generation tracks the text prompt, inference parameters (temperature, top_p, etc.), and links to the Voice model using a set null on delete relationship to preserve generation history even if the source voice is removed. The tutorial concludes the setup phase by running migrations and generating the Prisma client, preparing the stack for deployment on Railway.

### Project Foundation Setup

- Use Next.js 16.1.6 and TypeScript
- Initialize Shadcn/ui v3.8.5 for components
- Configure root layout with Inter font and enable Sonner toasts
- Adjust useMobile hook breakpoint to 1024.

### Authentication and Multi-Tenancy with Clerk

- Install clerk/nextjs and configure environment keys in .env
- Wrap application with ClerkProvider in layout.tsx
- Implement proxy middleware to protect routes, requiring login and organization selection for access.

### Customizing Clerk Flows

- Create custom signin and signup pages using optional catch-all routes (e.g., /app/signin/[...signin]/page.tsx) rendering Clerk's components with custom appearance props
- Develop an organization selection page using OrganizationList, hiding personal accounts to enforce team structure.

### Database Schema Design with Prisma

- Install runtime dependencies including prisma-adapter-postgresql and t3-oss/env-nextjs
- Initialize Prisma using npx prisma init-database, which configures the database URL in .env
- Define Voice model with variants (system/custom) and category enum
- Define Generation model requiring organization ID, linking optionally to Voice with ondelete set null, and storing inference parameters.

### Infrastructure and Tooling

- Audio storage reference is set to R2 object key, preparing for Cloudflare R2 integration later
- Deployment handled by Railway for performance without cold starts
- Integrate Sentry for error monitoring and Code Rabbit for automated PR reviews.

### Final Application State

- After setup, users are immediately redirected to login/organization selection if not authenticated or assigned
- The main page displays the OrganizationSwitcher and UserButton, demonstrating full Clerk integration and multi-tenancy capabilities.