こうかんメーカー (Trade Snap)

グッズ交換・譲渡用の画像メーカーです。画像にラベル（譲/求/済み/仮約束/検討中/✕）を配置して、交換画像を作成できます。

🚧 プロトタイプ段階: 基本機能は動作しますが、まだ開発中です。

機能

画像編集

• 画像アップロード — ドロップまたはタップで画像を選択
• ラベル配置 — 譲・求・済み・仮約束・検討中・✕ の6種類
• ドラッグ＆ドロップ — ラベルを自由に配置・移動
• ズーム — ピンチ操作・スクロール・スライダーで拡大縮小
• 画像エクスポート — ラベル付き画像をダウンロード

UI

• PWA対応 — ブラウザからインストール可能
• モバイルファースト — スマホでの操作に最適化
• Storybook — UIコンポーネントのカタログ

技術スタック

• Runtime: Node.js 22.x
• Package Manager: npm 11.x
• Monorepo: Turborepo
• Frontend: React 19, React Router v7
• Canvas: Konva.js / react-konva
• UI: TailwindCSS 4, Radix UI, shadcn/ui
• Build: Vite
• Linter/Formatter: ESLint, Prettier

ディレクトリ構成

trade-snap/
├── apps/
│   └── app/                    # Webアプリ (React Router v7)
│       ├── app/
│       │   └── routes/         # ページコンポーネント
│       └── public/             # 静的ファイル (manifest等)
├── packages/
│   └── ui/                     # 共通UIコンポーネント（Storybook付き）
│       ├── src/
│       │   ├── components/
│       │   │   ├── features/   # 機能コンポーネント（canvas等）
│       │   │   ├── layout/     # レイアウトコンポーネント
│       │   │   └── ui/         # shadcn/ui ベースコンポーネント
│       │   ├── hooks/          # カスタムフック
│       │   ├── constants/      # 定数定義
│       │   └── types/          # 型定義
│       └── .storybook/
├── turbo.json
└── package.json

開発環境構築

前提条件

• Node.js 22.x
• npm 11.x

💡 mise を使用すると、mise trust でプロジェクトに適したバージョンを自動でセットアップできます。

セットアップ

# リポジトリをクローン
git clone git@github.com:takecchi/trade-snap.git
cd trade-snap

# 依存関係をインストール
npm install

起動方法

開発サーバー

# Webアプリを起動
npm run dev -w apps/app

# Storybookを起動（UIコンポーネント開発）
npm run storybook -w packages/ui

その他のコマンド

# 全パッケージビルド
npm run build

# Lint
npm run lint

# 型チェック
npm run tsc

# フォーマット
npm run format

ライセンス

UNLICENSED