My family wanted to create a family tree and a quick google search yielded many solutions, with web applications like ancestry or familyecho and libraries like BalkanJS, dTree, or GoJS. However, web applications provided no flexibility, and libraries provided no secure public interface. Therefore we attempt to develop Trees for Non Developers (TreeND), using the BalkanJS App components. We aim to address the following main 4 problems that current solutions do not have:
- Allow custom fields. Neccesary for instance, if a family has both chinese and english names.
- Allow multiple users to edit. Allows for simple creation of trees without having to communicate back and forth with distant relatives. A simple link will do.
- Allow online viewing with security. View the tree from anywhere (secretly on on your phone at family weddings) and not simply an image like some current solutions. Still maintain security of the public facing tree.
- Allow tree creation and viewing without an account. In my research a significant amount of time was spent creating accounts and email verification, only to realize the paid solution, ugly interface, or failing the above requirements. Additionally, users should not have to create accounts to view a tree.
What it does
A flexible, secure, accessable way to create and share family trees.
This platform uses the BalkanJS Family Tree components to build, share, and view custom family trees without needing to create an account. It accomplishes this through a password to view the tree, and a different password to edit. This allows viewing or editing either by searching for the tree name, or sharing a link. A quick start and minimal barrier to creation.
How we built it
It took 3 hours to set up the backend, being the first time using WTForms and Flask-SQLAlchemy. We created 2 tables, one for tree information and passwords, and the other for user information. Flask routing was simple to create, although we had a few bugs with user sessions, since if logged in, we don't require passwords to trees you own. We then deployed to pythonanywhere for a public facing prototype.
Learning to use BalkanJS consumed the most time on the frontend side, as the library is not designed for client-server interaction. It took about 4 hours to get the creating, editing, and saving of trees to work correctly, after which we used Bulma.io and Bootstrap to style the pages. For the home page we took inspiration from a bootstrap template. Our site consists of a home page, login pages (login, logout, sign up), tree pages (view, create, edit), and an admin page for users who do create an account and have multiple trees to manage.
Challenges we ran into
This was my first ever hackathon, so the short time frame was a shock. We implemented the features to address the problems, but have a lot more features I wish we could have added. I have created full stack applications before, but still don't have much practice so, a lot of time was spent reading documentation and looking at other github examples. This one in particular helped me get started. Additionally, I was using many of the technologies for the first time, such as WTForms and Bulma, but we are proud that we were able to get a working prototype by the deadline.
On the front end, the library we used was not geared towards client-server interaction, so it took a bit of effort to reverse engineer BalkanJS and extract the information back to the server. We patched together some JS to extract and ajax the data back to the server, which results in a few bugs when actually using the site. These are fixable but we simply ran out of time. Overall, there are many minor details we would like to improve, especially with user feedback, but I did learn a lot through this event.
What's next for Family Tree
- Allow uploading images from computer (currently only links)
- Share button to easily share trees
- Edit profile (change password, username, email, profile picture)
- Multiple card customizations to select from
- Controls for trackpad users