Extensible Family Tree

[shaquib-nesar]

Idea Source:

There is a handwritten family tree made by the father of my maternal grandfather's mother, which contains the record of 4 generations. But after his death, it has not been extended and the chain is broken. Also, hard copy makes it even more difficult to be distributed to continue further.

Idea is to create a family graph that can be easily extensible by the newer generation. We can create a simple website that can keep a record of generations.

Features:

1. Every member can log in and can join/create a family(group).
2. Few members can be admin, who can append the information.
3. Dashboard to show the family graph.
4. Everyone can suggest the change but can only be added after the two admin's approval.

[championswimmer]

Wow that's actually super interesting ! It shouldn't be too hard to build, but a fantastic side project for sure :)

[saurabhnigam]

How about implementing it as a facebook app?
We get deeper fb integration plus everyone of us is on fb.

[championswimmer]

Is Gen Z on FB anymore ? Millenials were the last to be on it :P

[selvakls]

Wow,m I was really surprised to see this idea. I almost had same idea in my mind for a very long time. I will be super excited to work on this even if it was not selected by scaler.

[FazeelUsmani]

I thought of this idea before but there are many apps which solves this problem.

https://www.canva.com/graphs/family-trees/

[atulanand206]

This project is a great opportunity to play with smooth animations on the screen. One can't fit in a family tree on a single page view. It must have spanning and zoom capabilities with vector used wherever required. It's can be a good challenge to create a liquid design in action. Smooth animations with content at different zoom levels is the USP for the presentation tool Prezi and when the family tree becomes large enough, transitions need to be seamless.

---

If we try to break it down, It's a showcase website with graphs at the core with each node specifying a person.
Generally, each node would have fewer than 5 links, maybe upto 10 in a few cases. Even for joint families, direct relations aren't that many.

---

One way to handle graphs in databases is to use a relational database.

• There can be a Member table listing all the members in the tree.
• There can be a Mapping table which will list the relation between two members.
• The Mapping table will be powered with a fixed set of enums as the type of relationship for a Mapping.
• These enums can be used visually for depicting different relations different designs.
• There can be a Family table which will have the list of members in that family and the list of admins.

---

For getting the tree information, we only require the family id.

• Using family id, we can get all members.
• For those members, we can fetch all relations.

---

The approvals system is actually quite interesting.

• Creating a family does not require approval as the creator will be the admin and they already have necessary permissions.
• There are 2 tables in this system, Member and Mapping which everyone can suggest and require approval on changes.
• In both of these tables, there can be a field which will show the status for that entity. SUGGESTED, APPROVED & ARCHIVED can be a good start for the system.
• If someone has suggested a change, it can be approved or archived by the admins. This is fine.
• But, when it comes to having multiple suggestions in the family pipeline, A change can only be approved if all it's dependents are approved. We don't want weird structures in the family tree.
• This restricted can be made evident using some design elements for the admin dashboard where they will be approving the change from.
• Suggested change will only be visible to the person who suggested it and all the admins. It'll be made visible to all only when it is approved.
• Different colors can be used to depict different types of informations.

---

The web application can then take the relations and plot in on the HTML canvas or some other canvasing tool.

• When a family tree is opened, show the head of the family or decide on which to pick and show it in the center. It will pop on load.
• Links would grow in all directions from that node present.
• Adjacent nodes will pop when the link is fully drawn.
• The next set of nodes will have their remaining links now getting drawn and slowly the whole tree will come on site.
• The users should be able to navigate all across the board using their mouse and keyboard.
• Pick any node and drag from it to create a new link.
• If dragged into the empty area, it'll ask to enter a member email. If email is present, it'll take that as suggestion otherwise ask to create a new member.
• If dragged into some other node, it'll show a dropdown and ask to choose the type of relationship.
• I've not done this before. I'll require extensive help in this part.

---

If anyone is interested, we can discuss on each part in detail before jumping into it all.

[championswimmer]

This seems great. The backend will actually be easier (from the data structures point of view). What I am thinking of is, we need have a good frontend architecture in place too for this to work well.

[atulanand206]

Enums

Status

• SUGGESTED
• APPROVED
• ARCHIVED

Relationship

• CHILD
• PARENT
• SIBLING
• etc.

Entities

Member

column	definition
id	uuid
name	string
email	string
status	enum (Status)

Mapping

column	definition
id	uuid
from_member_id	uuid
to_member_id	uuid
relationship	enum (Relationship)

Family

column	definition
id	uuid
family_name	string

Admins

column	definition
id	uuid
family_id	uuid
admin_id	uuid

Interface - The following API can be exposed using a REST Controller.

// To be called during Sign Up.
createNewMember(name: string, email: string?): Member

// To be called during Sign In using id.
// To be called during Find member to add in the family using email.
getMember(memberId: string?, memberEmail: string?): Member

// Any member can create a new family by passing a name.
// To root of the family can be the admin who created the family.
createNewFamily(adminId: uuid, familyName: string): Family 

// After member is onboarded, any member can suggest to add members in a family.
mapMemberToFamily(familyId: uuid, fromMemberId: uuid, memberId: uuid, relationship: Relationship): Mapping

// After a mapping is suggested, admin can approve the mapping and confirm the member in the family.
// After approval, all members should see the updated trees on their dashboards.
approveMapping(mappingId: uuid)

// Any member can get all the families that they are a member of.
getFamilies(memberId: uuid): uuid[]

// Any member can click on a family to open the family tree.
getFamily(id: uuid): Family

// Get all the members in the family.
getMembersByFamilyId(familyId: uuid): Member[]

// Get all the relationships for a member to render it's neighbors.
getRelationshipsByMemberId(memberId: uuid): Mapping[] 

// Get all the relationships for a member to render the whole tree at once.
getRelationshipsByFamilyId(familyId: uuid): Mapping[] 

Please review and suggest if something clicks.