概要
農業の出荷業務を想定して個人開発したWebアプリケーションです。
手書きの出荷伝票をOCRで読み取り、出荷予定と実績の登録・照合・承認までを一つのシステムで管理できるようにしました。
現在は開発を終了していますが、制作した機能を確認できるデモサイトを公開しています。
プロジェクト情報
| 項目 | 内容 |
|---|---|
| 制作期間 | 2024年7月 – 2024年10月（3ヶ月） |
| 担当範囲 | 企画・設計・開発・デプロイ（個人開発） |
| 公開URL | https://shipment-demo.cropgarage.com |
| 種別 | Webアプリケーション / PWA |
主な機能
OCR伝票読み取り
スマホで撮影した出荷伝票から、出荷先・個数・追跡番号を自動抽出（・・・しようと思ったがうまくいかず断念）
✅ 承認ワークフロー
出荷予定と実績を照合し、流通業者が承認・差し戻しを管理
出荷実績管理
過去の出荷データを一覧表示・検索・CSV出力
ロール別権限管理
生産者・流通業者・管理者で適切なアクセス制御を実装
マルチデバイス対応
PC・スマホ・タブレットで快適に操作可能（PWA対応）
技術スタック
フロントエンド
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- React Hooks
バックエンド
- Supabase
- PostgreSQL
- Authentication
- Storage
- Row Level Security (RLS)
インフラ・その他
- Vercel（ホスティング）
- Google Vision API（OCR）
- PWA対応
デモアカウント
実際の業務フローを体験できます。
流通業者アカウント（全機能利用可能）
Email: demo-trader@example.com
Password: demo123生産者アカウント（出荷登録体験用）
Email: demo-farmer@example.com
Password: demo123業務フロー
業務フロー
- 出荷先マスタ管理
出荷先をグループ分けして一元管理 - 出荷予定登録
流通業者が翌日の出荷予定を登録 - 出荷予定確認
生産者が自分の担当分を確認 - OCR出荷登録
伝票を撮影して自動入力 - 出荷比較・承認
予定と実績を並べて確認 - 出荷実績一覧
承認済みデータの検索・CSV出力
実績・成果
- 開発ブログ: 14記事執筆（開発プロセスを詳細に記録）
- 抽出精度: 出荷先名90%以上
- 対応デバイス: PC / スマホ / タブレット
開発ブログ
開発プロセスを詳しく知りたい方は、以下のブログシリーズをご覧ください。