LINE MINI App Planning Overview Sportclub CNX Court Booking Platform Document Version: 1.0
Date: January 2026
Status: Planning Document
Executive Summary App Overview Target Audience Core Features Screen Flow Diagram Technical Architecture User Journey Stakeholder Relationships LINE Integration QR Code System Revenue Model Implementation Timeline Success Metrics
Sportclub CNX is a sports facility booking platform specializing in tennis and badminton courts in Chiang Mai. This document outlines the planning for a LINE MINI App that will provide seamless booking, wallet management, and loyalty programs through LINE's ecosystem.
Key Objectives:
Increase booking convenience via LINE
Reduce no-shows through LINE notifications
Build customer loyalty with points system
Enable cashless payments via LINE Pay integration
Sportclub CNX (LINE MINI App)
LINE MINI App (Mobile web wrapper)
LINE LIFF (Line Front-end Framework)
Progressive Web App (PWA)
Court booking and scheduling
Digital wallet (District Credits)
Payment via PromptPay/QR Code
Booking confirmation via LINE
Loyalty points system
Admin management dashboard
Segment
Description
Age Range
Tech Proficiency
Tennis Players
Regular court users
25-55
Intermediate
Badminton Players
Casual and league players
20-50
Intermediate
Sports Enthusiasts
Multi-sport users
20-60
Basic-Intermediate
Location: Chiang Mai and surrounding areasIncome: Middle to upper-middle classLINE Usage: Heavy LINE users (Thailand's dominant messaging platform)Payment Preference: Increasingly cashless, mobile-first
Feature
Description
Priority
Browse Courts
View available courts at each branch
Must Have
Real-time Booking
Check availability and book slots
Must Have
Digital Wallet
Load credits, view balance
Must Have
Payment via QR
Scan PromptPay QR to pay
Must Have
Booking History
View past and upcoming bookings
Must Have
Cancel/Reschedule
Modify bookings
Should Have
Loyalty Points
Earn points per booking
Should Have
LINE Notifications
Receive booking reminders
Should Have
Calendar Integration
Add bookings to phone calendar
Nice to Have
Admin Features (Owner/Staff)
Feature
Description
Priority
Dashboard
Overview of bookings and revenue
Must Have
Court Management
Add/Edit courts and pricing
Must Have
Booking Management
Approve/Cancel bookings
Must Have
User Management
View user activity
Must Have
Payment Verification
Confirm manual payments
Must Have
Reports
Revenue and usage reports
Should Have
Promotion Management
Create discounts/offers
Should Have
┌─────────────────────────────────────────────────────────────────────────────┐
│ SPORTRLUB CNX - SCREEN FLOW │
└─────────────────────────────────────────────────────────────────────────────┘
┌──────────────┐
│ START │
│ (Landing) │
└──────┬───────┘
│
▼
┌────────────────────┐
│ Home / Branches │
│ /liff/book │
└──────┬─────────────┘
│
┌──────────────────────┼──────────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Select Date │ │ My Bookings │ │ Top Up │
│ /liff/book │ │ /liff/book? │ │ /liff/topup │
│ (Step 1) │ │ tab=bookings │ │ │
└────────┬────────┘ └─────────────────┘ └────────┬────────┘
│ │
│ ┌─────────────────────────────────────┘
│ │
▼ ▼
┌─────────────────────┐
│ Select Time Slot │
│ (Step 2) │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ Confirm Booking │
│ (Step 3) │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ Payment Screen │
│ (Credits/QR) │
└──────────┬──────────┘
│
▼
┌─────────────────────┐ ┌─────────────────────┐
│ Booking Success │ │ Payment History │
│ /liff/book/ │ │ /wallet │
│ success │ │ │
└─────────────────────┘ └─────────────────────┘
│
▼
┌─────────────────────┐
│ Booking Details │
│ (View Receipt) │
└─────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ ADMIN DASHBOARD FLOW │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────┐
│ Admin Login │
│ /admin/login │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ Admin Dashboard │
│ /admin │
└──────────┬──────────┘
│
┌───────────┼───────────┬───────────┬───────────┐
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│Bookings│ │ Courts │ │ Users │ │ Wallet │ │ Reports│
└────────┘ └────────┘ └────────┘ └────────┘ └────────┘
Screen Transitions (Detailed) ┌─────────────────────────────────────────────────────────────────────────────┐
│ DETAILED SCREEN TRANSITIONS │
└─────────────────────────────────────────────────────────────────────────────┘
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ HOME │────▶│ BRANCHES │────▶│ COURTS │────▶│ TIME │────▶│ CONFIRM │
│ │ │ SELECT │ │ SELECT │ │ SELECT │ │ │
└──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘
│ │ │ │ │
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ MY BOOK │ │ DETAILS │ │ PRICE │ │ SLOTS │ │ USER │
│ (Tab) │ │ VIEW │ │ VIEW │ │ GRID │ │ INFO │
└──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘
│ │
│ │
▼ ▼
┌──────────┐ ┌──────────┐
│ BOOKING │ │ PAYMENT │
│ DETAIL │◀──────────────────────────────────────────────────────│ SCREEN │
└──────────┘ └──────────┘
│ │
│ ▼
│ ┌──────────┐
│ │ SUCCESS │
│ │ PAGE │
│ └──────────┘
│ │
│ ▼
│ ┌──────────┐
└─────────────────────────────────────────────────────────────│ ICS │
│ CALENDAR │
└──────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ SYSTEM ARCHITECTURE DIAGRAM │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────┐
│ LINE Platform │
│ │
│ ┌───────────┐ │
│ │ LINE OA │ │ ← Official Account
│ └───────────┘ │
│ ┌───────────┐ │
│ │ LINE Pay │ │ ← Payment Integration
│ └───────────┘ │
│ ┌───────────┐ │
│ │ LINE LIFF │ │ ← App Framework
│ └───────────┘ │
└────────┬────────┘
│
┌──────────────────┼──────────────────┐
│ │ │
▼ ▼ ▼
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ Frontend │ │ Backend │ │ Database │
│ │ │ │ │ │
│ Next.js 16 │ │ Next.js API │ │ PostgreSQL │
│ React 19 │ │ Routes │ │ (Prisma ORM) │
│ Tailwind CSS │ │ │ │ │
│ Lucide Icons │ │ │ │ │
└────────────────┘ └────────┬─────────┘ └────────────────┘
│
┌──────────────────┼──────────────────┐
│ │ │
▼ ▼ ▼
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ External │ │ File │ │ Email/ │
│ Services │ │ Storage │ │ Notifications│
│ │ │ │ │ │
│ • PromptPay │ │ • Vercel │ │ • LINE Bot │
│ • QR Server │ │ Storage │ │ (ElysiaJS) │
│ • Calendar │ │ • CDN │ │ │
└────────────────┘ └────────────────┘ └────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ DATA FLOW DIAGRAM │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ USER │ │ LINE │ │ BACKEND │
│ │ │ LIFF SDK │ │ SERVER │
└──────┬──────┘ └──────┬──────┘ └──────┬──────┘
│ │ │
│ 1. Open App │ │
│────────────────────▶│ │
│ │ 2. Get User Info │
│ │◀─────────────────────│
│ │ │
│ 3. Login │ │
│◀────────────────────│ │
│ │ │
│ 4. Select Court │ │
│────────────────────▶│────────────────────▶│
│ │ │
│ │ │ 5. Check
│ │ │ Availability
│ │ │◀─────────────▶
│ │ │ Database
│ │ │
│ 6. Confirm Booking │ │
│────────────────────▶│────────────────────▶│
│ │ │
│ │ │ 7. Create
│ │ │ Booking Record
│ │ │◀─────────────▶
│ │ │
│ 8. Payment │ │
│ (Credits/QR) │ │
│────────────────────▶│────────────────────▶│
│ │ │
│ │ │ 9. Update
│ │ │ Wallet Balance
│ │ │◀─────────────▶
│ │ │
│ 10. Success │ │
│◀────────────────────│ │
User Journey: First-Time User ┌─────────────────────────────────────────────────────────────────────────────┐
│ FIRST-TIME USER JOURNEY MAP │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ STAGE 1: DISCOVERY │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ LINE OA │ │ LINE MINI │ │ FRIEND │ │ SEARCH │ │
│ │ PROMOTION │───▶│ APP LINK │───▶│ REFERRAL │───▶│ (Google) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ TOUCHPOINT: LINE OA Message / Chat Menu / LIFF Button │
│ EMOTION: Curious / Interested │
│ GOAL: Learn about the service │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ STAGE 2: ONBOARDING │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ LINE LIFF LOGIN FLOW │ │
│ ├─────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ [Open App] ──▶ [LINE Login Auto] ──▶ [Profile Setup] ──▶ [OK] │ │
│ │ │ │
│ │ Step 1: User opens LINE MINI App │ │
│ │ Step 2: LINE SDK auto-authenticates user │ │
│ │ Step 3: App displays welcome message with user name │ │
│ │ Step 4: User is ready to book │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ TOUCHPOINT: LINE LIFF Login Screen │
│ EMOTION: Excited / Optimistic │
│ GOAL: Quick and easy access │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ STAGE 3: FIRST BOOKING │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ SELECT │───▶│ SELECT │───▶│ SELECT │───▶│ CONFIRM │ │
│ │ BRANCH │ │ DATE │ │ TIME │ │ BOOKING │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │ │ │ │
│ │ │ │ │ │
│ ▼ ▼ ▼ ▼ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Show all │ │ Calendar │ │ Available │ │ Review │ │
│ │ locations │ │ picker │ │ time slots │ │ details │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ TOUCHPOINT: Booking Flow Screens │
│ EMOTION: Confident / Satisfied │
│ GOAL: Complete first booking successfully │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ STAGE 4: PAYMENT │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ PAYMENT OPTIONS │ │
│ ├─────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ DISTRICT │ │ PROMPTPAY │ │ │
│ │ │ CREDITS │ │ QR │ │ │
│ │ │ │ │ │ │ │
│ │ │ • Pre-paid │ │ • Scan to │ │ │
│ │ │ • Instant │ │ pay │ │ │
│ │ │ • Rewards │ │ • 30-min │ │ │
│ │ │ included │ │ expiry │ │ │
│ │ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ TOUCHPOINT: Payment Screen │
│ EMOTION: Trust / Security │
│ GOAL: Complete payment securely │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ STAGE 5: CONFIRMATION & LOYALTY │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ BOOKING │───▶│ ADD TO │───▶│ LOYALTY │───▶│ RATE │ │
│ │ CONFIRMED │ │ CALENDAR │ │ POINTS │ │ EXPERIENCE │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │ │ │ │
│ ▼ ▼ ▼ ▼ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ • Booking │ │ • .ics │ │ • Earn 1 │ │ • Feedback │ │
│ │ ID │ │ file │ │ point/ │ │ form │ │
│ │ • Receipt │ │ • Auto │ │ hour │ │ • Review │ │
│ │ • QR Code │ │ add │ │ • Redeem │ │ request │ │
│ │ • LINE │ │ to │ │ for │ │ • Share │ │
│ │ Notify │ │ phone │ │ discount │ │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ TOUCHPOINT: Success Screen + LINE Notification │
│ EMOTION: Delighted / Rewarded │
│ GOAL: Feel valued and encourage return visit │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Stakeholder Relationships ┌─────────────────────────────────────────────────────────────────────────────┐
│ STAKEHOLDER RELATIONSHIP DIAGRAM │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────┐
│ SPORTRLUB CNX │
│ SERVICE OWNER │
│ │
│ • Provides │
│ facilities │
│ • Sets pricing │
│ • Manages │
│ operations │
└────────┬────────┘
│
┌──────────────────┼──────────────────┐
│ │ │
▼ ▼ ▼
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ CUSTOMERS │ │ EMPLOYEES │ │ PARTNERS │
│ │ │ │ │ │
│ • Book courts │ │ • Manage │ │ • LINE │
│ • Pay via app │ │ bookings │ │ (Platform) │
│ • Earn points │ │ • Handle │ │ • Payment │
│ • Get notify │ │ payments │ │ Gateways │
└────────────────┘ │ • Support │ │ • Maintenance │
│ users │ │ • Supplies │
└────────────────┘ └────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ SERVICE RELATIONSHIP MAP │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ SERVICE FLOW MAP │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Customer │──────▶│ App │──────▶│ Backend │ │
│ │ │ │ (LINE │ │ Server │ │
│ │ • Makes │ │ LIFF) │ │ │ │
│ │ booking│ │ │ │ • Process│ │
│ │ • Pays │ │ • UI/UX │ │ booking│ │
│ │ • Reviews│ │ • Forms │ │ • Store │ │
│ └──────────┘ └────┬─────┘ │ data │ │
│ │ └────┬─────┘ │
│ │ │ │
│ │ │ │
│ ┌──────────┐ │ ▼ │
│ │ Customer │◀───────────┤ ┌──────────┐ │
│ │ │ │ │ Database │ │
│ │ • Receive│ │ │ (Postgre │ │
│ │ booking│ │ │ SQL) │ │
│ │ info │ │ │ │ │
│ │ • Get QR │ │ │ • Users │ │
│ │ • Points │ │ │ • Courts │ │
│ └──────────┘ │ │ • Bookings │
│ │ │ • Wallet │ │
│ │ └──────────┘ │
│ │ │ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ │
│ │ LINE OA │ │ External │ │
│ │ (BOT) │ │ Services │ │
│ │ │ │ │ │
│ │ • Notify │ │ • Prompt │ │
│ │ • Reply │ │ Pay │ │
│ │ • Menu │ │ • QR Gen │ │
│ └──────────┘ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ RESPONSIBILITY MATRIX │
└─────────────────────────────────────────────────────────────────────────────┘
┌────────────────┬────────────────┬────────────────┬────────────────┐
│ Function │ Service Owner│ Customers │ Employees │
│ │ (Sportclub) │ │ │
├────────────────┼────────────────┼────────────────┼────────────────┤
│ Court │ ★★★ │ - │ - │
│ Maintenance │ │ │ │
├────────────────┼────────────────┼────────────────┼────────────────┤
│ App │ ★★ │ - │ ★★ │
│ Development │ │ │ │
├────────────────┼────────────────┼────────────────┼────────────────┤
│ User │ ★★ │ - │ ★★★ │
│ Support │ │ │ │
├────────────────┼────────────────┼────────────────┼────────────────┤
│ Booking │ ★★ │ - │ ★★★ │
│ Management │ │ │ │
├────────────────┼────────────────┼────────────────┼────────────────┤
│ Payment │ ★★★ │ ★★ │ ★ │
│ Processing │ │ │ │
├────────────────┼────────────────┼────────────────┼────────────────┤
│ Marketing & │ ★★★ │ - │ ★ │
│ Promotions │ │ │ │
├────────────────┼────────────────┼────────────────┼────────────────┤
│ Customer │ ★★ │ ★★ │ ★★★ │
│ Feedback │ │ │ │
└────────────────┴────────────────┴────────────────┴────────────────┘
Legend: ★★★ = Primary Responsibility | ★★ = Secondary | ★ = Support
LINE Official Account Setup ┌─────────────────────────────────────────────────────────────────────────────┐
│ LINE OFFICIAL ACCOUNT INTEGRATION │
└─────────────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────┐
│ LINE DEVELOPER CONSOLE │
│ │
│ ┌──────────────────────────────────┐ │
│ │ Channel Settings │ │
│ │ ───────────────────────────── │ │
│ │ Channel ID: 2007xxxxxxxx │ │
│ │ Channel Secret: xxxxxxxxxx │ │
│ │ LIFF ID: 2007xxxxxxxx-xxxxxxxx │ │
│ └──────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────┐ │
│ │ LIFF Apps │ │
│ │ ───────────────────────────── │ │
│ │ • Booking App (External) │ │
│ │ - Endpoint: /liff/book │ │
│ │ - Size: Full │ │
│ │ - Options: scanQR, chain │ │
│ │ │ │
│ │ • Top-up App (External) │ │
│ │ - Endpoint: /liff/topup │ │
│ │ - Size: Full │ │
│ │ │ │
│ │ • Wallet App (External) │ │
│ │ - Endpoint: /liff/wallet │ │
│ │ - Size: Full │ │
│ └──────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────┐ │
│ │ Messaging API │ │
│ │ ───────────────────────────── │ │
│ │ • Push Message: Enabled │ │
│ │ • Reply Message: Enabled │ │
│ │ • Webhook: Enabled │ │
│ │ • Bot PUsh: Enabled │ │
│ └──────────────────────────────────┘ │
└────────────────────────────────────────┘
Feature
Description
Use Case
Rich Menu
Quick access to actions
Navigation to booking, wallet
Push Notifications
Send messages to users
Booking reminders, promotions
Webhook
Receive user messages
Chat commands, quick actions
LINE Login
Authentication
Seamless app access
LIFF
Mini app framework
Full booking experience
┌─────────────────────────────────────────────────────────────────────────────┐
│ LINE MESSAGING FLOW │
└─────────────────────────────────────────────────────────────────────────────┘
USER LINE PLATFORM SERVER
│ │ │
│ ┌─────────────┐ │ │
│ │ User sends │ │ │
│ │ message to │────────────▶│ │
│ │ OA │ Webhook │ │
│ └─────────────┘ │ │
│ │ │
│ │ POST /webhook/line │
│ │─────────────────────────────▶│
│ │ │
│ │ │ Process
│ │ │ Message
│ │ │◀─────────
│ │ │
│ │ Reply Message │
│ ┌─────────────┐◀────────────│─────────────────────────────│
│ │ Bot reply │ │ │
│ │ (Rich menu/ │ │ │
│ │ text/flex) │ │ │
│ └─────────────┘ │ │
│ │ │
│ │ │
│ ┌─────────────┐ │ │
│ │ User clicks │ │ │
│ │ Rich Menu │────────────▶│ │
│ └─────────────┘ │ │
│ │ │
│ │ LIFF App URL Redirect │
│ ┌─────────────┐◀────────────│─────────────────────────────│
│ │ Open LIFF │ │ │
│ │ App │ │ │
│ └─────────────┘ │ │
│ │ │
┌─────────────────────────────────────────────────────────────────────────────┐
│ RICH MENU CONFIGURATION │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────┐
│ 📅 จองสนาม │ 💰 เติมเงิน │
│ (Book) │ (Top Up) │
├─────────────────────────────┤
│ 📋 การจองของฉัน │ 🎁 คะแนนสะสม │
│ (My Bookings) │ (Points) │
├─────────────────────────────┤
│ 🏠 หน้าหลัก │
│ (Home) │
└─────────────────────────────┘
Tappable Areas:
• "จองสนาม" → Opens /liff/book
• "เติมเงิน" → Opens /liff/topup
• "การจองของฉัน" → Opens /liff/book?tab=mybookings
• "คะแนนสะสม" → Opens /liff/points
• "หน้าหลัก" → Opens /liff/book
PromptPay QR Code Generation ┌─────────────────────────────────────────────────────────────────────────────┐
│ PROMPTPAY QR SYSTEM │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ QR CODE PAYMENT WORKFLOW │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ CUSTOMER │ │ APP │ │ PROMPTPAY │
│ │ │ │ │ SYSTEM │
└──────┬──────┘ └──────┬──────┘ └──────┬──────┘
│ │ │
│ 1. Select Amount │ │
│──────────────────────▶│ │
│ │ │
│ │ 2. Generate QR │
│ │ Payload │
│ │─────────────────────▶│
│ │ │
│ │ 3. QR Image URL │
│ 4. Show QR Code │◀─────────────────────│
│◀──────────────────────│ │
│ │ │
│ 5. Scan with │ │
│ Banking App │ │
│────────────────────────┼─────────────────────▶│
│ │ │
│ │ 6. Payment Complete │
│ 7. Payment Confirmed │◀─────────────────────│
│◀──────────────────────│ │
│ │ │
│ 8. Upload Slip │ │
│──────────────────────▶│ │
│ │ │
│ │ 9. Verify Payment │
│ │─────────────────────▶│
│ │ │
│ 10. Success │ │
│◀──────────────────────│ │
┌─────────────────────────────────────────────────────────────────────────────┐
│ QR CODE FORMAT (EMVCO PROMPTPAY) │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ QR Code Payload Format (EMVCo Standard): │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 00020101021229330016A00000067701011211660826539264 │ │
│ │ 52040000530376454050.005802TH5913Sportclub CNX │ │
│ │ 6010Chiang Mai6304ABCD │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Payload Breakdown: │
│ ───────────────── │
│ • 00: Payload Format Indicator (EMV QRC) │
│ • 01: Point of Initiation Method (Static) │
│ • 29: Merchant Account Information - PromptPay │
│ • 52: Merchant Category Code (7999 - Sports) │
│ • 53: Transaction Currency (THB - 764) │
│ • 54: Transaction Amount │
│ • 58: Country Code (TH) │
│ • 59: Merchant Name │
│ • 60: Merchant City │
│ • 63: CRC (Cyclic Redundancy Check) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ QR CODE FOR POINT GRANT (SCAN QR) │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ 🏆 SCAN TO EARN POINTS 🏆 │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ [QR CODE] │ │ │
│ │ │ Displayed Here │ │ │
│ │ │ │ │ │
│ │ │ Scan with LINE Camera │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │ │ │
│ │ 📱 LINE Scan QR │ │
│ │ Scan to earn 10 points! │ │
│ │ Limited time offer │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ Point Grant QR Flow: │
│ ───────────────── │
│ 1. Customer scans QR code at front desk/court │
│ 2. LINE Camera opens LIFF app │
│ 3. System validates QR (court ID, timestamp) │
│ 4. Points automatically credited to user wallet │
│ 5. User receives LINE notification with confirmation │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ QR CODE TYPES AND PURPOSES │
└─────────────────────────────────────────────────────────────────────────────┘
┌────────────────┬────────────────────────┬───────────────────────────────┐
│ QR Type │ Purpose │ Usage │
├────────────────┼────────────────────────┼───────────────────────────────┤
│ Payment QR │ Receive payments │ Customer scans to pay │
│ (PromptPay) │ for top-up │ for wallet credits │
├────────────────┼────────────────────────┼───────────────────────────────┤
│ Check-in QR │ Court check-in │ Scan at court to verify │
│ │ │ booking, start timer │
├────────────────┼────────────────────────┼───────────────────────────────┤
│ Point Grant QR │ Award loyalty points │ Staff scans to give points │
│ │ │ to customers at counter │
├────────────────┼────────────────────────┼───────────────────────────────┤
│ Promotion QR │ Special offers │ Campaign-specific QR codes │
│ │ │ for limited-time offers │
├────────────────┼────────────────────────┼───────────────────────────────┤
│ Feedback QR │ Collect feedback │ After game, scan to rate │
│ │ │ service, earn bonus points │
└────────────────┴────────────────────────┴───────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ QR CODE GENERATION FLOW │
└─────────────────────────────────────────────────────────────────────────────┘
Start
│
▼
┌─────────────┐
│ Generate │◀──── Input: amount, paymentRef, phone
│ QR Payload │
└──────┬──────┘
│
▼
┌─────────────┐
│ Create EMVCo│
│ Format │
└──────┬──────┘
│
▼
┌─────────────┐
│ Generate │─────▶ QR Image (PNG/SVG)
│ Image URL │ via QR Server API
└──────┬──────┘
│
▼
┌─────────────┐
│ Display in │
│ App / Print │
└─────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ REVENUE MODEL │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ REVENUE STREAMS │
└─────────────────────────────────────────────────────────────────────────────┘
┌────────────────┬────────────────┬────────────────┬────────────────────────┐
│ Revenue │ Source │ Amount │ Frequency │
│ Stream │ │ │ │
├────────────────┼────────────────┼────────────────┼────────────────────────┤
│ Court │ Customer │ Price per │ Per booking │
│ Booking │ bookings │ hour (e.g., │ │
│ Revenue │ │ ฿300-500) │ │
├────────────────┼────────────────┼────────────────┼────────────────────────┤
│ Wallet │ Customer │ 2-5% of │ Per top-up │
│ Load Fees │ top-ups │ top-up amount │ │
├────────────────┼────────────────┼────────────────┼────────────────────────┤
│ Premium │ Members │ ฿99-199/month │ Monthly │
│ Membership │ │ │ │
├────────────────┼────────────────┼────────────────┼────────────────────────┤
│ Advertising │ Local sports │ Variable │ Monthly/Event │
│ │ brands │ │ │
├────────────────┼────────────────┼────────────────┼────────────────────────┤
│ Event │ Tournament │ Entry fees │ Per event │
│ Hosting │ organizers │ (e.g., ฿300) │ │
└────────────────┴────────────────┴────────────────┴────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PRICING STRUCTURE │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ COURT PRICING (Example) │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Court Type │ Weekday (9:00-17:00) │ Weekday (17:00-22:00) │ │
│ │ / Weekend │ / Holiday │ │
│ ─────────────────────────────────────────────────────────────────────── │
│ │
│ Tennis Court │ ฿300/hour │ ฿450/hour │ │
│ (Standard) │ │ │ │
│ │
│ Tennis Court │ ฿400/hour │ ฿550/hour │ │
│ (Premium) │ │ │ │
│ │
│ Badminton Court │ ฿200/hour │ ฿300/hour │ │
│ (Standard) │ │ │ │
│ │
│ Badminton Court │ ฿250/hour │ ฿400/hour │ │
│ (Premium) │ │ │ │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ ADDITIONAL FEES │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Equipment Rental │ Shuttlecock: ฿50/ea │ Racket: ฿100/day │ │
│ Coaching │ Group: ฿400/hr │ Private: ฿800/hr │ │
│ Late Fee │ ฿100 per 15 min late│ │ │
│ Cancellation │ <24hr notice: 50% │ <2hr notice: 100% │ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ LOYALTY PROGRAM STRUCTURE │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ POINT EARNING │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Activity │ Points Earned │ Notes │
│ ─────────────────────────────────────────────────────────────────────── │
│ │
│ Court Booking │ 1 point/hour │ Base earning │
│ Weekend Booking │ 1.5 points/hour │ Bonus │
│ Holiday Booking │ 2 points/hour │ Bonus │
│ First Booking of Day │ +10 points │ Daily bonus │
│ Check-in via QR │ +5 points │ At venue │
│ Leave Review (5★) │ +20 points │ Per review │
│ Refer New User │ +100 points │ On their first │
│ │ │ booking │
│ Complete Profile │ +50 points │ One-time │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ POINT REDEMPTION │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Redemption │ Points Required │ Value │
│ ─────────────────────────────────────────────────────────────────────── │
│ │
│ ฿50 Discount │ 500 points │ ฿50 │
│ ฿100 Discount │ 900 points │ ฿100 │
│ Free 1-Hour Court │ 2,500 points │ ฿300-500 │
│ Free Equipment Rental │ 500 points │ ฿50-100 │
│ Priority Booking (Skip Queue) │ 1,000 points │ Convenience │
│ VIP Membership (1 Month) │ 5,000 points │ ฿99-199 value │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ MEMBERSHIP TIERS │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Tier │ Points/Month │ Benefits │
│ ─────────────────────────────────────────────────────────────────────── │
│ │
│ Bronze │ 0-499 │ • Standard pricing │
│ (Default) │ │ • Basic point earning │
│ │
│ Silver │ 500-1,499 │ • 10% discount on bookings │
│ │ │ • 1.2x point earning │
│ │ │ • Priority support │
│ │
│ Gold │ 1,500-2,999 │ • 15% discount on bookings │
│ │ │ • 1.5x point earning │
│ │ │ • Free equipment rental (2x/month) │
│ │ │ • Advance booking (24hr) │
│ │
│ Platinum │ 3,000+ │ • 20% discount on bookings │
│ │ │ • 2x point earning │
│ │ │ • Free equipment rental (unlimited) │
│ │ │ • Advance booking (48hr) │
│ │ │ • Dedicated phone support │
│ │ │ • Free guest pass (1x/month) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ IMPLEMENTATION TIMELINE │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 1: FOUNDATION │
│ (Weeks 1-4) │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Week 1 │ [██████] Setup development environment │
│ │ [██████] Configure LINE Developer Console │
│ │ [██████] Initialize Next.js project with TypeScript │
│ │
│ Week 2 │ [██████] Set up database schema (Prisma/PostgreSQL) │
│ │ [██████] Create basic authentication (LINE Login) │
│ │ [██████] Build core UI components │
│ │
│ Week 3 │ [██████] Implement court browsing and selection │
│ │ [██████] Build booking flow (date/time selection) │
│ │ [██████] Create booking confirmation │
│ │
│ Week 4 │ [██████] Integrate PromptPay QR payment │
│ │ [██████] Build wallet top-up functionality │
│ │ [██████] Testing and bug fixes │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 2: ENHANCEMENT │
│ (Weeks 5-8) │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Week 5 │ [██████] Implement LINE Bot notifications │
│ │ [██████] Add booking reminders (1hr before) │
│ │ [██████] Build user profile and history │
│ │
│ Week 6 │ [██████] Create loyalty points system │
│ │ [██████] Implement point earning and redemption │
│ │ [██████] Add check-in QR code feature │
│ │
│ Week 7 │ [██████] Build admin dashboard │
│ │ [██████] Create booking management for staff │
│ │ [██████] Implement payment verification │
│ │
│ Week 8 │ [██████] Performance optimization │
│ │ [██████] Security audit and fixes │
│ │ [██████] User acceptance testing │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 3: LAUNCH │
│ (Weeks 9-12) │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Week 9 │ [██████] Soft launch with beta users │
│ │ [██████] Collect feedback and iterate │
│ │ [██████] Bug fixes and improvements │
│ │
│ Week 10 │ [██████] Marketing campaign launch │
│ │ [██████] LINE OA promotional messages │
│ │ [██████] Social media promotion │
│ │
│ Week 11 │ [██████] Full public launch │
│ │ [██████] Monitor system performance │
│ │ [██████] Customer support setup │
│ │
│ Week 12 │ [██████] Analyze metrics and KPIs │
│ │ [██████] Plan Phase 2 features │
│ │ [██████] Documentation and training │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ MILESTONE TRACKER │
└─────────────────────────────────────────────────────────────────────────────┘
Milestone │ Target Date │ Status │ Completion
───────────────────────┼───────────────┼────────────┼─────────────
Development Setup │ Week 1 │ □ Pending │ 0%
LINE Integration │ Week 2 │ □ Pending │ 0%
Core Booking Flow │ Week 4 │ □ Pending │ 0%
Payment Integration │ Week 5 │ □ Pending │ 0%
Beta Launch │ Week 9 │ □ Pending │ 0%
Public Launch │ Week 11 │ □ Pending │ 0%
Post-Launch Review │ Week 12 │ □ Pending │ 0%
┌─────────────────────────────────────────────────────────────────────────────┐
│ SUCCESS METRICS (KPIs) │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ KEY PERFORMANCE INDICATORS │
└─────────────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────┬─────────────────┬───────────────────────────┐
│ Metric │ Target (3 mo) │ Target (6 mo) │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ USERS │ │ │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ Active Users (MAU) │ 500 │ 2,000 │
│ New User Registrations │ 200/month │ 500/month │
│ User Retention (Day 30) │ 40% │ 50% │
│ LINE OA Followers │ 1,000 │ 3,000 │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ ENGAGEMENT │ │ │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ Daily Active Users (DAU) │ 100 │ 400 │
│ DAU/MAU Ratio │ 20% │ 25% │
│ Avg. Session Duration │ 3 min │ 5 min │
│ Bookings per User │ 2/month │ 4/month │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ BOOKINGS │ │ │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ Total Bookings │ 1,000 │ 5,000 │
│ Booking Conversion Rate │ 35% │ 45% │
│ No-Show Rate │ <10% │ <5% │
│ Repeat Booking Rate │ 50% │ 65% │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ REVENUE │ │ │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ Gross Transaction Value │ ฿300,000 │ ฿1,500,000 │
│ Wallet Top-up Volume │ ฿200,000 │ ฿1,000,000 │
│ Avg. Revenue per Booking │ ฿350 │ ฿400 │
│ Customer Lifetime Value │ ฿1,500 │ ฿2,500 │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ LOYALTY │ │ │
├──────────────────────────────┼─────────────────┼───────────────────────────┤
│ Points Redeemed │ 50,000 pts │ 200,000 pts │
│ Members in Loyalty Program │ 300 │ 1,200 │
│ Tier Upgrade Rate │ 15% │ 25% │
└──────────────────────────────┴─────────────────┴───────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ SUCCESS METRICS DASHBOARD │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 📊 SUCCESS METRICS DASHBOARD │ │
│ ├─────────────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────┐ │ │
│ │ │ ACTIVE │ │ BOOKINGS │ │ REVENUE │ │ NPS │ │ │
│ │ │ USERS │ │ THIS MO │ │ THIS MO │ │ SCORE │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ 0 │ │ 0 │ │ ฿0 │ │ 0 │ │ │
│ │ │ / 500 │ │ / 1000 │ │ / ฿300K │ │ / 50 │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ ░░░░░░░ │ │ ░░░░░░░ │ │ ░░░░░░░ │ │ ░░░░░░ │ │ │
│ │ │ 0% │ │ 0% │ │ 0% │ │ 0% │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────┐ │ │
│ │ │ Bookings Trend (Last 7 Days) │ │ │
│ │ │ │ │ │
│ │ │ 50 ┤ │ │ │
│ │ │ 40 ┤ ██ │ │ │
│ │ │ 30 ┤ ██ ██ │ │ │
│ │ │ 20 ┤ ██ ██ ██ ██ │ │ │
│ │ │ 10 ┤ ██ ██ ██ ██ ██ ██ ██ │ │ │
│ │ │ 0 ┼────██──██──██──██──██──██──██── Mon │ │ │
│ │ └───────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────┐ │ │
│ │ │ Top Courts │ │ │
│ │ │ │ │ │
│ │ │ Tennis Court 1 ████████████████████ 120 bookings │ │ │
│ │ │ Tennis Court 2 ██████████████████ 100 bookings │ │ │
│ │ │ Badminton A ████████████████ 80 bookings │ │ │
│ │ └───────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Category
Technology
Version
Frontend
Next.js
16.1.1
Frontend
React
19.2.3
Styling
Tailwind CSS
Latest
Database
PostgreSQL
Latest
ORM
Prisma
Latest
LINE SDK
@line/liff
2.21.0
Payment
PromptPay
EMVCo
Icons
Lucide React
Latest
Calendar
date-fns
Latest
Endpoint
Method
Description
/api/auth/userPOST
LINE user authentication
/api/branchesGET
List all branches
/api/courts/:idGET
Court details & availability
/api/bookingsPOST
Create new booking
/api/bookingsGET
List user's bookings
/api/bookings/:idGET
Booking details
/api/bookings/:idDELETE
Cancel booking
/api/wallet/topupPOST
Generate payment QR
/api/wallet/slipPOST
Upload payment slip
/api/wallet/balanceGET
Get user balance
/api/wallet/transactionsGET
Transaction history
/api/pointsGET
Get points balance
/api/points/historyGET
Points transactions
/webhook/linePOST
LINE Bot webhook
C. Database Schema (Key Tables) Users
├── id (PK)
├── lineUserId (unique)
├── name
├── email
├── phone
├── credits (Decimal)
├── totalPoints (Int)
├── currentTier (Enum: Bronze/Silver/Gold/Platinum)
└── createdAt
Branches
├── id (PK)
├── name
├── address
├── phone
└── isActive
Courts
├── id (PK)
├── branchId (FK)
├── name
├── type (Enum: tennis/badminton)
├── pricePerHour (Decimal)
└── isActive
Bookings
├── id (PK)
├── userId (FK)
├── courtId (FK)
├── date
├── startTime
├── endTime
├── totalPrice (Decimal)
├── status (Enum: pending/confirmed/cancelled/completed)
├── paymentStatus (Enum: pending/paid/failed)
└── createdAt
Transactions
├── id (PK)
├── userId (FK)
├── type (Enum: topup/booking/refund/bonus)
├── amount (Decimal)
├── status (Enum: pending/completed/failed)
└── createdAt
PaymentSlips
├── id (PK)
├── userId (FK)
├── amount (Decimal)
├── paymentRef (unique)
├── status (Enum: pending/verified/rejected)
└── createdAt
Item
Details
Document Title
LINE MINI App Planning Overview
Version
1.0
Author
Sportclub CNX Development Team
Created
January 2026
Last Updated
January 2026
Status
Draft / Planning
© 2026 Sportclub CNX. All rights reserved.
This document is confidential and intended for internal use only.
