เจาะลึก FrontRunnr เว็บแอปช่วยนักวิ่งกรุงเทพฯ สร้างโดยใช้ Claude Code

แวะมาแชร์โปรเจกต์ **FrontRunnr** เว็บแอป (PWA) สำหรับนักวิ่งในกรุงเทพฯ ที่ผมใช้ Claude …

โจทย์ของโปรเจกต์นี้คือ เวลาคนวิ่ง City Run ในกรุงเทพฯ อยากเปลี่ยนบรรยากาศไปวิ่งรูทใหม่ๆ จะหาข้อมูลลำบากมากว่าฟุตบาทวิ่งได้ไหม ห้องน้ำ/จุดเติมน้ำอยู่ไหน และถ้าฝนตก ถนนเส้นนั้นมีน้ำขังหรือเปล่า ผมเลยรวบรวมข้อมูลที่เพื่อนๆ นักวิ่งช่วยกันปักหมุดไว้กว่า 3,500+ จุด มาบวกกับ Open Data ของ กทม. ทำออกมาเป็นเว็บนี้ครับ

**ฟีเจอร์หลักที่ทำเสร็จในเวอร์ชัน Beta นี้ครับ**
* **รวมทุกจุดแวะสำคัญบนรูท :** แสดงตำแหน่งห้องน้ำ จุดเติมน้ำ ล็อกเกอร์ ที่จอดรถ BTS/MRT และคาเฟ่หลังวิ่ง บนแผนที่เส้นทางวิ่ง
* **บอกระยะ ได้รูทเลย :** กดเลือกระยะทาง 3, 5, 7 หรือ 10 กม. ระบบจะจับคู่รูทที่คัดสรรไว้ พร้อมแสดงคะแนนรีวิวสภาพทางเท้า ความปลอดภัย และร่มเงา
* **ดึงรูทจาก Strava / GPX มาสแกนหาจุดแวะ :** เอาลิงก์กิจกรรมจาก Strava มาวาง หรืออัปโหลดไฟล์ GPX ระบบจะคำนวณหาจุดแวะในระยะ 150 เมตรสองข้างทางตลอดเส้นทางวิ่งให้อัตโนมัติ
* **วาดรูทเองบนแผนที่ :** แตะปักจุดเริ่มและจุดถัดไปเพื่อสร้างเส้นทางเอง ระบบจะคำนวณระยะทางและดึงจุดแวะรอบเส้นทางที่วาดขึ้นมาให้ทันที
* **เช็กน้ำท่วมกับฝนก่อนออกวิ่ง พร้อมระบบแจ้งเตือน :** ดึง Open Data จุดวัดน้ำท่วมและปริมาณฝนของสำนักการระบายน้ำ กทม. ร่วมกับพยากรณ์อากาศของ Open-Meteo มาเทียบกับรูท กดติดตามรูทเพื่อตั้งเวลาเช็กอัตโนมัติได้ทั้งรอบเช้า (05:00) และรอบเย็นก่อนเลิกงาน (17:30) ผ่าน Web Push โดยผูกกับ Anonymous key ไม่ต้องสมัครสมาชิกครับ

**เบื้องหลังการใช้ Claude Code ช่วยทำ**

จุดที่ต้องตบตีกับ Claude เยอะสุดคือการทำ Spatial Query (การตีกรอบระยะ 150 เมตรสองข้างทางจากเส้น Geometry map ของรูท ทั้งกับจุดแวะร้านค้าและจุดวัดน้ำท่วม) และการวาง Edge case ของนักวิ่ง เช่น ถ้าเซ็นเซอร์น้ำท่วมเป็น 0 ซม. แต่ฝนกำลังตก ระบบต้องไม่เคลมว่าถนนแห้ง หรือการทำแจ้งเตือนผ่าน PWA โดยไม่ต้องมีระบบ Login

ใครวิ่งในกรุงเทพฯ หรือสนใจลองกดเล่น เปิดผ่านเบราว์เซอร์บนมือถือได้เลยครับ:

[https://frontrunnr.run/qKhzG7J](https://frontrunnr.run/qKhzG7J)

ลองแล้วเป็นยังไงบ้าง หรือติดปัญหาตรงไหน คอมเมนต์บอกได้เลยนะครับ ขอบคุณมากครับ 🙏