このリポジトリはNerdleのクローンアプリを React/Express/Firebase で作成したリポジトリです。
NodeJS は .node-version に記載のバージョンを利用してください。
fnmなど.node-versionに対応している NodeJS のバージョン管理ツールの利用をオススメします。
Visual Studio Code の利用を推奨しています。
静的解析、デバッグ機能などが利用できるよう設定が記載済みです。
本プロジェクトを開いた際に、推奨される拡張機能が表示されると思うので指示に従ってインストールしてください。
- Firebase CLI のインストール (
npm install -g firebase-tools) - Firebase Emulator Suite の構成
// npm workspaces 機能を利用しているため、フロントエンド・API 個別に行う必要はありません
npm ci※ Firebase 関連の設定が必要になる場合は .firebaserc などの設定を設定してください
npm run dev -w functions
// View in Emulator Functions : http://127.0.0.1:4000/functions
// View in Emulator Firestore : http://127.0.0.1:4000/firestore初期の問題データ(sampleData)を curl コマンドや POSTMAN を利用して登録します
curl -X POST \
-H "Content-Type: application/json" \
-d @./docs/sampleData/rule.json \
http://127.0.0.1:5001/{YOUR_APP_NAME}/asia-northeast1/api/v1/rules
Path や URL は適宜自身の環境で変更が必要です
./packages/web/.env.local.example をコピーして、.env.local を作成します。
その後、内部の API のエンドポイント指定を先ほど立ち上げた API の URL に書き換えてください。
e.g
VITE_API_BASE_URL=http://127.0.0.1:5001/nerdle/asia-northeast1/api上記設定を完了後、フロントエンドのアプリを立ち上げます
npm run dev -w web
// Access to (http://127.0.0.1:5173/)- 開発時にブレークポイントなどを設定して動作を確認したい時は、vscode の
実行とデバッグ機能を利用することができます。起動オプションなどの詳細は .vscode/launch.json を確認してください。
自身の Firebase にデプロイする際は下記の方法で実施してください。
- Firebase のプロジェクト作成
- Firebase CLI でログイン & 1 で作成したプロジェクトをワークスペースと関連付けする
- .firebaserc の設定プロジェクト名を変更
- プロジェクトのビルド (
npm run buildで Web/API 両プロジェクトビルドされます) firebase deployコマンドを実行
注意点として、Firebase CloudFunctions を利用しているため無料プランでは WebAPI をデプロイすることができません。
このプロジェクトは packages/web と packages/frontend で構成される monorepo です。
プロジェクトルートで、firebase の構成と eslint のルールを管理しています。
packages/webは Typescript + React + Vite で構成された SPApackages/functionsは Typescript + Express で構成された API
.
├── README.md
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── package-lock.json
├── package.json
├── packages
│ ├── functions // API
│ └── web // WebApp
└── sampleData
├── guess.json
└── rule.json
- 共通
- セッション管理方法の再検討
- バックエンド側でセッション管理ができないためサーバー側で管理するかライフサイクルを設計する必要がある
- フロントエンド/バックエンド間の型定義を共通化
- バックエンド: OpenAPI 形式の定義ファイルを公開する
- フロントエンド: OpenAPI 定義からHTTPClient を自動生成する
- CI/CD
- 管理者用のツール作成
- セッション管理方法の再検討
- フロントエンド (packages/web)
- Storybook / Jest の導入と単体試験
Nerdle.hook.tsxの分離とリファクタリング- 振る舞いを全て管理しているが、関心ごとに応じて分離すべき
- パフォーマンスに懸念点があるので解消する
- バックエンド (packages/functions)
- DI Container の導入
- バリデーション
- ID 発行サービスの作成
- モデルの再設計
- e.g) 式を入力する箱をバックエンド側で全て生成する必要はなく、無駄に通信量がかかっている
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent