MileScape 是一款将跑步记录、虚拟旅行与游戏化激励结合的交互式 Web 应用。围绕“选择路线—设定目标—完成运动—推进旅程—解锁地标”的操作流程,将累计运动距离转化为可视化旅行进度,通过地标收集、成就反馈与个人仪表盘提升持续运动的参与感。主要功能包括主题路线探索、路线详情与地图预览、跑步目标设置、模拟跑步与结果展示、运动历史、成就展示和个人进度管理。界面采用移动优先的响应式设计,路线选择、运动历史与累计进度可在本地持久保存,支持用户跨页面查看和继续自己的旅程。
本人独立完成应用开发、页面交互与状态管理。使用 React、TypeScript 和 Vite 构建工程,Tailwind CSS 实现响应式布局,React Router 组织页面导航,Framer Motion 实现交互动效,Mapbox 支持路线地图预览。采用页面、业务组件、数据、状态与工具函数分层结构,通过 AppContext 统一管理路线、累计进度、运动历史与结果,结合 localStorage 完成本地持久化。将里程换算、地标解锁和路线完成判断抽取为独立业务模块,使多个页面共享一致的进度逻辑。项目形成了从路线探索到运动结果和成就反馈的完整交互流程,并通过可复用组件统一按钮、路线卡片、进度展示和页面布局。