VIVID

AI-powered personalized audio content platform.

Users describe what they want to hear through a natural conversation with AI, and receive custom-generated audio content — tailored to their context, interests, and listening situation.

Tech Stack

Layer	Technologies
Monorepo	pnpm workspaces · 3 apps
Mobile	Expo SDK 54 · TypeScript · Expo Router · Zustand · expo-audio
Backend	Express.js · PostgreSQL (Drizzle ORM) · Redis · BullMQ
Web	Next.js 15 · Tailwind CSS · MDX blog · i18n
AI/ML	Anthropic Claude (content generation + prompt caching) · Multi-provider TTS (Google Gemini + OpenAI fallback)
Infra	Docker Compose · EAS Build · EAS Update

Architecture Highlights

• Multi-provider TTS with circuit breaker pattern — automatic failover between Google Gemini and OpenAI TTS providers, with burst protection and rate limiting to prevent 429 cascades
• Sliding window chunk scheduling — progressive audio generation that streams content in chunks, enabling playback to start before full generation completes
• Prompt caching (~90% cost reduction) — structured prompt design that maximizes Anthropic's cache hit rate across conversation turns
• Real-time progress updates — Redis Pub/Sub powers live generation status streaming to connected clients
• Conversational content creation — multi-turn AI dialogue refines user intent before generating content, supporting follow-ups and adjustments

Key Features

• Conversational AI content creation with multi-turn refinement
• 30+ voice selection with live audio preview
• Streaming audio playback with background audio support
• Shareable content with embedded web player
• Google & Apple OAuth + email OTP authentication
• Localized web presence (EN/DE) with MDX blog

Project Structure

vivid/
├── apps/
│   ├── mobile/          # Expo React Native app
│   │   ├── app/         #   Expo Router file-based screens
│   │   ├── components/  #   UI components (Glass design system)
│   │   ├── stores/      #   Zustand state management
│   │   └── services/    #   API client & audio services
│   │
│   ├── backend/         # Express.js API server
│   │   ├── src/
│   │   │   ├── routes/      # REST API endpoints
│   │   │   ├── services/    # LLM, TTS, auth services
│   │   │   ├── jobs/        # BullMQ async workers
│   │   │   └── db/          # Drizzle ORM schema & migrations
│   │   └── prompts/         # LLM system prompts
│   │
│   └── web/             # Next.js 15 marketing site
│       ├── app/         #   App Router pages
│       ├── components/  #   Landing, blog, UI components
│       └── content/     #   MDX blog posts
│
├── docker-compose.yml
└── pnpm-workspace.yaml

Testing

• 540+ test files across all workspaces (Vitest, Jest, Supertest)
• Test-driven development methodology — tests written before implementation
• Integration tests for API routes, unit tests for services and business logic

Local Development

# Start infrastructure (PostgreSQL, Redis)
docker compose up -d

# Install dependencies
pnpm install

# Run database migrations
pnpm --filter backend db:push

# Start backend (hot reload)
pnpm --filter backend dev

# Start mobile app
pnpm --filter mobile start

# Run all tests
pnpm -r run test

---

vividears.com