pushup.ai — 腕立て回数カウンター（Next.js）

概要

pushup.ai は Next.js（app ディレクトリ）で作られた TypeScript プロジェクトで、リポジトリ説明はシンプルに「Count your pushups」。create-next-app によるセットアップで、ローカル開発用のコマンドや初期ページ（app/page.tsx）を編集して即時に結果を確認できます。プロジェクト構成はコンポーネント分割を想定したディレクトリ構造で、bun.lock が含まれていることから bun を使った実行も視野に入っています。姿勢推定やカウラウドレス保存などの拡張を組み込みやすいフロントエンド基盤が整っています。

リポジトリの統計情報

スター数: 3
フォーク数: 0
ウォッチャー数: 3
コミット数: 14
ファイル数: 15
メインの言語: TypeScript

主な特徴

Next.js（app ディレクトリ）で構築された TypeScript プロジェクト
create-next-app による標準的な開発フロー（npm / yarn / pnpm / bun 対応）
コンポーネント分割（components ディレクトリ）を想定したフロントエンド設計
bun.lock を含み bun 環境での実行や最適化を検討可能

技術的なポイント

このリポジトリは Next.js の app ディレクトリ構成と TypeScript を採用したフロントエンド中心のコードベースを提供します。app/page.tsx がエントリーポイントに相当し、クライアント側での動的な UI とブラウザ API（たとえばカメラの MediaDevices API）を扱うケースを想定した実装構造になっています。components ディレクトリに UI コンポーネントを分割することで再利用性を高め、ページロジックを薄く保てる点が利点です。

実際に腕立て回数カウント機能を実装する場合の注目点としては、ブラウザ上での姿勢推定（pose estimation）とリアルタイム処理のパイプライン設計があります。代表的なアプローチは以下のとおりです：

カメラ入力を getUserMedia で取得し、Canvas や WebGL に描画してフレームを取り出す
TensorFlow.js や MediaPipe（あるいは MoveNet / BlazePose など）でフレームごとに人体キーポイントを推定
キーポイント（肩、肘、腰など）の高さや角度変化をもとに「上下の遷移」を検出する状態機械（デバウンス・スムージングを含む）で回数をカウント
パフォーマンス改善として WebGL バックエンド、WASM、または Web Worker で推論をオフロードし、UI スレッドの負荷を下げる

Next.js を採用しているため、サーバー側でのストレージや API を組み合わせてユーザー履歴やスコアの保存、認証連携（OAuth）を追加することも容易です。bun.lock の存在は bun を使った高速起動や次世代ランタイムでの最適化を試せる点で開発体験を向上させます。さらに、モバイル端末や低電力環境を想定したモデル軽量化（量子化）やフレームレート制御、PWA 化やオフライン計測機能の追加も現実的です。

ユーザー体験面では、リアルタイムのフィードバック（フォームの良し悪しを可視化）、音声や振動での通知、アクセシビリティ対応、バッテリー消費への配慮が重要です。本リポジトリは骨格となる UI と開発フローを提供しているため、これらの機能を段階的に組み込む拡張性を持っています。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
README.md: file
app: dir
bun.lock: file
components: dir
package.json: file
public: dir
tsconfig.json: file
next.config.js: file
.eslintrc: file
.prettierrc: file
styles: dir
node_modules: dir
LICENSE: file
.github: dir …他 10 ファイル

まとめ

Next.js + TypeScript で作られた、腕立てカウントに拡張しやすいフロントエンド基盤です。

リポジトリ情報：

名前: pushup.ai
説明: Count your pushups
スター数: 3
言語: TypeScript
URL: https://github.com/crafter-station/pushup.ai
オーナー: crafter-station
アバター: https://avatars.githubusercontent.com/u/120886289?v=4

READMEの抜粋： This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses [next/font](…