Family Proud

Winter/Spring 21 Industry Project

Introduction

The client is Family Proud, a startup that simplifies the process of receiving, giving, and coordinating support for individuals and families facing health adversities. The project was focused on building an application for an individual’s support network with a focus on patients and their care circles (including family, friends, and anyone who wants to help the patient with health or financial needs).

The Team

Alexandria Yip — Project Manager
Andy Ren — React-Native Developer
Jagroop Singh — ReactJS Developer
Tom Abraham — ReactJS Developer

Timeframe

Jan — May 2021 | 16 weeks

Tools

• ReactJS
• React-Native
• GCP
• TypeScript

The Project

There were two projects that we were working on over the course of this term. Tom, Jagroop, and Alexandria were working on the next release of the Family Proud website using React.js, while Andy was working on the React Native mobile application. All of us were responsible for our own user stories in order to make the necessary changes for our respective projects, and, as such, there was no overarching end goal in mind. Every week we’d receive a task, resolve it, and move on to the next one. Attached are screenshots and descriptions of some of the features we worked on.

Andy (Mobile)

• Implemented a Modal to help regulate overflow on the Resources page
• Utilized the SendGrid/mail service API to create a dynamic email format
• Implemented functionality allowing users to add events from their FP calendar to their default calendars

• Fixed unresponsive Care Map preview panel
• Replaced previous rn-sliding-up-panel package with new reanimated-bottom sheet package

Tom (Web)

• Built a search bar for the resources page to allow users to query through several different resources
• Deleted/edited certain user input fields on the settings page of web app

• Removed the “invite” route from the left navigation sidebar for the next release of the web application
• Redesigned the account creation/sign up screen on web app

Jagroop (Web)

• Implemented a category filter dropdown for Resources page
• Changed notification toggle options

• Removed dropdown menu from page headers
• Created a page for new users

Alexandria (Web)

• Updated the UI of the resource cards on the resources page to match designs given by the design team
• Created document listing features of both the web application and the mobile application as well as stating what can’t be carried over from mobile to web
• Updated the UI of the update password page to match designs given by the design team

Tom, Jagroop, Alexandria (Web)

• Building a backend serverless function that sends a notification email to FP when the user clicks on a button from the resource card

Development

The Family Proud software architecture primarily consists of 4 layers:

Presentation Layer

Here we have the front-end core of the application. It’s where the user can interact with the different pages, such as the P2P care map, the calendar, and the store. After the user performs an action in the presentation layer, that action gets sent to the processing layer.

Processing Layer

In this layer, Family Proud uses Cloud pub/sub (publisher/subscriber) to allow back-end services to asynchronously communicate, as well as Cloud functions to run back-end code based on events triggered in the presentation layer.

Data Layer One

Data layer one is where Family Proud uses Cloud Firestore and Cloud SQL to store user data.

Data Layer Two

Data layer two is where Family Proud stores their objects, such as files and images.

Family Proud also uses services such as Mixpanel to collect analytics data, as well as a variety of 3rd party services like SendGrid, Shopify, and Twilio.

Takeaways & Challenges

A challenge faced throughout this term at Codelab was getting familiar with the codebase. When initially cloning the codebase, it was difficult to understand the code and get used to adding code to an already well-established codebase, especially since we weren’t used to adding code to what other people had already written. However, with the help of our mentors, we eventually got acclimated to completing our stories.

Another challenge we faced was adjusting to working in an intern role at a startup. For most of us, this was our first official internship, and navigating through the agile development process was a bit confusing at first. However, after participating in a few standup meetings and experiencing the first couple of code sprints, we were able to adjust fairly well to our new roles. After completing the internship, we have all definitely become better programmers because we gained proficiency in industry-standard tools like Jira and Cypress and we feel we are well prepared for future internships and jobs.

One of the biggest hurdles faced during the development of the native application was created while attempting to fix an Android-specific Care Map bug. Sliding panels and gestures were non-responsive and nothing the current sliding-up-panel library could offer was working. Thus, we had to completely swap out the sliding-up-panel library for a new reanimated-bottom-sheet library, which had entirely different documentation. During the switch, multiple functions and code had to be rewritten while making sure everything still worked seamlessly with the other components.

We’d like to give Family Proud a big thank you for taking us in and allowing us to gain some industry experience. Steph, Leeland, Matt, and Aaron were always there for us whenever we needed to check in with them, and they offered us some great guidance and mentorship throughout the internship. We all had so much fun learning and working together, and we look forward to seeing Family Proud go on to fulfill its mission and do some great things!