크라우드 펀딩 사이트인 텀블벅을 클론코딩하는 프로젝트입니다.
회원 가입, 프로젝트 게시 및 공유, 결제 시스템 구현 등을 목표로 하고 있습니다.
대규모 DB를 다루면서, 외부 API와의 연동을 해볼 수 있는 클론코딩 프로젝트로 대상을 물색하여, 많은 수의 회원과 프로젝트를 관리하고 결제 API를 갖춘 텀블벅을 선정했습니다.
특히 텀블벅을 TypeScript와 React를 사용하여 제작해보면서 컴포넌트의 기능 및 구성에 대해서도 탐구하는 것을 목표로 진행했습니다.
- 프로젝트 확인 가능한 메인 화면, 필터 적용하여 프로젝트 분류 기능


Types |
Techs |
RunTime |
 |
Framework |
 |
Language |
 |
Formatter & Linter |
 |
Bundler |
 |
Testing |
 |
Types |
Techs |
Language |
 |
Framework |
 |
Database |
 |
Infra |
 |
📂 frontend > src
├─ 📂 Login ▶️ 로그인, 회원가입 컴포넌트
├─ 📂 Main ▶️ 메인 화면 컴포넌트
├─ 📂 MyDropdown ▶️ 프로필 드롭다운 메뉴 컴포넌트
├─ 📂 Navbar ▶️ 내비게이션 바 컴포넌트
├─ 📂 Profile ▶️ 프로필 페이지 관련 컴포넌트
├─ 📂 ProjectDetail ▶️ 프로젝트 상세 페이지 컴포넌트
├─ 📂 ProjectUpload ▶️ 프로젝트 게시 페이지 컴포넌트
├─ 📂 TumblbugLogo ▶️ 로고 컴포넌트
└─ 📂 utils ▶️ 유틸 함수, 기능 모음
📂
📦backend > tumblbug-clone > src > main > java > com > example > tumblbugclone
├─ 📂controller
├─ 📂dto
├─ 📂Exception ▶️ 커스텀 `Exception`
├─ 📂filter ▶️ CORS 해결을 위한 필터
├─ 📂managedconst ▶️ 상수 관리 클래스
├─ 📂model
├─ 📂repository
├─ 📂service
├─ 📜AppConfig.java
├─ 📜ServletInitializer.java
└─ 📜TumblbugCloneApplication.java
- ERD

API 명세서 Notion