Avatar

Live life to the fullest

3D 旅行日志与个人足迹系统

TripsTracer

一个将目的地、影像与共同旅程转化为互动式个人地球的空间化旅行日志。

Year
2025–2026
Role
产品设计与全栈开发
  • React
  • CesiumJS
  • Spring Boot
TripsTracer 互动式三维地球及分布在世界各地的旅行地点

Project overview

TripsTracer 是一款个人旅行日志应用,将分散的目的地、照片、视频和文字记录整理成一份持续生长的旅行档案。

它没有采用传统的列表式旅行记录,而是将每个目的地放在互动式 2D 地图与 3D 地球上,让用户能够在地点、行程、影像、花费和回忆之间自然探索。

01

Background

旅行记忆通常散落在手机相册、电子表格、地图收藏和社交平台中。TripsTracer 希望将这些碎片重新连接起来,为每段旅程保留其地理位置、发生时间和个人故事,形成一个私密且结构清晰的旅行空间。

02

The problem

项目的核心问题,是如何让不断增长的旅行档案保持易于浏览,同时又不让它退化成一个普通数据库。产品需要连接地点、行程、日期、花费、笔记、照片和视频,并让这些信息在地图视图与详情视图中都保持清晰且具有吸引力。

03

Major features

互动式旅行地球

将去过的目的地展示在可自由旋转和缩放的 2D 地图与真实感 3D 地球上,并通过筛选、旅行统计和地点预览,将每个坐标连接到背后的旅行故事。

带有情境的旅行记录

用户可以为目的地添加照片和视频,从照片的 EXIF 信息中自动读取拍摄地点与日期,管理封面媒体,并将选中的旅行影像制作成可下载的旅行卡片。

行程、花费与协作

多个目的地可以组成完整行程,并记录日期、笔记、标签和多币种花费;用户还可以通过邀请和角色权限,与朋友共同查看和维护一段旅程。

那年今日

系统会重新呈现往年同一天发生的旅行,并以回忆时间线的方式组织相关影像,让旅行档案不只是被保存,也值得被反复打开。

04

Implementation process

  1. 01

    建立旅行领域模型

    将目的地、行程、媒体、花费、用户和权限设计为彼此关联的数据对象,使同一段旅程能够从地理、时间和协作等不同角度进行探索。

  2. 02

    连接记录与探索流程

    设计从点击地图或导入照片,到创建目的地、补充旅行信息,再通过地球、行程详情和回忆时间线重新发现内容的完整体验。

  3. 03

    构建完整媒体处理链路

    实现照片与视频上传、云端存储、异步视频处理、缩略图生成和实时状态更新,同时保持前端界面的及时响应。

  4. 04

    完善数据归属与访问控制

    通过 JWT、第三方 OAuth、默认私密的数据策略、旅行邀请和角色权限系统,让共同旅程在便于协作的同时仍然由所有者控制。

05

Technical challenges

在丰富的三维体验中保持流畅

真实地形、旅行标记、媒体预览、统计信息和导航需要同时存在,因此必须针对资源加载、懒加载、视觉层级和渲染性能进行持续优化。

保持媒体与共享数据一致

大文件上传、异步视频处理、实时状态更新、封面切换和协作权限,需要在 React 客户端、Spring Boot API、PostgreSQL 和云存储之间保持同步。

06

Project gallery