概要
ハンドメイド作品を一点物単位で管理できる、モバイルファーストの在庫・販売管理アプリです。商品情報、画像、カテゴリ、タグ、タスク、顧客情報、QRコード、販売済更新、購入履歴、ダッシュボードを扱えます。
このプロジェクトでは、実際の利用場面を想定したUI、QRコードを使う販売フロー、一点物特有の状態管理、Firebase / GCPへの配置までをまとめています。
画面プレビュー
機能一覧
↓Scroll↓
- 動作確認
- Firebase Hosting / Cloud Run / Firestore / Cloud Storage
- 担当範囲
- プロダクト設計・UI・API・データ設計・クラウド配置
- 公開状況
- アプリ環境は非公開 / 画面プレビューとソースコードは公開
解決したい課題
- 一点物の商品は、同じ商品名でも個体ごとに制作状況・在庫・販売状況が異なる
- イベント会場では、商品を素早く識別して販売済みに更新する必要がある
- 顧客情報と購入商品が分かれると、リピート対応や販売傾向の把握が難しい
- 商品画像、タスク、カテゴリ、タグが複数の管理手段に分散しやすい
実装した機能
- ログイン、ログアウト、パスワード再設定
- 商品登録・一覧・詳細・編集・論理削除と、商品画像の追加・差し替え・削除
- カテゴリ、タグ、商品別タスクの管理
- 顧客情報と顧客別購入履歴の管理
- 商品ごとのQRコード表示と、QR読み取りによる販売済み更新
- 制作・在庫・販売状況を集計するダッシュボード
MVPは作家本人による単独利用を対象とし、決済、配送、会計、外部EC連携、複数ユーザー管理は対象外としています。
システム構成
React PWAFirebase Hosting / TypeScript / Vite
Express APICloud Run / Firebase Admin / Zod
FirebaseAuthentication / Firestore / Cloud Storage
- Firebase Authentication: Email / Password認証に加え、API側でも利用者本人のメールアドレスと一致するか検証
- Firestore: 商品、タスク、カテゴリ、タグ、顧客、操作ログを管理
- Cloud Storage: 商品画像をWebPへ変換し、表示用画像とサムネイルを保存
- Firebase Hosting + Cloud Run: 静的なReact PWAとExpress APIを分離して配置
なぜこの技術構成か
- React + TypeScript + Vite: 型安全なSPAと高速ビルドで、モバイルファーストPWAの開発体験を最適化
- Firebase (Auth / Firestore / Cloud Storage): 小規模でもリアルタイム同期・認証・ファイル管理がすぐに使え、スケールも可能
- Express API分離: フロントエンドとバックエンドの責務を明確に分離し、将来のバックエンド差し替えにも対応
- PWA: オフライン対応とホーム画面追加で、作家がイベント会場でもネットワーク不安なく使える設計
技術判断
一点物ならではの商品ID・状態遷移・顧客購入履歴の設計を重視しました。商品IDは再利用しない連番とし、販売済み更新は販売可能な状態の商品だけを対象にしています。同じQRコードを再度読み取っても重複更新しません。
画像は最大サイズと枚数を制限し、API側でWebPへ変換します。保存先のURLを固定保存せず、必要なときに期限付きURLを発行する方式です。
フロントとAPIを分離し、ローカルではFirebase Emulatorを使って認証・データ・ストレージを含む開発環境を再現できます。
品質保証と動作確認
- TypeScript strictを前提に、Web・API・共有型をモノレポで管理
- ESLint、型チェック、ビルド、ユニットテストをCIで検証
- ログイン、商品管理、画像、QR販売、ダッシュボードを主要なテスト対象として定義
- Firebase / GCP環境で、Hosting、Cloud Run、Firestore、Cloud Storageを含む動作を確認済み
公開状況
アプリ環境は、認証情報と利用データを扱う単独利用向けシステムのため一般公開していません。主要画面は上の画面プレビューで確認できます。
今後の改善
- GitHub Pages内のモックデモ
- QRコード読み取りのデモ動画
- UI改善前後の比較