Skip to content
@2024-Techeer-Summer-Bootcamp-Team-D

2024-Techeer-Summer-Bootcamp-Team-D

README.md

🏆 2024 Techeer Summer BootCamp 1st Place Award 🏆

🎧 MVStudio 🎧

Let's Create Music videos and Share them Together!


MVStudio를 통해 창의적인 아이디어를 실현해 보세요!




📖 Table of contents


📣 Introduction

URL

🖥️ MVStudio (배포 중단)

Medium

🔎 MVStudio Medium  


  • 사용자가 선택한 다양한 옵션에 따라 맞춤형 뮤직비디오를 생성
  • AI 기술을 활용하여 높은 퀄리티의 뮤직비디오를 신속하게 제작
  • 장르, 악기, 주제, 분위기를 자유롭게 지정 가능
  • 사용자 채널 관리 및 차트 기반 분석 제공
  • 완성된 뮤직비디오를 소셜 미디어에 쉽게 공유
  • 제작한 뮤직비디오를 개인 프로젝트에 활용 가능

🕺🏻 Demo

Onboarding Page

MVStudio의 간략한 설명을 담고 있습니다.

Onboarding

Login & Sign up

구글 소셜 로그인 및 회원가입을 통해 손쉽게 로그인하실 수 있습니다.


Login & Sign up

Main Page

다른 사람들의 뮤직비디오를 시청할 수 있습니다.
최신순, 조회수순, 급상승, 자신의 국가와 나이대별 인기순으로 목록 조회 할 수 있습니다.


Login & Sign up


Search Music Video

검색 기능을 통해 원하는 뮤직비디오를 쉽게 찾을 수 있습니다.



Create Music Video

사용자는 장르, 악기, 영상 스타일, 제목, 보컬, 언어, 템포를 직접 설정하여 뮤직비디오를 생성할 수 있습니다.
선택한 설정을 바탕으로 제공되는 세 개의 가사 중 원하는 가사를 선택하면 해당 가사로 뮤직비디오가 생성됩니다.



Play Music Video

뮤직비디오를 클릭하면 재생 페이지로 이동하여 시청할 수 있습니다.
이 페이지에서 총 조회수, 만든 사람, 가사를 확인할 수 있으며 시청 도중 나중에 다시 와도 이전에 보던 부분부터 계속 시청할 수 있습니다.



My Page

사용자는 마이페이지에서 자신이 만든 뮤직비디오와 최근에 시청한 뮤직비디오를 확인할 수 있습니다.
인스타그램과 유튜브 버튼을 통해 자신의 인스타그램과 유튜브 계정으로 바로 이동할 수 있습니다.



Analyzing My Channel

사용자는 자신이 만든 뮤직비디오의 시청 추이를 날짜별 조회수, 성별, 국가별, 연령대별 차트로 분석할 수 있습니다.



Upload Music Video

사용자는 자신의 뮤직비디오를 유튜브에 업로드할 수 있습니다.



Buy Credits

뮤직비디오 제작에 필요한 크레딧은 카카오페이를 통해 결제할 수 있습니다.



📗 API

charts members music-videos oauth



🛠 ️System Architecture



🔑 ERD



💻 Tech Stack

Field Technology of use
Frontend
Backend
DevOps
DB
AI
Monitoring
etc

📊 Monitoring

Prometheus & Grafana

Django
Django Django2
Celery
Celery Celery2
cAdvisor
cAdvisor cAdvisor2
Node Exporter
Node Exporter Node Exporter2

Cloud Watch

Cloud Watch

ELK

ELK2

🔧Logging

ELK
ELK

🚀 How To Start

1. Clone The Repository

https://github.com/2024-Techeer-Summer-Bootcamp-Team-D/MVStudio-Docker.git

2. ENV Setting In The MVStudio-Docker Folder

  • .env
ELASTIC_VERSION=
ELASTIC_PASSWORD=
LOGSTASH_INTERNAL_PASSWORD=
KIBANA_SYSTEM_PASSWORD=
METRICBEAT_INTERNAL_PASSWORD=
FILEBEAT_INTERNAL_PASSWORD=
HEARTBEAT_INTERNAL_PASSWORD=
MONITORING_INTERNAL_PASSWORD=
BEATS_SYSTEM_PASSWORD=
INIT_INDEX=
  • MVStudio-Frontend/.env
# 개발 서버 주소
VITE_REACT_APP_BASE_URL =

# 뮤직 비디오 생성 가능 여부
VITE_REACT_APP_IS_OPERATE = true
  • MVStudio-Backend/.env
SECRET_KEY=
DEBUG=

MYSQL_ROOT_PASSWORD=
MYSQL_DATABASE=
MYSQL_USER=
MYSQL_PASSWORD=
DATABASE_HOST=
DB_SQL_MODE=

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_STORAGE_BUCKET_NAME=
AWS_S3_REGION_NAME=

OPENAI_API_KEY=
SUNO_API_KEY=

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY=
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET=
RUNWAYML_API_KEY=

BASE_BACKEND_URL=
BASE_FRONTEND_URL=
REFRESH_TOKEN_SECRET=
KAKAO_APP_ADMIN_KEY=
CID=

3. Run Docker

cd MVStudio-Frontend && npm install && npm run build && cd .. && docker-compose -f docker-compose.prod.yml -f docker-compose.monitoring.yml up -d --build

📂 Directory Structure

MVStudio-Docker 


📦MVStudio-Docker
┣ 📂.github
┣ 📂.idea
┣ 📂alertmanager
┣ 📂certbot
┣ 📂elk
┣ 📂grafana
┃ ┗ 📂data
┣ 📂nginx
┃ ┣ 📂app
┃ ┣ 📂logs
┃ ┣ 📜Dockerfile
┃ ┗ 📜nginx.conf
┣ 📂prometheus
┃ ┣ 📜alert-rules.yml
┃ ┗ 📜prometheus.yml
┣ 📂rds_exporter
┃ ┣ 📂basic
┃ ┣ 📂client
┃ ┣ 📂config
┃ ┣ 📂enhanced
┃ ┣ 📂sessions
┃ ┣ 📂tools
┃ ┣ 📜.gitignore
┃ ┣ 📜.golangci-required.yml
┃ ┣ 📜.golangci.yml
┃ ┣ 📜.goreleaser.yml
┃ ┣ 📜CHANGELOG.md
┃ ┣ 📜Dockerfile
┃ ┣ 📜Dockerfile.releaser
┃ ┣ 📜LICENSE
┃ ┣ 📜Makefile
┃ ┣ 📜VERSION
┃ ┣ 📜config.tests.yml
┃ ┣ 📜go.mod
┃ ┣ 📜go.sum
┃ ┗ 📜main.go
┣ 📜.DS_Store
┣ 📜.env
┣ 📜.gitignore
┣ 📜.gitmessage.txt
┣ 📜.gitmodules
┣ 📜README.md
┣ 📜docker-compose-dev.yml
┣ 📜docker-compose-prod.yml
┣ 📜docker-compose.elk.yml
┣ 📜docker-compose.monitoring.yml
┣ 📜docker-compose.prod.yml
┗ 📜init-letsencrypt.sh
MVStudio-Frontend 


📦MVStudio-Frontend
┣ 📂.github
┣ 📂.idea
┣ 📂dist
┣ 📂node_modules
┣ 📂src
┃ ┣ 📂api
┃ ┃ ┣ 📜axios.config.js
┃ ┃ ┣ 📜charts.js
┃ ┃ ┣ 📜member.js
┃ ┃ ┣ 📜musicVideos.js
┃ ┃ ┣ 📜onboarding.js
┃ ┃ ┣ 📜play.js
┃ ┃ ┗ 📜search.js
┃ ┣ 📂assets
┃ ┃ ┣ 📂font
┃ ┃ ┃ ┗ 📜SUIT-Variable.ttf
┃ ┃ ┗ 📜image.js
┃ ┣ 📂components
┃ ┃ ┣ 📂search
┃ ┃ ┃ ┗ 📜LongCover.jsx
┃ ┃ ┣ 📜BasicTaps.jsx
┃ ┃ ┣ 📜GenreSwiper.jsx
┃ ┃ ┣ 📜InstSwiper.jsx
┃ ┃ ┣ 📜Navbar.jsx
┃ ┃ ┣ 📜Service.jsx
┃ ┃ ┣ 📜Sidebar.jsx
┃ ┃ ┗ 📜StyleSwiper.jsx
┃ ┣ 📂libs
┃ ┃ ┗ 📂stores
┃ ┃ ┃ ┗ 📜userStore.js
┃ ┣ 📂pages
┃ ┃ ┣ 📂auth
┃ ┃ ┃ ┣ 📜Auth.jsx
┃ ┃ ┃ ┣ 📜Register.jsx
┃ ┃ ┃ ┗ 📜SaveTokens.jsx
┃ ┃ ┣ 📂main
┃ ┃ ┃ ┣ 📜Header.jsx
┃ ┃ ┃ ┣ 📜Main.jsx
┃ ┃ ┃ ┗ 📜VideoItem.jsx
┃ ┃ ┣ 📂play
┃ ┃ ┃ ┣ 📜Play.jsx
┃ ┃ ┃ ┗ 📜VideoPlayer.jsx
┃ ┃ ┣ 📂user
┃ ┃ ┃ ┣ 📜EditProfile.jsx
┃ ┃ ┃ ┣ 📜Mypage.jsx
┃ ┃ ┃ ┗ 📜YtChannelRegister.jsx
┃ ┃ ┣ 📜AppRouter.jsx
┃ ┃ ┣ 📜Create.jsx
┃ ┃ ┣ 📜LyricsSelect.jsx
┃ ┃ ┣ 📜OnBoardingPage.jsx
┃ ┃ ┣ 📜Pay.jsx
┃ ┃ ┣ 📜Search.jsx
┃ ┃ ┣ 📜Upload.jsx
┃ ┃ ┣ 📜User.jsx
┃ ┃ ┗ 📜ViewChart.jsx
┃ ┣ 📂styles
┃ ┃ ┣ 📜GlobalStyles.js
┃ ┃ ┣ 📜index.css
┃ ┃ ┗ 📜swal.config.css
┃ ┣ 📂utils
┃ ┃ ┣ 📜cookies.js
┃ ┃ ┗ 📜igonerePath.js
┃ ┣ 📜App.jsx
┃ ┗ 📜main.jsx
┣ 📜.dockerignore
┣ 📜.env
┣ 📜.eslintrc.cjs
┣ 📜.git
┣ 📜.gitignore
┣ 📜.gitmessage.txt
┣ 📜.prettierrc
┣ 📜Dockerfile
┣ 📜README.md
┣ 📜eslint.config.js
┣ 📜index.html
┣ 📜jsconfig.json
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜vite.config.js
MVStudio-Backend 


📦MVStudio-Backend
┣ 📂.github
┣ 📂.idea
┣ 📂charts
┃ ┣ 📂__pycache__
┃ ┣ 📜__init__.py
┃ ┣ 📜admin.py
┃ ┣ 📜apps.py
┃ ┣ 📜models.py
┃ ┣ 📜tests.py
┃ ┣ 📜urls.py
┃ ┗ 📜views.py
┣ 📂config
┃ ┣ 📂__pycache__
┃ ┣ 📜__init__.py
┃ ┣ 📜asgi.py
┃ ┣ 📜celery.py
┃ ┣ 📜settings.py
┃ ┣ 📜urls.py
┃ ┗ 📜wsgi.py
┣ 📂logs
┣ 📂member
┃ ┣ 📂__pycache__
┃ ┣ 📜__init__.py
┃ ┣ 📜admin.py
┃ ┣ 📜apps.py
┃ ┣ 📜callback.py
┃ ┣ 📜constants.py
┃ ┣ 📜models.py
┃ ┣ 📜payment.py
┃ ┣ 📜serializers.py
┃ ┣ 📜tests.py
┃ ┣ 📜urls.py
┃ ┗ 📜views.py
┣ 📂music_videos
┃ ┣ 📂__pycache__
┃ ┣ 📜admin.py
┃ ┣ 📜apps.py
┃ ┣ 📜documents.py
┃ ┣ 📜models.py
┃ ┣ 📜s3_utils.py
┃ ┣ 📜serializers.py
┃ ┣ 📜tasks.py
┃ ┣ 📜tests.py
┃ ┣ 📜urls.py
┃ ┗ 📜views.py
┣ 📂oauth
┃ ┣ 📂__pycache__
┃ ┣ 📜admin.py
┃ ┣ 📜apis.py
┃ ┣ 📜apps.py
┃ ┣ 📜authenticate.py
┃ ┣ 📜handler.py
┃ ┣ 📜mixins.py
┃ ┣ 📜models.py
┃ ┣ 📜services.py
┃ ┣ 📜tests.py
┃ ┣ 📜urls.py
┃ ┣ 📜utils.py
┃ ┗ 📜views.py
┣ 📜.env
┣ 📜.git
┣ 📜.gitignore
┣ 📜.gitmessage.txt
┣ 📜Dockerfile
┣ 📜README.md
┣ 📜manage.py
┗ 📜requirements.txt

👥 Team Members

Name 조진우 강기환 김진희 박유경 유성원 최호원
Profile
Role Leader, Backend,
Frontend, DevOps		 Backend, DevOps Backend, DevOps Frontend, Design Frontend, Design Frontend, Design
GitHub @jinoo0306 @Gihwan2 @kimzini @ukongee @Youth-one @BMHowon

Popular repositories Loading

  1. MVStudio-Backend MVStudio-Backend Public

    MVStudio 프로젝트의 Backend Repository입니다.

    Python 1 1

  2. .github .github Public

  3. MVStudio-Frontend MVStudio-Frontend Public

    MVStudio 프로젝트의 Frontend Repository입니다.

    JavaScript 1

  4. MVStudio-Docker MVStudio-Docker Public

    MVStudio 프로젝트의 Docker Repository입니다.

    Go 1

Repositories

Showing 4 of 4 repositories
  • .github Public
    2024-Techeer-Summer-Bootcamp-Team-D/.github’s past year of commit activity
    0 0 0 0 Updated Sep 4, 2024
  • MVStudio-Backend Public

    MVStudio 프로젝트의 Backend Repository입니다.

    2024-Techeer-Summer-Bootcamp-Team-D/MVStudio-Backend’s past year of commit activity
    Python 1 1 0 0 Updated Aug 8, 2024
  • MVStudio-Frontend Public

    MVStudio 프로젝트의 Frontend Repository입니다.

    2024-Techeer-Summer-Bootcamp-Team-D/MVStudio-Frontend’s past year of commit activity
    JavaScript 0 1 0 0 Updated Aug 2, 2024
  • MVStudio-Docker Public

    MVStudio 프로젝트의 Docker Repository입니다.

    2024-Techeer-Summer-Bootcamp-Team-D/MVStudio-Docker’s past year of commit activity
    Go 0 1 0 0 Updated Jul 31, 2024

Top languages

Loading…

Most used topics

Loading…