데브허브 | DEVHUB | Build Full-Stack AI SaaS with Claude Code (Project Setup)Build Full-Stack AI SaaS with Claude Code (Project Setup)
- AI 기반 인테리어 앱에서 시작하여, 사용자가 업로드한 이미지 속 대상을 봉제인형으로 변환하는 'Plushify AI' SaaS 앱을 구축하는 것이 목표입니다. 🧸
- Claude Code와 같은 코딩 에이전트를 활용하여 로컬 환경에서 풀스택 AI SaaS 애플리케이션을 개발하며, 초기 설정을 위한 보일러플레이트 프로젝트를 제공합니다. 💻
- 핵심 기술 스택은 Next.js (프론트/백엔드), ShadCN (UI), BetterAuth (사용자 인증), PostgreSQL (데이터베이스), Vercel AI SDK + OpenRouter (AI 기능)입니다. 🛠️
- 프로젝트 초기 설정은
npx create-a-generic-app@latest . 명령어를 통해 보일러플레이트 프로젝트를 빠르게 설정하고, 의존성 설치 및 Git 저장소 초기화가 자동으로 이루어집니다. 🚀
- 데이터베이스는 Docker Desktop을 사용하여 로컬 PostgreSQL을
docker compose up -d 명령으로 시작하고, npm run db generate 및 npm run db migrate로 스키마를 적용합니다. 🐳
- 사용자 인증은 BetterAuth를 Google OAuth와 연동하기 위해 Google Cloud Platform에서 클라이언트 ID와 시크릿을 발급받아
.env 파일에 설정합니다. 🔑
- AI 통합은 OpenRouter.ai에서 API 키를 발급받아
.env 파일에 추가하여 다양한 AI 모델에 접근하고, Vercel AI SDK를 통해 AI 기능을 구현합니다. 🤖
- 보일러플레이트는 BetterAuth 전문가, UI 개발자 등 사전 구성된 서브 에이전트와
checkpoints, create feature 같은 명령어를 제공하여 개발 과정을 돕습니다. 🧠
- 데이터베이스 스키마 변경 시
npm run db studio로 내용을 확인하고, db generate 및 db migrate를 통해 변경 사항을 데이터베이스에 반영해야 합니다. 🔄
- OpenRouter를 통해
.env 파일의 모델 문자열만 변경하여 OpenAI, Claude 등 다양한 AI 모델을 쉽게 전환할 수 있습니다. 💡
- 모든 설정 완료 후, Google 계정으로 로그인하여 대시보드 접근 및 AI 챗봇과의 대화를 통해 인증과 AI 통합이 정상 작동하는지 확인합니다. ✅
- Plushify 앱은 사용자에게 무료 크레딧을 제공하고, 추가 사용을 위해 크레딧을 구매할 수 있는 결제 시스템을 포함할 예정입니다. 💳