trello clone mern

Mern Stackを備えたTrelloクローン！

これはMern Stackで構築されたアプリであり、こちらからライブデモにアクセスでき、次の画像をクリックしてビデオを視聴できます。

画像をクリックしてビデオを見てください！

目的

このプロジェクトを開発する目的は、フロントエンドとバックエンドの両方でできることを示すことです。また、Mern Stackとしての私の最初のプロジェクトであることを指摘したいと思います。

特徴

• Trelloのような完全なレスポンシブデザイン
• 登録してログインします
• 複数のボードを作成し、背景を選択してメンバーを追加します
• 複数のリストを作成します
• 複数のカードを作成します
• リストまたはカードをドラッグアンドドロップします
• ボードのタイトルと背景を変更します
• ボードの説明を追加します
• リストのタイトルを変更します
• 説明、カバーカラー、メンバー、ラベル、開始日、期日、複数のチェックリスト、複数の添付物を追加する
• ボード、リスト、またはカードを削除します
• カードとボードのすべてのアクティビティログを追跡します
• カードまたはボードにコメントします
• 検索ボードまたはカードタイトル

使用されたテクノロジー

サーバー側	クライアント側	開発のみ
Expressjs	スタイルのコンポーネント	ノデモン
Express-unless	reduxjs-toolkit
マングース	React-Beautiful-Dnd
cors	マテリアルUI
パス	axios
dotenv	日付fns
jsonwebtoken	一瞬
bcryptjs	Atlaskit/CSS-Reset
	React-Hook/Mouse-position
	React-Router
	反応フック

実行する方法は？

• ここからnodejsをダウンロードしてください

• データベースでは、ローカルMongodbまたはMongo Atlasを使用できます。こちらをご覧ください

• リポジトリをクローンします：

  git clone https://github.com/umurdogann/trello-clone-mern

• ディレクトリの変更：

  cd trello-clone-mern

• 同じ場所を開く2番目の端末：

  • ubuntu： gnome-terminal
  • Windows： start

• ファーストターミナルのディレクトリを変更し、パッケージをインストールします。

  cd server

  npm install

• .env.exampleなどのサーバーディレクトリに.envファイルを作成し、必要な変数を入力します

• サーバーを開始します：

  npm run start

• 2番目の端子を切り替えます

• セカンドターミナルのディレクトリを変更し、パッケージをインストールします。

  cd client

  npm install

• クライアントを開始します：

  npm run start