Cycle Tracker

Starling Bank Bikes Manchester

Starling Bank Bikes Manchester は、マンチェスターのシェアサイクルステーションをリアルタイムで監視し、その分析情報を提供するダッシュボードです。このプロジェクトには、ウェブフロントエンドとバックエンド API が含まれています。

機能

• 自転車とステーションのリアルタイム統計：各ステーションの利用可能数、稼働率、収容台数を確認できます。
• インタラクティブマップ：ステーションの位置と自転車の分布を確認できます。
• 人気ステーションの分析：最も利用されているステーションや、収容台数が最も多いステーションを見つけられます。
• モダンな UI：React、Tailwind CSS、Radix UI で構築されたレスポンシブなインターフェースを利用できます。

プロジェクト構成

- bike-sharing-dashboard/   # Frontend (React, TypeScript, Vite)
  ├── src/
  │   ├── components/
  │   │   ├── dashboard/         # Dashboard features (PopularStationAnalytics, StatsCards, InteractiveMap)
  │   │   ├── home/              # Home page
  │   │   └── ui/                # UI primitives (Sheet, Tabs, Card, Table)
  │   ├── lib/                   # Utility functions
  │   ├── App.css, index.css     # Styles
  │   └── main.tsx               # App entry point
  ├── index.html                 # Root HTML
  ├── vite.config.ts             # Vite config
  └── tailwind.config.js         # Tailwind config

- worker/                   # Backend (Cloudflare Worker, TypeScript, Hono, D1)
  ├── src/
  │   ├── index.ts              # Hono app, CORS, static assets, cron entry
  │   ├── snapshot.ts           # GBFS feed -> D1 snapshot job (10-min cron)
  │   └── routes/               # API routes (bikes, stations, analytics)
  ├── migrations/               # D1 schema migrations
  └── wrangler.jsonc            # Worker + D1 + cron + custom-domain config

はじめに

前提条件

• Node.js と npm
• デプロイ用の Workers と D1 が利用できる Cloudflare アカウント

ローカルでの開発

バックエンド（Worker とローカル D1）を実行するには、以下のコマンドを入力します。

cd worker
npm install
npm run migrate:local   # first time only
npx wrangler dev        # API on http://localhost:8787

フロントエンドを実行するには、以下のコマンドを入力します。

cd bike-sharing-dashboard
npm install
npm run dev             # UI on http://localhost:5173, calls the local worker

デプロイ

アプリは cycle.arrakis.house で動作しています。worker/ または bike-sharing-dashboard/ に変更を加えて main にプッシュすると、.github/workflows/deploy.yml ワークフローによってフロントエンドがビルドされ、D1 マイグレーションが適用され、wrangler deploy が実行されます。Worker は同一オリジンから静的フロントエンドと /api/v1 API を提供します。10 分ごとに実行される cron ジョブが、マンチェスターの Beryl General Bikeshare Feed Specification（GBFS）フィードのスナップショットを D1 に保存します。

使用技術

• フロントエンド： React、TypeScript、Tailwind CSS、Vite、Radix UI
• バックエンド： Cloudflare Workers、Hono、D1（SQLite）、TypeScript

作成者

ThisisBankole