Building Zaturn Running Club 2026: A Real-Time Run Tracking App Inside LINE

My running club wanted to tackle a 1,000 km team goal for 2026. The catch? Everyone communicates via LINE and nobody wants to download another app.

So I built Zaturn Running Club — a web app that lives entirely inside LINE. It features a board game-style progress tracker, mandatory photo proof, admin workflows, and instant push notifications.

Live Demo

The Stack

• Frontend: Next.js 14 (App Router, static export) hosted on Cloudflare Pages.
• Auth & Backend: LINE LIFF + Supabase (Auth, Postgres DB, Storage, and Edge Functions).
• Notifications: LINE Messaging API for instant admin alerts.

Key Features

🎮 The Board Game Canvas

The core experience is a 100-square board game rendered on an HTML5 Canvas, where each square equals 10 km. Runners appear as tokens on a snaking, nature-themed path. The board is fully responsive and recalculates on window resize.

📸 Photo Proof & Admin Review

Every run requires photo proof. Admins get a dedicated dashboard with full-screen lightboxes, stat tiles (distance, duration, pace), and a quick two-step approve/reject workflow to prevent fake entries.

🔔 Instant LINE Push Notifications

The moment a runner logs a run, admins receive a LINE push notification:

🏃 [Runner Name] บันทึกการวิ่ง 5.2 กม. กรุณาตรวจสอบ

The Biggest Hurdle: LINE Tokens

LINE’s new v2.1 requires RSA key pairs and JWT signing for channel access tokens, which is a maintenance nightmare.

The Fix: I discovered the old v1 token endpoint still works. By using the client_credentials OAuth endpoint in a Supabase Edge Function (notify-admin), the app fetches a fresh token automatically on every run submission. Zero manual token rotation needed.

What’s Next?

• Monthly challenge modes (100 km sprints, team battles)
• Badges & achievements for streaks and milestones
• Social features to cheer on teammates