interactive-outdoor-cooking-demo

このリポジトリは、RFID/NFCタグ付きの食材モデルを使った、インタラクティブな野外料理体験デモのコード・資料をまとめたものです。
Expo 2025（大阪・関西万博）をはじめとした各種イベントやスカウト活動などでの活用を想定しています。

🚀 クイックスタート

必要な環境

• Node.js (v16以上)
• npm (v7以上)

セットアップ手順

1. リポジトリをクローン

   git clone <repository-url>
   cd interactive-outdoor-cooking-demo

2. 依存関係をインストール

   npm install

3. 開発サーバーを起動

   npm run dev

4. ブラウザでアクセス

   • http://localhost:3000 を開く

🎯 機能

このアプリケーションには以下の3つの画面があります：

1. ストーリー選択画面 - 料理のストーリーを選択
2. 食材収集画面 - RFID/NFCタグ付き食材を収集
3. 完成演出画面 - 料理完成の演出

大きなボタンと明るい色使いで、子どもでも直感的に操作できるUIになっています。

🛠️ 開発

利用可能なスクリプト

• npm run dev - 開発サーバーを起動
• npm run build - プロダクションビルドを作成
• npm run preview - ビルド結果をプレビュー

環境変数

フロントエンド（.env または .env.local）:

変数名	デフォルト	説明
VITE_API_ORIGIN	http://localhost:3001	Expressサーバーのオリジン

Expressサーバー（server/.env または .env）:

変数名	デフォルト	説明
PORT	3001	サーバーのポート番号
LOCAL_HOST	0.0.0.0	サーバーのバインドアドレス
LOCAL_WS_URL	ws://127.0.0.1:8080	Pico側WebSocketのURL
CORS_ORIGIN	http://localhost:3000	CORSで許可するフロントエンドオリジン

MicroPython（micropython/server_node/secrets.py）:

secrets = {
    "ssid_home": "your-wifi-ssid",
    "password_home": "your-wifi-password",
    "ssid_mobile": "your-mobile-hotspot-ssid",
    "password_mobile": "your-mobile-hotspot-password",
}

技術スタック

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Radix UI