Originally we were inspired to create a family tree making app. Our family is pretty large and some of our relationships are somewhat convoluted. An app like this would make it easier to visualize, add to, and share a family tree. From the nonlinear connections, we thought it might also be expanded to work for other organizations, like volunteer groups and student clubs that utilize the big/little system.

What It Does:

Quailio connects people literally and figuratively. An individual user can generate a connecting diagram to create a family tree. This is also a great tool for organizations to visualize their own structures as well as a more individualized tool to assist writers in character relationship development.

How we built it:

The UI was built using Grommet Designer and the code generated was transferred to the main code. We particularly built this application using React, Redux, and Grommet for the frontend. User data lives at a Google Firebase “back end,” including databases and user credentials.


  1. Learning about Grommet’s ecosystem. This took a good portion of our time, but it was well worth it. There’s a designer, a code library, and a bunch of UI components!
  2. Creating an asynchronous Redux state management system. Writing all the bells and whistles of Redux with TypeScript was pretty tiring. The benefits, however, are astronomical. With where we left the application for now, it’s super satisfying to add new interactions and state to the application.

Accomplishments that we are proud of:

  1. Working as a sibling duo to create an app we would use
  2. Having gotten up and running with a full-stack platform in just 3 days
  3. Using the Grommet UI framework for the first time. It’s great!

What we learned:

  1. Making a full-fledged TypeScript-React app
  2. Connecting firebase authentication and databases to our app
  3. Grommet UI Designer
  4. Asynchronous Redux with TypeScript

Github link:

What's next for Quailio

Share this project: