目次
操作デモ
アプリ概要
ユーザーがメモを作成・編集・分類・管理できるメモ管理ツールです。 カテゴリ分け・検索・画像添付に対応し、シンプルさと整理しやすい UI を重視しています。
使用技術
- フロントエンド: React, TypeScript, Tailwind CSS, Fetch API, React Router
- バックエンド：Node.js, Express
- データベース：MongoDB（Mongoose）
- 認証 / 決済：JWT（Cookie-based Authentication）
- ホスティング：Render
- その他：Firebase（画像アップロード機能）
こだわった点
認証の仕組みを深く理解するため、Firebase等の外部サービスを使わず、Node.js/Expressで独自の認証機能を実装しました。セキュリティを考慮し、Access TokenとRefresh Tokenの2種類を発行。どちらもJavaScriptからアクセス不可能なHttpOnly Cookieに保存することで、XSS（クロスサイトスクリプティング）攻撃のリスクを最小限に抑えています。また、Access Tokenが失効した際も、/api/refreshエンドポイントによりユーザーに再ログインを強いることなく、シームレスにトークンを更新する仕組みを構築しました。
※無料サーバーのため起動に時間がかかります。