🎯 はじめに
友達とのグループチャットで、
- 「前に“〇〇行きたい”って言ってたけど結局どうなった？」
- 「グループで誰かが売りたいって言ってた物、どこいった？」
- 「誰かこのことについて知ってる人いないかな」
- 「チャットの中で大事な情報が流れて消える」
こんな経験、誰しも一度はあると思います。
そこで、グループ内に点在する “したいこと / ニーズ（売り買い）” / "みんなに教えて欲しいこと（知恵袋的な）"を一元管理できるサービス
「SHITAI」 を開発しました。
🚀 サービス URL
- ホーム画面
- ユーザー登録画面
👉 テストユーザーでログイン可能なので、すぐに試せます！
📸 画面レイアウト
ホーム画面
投稿作成画面
確認項目を設定することにより、参加者に情報入力してもらうフォームを表示できるようになります。
グループ内のユーザーの参加状況（実施日が入れられている場合のみ）
詳細画面
💡 SHITAI の主な機能
- グループ作成・参加（招待）
- “したい / ニーズ” 投稿
- 投稿へのリアクション（参加 / 参加・確定時の確認項目入力）
- 画像アップロード（Cloud Storage）
- 投稿編集 / 削除
- 各グループ内で情報を管理
- JWT 認証によるユーザー管理
🧱 技術スタック
| 領域 | 技術 | 説明 |
|---|---|---|
| フロントエンド | React | UI 全般を実装 |
| 状態管理 | Zustand | 投稿・UI 状態管理をシンプルに構築 |
| HTTP 通信 | Axios | Express API と通信 |
| バックエンド | Express (TypeScript) | REST API、認証、投稿管理 |
| 認証方式 | JWT | セッションレス認証 |
| DB | Neon DB（PostgreSQL）※毎日0時に GCP の VM にてバックアップしている。 | 投稿・ユーザー・グループ情報の永続化 |
| ストレージ | Cloud Storage | 投稿画像の保存 |
| デプロイ | Vercel | フロント & バックエンドをホスト |
🔧 アーキテクチャ概要（図解）
上記の技術スタックの関係性を図解すると下記のような感じになります。
🧩 実装のポイント
1. Zustand による最小構成の状態管理
Redux ほど大げさにしたくないため、以下の状態のみを zustand で管理：
- ログイン状態（認証情報）
- 選択中のグループ・ユーザーの情報
- 投稿に関する情報
- 参加しているグループの情報
再レンダーが最小化され、UI が非常に軽量になった点が良かったです。
2. Express + TypeScript + JWT でシンプルな API 設計
Express を採用した理由：
- カスタマイズしやすい
- router / middleware を自分好みに構成しやすい
- Node.js でフロントと技術統一ができる
3. Neon DB（PostgreSQL）でスケール＆開発効率を両立
Neon を採用した理由：
- 低コストで PostgreSQL が使える
- Serverless のため無駄な課金がない
- Vercel と相性がいい（vercel で簡単にデプロイし、Neon は自動でスケーリングしてくれるためデプロイ時の DB 側の考慮がほとんどない。）
- ブランチ機能が便利（開発環境と本番環境を分離しやすい）
4. Cloud Storage による画像アップロード
投稿時に画像添付が可能：
- 画像 → Cloud Storage
- 投稿データ → Neon DB
- URL を返して FE 側で表示
Express のミドルウェアで安全性を担保。
📌 今後のアップデート予定
- カレンダー連携（Google Calendar）
- “したい” の完了機能
- メール通知（したいことの作成・変更・確認項目入力時・実施日一日前のリマインド）※リマインド以外実装済み
- グループチャット
- アプリ版（React Native）
- ニーズが似てそうな人とマッチングさせる機能
🔚 おわりに
SHITAI は、グループ内で埋もれがちな “ちょっとした願望” や “売買ニーズ”、"みんなに教えて欲しいこと" を
気軽に投稿・共有できる居場所 を作りたいという思いで作りました。
React + Express + Neon DB というシンプルな構成で、
個人開発でも強固に運用できるアプリを作れたと思っています。
ぜひ触ってみて、改善案や感想をいただけると嬉しいです！
フロントエンド（リポジトリ）
バックエンド（リポジトリ）
