⚡️ Start Convex: https://convex.link/simongrimm
🎙️ Try ElevenLabs: https://try.elevenlabs.io/j7ztnqelnoqj
🔐 Try Clerk today: https://go.clerk.com/GiiEcN5
🔔 Get Sentry: https://dub.sh/sentry-galaxies

Join me as I build an epic AI Caption Editor with React Native using a Convex Backend and ElevenLabs AI Voice Models! In this exciting tutorial, you'll learn how to do the following:

Key Features:
🚀 Use Expo to set up a custom dev client app
🌐 Use Expo file-based routing and DOM Components
🔥 Connect your app to Convex
🔑 Work with PassKeys
🦄 Create a Tab bar with custom action button
🔗 Use Clerk Webhooks and Convex HTTP endpoints
🔐 Protect pages with Expo Router and Clerk authentication
⚡️ Debug our app with Sentry
💬 Use ElevenLabs for Speech to text and TTS
🧠 Include AI generated voice overs

+ A LOT OF FUN 🚀

LINKS
🔥 Learn React Native FAST: https://galaxies.dev
⚡️ Start Convex: https://convex.link/simongrimm
🎙️ Try ElevenLabs: https://try.elevenlabs.io/j7ztnqelnoqj
🔐 Try Clerk today: https://go.clerk.com/GiiEcN5
🔔 Get Sentry: https://dub.sh/sentry-galaxies

🔗 AI Caption Editor Code: https://github.com/Galaxies-dev/ai-caption-editor-react-native

Check out my React Native course on Galaxies.dev and start building production-ready apps today.

🚀 Zero to Hero: https://galaxies.dev/missions/zero-to-hero

#############################

❤️  You can also find me on:
X: https://twitter.com/schlimmson
TikTok: https://www.tiktok.com/@simongrimm_
LinkedIn: https://www.linkedin.com/in/simongr
Bluesky: https://bsky.app/profile/galaxies.dev

#############################
Chapters
00:00 Intro
01:25 App Architecture and Expo Prebuild
18:56 Setting up Convex & Database Schema
31:30 Login with Clerk Authentication
01:08:36 OTP Verification & SSO
01:51:11 Convex HTTP Actions & Clerk Webhook
02:12:05 FAQ as DOM Component
02:18:57 Adding Sentry for better Debugging
02:35:56 Protected inside Tab Bar & Modals
02:48:38 Custom Tab Bar Button with Bottom Sheet
03:18:28 Setting up Passkeys
03:35:20 Select & Upload Videos
04:05:49 Loading the Project List
04:25:01 Creating the Caption Editor UI
04:58:25 Generating Captions
05:25:28 Display and Style Captions
05:48:51 Captions from Text with ElevenLabs Voices
06:22:10 Exporting Captions with Microservice
06:43:50 Outro

Simon Grimm

The post provides a detailed guide on building an AI-powered video caption editor using React Native. It covers the setup and configuration of various tools and libraries, including Expo, Native Wind, Convex, and integration of ElevenLabs API for text-to-speech functionalities. The post highlights the use of Clerk for authentication and shows how to organize project structure and manage dependencies. The backend is managed using Convex, which offers real-time data updates and TypeScript support, making the development process efficient and enjoyable.

Build Your Own AI Caption Editor with React Native (Convex, ElevenLabs, NativeWind, Expo)