notion clone下載 - notion clone源代碼下載

notion clone

Ai源碼

1.0.0

下載

？概念克隆

創建和編輯概念中的註釋

該克隆試圖複製一些概念概念所具有的一些出色的筆記功能。如果您還不知道觀念。所以，我強烈建議您檢查一下！

？實時演示：notion-clone.kmuenster.com

？中文：如何構建像概念這樣的文本編輯器

概念克隆屏幕截圖

特徵

slash命令（輸入/將塊變成不同的內容類型）
HTML支持（在文本塊中使用常規HTML標籤，例如<a> ）
圖像支持（使用/image命令上傳圖像）
拖放（通過拖放輕鬆重新排序塊）
來賓編輯（任何人都可以創建公共頁面並通過鏈接共享）
用戶管理（創建一個帳戶以創建私有頁面）
計劃的作業（自動刪除不活動的頁面和帳戶）

技術堆棧

前端由Next.js構建，並且完全服務器端渲染。在後端，REST API處理保存用戶內容和用戶管理。

前端

next.js·react.js·scss/sass

後端

express.js·mongodb搭配mongoose·nodemailer·jwt（基於cookie）

安裝

克隆項目

 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上託管後端。但是，如果您願意，您可以在同一提供商上託管，前端和後端。

Mongodb地圖集

您必須預先創建一個新的MongoDB群集。它將存儲您的所有頁面並阻止數據。您可以在MongoDB Atlas上免費創建一個。

確保您創建以下集合：

頁面
用戶

確保您允許所有人訪問網絡（由於Heroku）。

後端

如果您想在Heroku.com上部署後端，請在Heroku.com上的首選區域中創建一個新應用。

確保，您為後端添加所有生產環境變量。您可以查看此讀數的安裝部分中需要哪些變量。

確保您為後端API添加自定義域。由於應用程序使用基於Cookie的身份驗證，因此我們必須在同一域上運行後端並前端。例如，我在www.notion-clone.kmuenster.com上運行前端，並在api.notion-clone.kmuenster.com上運行後端。

想運行計劃的作業嗎？要刪除不活動的頁面和用戶，我經常運行計劃的作業。如果您也需要此功能，則必須在應用程序中添加更多DYNO，並通過Heroku Scheduler運行$ node jobs/index.js 。

最後，您可以使用Heroku Git部署應用程序。

確保，當您將後端推到Heroku時，您會進行git子樹的推動，因為notion-clone是包含後端和前端的單聲道。因此，運行git subtree push --prefix backend heroku master而不是git push heroku master 。因此，我們只能推動後端部分。