🎥 Bound

A Minimalist YouTube Clone with Limited Viewing Experience

Node.js, Express, MongoDB, 그리고 ES6 를 이용한 10개의 영상을 보면 영상이 자동으로 삭제되는 “한정된 영상 공유 플랫폼”

🔗 Live Demo: youtube-clone-bound-2025.fly.dev

---

📖 Table of Contents

• 📚 프로젝트 개요
• 🧠 제작 동기
• ⚙️ 기술 스택
• 💡 주요 기능
• 🧩 프로젝트 구조
• 🏗️ 아키텍처 개요 (MVC)
• 🔄 데이터 흐름

---

🖼️ Preview

🖼️ Watch Preview

landing page

/videos

videos 상세 및 댓글

/videos/upload

/videos/{video_num}/edit

/users

/users/edit

📚 프로젝트 개요

Bound는 단순한 유튜브 클론형태를 넘어, 시청 제한이 있는 새로운 형태의 영상 공유 플랫폼을 목표로 합니다.
시청자가 10개의 영상을 보면 해당 영상이 자동 삭제되며,
“한정된 콘텐츠 경험”을 제공합니다.

---

🧠 제작 동기

자바스크립트에 대한 이해도 확장과
직접적인 풀스택 개발 경험을 목표로 시작한 프로젝트입니다.
라우팅, 세션 관리, 데이터베이스 모델링을 직접 구현하며
서버 사이드 로직의 흐름을 깊게 이해할 수 있었습니다.

---

⚙️ 기술 스택

🧩 Backend

💅 Frontend

🧰 Dev Tools

---

💡 주요 기능

기능	설명
🔑 로그인 / 회원가입	일반 계정 + GitHub OAuth 로그인 지원
🎥 영상 업로드	로컬 업로드 및 카메라 촬영 기능
🔍 검색 기능	영상 제목 기반 검색
⏳ 자동 삭제 시스템	영상이 10회 이상 시청되면 자동 삭제
👤 프로필 관리	“Bound”된 시청 횟수 및 업로드 내역 확인
💬 댓글 기능	영상별 댓글 작성 및 삭제 가능

---

🧩 프로젝트 구조

src/
├── server.js         # Express 서버 설정 및 실행
├── routers/          # 라우팅 로직 (root, user, video, api)
│   ├── rootRouter.js
│   ├── userRouter.js
│   ├── videoRouter.js
│   └── apiRouter.js
├── controllers/      # 요청 처리 로직 (비즈니스 로직)
│   ├── userController.js
│   └── videoController.js
├── models/           # Mongoose 스키마 정의
├── views/            # Pug 템플릿 파일
├── middlewares.js    # 인증 / 업로드 등 공통 미들웨어
└── assets/           # 정적 파일 (CSS, JS, 이미지)

🏗️ 아키텍처 개요 (MVC)

Model — 데이터 관리 (MongoDB, Mongoose)
View — UI 렌더링 (Pug)
Controller — 비즈니스 로직 처리
Router — URL 경로 분리 및 Controller 호출

🔄 데이터 흐름

Client Request
  ↓
Middleware (session, morgan, auth 등)
  ↓
Router (userRouter / videoRouter 등)
  ↓
Controller (비즈니스 로직 처리)
  ↓
Model (DB 조회 및 수정)
  ↓
Controller → View (Pug 렌더링)
  ↓
Client Response