notion clone 다운로드 - notion clone 소스 코드 다운로드

notion clone

AI 소스 코드

1.0.0

다운로드

? 개념 클론

개념과 같은 메모를 작성하고 편집합니다

이 클론은 개념이 가지고있는 훌륭한 음표 기능 중 일부를 복제하려고합니다. 당신이 개념을 모른다면 아직, 나는 그것을 확인하는 것이 좋습니다!

? 라이브 데모 : Notion-clone.kmuenster.com

? 중간 기사 : 개념과 같은 텍스트 편집기를 구축하는 방법

개념 클론 스크린 샷

특징

슬래시 명령 (유형 / 블록을 다른 컨텐츠 유형으로 전환하려면)
HTML 지원 (텍스트 블록에서 <a> 와 같은 일반 HTML 태그 사용)
이미지 지원 ( /image 명령을 사용하여 이미지 업로드)
드래그 앤 드롭 (드래그 앤 드롭으로 쉽게 블록을 재주문)
게스트 편집 (누구나 공개 페이지를 만들고 링크를 통해 공유 할 수 있습니다)
사용자 관리 (개인 페이지 생성 계정 생성)
예정된 작업 (비활성 페이지 및 계정 삭제 자동으로)

기술 스택

프론트 엔드는 Next.js와 전체 서버 측 렌더링으로 구축됩니다. 백엔드에서 REST API는 사용자 컨텐츠 및 사용자 관리 저장을 처리합니다.

프론트 엔드

다음 .js · react.js · scss/sass

백엔드

Express.js · Mongoose · NodeMailer · JWT (쿠키 기반)

설치

프로젝트를 복제하십시오

 git clone https://github.com/konstantinmuenster/notion-clone.git
 cd notion-clone

환경 변수를 추가하십시오

백엔드 : backend 디렉토리에서 .env 파일 생성 :

 FRONTEND_URL="http://localhost:3000"
DOMAIN="localhost"
JWT_KEY="yourSecretForTokenGeneration"
PORT=8080
MONGO_URI="mongodb+srv://username:[email protected]/database?retryWrites=true&w=majority"
MAIL_HOST="smtp.sendgrid.net"
MAIL_PORT=465
MAIL_USER="apiKey"
MAIL_SENDER="Your Name <[email protected]>"
MAIL_PASSWORD="yourSendGridApiKey"

프론트 엔드 : frontend 디렉토리에서 .env.local 파일을 만듭니다.

 NEXT_PUBLIC_API="http://localhost:8080" // references your Backend API endpoint

백엔드 설치 및 실행 (http : // localhost : 8080)
```
 cd backend
npm install
npm start
```
프론트 엔드 설치 및 실행 (http : // localhost : 3000)
```
 cd frontend
npm install
npm run dev
```

호스팅

노드 응용 프로그램 및 사용자 정의 도메인을 지원하는 거의 모든 공급자에서 응용 프로그램을 호스팅 할 수 있습니다. 나는 vercel.com에서 프론트 엔드와 Heroku.com에서 백엔드를 주최하기로 결정했습니다. 그러나 원하는 경우 동일한 제공 업체에서 Frontend 및 Backend를 모두 호스팅 할 수 있습니다.

Mongodb Atlas

새로운 MongoDB 클러스터를 선불로 만들어야합니다. 모든 페이지 및 블록 데이터를 저장합니다. MongoDB Atlas에서 무료로 하나를 만들 수 있습니다.

다음 컬렉션을 만듭니다 .

페이지
사용자

Heroku로 인해 모든 사람에게 네트워크 액세스를 허용 하십시오 .

백엔드

Heroku.com에 백엔드를 배포하려면 Heroku.com에서 선호하는 지역에서 새 앱을 만듭니다.

백엔드에 대한 모든 생산 환경 변수를 추가 하십시오 . 이 readme의 설치 부분에서 어떤 변수가 필요한지 알 수 있습니다.

백엔드 API에 맞춤 도메인을 추가 하십시오 . 응용 프로그램은 쿠키 기반 인증을 사용하므로 동일한 도메인에서 백엔드와 프론트 엔드를 실행해야합니다. 예를 들어, www.notion-clone.kmuenster.com 에서 Frontend를 실행하고 api.notion-clone.kmuenster.com 에서 백엔드를 실행하십시오.

예정된 작업을 실행하고 싶습니까? 비활성 페이지와 사용자를 삭제하기 위해 예정된 작업을 자주 실행합니다. 이 기능을 원한다면 응용 프로그램에 더 많은 Dynos를 추가하고 Heroku Scheduler를 통해 Job $ node jobs/index.js 실행해야합니다.

마지막으로 Heroku Git을 사용하여 앱을 배포 할 수 있습니다.

notion-clone 백엔드와 프론트 엔드를 포함하는 모노 리포이므로 백엔드를 Heroku로 밀면 git 하위 트리 푸시를 만듭니다 . 따라서 git subtree push --prefix backend heroku master 대신 git push heroku master 를 실행하십시오. 따라서 우리는 백엔드 부분 만 푸시합니다.