MyLifeLine.org React.JS Web Components

MyLifeLine.org is the Cancer Support Community's free social platform, where people facing cancer build a private page to share updates and rally support from family and friends. The platform needed a set of custom front-end components that could show each member's own content and data, such as updates, messages and support activity, in a way that felt simple and personal to people going through treatment.

The components had to fit into the existing site, work with its PHP back end, and be reusable across the many pages of the platform.

As lead technical architect, I designed the components as small, self-contained building blocks that could be dropped into any page of the platform.

• React.JS for data-driven interfaces. Components that display live member data were built in React.JS, so each one updates cleanly as the data changes without reloading the page.
• Working with what was already there. jQuery handled the interactions on existing pages, letting new components sit alongside the current site instead of requiring a full rewrite.
• A clear data layer. PHP and Node.js supplied the data each component needed, keeping the front end focused on presentation and making the components easier to test and reuse.

The Cancer Support Community gained a library of reusable, data-driven components for MyLifeLine.org. New features could be assembled from existing pieces, and members got a more responsive, personal experience when sharing their story and receiving support.