GR20 Reporting

Why?

Took on the epic GR20 hike in Corsica, and the adventure didn't stop at the trails. I'm in the midst of turning this 14-day journey into a web app, though it's more of a tech demo for now, far from the grand vision I have in mind.

Sure, I've been posting my daily exploits on Strava, but I felt the need for something more engaging. That's when the idea of a narrative game popped up. It's not just about documenting the paths; it's about the people we crossed paths with, the stories we shared, and the bonds formed amidst the Corsican landscapes.

Digging into the technical side, I grappled with the challenge of displaying the real path from .gpx files. That led me down the rabbit hole of powerful algorithms like Douglas-Peucker and Catmull-Rom. Why? Well, for one, performance issues nudged me towards simplifying the path. On the flip side, the visual aesthetic called for enhancements.

Screenshots

full game screen with the GR20 path and refuges displayed as little tente icon — Main game screen. The player scroll to explore the path, encountering refuges and points of interest along the way.

point of interest screen with a dialog displaying a photo of mountain and a text — Point of interest screen. As the main character (that's me!) on this journey, I share photos and thoughts with the player.

Technical stack

React with TypeScript as development framework.
D3 geo as geography helper.
Storybook to visualize components independently.

Source code

https://github.com/GauPanisset/gr20-reporting