https://github.com/ut42tech/cloud-planter-prototype
A prototype of smart home gardening support app. | PBL 2025 Project
https://github.com/ut42tech/cloud-planter-prototype
nextjs prototype smart-gardening supabase
Last synced: about 1 month ago
JSON representation
A prototype of smart home gardening support app. | PBL 2025 Project
- Host: GitHub
- URL: https://github.com/ut42tech/cloud-planter-prototype
- Owner: ut42tech
- Created: 2025-06-21T05:30:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-07T03:36:02.000Z (4 months ago)
- Last Synced: 2026-03-07T12:18:43.000Z (4 months ago)
- Topics: nextjs, prototype, smart-gardening, supabase
- Language: TypeScript
- Homepage: https://pbl-cloud-garden.vercel.app
- Size: 146 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# トマサポ (TomaSupo)
トマト栽培モニタリングシステムのフロントエンドプロトタイプです。
IoT センサーと AI 診断を活用して、トマトの生育状況をリアルタイムで管理・可視化するウェブアプリケーションです。
## 機能概要
- **ダッシュボード**: 登録済みポット一覧と各センサー値（温度・土壌水分・窒素濃度）のリアルタイム表示（30秒自動更新）
- **ポット詳細**: センサー履歴グラフ（1〜30日間）・AI診断結果・CSVエクスポート
- **履歴**: 全ポットまたは指定ポットの時系列データ分析（統計値・グラフ表示）
- **設定**: プロフィール・通知・表示・データ管理の各種設定
- **認証**: NextAuth.js による JWT セッション管理（メール＋パスワード）
## 技術スタック
| カテゴリ | 使用技術 |
|---|---|
| フレームワーク | Next.js 15 (App Router, Turbopack) |
| UI ライブラリ | React 19, Radix UI, Tailwind CSS 4 |
| グラフ | Recharts 3 |
| 認証 | NextAuth.js 4 |
| 言語 | TypeScript 5 |
| アイコン | Lucide React |
## セットアップ
### 1. 依存関係のインストール
```bash
yarn install
```
### 2. 環境変数の設定
プロジェクトルートに `.env.local` を作成し、以下の変数を設定してください。
```env
# NextAuth.js のシークレットキー（必須）
NEXTAUTH_SECRET=your-secret-key
# バックエンド API の URL（未設定時はモックデータを使用）
NEXT_PUBLIC_API_BASE_URL=https://your-api-endpoint.com
```
`NEXTAUTH_SECRET` はランダムな文字列を設定してください。以下のコマンドで生成できます。
```bash
openssl rand -base64 32
```
### 3. 開発サーバーの起動
```bash
yarn dev
```
[http://localhost:3000](http://localhost:3000) をブラウザで開いてください。
### 4. ビルド・本番起動
```bash
yarn build
yarn start
```
## デモアカウント
> **⚠️ 開発専用**: 以下のアカウントは開発・検証目的のみで使用してください。本番環境では使用しないでください。
| 役割 | メールアドレス | パスワード |
|---|---|---|
| 管理者 | admin@tomasapo.com | admin123 |
| 農家 | farmer@tomasapo.com | farmer123 |
| デモ | demo@tomasapo.com | demo123 |
> **Note**: 現在はモックデータで動作しています。バックエンド API に接続する場合は `NEXT_PUBLIC_API_BASE_URL` を設定し、`src/lib/api.ts` のモック実装を実際の API 呼び出しに置き換えてください。
## プロジェクト構成
```
src/
├── app/ # Next.js App Router ページ
│ ├── page.tsx # ルートページ（認証状態に応じてリダイレクト）
│ ├── login/ # ログインページ
│ ├── dashboard/ # ダッシュボード
│ ├── pot/[id]/ # ポット詳細
│ ├── history/ # 履歴・分析
│ └── settings/ # ユーザー設定
├── components/
│ ├── ui/ # 汎用 UI コンポーネント
│ ├── layout/ # AppLayout・サイドバーナビゲーション
│ ├── auth/ # AuthGuard（ルート保護）
│ ├── PotCard.tsx # ポット一覧カード
│ ├── PotDetail.tsx # ポット詳細・グラフ
│ └── DiagnosisHistory.tsx # AI 診断履歴
├── hooks/ # カスタム React Hooks
│ ├── usePots.ts
│ ├── usePotDetail.ts
│ ├── useSensorData.ts
│ └── useHistoricalData.ts
├── lib/
│ ├── api.ts # API クライアント（モック実装含む）
│ ├── auth.ts # NextAuth 設定
│ ├── mockData.ts # 開発用ダミーデータ
│ └── utils.ts # ユーティリティ関数
└── types/
└── index.ts # TypeScript 型定義
```
## 主要な型定義
```typescript
// センサーデータ
interface SensorData {
id: string;
timestamp: string;
temperature: number; // 気温 (°C)
soilMoisture: number; // 土壌水分 (%)
nitrogenLevel: number; // 窒素濃度 (mg/L)
potId: string;
}
// AI 診断結果
interface DiagnosisResult {
id: string;
timestamp: string;
status: "good" | "warning" | "critical";
message: string;
recommendations: string[];
potId: string;
}
// ポット情報
interface PotInfo {
id: string;
name: string;
variety: string; // 品種
plantedDate: string;
currentSensorData: SensorData | null;
latestDiagnosis: DiagnosisResult | null;
}
```
## ライセンス
このリポジトリは PBL2025 の学習目的で作成されたプロトタイプです。