Fitness3.0

TypeScript

Next.js

React

Docker

GCP

トークンを賭けてリアルタイムでフィットネスバトル!

Nishino

推しアイデア

ビデオ通話にするのではなく、スケルトンで対戦することで相手の姿形を想像しながらフィットネスバトルができるところです!

作った背景

WebSocketを用いたリアルタイム通信をはじめ、機械学習におけるポーズ検知、Ethereumブロックチェーンを用いたスマートコントラクトなど、各々が勉強したい技術を使いたかったため

推し技術

WebSocketのリアルタイム通信をNest.jsとNext.jsを使ってAll Typescriptで構築しました。スマートコントラクトを用いて部屋の管理やトークンの管理をしているのも推し技術の一つ。

プロジェクト詳細

技術スタック

image.png

フロントエンド

Next.js x Typescriptを用いて機械学習ライブラリを使用してポーズを検知し、p5.jsでスケルトンを描画しています。座標を取得し、スクワットや設定したポーズの一致度をWebSocketでリアルタイム通信をしながら相手の座標を描画しています。

スマートコントラクトとの連携はuseDappを使用しており、スマートコントラクトで指定したEventをemitしたタイミングで検知するsubscribe関数を作成することでブロックからの検知を可能にしています。 それぞれの部屋に入るスマートコントラクトがemitするとスマートコントラクトで管理している部屋番号を基にしたダイナミックルートに自動でリダイレクトされるようにしています。

2人が部屋に入りカメラをオンにするとスケルトンの相手とのフィットネスバトルが始まります。時間内に相手よりフィットネスをすると相手のトークンの30%が自分のトークンに加算されます。

バックエンド

WebSocketを用いてリアルタイム通信をしながら座標データやAddressデータをフロント側に送信しています。

Ethereum

Hardhatを用いてTypescriptでdeploy scriptなどを記述しました。InfuraをEthereumノードとして、Ropsten Networkにデプロイしています。 スマートコントラクトは無名関数のfallbackを用意しており、コントラクトにETHが1 gwei送金されたらそれに応じたフィットネストークンが付与され、ゲームの参加が可能になります。 ゲームの勝負がついたら相手のトークン総量の30%を奪うことができます。これをすることによってある程度の強制力を持たせてフィットネスをすることができます。体があったかくなりますね。また、部屋の管理などをEthereum上で行うことによってデータベースを使わない形式で開発したのもアピールの一つです。

Nishino

@bv583bgy7gs3zbx5