Famly

Inspiration

We realized that it was difficult to volunteer in today's world due to the pandemic. We used to travel and do volunteer work at orphanages which we realized would not be a possibility and would majorly impact both the moral and education of children in developing countries. After doing more research we realized this was a big issue and we wanted to think of a solution.

What it does

Famly connects families, orphanages, and orphans. Orphanages create accounts, and from there add children to their list. Families can create an account, and then choose to support a child from any organization.

Once a child has a family, the two can chat, schedule events, post images, and chat in their native languages. Parents can also donate money to their children to support both them and their orphanage financially.

The main purpose of the app is to give children in developing countries mentorship and the opportunity to build a meaningful relationship with families that could help, even with all the barriers in between.

How we built it

There are two parts to this project: the frontend & our custom backend.

The former is built with the Quasar framework which itself is built with VueJs. This handles everything the clients see: the pages, buttons, their login forms. All the content is obtained through API requests using Axios. Many of the pages make heavy use of conditional rendering, enabling us to re-use the same components and pages across all possible types of users (children, organizations, families).

We use the Stripe API to enable families to donate money from their credit cards to their children.

The backend is entirely custom made. We built a flask server (python) that stores data into a SQL database. This database is hosted on Microsoft Azure, and also makes use of Azure Storage for images.

The backend also makes use of IBM Watson. The first use case is for the chat system. We used IBM's Language Translator API to automatically determine which language each user spoke, and therefore translate their messages on-the-fly. A french child can talk to their Swedish family in French, and the Swedish family will receive the translated message.

The other use case for Watson is the personality insight API. Each child and family submit a bio when creating an account, which is the processed and sorted by IBM. The end result is a system where children and families are paired intelligently.

Challenges we ran into

We had a few challenges, namely app routing, session storage, and server-side issues. App routing in quasar is a tad special and a few issues came up where layouts were getting mixed around unintentionally. Rewriting the entire routing file proved to be a solution.

The second issue we had was managing the user state; as children log in from the organization account and portal, we had an issue were children could navigate as organizations, and where the UI displayed was for the wrong client. We decided to use localStorage to solve this issue.

The server required lots of maintenance. Every single part of it depended on our ability to imagine every request possible, which meant that small niche bugs came out. However, the more prominent problems arose when Azure would slow down, where we would wait up to ten seconds to handle a simple GET request.

Another difficulty was handling images. We couldn't get them to load for a long time, and after many hours of debugging the web app can finally handle uploading and receiving images perfectly.

Accomplishments that we're proud of

Many of the features in our app are based on technologies that were developed and proven over and over, so we were proud when we realized that we could take advantage of such tools and develop something innovative. We were able to leverage different APIs as well as the custom backend we are proud of. It proved itself to be robust and although did require a lot of effort, we believe it is for the better. The routing and layout system is also very nice in our opinion, with state logic being implemented everywhere. We also believe that the idea was something that required proper execution to reach its full potential which is what we were able to do by working for the 36 hours with a plan from the start.

What we learned

We learned that you should always plan your web app structuring and routing beforehand. More seriously, using Microsoft Azure was new for the both of us, and we had to learn its UI, features, and the drawbacks/advantages of using SQL instead of SQLite, which we were more familiar with.

What's next for Famly

Hopefully, much more! We do really like this idea and hope to expand on it in the future! We want to increase the use of remote technologies like video conferencing. The use of more advanced deep learning tools will also create a better relationship between families and children.

Built With

• axios
• azure
• ibm-watson
• javascript
• python
• quasar
• rest
• vuejs