SAAS

Gtree

An interactive family tree builder for gtree.ru: a D3.js visualizer with drag-and-drop editing, photos and documents on people, timelines, PNG and PDF export and shared editing.

Start a Similar Project All Work

Gtree

Client

Consumer Apps

Industry

6 months

Duration

2021

Year

Where it started

The Challenge

People put hours into building a family tree, so the editor has to handle large trees, make adding and connecting relatives easy and keep the photos, documents and stories attached to each person. Users also needed to share a tree with relatives and export what they had built, all inside a web app rather than a static chart.

What we did

The Solution

Leading a two-developer team, we built a D3.js tree visualizer inside the Vue.js application with pan and zoom and drag-and-drop editing to add, move and connect family members. Around it we added attachments on people and events, family timelines, PNG and PDF export, permissioned sharing and change history, backed by Laravel 8 and MySQL.

Built with

D3.jsVue.js 2VuetifyLaravelMySQLPHP

Inside the build

How It Came Together

An interactive family tree builder

Gtree.ru lets people build their family history as a living, editable graph rather than a static chart, with photos, documents and timelines attached to the people in it. We led the project as team lead of a two-developer full-stack team for about six months.

What we built

The tree visualizer

D3.js tree rendering embedded in the Vue.js application.
Pan and zoom navigation across large trees.
Drag-and-drop editing to add, move and connect family members directly on the canvas.