ノーションクローンアプリ

# アプリのURLとソースコード

アプリのURL
https://notion-clone-692f82db0b79.herokuapp.com/

ソースコード
https://github.com/keisukematsuka/notion-clone

### 技術選定

・フロントエンド react
・バックエンド node.js
・データベース mongoDB
・ソース管理 github

# 使用したライブラリー
### React Libraries

1. **react**
    - **概要**: フロントエンドライブラリで、UIコンポーネントを構築するために使用される。コンポーネントベースのアーキテクチャを提供し、状態管理やDOM操作を効率的に行える。
2. **axios**
    - **概要**: HTTPクライアントライブラリで、ブラウザやNode.js環境で使用できる。APIとの通信を簡便に行えるようにし、GETやPOSTリクエストをサポートする。
3. **mui (Material-UI)**
    - **概要**: React向けのUIフレームワークで、GoogleのMaterial Designに基づいたスタイリッシュでレスポンシブなコンポーネントを提供する。テーマのカスタマイズも可能。
4. **react-router-dom**
    - **概要**: Reactアプリケーションにルーティング機能を追加するライブラリ。シングルページアプリケーション（SPA）でのページ遷移を管理するために使用される。
5. **react-redux**
    - **概要**: ReduxをReactと連携させるためのライブラリ。アプリケーションの状態をグローバルに管理し、コンポーネント間での状態共有を容易にする。
6. **reduxjs/toolkit**
    - **概要**: Reduxの公式ツールキットで、Reduxのセットアップと使い勝手を改善するためのユーティリティを提供。状態管理のロジックをシンプルにし、ボイラープレートコードを減らす。
7. **query-string**
    - **概要**: URLのクエリパラメータを解析・生成するためのライブラリ。URLのパラメータをオブジェクトとして扱いやすくする。

### Node.js Libraries

1. **express**
    - **概要**: Node.jsのための軽量で柔軟なWebアプリケーションフレームワーク。ルーティングやミドルウェアの使用が簡単で、APIサーバーの構築に広く利用される。
2. **nodemon**
    - **概要**: Node.jsアプリケーションの開発時に使用されるツール。ソースコードの変更を監視し、自動的にサーバーを再起動する。
3. **cookie-parser**
    - **概要**: クッキーを解析するためのミドルウェア。クッキーを簡単に読み取り、設定することができる。
4. **cors**
    - **概要**: クロスオリジンリソース共有（CORS）を有効にするミドルウェア。異なるドメイン間でのリソース共有を安全に行う。
5. **crypto-js**
    - **概要**: 暗号化と復号化のためのライブラリ。セキュアなハッシュや暗号アルゴリズムを提供する。
6. **dotenv**
    - **概要**: 環境変数を管理するためのライブラリ。`.env`ファイルから環境変数を読み込み、アプリケーション内で使用する。
7. **express-validator**
    - **概要**: リクエストのバリデーションを行うためのミドルウェア。入力データの検証とサニタイズを簡単に行うことができる。
8. **jsonwebtoken**
    - **概要**: JSON Web Tokens（JWT）を生成、検証、デコードするためのライブラリ。セキュアな認証を実装する際に使用される。


# DB設計 MongoDB

**・userSchema**
```
const userSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
});
```
ユーザーを管理するためのコレクション
ユーザー名とパスワードをString型で定義


**・memoSchema**
```
const memoSchema = new mongoose.Schema({
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
    required: true,
  },
  icon: {
    type: String,
    default: "📝",
  },
  title: {
    type: String,
    default: "無題",
  },
  description: {
    type: String,
    default: "ここに自由記載してください",
  },
  position: {
    type: Number,
  },
  favorite: {
    type: Boolean,
    default: false,
  },
  favoritePosition: {
    type: Number,
    default: 0,
  },
});
```

ユーザーコレクションとリレーション関係を作り
メモのタイトル、メモの概要、お気に入り、位置などを定義




# アプリケーションの概要
**ログインと新規登録ページ**
![ログインページ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834304/dc21005f-0dae-5d72-5c7c-5dfd67ba21c6.jpeg)

8文字以上のユーザー名とパスワードを入力して新規登録orログイン
(express-validatorを使用しバリデーションを設定)
```
username:notionUser
password:12345678
```
こちらでログインできます。


また新規登録、ログインが完了するとTOKENが発行されローカルストレージに保存されます。
有効期限は24時間でその間ログイン状態が維持されます。

ログインが完了すると/に画面が遷移します。
(tokenの有無でログインorメモのページに自動で遷移します)


**メモページ**

![メモページ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834304/c276b6cf-61f5-473e-d9e0-42458c9f2d26.jpeg)


最初のメモ作成でメモが作成されます。＋ボダンでも可能です。
ログアウトボタンで/loginページに遷移しトークンがクリアされます。

![メモページ1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834304/80021245-a9bd-fdb0-3e8c-b098666238b7.jpeg)


作成したメモの編集も可能です。
タイトルと概要を編集することが出来ます。
上部にあるごみ箱アイコンをクリックするとメモの削除が行えます。
お気に入り機能は今後実装予定になります。

サイドバーのメモの状態管理ですがreduxで管理してます。
メモを削除、追加する度に値が更新され画面にレンダリングされます。
サイドバー上部のユーザーネームも今後はreduxにて管理して画面左上に出力されるよう実装を予定してます。



# 今後実装予定


・リッチテキストエディタ化したいと考えております。
メモの文字の色や大きさの変更などを変更出来るようにしたいと考えます。

・フォルダー構造やツリー構造を実装したいと考えております。
メモをフォルダーに入れて分かりやすく管理したいと考えてます。