dm

概要

LINE風の操作感を目指した、1対1とグループチャットに対応した軽量ブラウザメッセージアプリ。

詳細

Next.js App Router + TypeScript + Prisma + Socket.IO で構築。1対1トークとグループチャット（トークルーム）の送受信、既読・リアクション・リプライ・送信取消・添付ファイル（画像プレビュー・一般ファイル保存）を実装。グループは作成・招待・メンバー管理・プロフィール（アイコン/カバー）・メンション・既読人数表示に対応。友だち申請・ブロック、公開プロフィール URL・QR 共有、表示名・タグによるメンバー検索など DM 開始導線も備える。リアルタイムは Socket.IO を Next.js 起動プロセス内で自動起動し、PM2 で `dm-web` を常駐。認証はユーザー ID / パスワード（セッション Cookie）のみ。DB は SQLite（開発）／MySQL（本番予定）の切り替え運用。VPS + Nginx + HTTPS でデプロイ済み。ポートフォリオ評価用のデモアカウントとサンプル会話データを同梱。

目的

SNS 全機能ではなく会話体験に集中したメッセージアプリとして設計・実装。LINE を使う人が迷わず使える操作感を最低ラインにしつつ、軽快さとページ間の統一感を優先する。ポートフォリオ評価用の実動デモも兼ねる。

想定利用者

個人間のやり取りをブラウザで行いたいユーザー、メッセージアプリの UI/UX・リアルタイム実装を確認したい人

見せたいポイント

• 1対1トーク（メッセージ送受信・未読数・既読・長文折りたたみ・cursor pagination）
• グループチャット（トークルーム作成・招待・メンバー管理・解散・既読人数表示）
• Socket.IO によるリアルタイム受信（アプリ起動時に同一プロセス内で自動起動）
• リプライ（元メッセージへの移動・多段階の戻り操作）
• リアクション（追加・変更・削除・参加者一覧表示）
• 送信取消とリアルタイム反映
• 添付ファイル（画像サムネイル・プレビュー・ビューア、一般ファイルの保存）
• 友だち申請・承認・拒否・ブロック
• 公開プロフィール URL（/u/:userId）・QR コード共有・未ログイン向けプロフィール表示
• 表示名・プロフィールタグによるメンバー検索（プライバシー設定付き）
• グループ内メンション（@userId）とグループプロフィール（アイコン・カバー・紹介文）
• 2カラム（PC）／1画面1役割（スマホ）のレスポンシブ UI
• トーク背景・フォントサイズなどの表示カスタマイズ
• ポートフォリオ用デモデータとログイン画面のワンクリック試用パネル
• SQLite / MySQL 切り替え、storage バックアップ、本番起動前チェック

補足

ポートフォリオ評価用の実動デモ。ログイン画面の「ポートフォリオ用デモアカウント」から試用可能（共通パスワード: PortfolioDemo1）。本番 URL: https://chat.ak2lab.com/