Starling Bank Bikes Manchester
Starling Bank Bikes Manchester is a dashboard that monitors bike-sharing stations in
Manchester in real time and reports analytics about them. The project includes a web
frontend and a backend API.
Features
- Live bike and station stats: View availability, utilization, and capacity for each station.
- Interactive map: See station locations and bike distribution.
- Popular-station analytics: Find the most-used and highest-capacity stations.
- Modern UI: Use a responsive interface built with React, Tailwind CSS, and Radix UI.
Project structure
- 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
Get started
Prerequisites
- Node.js and npm
- A Cloudflare account with Workers and D1, for deployment
Develop locally
To run the backend (Worker plus local D1), enter the following commands:
cd worker
npm install
npm run migrate:local
npx wrangler dev
To run the frontend, enter the following commands:
cd bike-sharing-dashboard
npm install
npm run dev
Deploy
The app runs at cycle.arrakis.house. When you push a
change to main that touches worker/ or bike-sharing-dashboard/, the
.github/workflows/deploy.yml workflow builds the frontend, applies the D1 migrations,
and runs wrangler deploy. The Worker serves the static frontend and the /api/v1 API
from the same origin. A 10-minute cron job snapshots the Manchester Beryl General
Bikeshare Feed Specification (GBFS) feed into D1.
Technologies used
- Frontend: React, TypeScript, Tailwind CSS, Vite, Radix UI
- Backend: Cloudflare Workers, Hono, D1 (SQLite), TypeScript
Author
ThisisBankole