Firebase, React, TypeScript, Stripe 통합을 통한 프로덕션급 SaaS 애플리케이션 구축을 위한 종합 오픈소스

Firebase, React, TypeScript, 그리고 Stripe 통합을 사용하여 프로덕션급 (production-ready) SaaS 애플리케이션을 구축하기 위한 종합적인 오픈소스 프레임워크입니다.

fireact.dev는 현대적인 SaaS 애플리케이션을 구축하기 위한 완전한 기반을 제공합니다. 업계 표준 기술과 베스트 프랙티스 (best practices)를 결합하여 개발자가 SaaS 제품을 더 빠르고 효율적으로 출시할 수 있도록 지원합니다.

데모 페이지를 방문하여 Core 버전과 SaaS 버전 모두의 라이브 데모를 확인하고, 전체 기능과 역량을 살펴보세요.

인증 및 사용자 관리 (Authentication & User Management)

• 완전한 인증 시스템 (회원가입, 로그인, 비밀번호 재설정)
• 사용자 프로필 관리
• 역할 기반 액세스 제어 (Role-based access control)
• 팀원 초대 및 권한 관리

구독 관리 (Subscription Management)

• 다중 구독 플랜 지원

• 결제 처리를 위한 Stripe 통합

• 결제 포털 및 인보이스 (invoice) 관리

• 결제 수단 관리

• 구독 업그레이드 및 다운그레이드

• 설치 후 커스터마이징을 위한 내장된 Claude Code 스킬

• 페이지, 컴포넌트 (components), 네비게이션 (navigation), Cloud Functions 등을 추가하기 위한 자연어 명령

• 단계별 안내가 포함된 8가지 커스터마이징 플레이북 (playbooks)

• /fireact-builder 명령어로 호출하거나 프로젝트 자동 감지 기능 활용

• 더 나은 코드 품질을 위한 TypeScript

• 반응형 디자인을 위한 TailwindCSS

• 로컬 개발을 위한 Firebase 에뮬레이터 (emulator) 지원

• 포괄적인 문서화 (documentation)

• 모듈형 아키텍처 (Modular architecture)

저장소는 다음과 같은 몇 가지 주요 디렉토리로 구성되어 있습니다:

source/: 이 디렉토리는 React 프론트엔드 애플리케이션과 Firebase Cloud Functions 백엔드 코드를 모두 포함하여, Fireact.dev 프로젝트를 위한 완전하고 결합된 소스 코드를 포함합니다. React 앱을 위한 packages/app과 Cloud Functions를 위한 packages/functions를 포함하는 모노레포 (monorepo) 구조를 따릅니다.

create-fireact-app/: 새로운 Fireact 애플리케이션을 스캐폴딩 (scaffold)하는 데 사용되는 CLI 도구를 포함합니다.

website/: Hugo로 구축된 fireact.dev의 메인 마케팅 웹사이트입니다.

docs/: Hugo로 구축된 fireact.dev의 문서 웹사이트입니다.

demo/: 데모 애플리케이션을 포함하고 있습니다.

새로운 Fireact 애플리케이션을 생성하려면 create-fireact-app CLI (Command Line Interface) 도구를 사용하세요. 이 도구는 Firebase 및 Stripe 설정을 포함한 설치 과정을 안내합니다.

CLI 설치 (아직 설치하지 않은 경우): npm install -g create-fireact-app

새 프로젝트 생성: create-fireact-app <your-project-name>

<your-project-name>을 원하는 새 애플리케이션 이름으로 바꾸세요.

프롬프트(Prompts) 따르기: CLI가 Firebase 프로젝트 선택 및 Stripe 설정을 안내합니다.

생성 후: 새 프로젝트 디렉토리로 이동합니다: cd <your-project-name>

그 다음, 애플리케이션과 함수(functions)를 빌드하고 에뮬레이터(emulators)를 시작합니다:

npm run build && cd functions && npm run build && cd .. firebase emulators:start

Stripe 웹훅 (webhook) 테스트를 위해 별도의 터미널에서 다음을 실행합니다:

stripe listen --forward-to http://127.0.0.1:5001/<your-firebase-project-id>/us-central1/stripeWebhook

웹훅 비밀키(webhook secret)가 변경되면 functions/src/config/stripe.config.json을 새로운 웹훅 엔드포인트 비밀키로 업데이트하고 함수를 다시 빌드(cd functions && npm run build)해야 함을 기억하세요.

프론트엔드 (Frontend): React, TypeScript, TailwindCSS
백엔드 (Backend): Firebase (Authentication, Firestore, Cloud Functions)
결제 처리 (Payment Processing): Stripe
개발 도구 (Development Tools): Vite, ESLint, PostCSS

프로덕션(production)에 배포하기 전에:

설정 파일 업데이트:

• 에뮬레이터 설정을 프로덕션 Firebase 설정으로 교체하세요.

• 프로덕션 Stripe API 키를 사용하세요.

• firebase.config.json에서 emulators.enabled를 false로 설정하세요.

프로덕션용 빌드: cd <your-project-name> npm run build cd functions npm run build cd ..

프로덕션 빌드 로컬 테스트: firebase emulators:start --only hosting

초기 배포 (Initial Deployment):

# 모든 항목 배포
firebase deploy
# 또는 특정 서비스만 배포
...

이후 배포 (Subsequent Deployments):

# 변경된 항목만 배포
firebase deploy --only hosting,functions

여러 개의 Firebase 프로젝트 사용하기:

# 별칭(aliases) 설정
firebase use --add
# 스테이징(staging) 환경에 배포
...

.github/workflows/deploy.yml 생성:

name: Deploy to Firebase
on:
push:
...

Firebase 토큰 가져오기:

firebase login:ci
# 토큰을 GitHub secret인 FIREBASE_TOKEN으로 저장하세요

보안 구성 관리(secure configuration management)를 포함한 상세한 Cloud Build 설정은 demo/README.md를 참조하세요.

배포 확인:

• 호스팅(hosting) URL 확인:
  https://your-project.web.app

• 인증(authentication) 흐름 테스트

• Cloud Functions 확인

• Firestore 연결성 확인

• Stripe 웹훅(webhooks) 테스트

프로덕션 웹훅(Production Webhook) 설정:

# Stripe 대시보드에서 웹훅 엔드포인트(endpoint) 추가

# stripe.config.json에서 프로덕션 웹훅 비밀키(secret) 사용

모니터링:

• Firebase Console → Functions 로그
• Firebase Console → Analytics
• Stripe Dashboard → Webhooks
• 에러 트래킹 (추천: Sentry, LogRocket)

상세한 배포 가이드는 다음을 참조하세요:

다음 내용을 포함한 종합 문서를 보려면 fireact.dev를 방문하세요:

• 시작 가이드 (Getting Started Guide)
• 아키텍처 개요 (Architecture Overview)
• 컴포넌트 문서 (Component Documentation)
• API 레퍼런스 (API Reference)
• 커스텀 개발 가이드 (Custom Development Guide)
• Claude Code를 활용한 AI 지원 개발 (AI-Assisted Development with Claude Code)
• 문제 해결 가이드 (Troubleshooting Guide)

기여를 환영합니다! 풀 리퀘스트(pull requests)를 제출하기 전에 기여 가이드라인(Contributing Guidelines)을 읽어주세요.

주요 기여 분야:

• 버그 수정 및 개선
• 새로운 기능 및 컴포넌트
• 문서 강화
• 예제 애플리케이션
• 테스트 커버리지

웹사이트: fireact.dev
문서: docs.fireact.dev
GitHub Issues: 버그 보고 및 기능 요청
GitHub Discussions: 커뮤니티 질문 및 토론
데모 애플리케이션: 라이브 데모 (Live Demo)

이 프로젝트는 오픈 소스이며 MIT 라이선스(MIT License) 하에 제공됩니다.