
Show HN: Online family tree maker built with React - aqrashik
http://plantafamilytree.com/
======
git-pull
Example idea: Consider an example of a filled tree to show off. For instance,
_Game of Thrones_

Pivot idea: Consider using the chart tool to map out relations of characters
in stories, TV shows, legal cases, etc.

Service integration (client): Consider if your tree could fit in as a GSuite
add-on: [https://developers.google.com/apps-script/add-
ons/](https://developers.google.com/apps-script/add-ons/)

Service integration (host): create REST API's, or language libraries for
people to use your tool programatically

Viral idea: Consider offering family trees for free so Wikia pages can link to
them

Viral idea: Consider an embeddable app with zooming/panning that media
websites and pay a monthly fee to integrate

Viral idea: Consider an import/export JSON schema users can use to share their
graphs

~~~
crooked-v
If you really want to stress-test an arbitrary family tree documenter, try
putting the X-Men in it.

[http://img13.deviantart.net/4a05/i/2011/253/c/b/x_men_family...](http://img13.deviantart.net/4a05/i/2011/253/c/b/x_men_family_tree_modified_by_devilkais-d49gxw6.jpg)
(and that's just the tip of the iceberg!)

Real family tress don't have to worry about time travel or cloning, of course,
but that crazy stuff does actually serve as a reasonably good proxy of some of
the strangest family trees out there (medieval European nobility, extended
families with multiple divorces and remarryings, etc).

------
basseq
I love family trees: they're interesting, complex, data-driven, and beautiful.
There are some very challenging decisions you need to make to make a tree
readable, like whose ancestors to show, whose children, and how far back. To
give you a sense, I have ~3,500 people in my family tree. I want different
trees to show, say: a) all descendants of a root ancestor, or b) all of my
ancestors.

This is reasonably easy to use and build out a simple tree. Here are two
opportunities:

1) There are some UI areas that aren't totally intuitive (e.g., double click
to add name), and generally it feels to "clicky" (e.g., too many clicks to get
to the action I want). I think your goal is super-simple and "delightful" vs.
full-featured.

2) The 1:1 relationship lines get complex, as _every_ parent is linked to
_every_ child (so you end up with 2n lines that all overlap).

~~~
yosyp
This is very interesting insight! May I ask which software or service you use
to keep track of your family tree?

~~~
basseq
Ancestry.com has the best UI and is the "easiest" to use that I've found. You
can use it for free to just build your tree, but you'll feel like a second-
class citizen. Their data sources are very good and easy to use, but you pay
out the nose for them. (Obligatory note that I very much disagree with how
Ancestry.com has set themselves up to collect money off the backs of
researchers who often work for free, and will put your inputs behind their
paywall.)

So Ancestry.com is a good place for research and for family tree management.
I've set up the second half of my stack to generate HTML files, which I keep
(publicly) on my personal site.

------
ameister14
Rather than clicking the plus to add a person, I think a more intuitive action
would be to double-click empty space. Whether or not you change that, the
'click + to add a person' doesn't work - when you put the word 'click' on a
page, people will click that and not pay attention to the rest of the
directions. Even if they did, it's a little confusing because 'click + to add
a person' isn't clear. You need to be more specific. 'click the plus button to
add a person' and then have the plus button move so people see it.

~~~
jhaddon
A simple guided tutorial, similar to the beginning of most mobile games, could
help here. You literally walk the user through the process of adding one
person (themself most likely) and then let them grow from there. With a 'skip'
option of course, if they don't want or need their hand held.

~~~
aqrashik
Thanks, I've tried to make onboarding easier by showing the popup tooltips,
but I guess it needs more work

------
jermaustin1
When you launch the person dialog, focus on the Name input, then when they
click enter, save and close the dialog. You are also missing out on a number
of fields when creating a family tree (gender and maiden name come to mind
fight off the bat).

------
dpcx
I've been a user and fan of Geni.com for several years now. I wish they'd
update their interface to allow some friendliness like this.

~~~
creativeembassy
Same. I've considered making my own interface for building family trees, as an
exercise in UX design. But I'd want it to plug directly into Geni. You can't
beat the feature to find other users' trees that match yours. Find long-lost
cousins and great-great-great-whatevers that you didn't know you had.

~~~
dpcx
I've considered multiple times writing an importer/exporter against their API
so that I can use Gramps[1] to manage the rest of it.

[1]: [https://gramps-project.org/introduction-WP/](https://gramps-
project.org/introduction-WP/)

------
hougaard
Hey, sounds cool, let me just upload my GED^ file...

Ups, no upload feature (yet) - That would make it much more usable.

(^)
[https://en.wikipedia.org/wiki/GEDCOM](https://en.wikipedia.org/wiki/GEDCOM)

------
neRok
Good effort. I tried making something similar years ago, and it was hard (the
visual side, not the data side).

I don't know what your goals are with this though. I don't want to be the
bearer of bad news, but to 'genealogy enthusiasts', ie the people regularly
spending money in this domain, your website is no more than a toy. In fact,
I'm pretty sure that Ancestry.com offers this same tree building functionality
for free (when you pay for a subscription with them, it is for the research
capability, not the data entry capability).

------
fiatjaf
I've searched my entire life for a way to write simple family trees with
custom data, fast, with or without a lot of information.

Then I've come up with this:
[https://github.com/fiatjaf/rel](https://github.com/fiatjaf/rel), which is a
simple way to create triples, then render dot graphs, or any template
actually, with them. The database is actually a bunch of YAML files
representing each node in the graph (the relationships are stored in the
nodes' files also).

------
Xeoncross
$4.99 a month seems a bit steep for what looks like a very basic UI with no
features like multi-user editing or photos or anything other than a node-link
builder.

It's still a nice UI for the primary task.

------
mathgeek
I'll admit that I spent a little too much time on this trying to create the
most interconnected tree I could imagine, just to see how many "my descendent
is also my ancestor" connections are possible. The flexibility of this is
pretty impressive.

------
ludicast
Beautiful job.

There might be some people posting "why didn't you just..." but I used this to
show my kids their family tree and they really liked it.

Freeloaded though, so you need a way to compell people to pay (say extra large
posters of the tree).

------
losteverything
Post to r/genealogy as there are requests from time to time for tree makers.

Fyi. The church of latter day saints (Mormons) have familysearch.org which has
circles to show generations. The church has for decades housed and built the
largest library for finding relatives. I believe this is because once you
enter the church you can "save" all your deceased relatives going back as far
as you can.

The tree is really not important to genealogy nuts....

------
dankent
I really like the overall approach - definitely a nice friendly way to edit a
tree.

The standard way for family trees to link children with parents is through the
relationship of the parents. Did you avoid doing that on purpose?

The problem with having a separate parent/child link for every parent/child
relationship is that it gets very crowded if the parents have several
children.

~~~
fiatjaf
I don't have experience in this area, but wouldn't the standard way get pretty
messy in modern relationships, in which people have multiple children with
multiple different alternating parents?

~~~
dankent
I assume you want to represent all of the relationships on the tree in any
case, so I think minimising the number of required parent-child lines would
actually make representing modern relationships less messy.

You'd have a pink relationship line for each partnership (that will be the
same and just as messy in both approaches)

Then you'd have one child line from each relationship line to each of the
children that came from that relationship, rather than two for each child.

So in a situation where Angus had 2 children with each of Beatrix and Chloe,
you would have two child lines from the Angus-Beatrix relationship line and
two from the Angus-Chloe line, rather than a total of 8 lines to show all the
parent-child relationships in your current approach.

If Chloe also had two children with David then your approach would add a
relationship line and another four child lines whereas the standard approach
would just add the relationship and two more child lines.

~~~
fiatjaf
I was thinking about not having relationship lines or even the concept of
"relationship" at all. Relationships don't have any meaning concerning family
nowadays, only kinship has.

------
garyfirestorm
I couldn't download the tree i just drew. It gave me an 'unknown error while
downloading' Chrome on Google Pixel

------
zwischenzug
Coincidentally, I was talking to my father about getting his family tree work
'stored' in some digital format for future generations.

It struck me that a simple directory structure with info about each person in
each directory, text files with info in, and then tar'd up would be about the
most future-proof format you could get.

Anyone else thought about this?

~~~
basseq
That might be the "easiest", but it's not the most portable, and would be a
nightmare to navigate. I'd recommend he work in a software package that can
export to GEDCOM. That's a structured data format used by genealogists to
track relationships and metadata. The current version is 21 years old, and the
original spec was designed in 1984. It's robust and industry-standard. Every
single genealogical product worth its salt will be able to work with that
format (and export to it).

I hate to recommend them, but ancestry.com has one of the best interfaces in a
SaaS product, with a ton of data on the back-end if you are doing _research_.
An actual application (Family Tree Maker comes to mind, but don't quote me or
take that as a recommendation) might be better for just "documenting"
research.

~~~
arxpoetica
I'm not just being flippant, but GEDCOM is a dinosaur. Can you imagine
Facebook storing its relationship data in GEDCOM? Unthinkable. Genealogy most
certainly needs a new standard.

Also, I know people who work for ancestry, and the general thinking is it's
hard to update old interfaces for a newer generation when a very important
public is 50+.

~~~
basseq
Oh it's a nasty format, to be sure, and more useful for "cold storage" than
something you'd actively work in. But for a long-term storage requirement?
It's reasonably human readable and _imminently_ portable as the go-to
standard.

You can import a GEDCOM into any family tree software and be up and running in
minutes. A tarball'd directory structure would be more of a nightmare.

On Ancestry.com, the UI is fine, and still better than anything else I've
seen. If you have any other ideas, I'd love to hear them. My issue with
Ancestry is primarily their model that actively hinders collaboration between
researchers unless you've paid their toll. They're taking _your_ research and
charging others for the privilege of seeing it. Given the open and helpful
nature of genealogical researchers (see also: "search angels"), this rubs me
the wrong way.

(So I use Ancestry for research and tree management—and I pay them $200/yr for
access to their data sources—then I export (what else?) a GEDCOM, route it
through a couple scripts of my own making, and publish it on my personal
site.)

------
matt_morgan
Nice! BTW I've never found a really nice, easy way to draw up organizational
hierarchy charts (I've always used Dia or similar, and that's fussy), and I
guess it's the same thing more or less?

~~~
fiatjaf
Have you ever looked into Graphviz?

Here's a demo of the same old C Graphviz program running on JS: [http://viz-
js.com/](http://viz-js.com/)

------
innopreneur
Nice work. Which library did you used for rendering connectors? I don't know
how would you monetize it if you plan to. Also are you planning to open-source
the code base?

~~~
aqrashik
It's just svg circles animated with css so no libraries were required. I've
tried to keep external libraries to a minimum

------
sAbakumoff
OOC - what value "built with React" brings to the thing you have implemented?

------
dulcinea
Is this project downable? Github?

~~~
iso-8859-1
No. It's proprietary. And you can't even save without paying! :O

------
ecesena
Any reasons for not having Facebook login (and perhaps deeper integration)?

~~~
aqrashik
No reason in particular, but I don't have a Facebook account so integration
with Facebook would have required me to sign up first to test the integration.
I don't mind creating an account on Facebook if required, but I am trying to
avoid it if possible.

~~~
ecesena
Oh, I just got downvoted, unsure why. I was thinking that it's a pretty neat
tool to integrate with Facebook. As your primary goal is to build your family
structure, you may want to share it with your family members (and maybe have
them help building the tree).

Also, depending how you want to grow, fb login is typically the most
successful one.

------
lecarore
Cute graphics ! Some feedbacks :

\- Please make sure forms can be validated with enter, an not just by clicking
a button (use for onSubmit)

\- allways auto-focus most important input of form (like a person's name) when
opening it (at least when it's empty)

-after adding a person, open the form immediately

\- when tree is empty, put the + button in the center of the screen, big, and
with explaination. THen, make a transition to put it back to it's normal
place. This way it makes it obvious and then falls back to standard material
design location. Other option is to make an empty state image with a big,
obvious arrow to the button.

\- maybe add transitions that help user follow the change of state when adding
someone to the tree.

Great work overall, i wish you the best for your project.

