Pathfinder's Tale.

An interactive travel storytelling experience, Explore countries on a 3D globe, open books of stories, and dive into immersive chapters.

Comment

Inspiration

Pathfinder’s Tale was inspired by our love of travel, storytelling, and discovery. We wanted to create an experience that combines the thrill of exploring new countries with the joy of reading immersive stories, all in a playful, interactive format. The idea came from imagining a digital adventure book where users could uncover local foods, activities, and cultural wonders while feeling like real explorers on a journey.

What it does

Pathfinder’s Tale is a gamified storytelling platform where users can:

  • Explore a 3D interactive globe with pins for 23 countries.
  • Zoom in on the country you would like to visit, click that country’s pin to open a book-like view.
  • Browse the categories Feasts, Quests and Wonders.
  • Open individual chapters with rich stories and media, curated by the website's own community, for the community.
  • Be guided by an onboarding tour that introduces the app step by step.
  • Get fun facts about a country using Google's Gemini AI.
  • User's can submit their own entries for each chapter, which is sent to Firestore where the moderators of Pathfiner's Tale can find, to upload directly through Storyblok, where the content will be shown instantly. We originally wanted the content to be handled in a way where it would be sent directly to Storyblok without the manual aspect, however we found that instead, using a moderator system who discourage spam, and incorrect information. This keeps everything fun and accurate

We built this to combine the wonder of exploration with the power of storytelling, turning geography into a playful and immersive journey.

How We Used Storyblok

  • Countries stored as stories inside Storyblok (23 countries).
  • Each country is a Content Block. While each chapter is a Nested block.
  • Storyblok acts as the content backend, letting our moderators who are non developers expand or modify stories easily without touching code.

This makes Pathfinder’s Tale scalable: new countries and chapters can be added directly from Storyblok without redeploying the app.

How we built it

Pathfinder’s Tale was built with React 19 as the frontend framework, using React Three Fiber and Three.js to render an interactive 3D globe and book-like environments. Content is managed through Storyblok, a headless CMS that stores countries, categories, and chapters as dynamic blocks, making the app scalable without redeployments. We integrated React Router v6 for navigation, Reactour for onboarding, and custom GLSL shaders to create atmospheric effects like a twinkling starfield. Additional services like Firebase/Firestore handle data submissions, while Google Gemini AI powers fun fact generation, combining storytelling with dynamic, interactive features.

Challenges we ran into

We originally wanted the content to be handled in a way where it would be sent directly to Storyblok without the manual aspect, however we found that instead, using a moderator system helps discourage spam and incorrect information, keeping everything fun and accurate. Another challenge was integrating Google Gemini AI, where we had to manage authentication, API limits, and make sure the fun facts it generated stayed relevant and lightweight. Finally, our onboarding tour was originally planned to cover the entire site, including the book pages, but due to performance issues and persistent bugs we decided to keep it focused on the globe for a smoother experience.

Accomplishments that we're proud of

One of our biggest accomplishments was completing Pathfinder’s Tale in such a short time frame. We joined the hackathon with only five days left, and built the entire project between the two of us in just three days. The remaining two days were spent testing, polishing, and perfecting the experience to make it ready for submission. Pulling everything together so quickly, from the 3D globe to the Storyblok integration and AI features, is something we’re especially proud of.

What we learned

Through building Pathfinder’s Tale, we learned how to combine creative storytelling with complex technical tools under a tight deadline. We deepened our skills in React Three Fiber and Three.js, gaining hands-on experience with performance optimization in 3D environments. We also explored how a headless CMS like Storyblok can make content scalable, and learned the challenges of integrating AI services like Google Gemini into a live project. Most importantly, we discovered how much can be achieved through collaboration, adaptability, and problem-solving in a short amount of time.

What's next for Pathfinder's Tale.

Next for Pathfinder’s Tale, we hope to build a vibrant community of travelers eager to explore real-life adventures, quests, wonders, and feasts. We plan to expand the app with more countries and chapters, adding richer stories, activities, and cultural experiences. By growing the content and engaging users, we aim to make the platform a go-to place for both virtual exploration and inspiration for real-world journeys.

Built With

Share this project:

Updates