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

Last updated at 2024-07-29Posted at 2024-07-27

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

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

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

技術選定

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

使用したライブラリー

React Libraries

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

Node.js Libraries

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

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