notion cloneダウンロード - notion cloneソースコードのダウンロード

notion clone

AI ソースコード

1.0.0

ダウンロード

？概念クローン

概念のようなメモを作成および編集します

このクローンは、概念が持っている素晴らしいノートテイキング機能のいくつかを再現しようとします。概念がわからない場合はまだ、まだチェックすることを強くお勧めします！

？ライブデモ：notion-clone.kmuenster.com

？中程度の記事：概念のようなテキストエディターを構築する方法

概念クローンスクリーンショット

特徴

スラッシュコマンド（タイプ/ブロックを異なるコンテンツタイプに変える）
HTMLサポート（テキストブロックで<a>のような通常のHTMLタグを使用）
画像サポート（ /imageコマンドを使用して画像をアップロード）
ドラッグアンドドロップ（ドラッグアンドドロップで簡単にブロックを再注文）
ゲスト編集（誰でも公開ページを作成してリンクで共有できます）
ユーザー管理（アカウントを作成してプライベートページを作成する）
スケジュールされたジョブ（非アクティブなページとアカウントを自動的に削除）

技術スタック

フロントエンドはnext.jsで構築され、完全にサーバー側にレンダリングされています。バックエンドでは、REST APIがユーザーコンテンツの保存とユーザー管理を処理します。

フロントエンド

next.js・React.js・scss/sass

バックエンド

Express.js・mongodb with 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： 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 Atlas

新しいMongoDBクラスターを事前に作成する必要があります。すべてのページを保存し、データをブロックします。 Mongodb Atlasで無料で作成できます。

確かに、次のコレクションを作成してください。

ページ
ユーザー

確かに、すべての人へのネットワークアクセスを許可してください（Herokuのため）。

バックエンド

heroku.comにバックエンドを展開する場合は、heroku.comで希望する地域で新しいアプリを作成します。

バックエンドにすべての生産環境変数を追加してください。このREADMEのインストール部分に必要な変数を確認できます。

バックエンドAPIにカスタムドメインを追加してください。アプリケーションはCookieベースの認証を使用するため、同じドメインでバックエンドとフロントエンドを実行する必要があります。たとえば、 www.notion-clone.kmuenster.comでフロントエンドを実行し、 api.notion-clone.kmuenster.comでバックエンドを実行します。

スケジュールされたジョブを実行したいですか？非アクティブなページとユーザーを削除するために、スケジュールされたジョブを頻繁に実行します。この機能も必要な場合は、アプリケーションにさらにdynosを追加し、Herokuスケジューラを介してJob $ node jobs/index.jsを実行する必要があります。

最後に、Heroku Gitを使用してアプリを展開できます。

notion-cloneとフロントエンドを含むモノレポであるため、バックエンドをHerokuに押すと、Git Subtreeプッシュを行うことを確認してください。したがって、 git subtree push --prefix backend heroku masterの代わりにgit push heroku master 。したがって、バックエンド部分のみを押します。