interactive-outdoor-cooking-demo

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

🚀 クイックスタート

必要な環境

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

セットアップ手順

リポジトリをクローン

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

依存関係をインストール
```
npm install
```
開発サーバーを起動
```
npm run dev
```
ブラウザでアクセス
- http://localhost:3000 を開く

🎯 機能

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

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

大きなボタンと明るい色使いで、子どもでも直感的に操作できる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

FilesExpand file tree

README.md

Latest commit

History