ROXENGINE

ระบบเดียวจบ สำหรับนักกีฬา Hyrox & Hybrid Performance

ROXENGINE คือแพลตฟอร์ม Hyrox-native รวม training, nutrition, body composition, supplements, recovery, race execution, และ community ไว้ในที่เดียว — ลดการสลับแอป 5-7 ตัว ให้นักกีฬาสาย hybrid ที่จริงจัง

เด่นที่ไหน

• Race-Time Predictor — ทำนายเวลา Hyrox + 16 split โดยใช้ข้อมูลเทรน + body comp + ผลแข่งเก่า (ความแม่น ±5% สำหรับ 70% ของผู้ใช้)
• Adaptive Plan Engine — แผนเทรนปรับตามนอน HRV ความเหนื่อย และวันที่พลาด
• Brick-Day Fueling Engine — macro/timing ที่เข้าใจความต่างของวัน brick vs วัน strength
• Body Comp ↔ Performance Loop — โมเดล power-to-weight + run economy บอกผลกระทบ ±X กก. ต่อเวลาแข่ง

Tech Stack

• Next.js 16 App Router (Turbopack) + React 19
• Tailwind CSS v4 (CSS-first @theme tokens, no config file)
• TypeScript 5
• next/font — IBM Plex Sans Thai + Inter + JetBrains Mono
• Charts เป็น inline SVG (ไม่พึ่ง chart library)
• ระบบ hint/tour build เอง (Context + localStorage, no extra deps)

Quick Start

npm install
npm run dev
# เปิด http://localhost:3000

Deploy บน Vercel

npm i -g vercel
vercel --prod

หรือกด Import ที่ https://vercel.com/new แล้วเลือก repo นี้ — auto-detect Next.js ทำงานเอง

โครงสร้างโปรเจกต์

src/app/
├── layout.tsx              ← Root layout · Thai font · bg gradient
├── page.tsx                ← Homepage (TourProvider + 9 sections)
├── globals.css             ← Tailwind v4 · @theme tokens · glass utilities
├── _components/
│   ├── TourProvider.tsx    ← ระบบ hint/tour 9 step
│   ├── HintBadge.tsx       ← จุด "?" anchor + tooltip
│   ├── Nav.tsx             ← Sticky section nav
│   ├── GlassCard.tsx       ← Glass card 3 variants
│   ├── Icons.tsx           ← Inline SVG icon set (21 icons)
│   └── Charts.tsx          ← Sparkline, ring, bars, progress (SVG)
└── _sections/
    ├── Hero.tsx            ← Predictor preview + value prop
    ├── Today.tsx           ← Bento dashboard demo
    ├── Train.tsx           ← Week plan + session detail
    ├── Fuel.tsx            ← Macros + supplement stack
    ├── Body.tsx            ← Composition + what-if model
    ├── Race.tsx            ← Race Mode + race-week checklist
    ├── Community.tsx       ← Leaderboard + coach marketplace
    ├── Pricing.tsx         ← 3 tier (ฟรี / Pro ฿499 / Elite ฿999)
    └── CTA.tsx             ← Final conversion + footer

docs/spec/
├── README.md               ← Spec package index
├── ROXENGINE-PRD.md        ← Full Product Requirements Document
├── research-notes.md       ← Hyrox + athlete research
├── design-system.md        ← Visual design system
└── DEPLOY.md               ← Vercel deployment guide

Design System

ดูเต็มใน docs/spec/design-system.md

สี (Tailwind utilities พร้อมใช้)

• Surface: bg-rox-bg, bg-rox-surface-{1..3}, border-rox-border
• Text: text-rox-text-{hi|mid|lo}
• Brand: bg-rox-primary (Power Orange #FF5A1F), bg-rox-primary-glow
• Semantic: text-rox-perf (green), text-rox-caution (yellow), text-rox-strain (red), text-rox-recovery (blue)

Glassmorphism

• .rox-glass — glass card ปกติ
• .rox-glass-strong — glass หนา (modal/overlay)
• .rox-glow-primary — เงาเรือง Power Orange (CTA)
• .rox-bg-gradient — bg pattern (radial gradient 3 สี + base)

ระบบ Hint/Tour

• เปิดครั้งแรก: tour เด้งอัตโนมัติ (delay 1.2s รอ section register)
• ปุ่ม "คู่มือเริ่มต้น" floating มุมขวาล่าง เรียก tour ได้ทุกเมื่อ
• HintBadge "?" hover/focus → tooltip
• จบ tour แล้ว state บันทึกที่ localStorage (roxengine.tour.completed)

Roadmap (จาก PRD)

• MVP (Q3 2026) — iOS + Web Pro tier, predictor v1, training engine, nutrition, body comp, race mode
• V2 (2027) — Coach Marketplace, AI Coach Chat, female athlete layer, Watch app
• V3 (2027-2028) — Cross-sport (triathlon/marathon/OCR), gym SaaS, hardware exploration

ดูรายละเอียดเต็มที่ docs/spec/ROXENGINE-PRD.md

License

MIT