People Storymaps

People Storymaps helps you create dynamic maps of the stories, traits, and shared moments for the important people in your life. Deepen your connections and foster more meaningful relationships.

Comment

Inspiration

I wanted to build a tool that goes beyond contact lists — something that lets you visually map the important people in your life.
Not just names and numbers, but stories, traits, goals, and shared experiences.
A way to better understand relationships over time.

What it does

People Storymaps gives you an interactive canvas to build relationship maps — structured views of a person’s story.

You can add nodes like:

  • Profile – Basic info
  • Conversation – Notes from past discussions
  • Trait – Personality insights
  • Interest – Hobbies and quirks
  • Quote – Things they’ve said
  • Moments – Shared memories
  • Intention – Aspirations and goals

You connect these to show how everything relates.

The app supports:

  • Drag-and-drop node creation
  • In-place editing
  • Dynamic labels and edge connections
  • Auto layouts (hierarchy, process, cleanup)
  • A “Story Genie” that turns bullet points into maps
  • Exporting to PNG, JPG, and PDF
  • User auth and cloud syncing

How I built it

The frontend is built with React, using React Flow to manage the canvas and nodes.

For storage and auth, I used Firebase (Auth + Firestore).
Custom nodes handle different content types.
ELK.js powers layout algorithms for organizing complex maps.
html2canvas + jsPDF handle exports.
And the Story Genie converts text input into nodes and edges on the fly.

It’s responsive and works across screen sizes.

Challenges I ran into

Integrating Firebase with React Flow required solving serialization issues — React Flow nodes often contain functions, which can’t be stored as-is.

Customizing the canvas for in-place editing and dynamic node insertion took time.

ELK.js was powerful, but tricky to configure for mixed node types.

Building consistent export functionality that captures variable-sized maps and renders them cleanly across formats was also a challenge.

And finally, the Story Genie needed reliable parsing logic to turn messy input into meaningful structure.

Accomplishments I’m proud of

I built a fully working, intuitive tool that turns relationship memory into a visual format.
Seamless integration of React Flow and Firebase was a big win.
The layout engine and Story Genie add smart automation, while the design stays clean, responsive, and easy to use.

What I learned

This project deepened my grasp of React’s state and component architecture, especially with live updates and canvas interactions.

I learned how to bend React Flow to my needs, got hands-on with Firestore’s real-time sync, and gained confidence with graph layout algorithms and text parsing for structured generation.

What’s next for People Storymaps

I’d love to add AI-assisted suggestions for node content and relationship insights.
Integrations with contacts and calendars could enrich the maps.
I would also like some CRM functionality to make this more actionable Also exploring deeper filters, more visualization modes to explore the relationship further

Built With

  • elk.js
  • firebase
  • firebase-auth
  • firestore
  • html2canvas
  • jspdf
Share this project:

Updates