Tumblbug clone coding

프로젝트 설명

크라우드 펀딩 사이트인 텀블벅을 클론코딩하는 프로젝트입니다.
회원 가입, 프로젝트 게시 및 공유, 결제 시스템 구현 등을 목표로 하고 있습니다.

계기

대규모 DB를 다루면서, 외부 API와의 연동을 해볼 수 있는 클론코딩 프로젝트로 대상을 물색하여, 많은 수의 회원과 프로젝트를 관리하고 결제 API를 갖춘 텀블벅을 선정했습니다.
특히 텀블벅을 TypeScript와 React를 사용하여 제작해보면서 컴포넌트의 기능 및 구성에 대해서도 탐구하는 것을 목표로 진행했습니다.

화면 구성 및 기능 소개

• 프로젝트 확인 가능한 메인 화면, 필터 적용하여 프로젝트 분류 기능
  

• 회원가입 및 로그인 기능
  

• 프로젝트 업로드, 프리뷰
  

기술 스택

FE

Types	Techs
RunTime
Framework
Language
Formatter & Linter
Bundler
Testing

BE

Types	Techs
Language
Framework
Database
Infra

아키텍쳐

• Directory

📂 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 명세서

API 명세서 Notion

프로젝트 관리

Jira

Github

• Wiki
• Issues
• Pull Requests

팀 소개 및 역할

FE 문경덕	BE 신지송	BE 장혁수	FE 정태훈
@Moon-GD	@gmuz1c	@zangsu	@hoonystory98