데브허브 | DEVHUB | Build the Amazon App with React Native & AI Voice Agents (Vapi, NativeWind, TanStack, Expo)Build the Amazon App with React Native & AI Voice Agents (Vapi, NativeWind, TanStack, Expo)
- 아마존 앱 클론 목표: UI뿐만 아니라 인증, 애니메이션, AI 음성 에이전트 등 실제 기능을 구현하는 것이 목표입니다. 🎯
- 핵심 기술 스택: React Native, Vapi (AI 음성), Clerk (인증), Sentry (에러 모니터링), NativeWind (스타일링), Reanimated (애니메이션), Expo (개발 환경) 등을 활용합니다. 🛠️
- AI 음성 에이전트 (Vapi): 5분 만에 음성 AI 에이전트를 구현하여 지원 에이전트 역할, 정의된 워크플로우 실행, 백엔드 데이터 호출 등 복잡한 상호작용을 가능하게 합니다. 🗣️
- 사용자 인증 (Clerk): 프론트엔드와 백엔드 모두에서 JWT 검증을 포함한 사용자 인증을 위한 선호 플랫폼으로 활용됩니다. 🔑
- 에러 모니터링 (Sentry): AI 에이전트 Seir을 통해 코드베이스의 버그를 파악하고 심지어 PR을 생성하는 등 고급 에러 추적 및 해결 기능을 제공합니다. 🐛
- Expo 개발 환경: Expo Go 대신 네이티브 모듈 지원을 위해 Expo Dev Client와 사전 빌드(pre-build) 방식을 사용하며, 라이브 리로드와 전체 개발 자유도를 확보합니다. 🚀
- NativeWind (Tailwind CSS): React Native 앱에 Tailwind CSS를 적용하여 빠르고 효율적인 UI 스타일링을 가능하게 하며, IDE 지원을 위한 설정도 포함합니다. 🎨
- 백엔드 API: Node.js, PostgreSQL, Drizzle ORM 기반의 별도 API를 제공하여 인증, 상품, 주문, Stripe 결제 등 앱의 핵심 기능을 지원합니다. ☁️
- 데이터베이스 관리: Drizzle ORM을 통해 마이그레이션 및 시딩 스크립트를 제공하고, Drizzle Studio를 활용하여 웹 기반으로 데이터베이스를 쉽게 시각적으로 관리하고 검사합니다. 📊
- 개발 도구: Bun 패키지 매니저를 주로 사용하지만, npm이나 yarn도 지원하며,
bunx create expo로 프로젝트를 시작하고 bunx expo run으로 앱을 빌드 및 실행합니다. ⚙️