https://github.com/ut42tech/stago
A gamified mobile app to encourage regular stadium visits. | Japanet Nagasaki Hackathon 2025 Autumn
https://github.com/ut42tech/stago
gamification hackathon mobile-app nextjs pwa
Last synced: about 1 month ago
JSON representation
A gamified mobile app to encourage regular stadium visits. | Japanet Nagasaki Hackathon 2025 Autumn
- Host: GitHub
- URL: https://github.com/ut42tech/stago
- Owner: ut42tech
- Created: 2025-11-28T07:31:32.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-03-07T03:33:31.000Z (4 months ago)
- Last Synced: 2026-03-07T12:23:43.639Z (4 months ago)
- Topics: gamification, hackathon, mobile-app, nextjs, pwa
- Language: TypeScript
- Homepage: https://stago-jigemontech.vercel.app
- Size: 3.35 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# スタGO
**スタジアム通いを習慣化するゲーミフィケーションアプリ**
長崎スタジアムシティへの来訪を促進するための PWA（Progressive Web App）です。Duolingoのゲーミフィケーション要素を取り入れ、チェックイン・ポイント・ラッシュイベントを通じてスタジアムへの継続来訪を楽しいものにします。
長崎ハッカソン 2025 — じげもんテック 制作
---
## 主な機能
- **QRコードチェックイン** — スタジアム内の各スポットに設置されたQRコードを読み取ってチェックイン。60秒ごとに更新される時限式QRコードを生成します。
- **ポイントシステム** — チェックインでスポットごとのポイント（10〜20pt）を獲得。累計ポイントをプロフィール画面で確認できます。
- **スタジアム・ラッシュ（協力イベント）** — 複数ユーザーが協力して目標参加人数を達成すると、ボーナスポイント（5,000〜15,000pt）を山分けする期間限定イベント。
- **実績バッジ** — 初回チェックイン・連続記録・スポット制覇など 10 種類のバッジ（Normal / Rare / Epic / Legendary）を獲得できます。
- **Googleログイン** — Supabase Auth を利用した Google OAuth 認証。
- **PWA対応** — ホーム画面に追加してネイティブアプリのように使用可能。
---
## チェックインスポット（9か所）
| スポット | ポイント |
|----------|---------|
| スタジアム入口 | 10pt |
| フードホール | 10pt |
| コワーキングスペース | 15pt |
| ホテルロビー | 10pt |
| ウォーキングコース | 20pt |
| ショップエリア | 10pt |
| 温泉施設 | 15pt |
| イベントスペース | 10pt |
| キッズエリア | 10pt |
---
## 技術スタック
| カテゴリ | 技術 |
|----------|------|
| フレームワーク | [Next.js](https://nextjs.org/) 16 (App Router) |
| 言語 | TypeScript 5 |
| スタイリング | Tailwind CSS 4 |
| UIコンポーネント | Radix UI / shadcn/ui |
| アニメーション | Motion |
| 認証・バックエンド | [Supabase](https://supabase.com/) (Auth + Realtime) |
| QRコード生成 | qrcode.react |
| 音声 | Howler.js |
| リンター / フォーマッター | [Biome](https://biomejs.dev/) |
| テスト | Jest / Testing Library |
---
## セットアップ
### 必要な環境
- Node.js 20 以上
- [pnpm](https://pnpm.io/) 9 以上
### インストール
```bash
git clone https://github.com/ut42tech/stago.git
cd stago
pnpm install
```
### 環境変数
プロジェクトルートに `.env.local` を作成し、以下を設定します。
```env
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_PUBLIC_APP_URL=http://localhost:3000
```
Supabase の設定については [Supabase ドキュメント](https://supabase.com/docs) を参照してください。
Google OAuth の設定は Supabase ダッシュボード → Authentication → Providers → Google から行います。
### 開発サーバーの起動
```bash
pnpm dev
```
[http://localhost:3000](http://localhost:3000) をブラウザで開いてください。
---
## コマンド一覧
```bash
pnpm dev # 開発サーバー起動
pnpm build # プロダクションビルド
pnpm start # プロダクションサーバー起動
pnpm lint # Biome によるリント
pnpm format # Biome による自動フォーマット
pnpm test # Jest によるテスト実行
```
---
## プロジェクト構造
```
src/
├── app/
│ ├── (app)/ # メイン画面（認証必須）
│ │ ├── page.tsx # ホーム画面
│ │ ├── checkin/ # チェックイン画面
│ │ ├── events/ # ラッシュイベント一覧
│ │ └── profile/ # プロフィール・実績
│ ├── (auth)/ # 認証画面
│ └── auth/callback/ # OAuth コールバック
├── components/
│ ├── ui/ # 汎用UIコンポーネント
│ └── features/ # 機能別コンポーネント
├── context/ # React Context（認証・ゲーム状態）
├── data/ # 静的データ（スポット・バッジ・ラッシュ定義）
├── hooks/ # カスタム React Hook
├── lib/ # ユーティリティ・Supabase クライアント
└── types/ # TypeScript 型定義
```
---
## デプロイ
[Vercel](https://vercel.com/) へのデプロイを推奨します。
[](https://vercel.com/new/clone?repository-url=https://github.com/ut42tech/stago)
環境変数（`NEXT_PUBLIC_SUPABASE_URL`・`NEXT_PUBLIC_SUPABASE_ANON_KEY`・`NEXT_PUBLIC_APP_URL`）をVercelのプロジェクト設定に追加してください。