How I Built a Dynamic Family Tree Generator with Graph Visualization

I’m Muhammed Fayis K (Fayis Kooni), also known as Fayis K, a Full Stack Developer from Kerala, India. I specialize in building scalable web applications and systems using React, Next.js, and Node.js.

The Idea

I wanted to build a system that could model and visualize complex family relationships in a clear and interactive way.

A family tree isn’t just a simple parent-child relationship — a child belongs to a union of two people.

The Approach

Instead of directly linking person_id → child_id, I designed a relational structure using:

• Members
• Marriages
• Parent-child relationships

I created a parent_child table that links couple_id → child_id, which made the model much more flexible and accurate.

Visualization

To render the family structure, I used:

• React Flow for interactive UI
• ELK.js for graph layout

This allowed me to create a pannable and zoomable tree with clean structure.

Challenges

• Modeling complex relationships correctly
• Ensuring accurate graph layout
• Keeping performance smooth for large trees

Tech Stack

React, Node.js, Express, PostgreSQL, React Flow, ELK.js

Live Project

https://family-tree.fayiskooni.workers.dev

Conclusion

This project helped me understand graph-based data modeling and how to visualize relational data effectively.

---

I’m Muhammed Fayis K (Fayis Kooni), a Full Stack Developer building systems like this.

Learn more: https://fayiskooni.xyz/who-is-fayis