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 。因此，我们只能推动后端部分。