Future-friendly application rebuild for tablet usage
#angularjs #mobile #rails #social-good


Computer Based Training for Cognitive Behavioral Therapy (CBT4CBT) has been available for clinical use since 2013. CBT4CBT’s therapy programs are focused on drug and alcohol addiction rehabilitation. The company was founded by Dr. Kathleen Carroll, PhD, who is the Albert E. Kent Professor of Psychiatry at the Yale University School of Medicine. The programs were developed and validated through Dr. Carroll’s research at Yale, and are now owned and supported by CBT4CBT.

When CBT4CBT was ready to scale their application from clinical test groups to use with hospitals and drug courts, it needed to rebuild the application using a tablet-friendly technology. The therapy programs needed to be made accessible to patients using anything from desktop computers with older browsers to the newest iPads and other tablets. Allowing for greater tablet user adoption was a primary business goal for this project.

CBT4CBT also aimed to future-proof the application during the rebuild to efficiently allow for future phases of development. Plans for future development included more complex reporting, as well as the creation of a Spanish language version of the therapy programs. A technical discovery and planning phase was needed to map out how the programs’ audio and video assets would be made accessible to Spanish speakers.


CBT4CBT partnered with Singlebrook to rebuild its custom application using tablet-friendly technologies. A core goal throughout the project was to create an intuitive experience for tablet users while maintaining and improving the existing desktop functionality.

Singlebrook chose to rebuild the application with an AngularJS and HTML frontend and a Rails backend framework for database management. When we came on board to rebuild the application, it was comprised of two cognitive behavioral therapy programs containing around 450 slides using Adobe Flash. Because Flash is not a tablet-friendly technology, we started by documenting different slide and activity types for the Flash conversion.

We used AngularJS, building a template and AngularJS controller for each slide type to create a proof of concept to ensure the slides would be convertible to HTML and Angular. With that skeleton and a few more Angular controllers and services in place, we were ready to add content to the programs.

We used a Rails backend for database management and admin UI. Because of the extensive event reporting required for this project, we created a custom solution for sending user data to the Rails backend. The user management system will easily add more customized reporting features, including organizing users into clients and departments, in future phases of development.

Once the new infrastructure was in place, we migrated the slides and converted the video and audio assets to build the program in the new HTML system. We crafted a custom audio directive in order to optimize the multimedia experience on tablets. This preloads all of the audio files for each slide so that, when the user interacts with the program, they have minimal wait time for the audio to play.

To future-proof the application, the backend and the user data were structured in a technology-agnostic way. By only loosely connecting the way user data is stored to Rails, the AngularJS frontend of the application could potentially be connected to nearly any other backend without too much adaptation.


CBT4CBT’s custom application is now being used in hospitals, clinics, and drug courts. The online rehabilitation programs provide a snappy, intuitive user experience for both tablet and desktop users. The application has been built to scale along with tablet user adoption.

The AngularJS and HTML frontend running on Rails for database management can easily be connected to nearly any other backend framework. The application can now handle more complex reporting and changing user data needs as further phases of development are implemented.

Through technical discovery and planning, CBT4CBT and Yale University have laid the groundwork for a Spanish language version of the therapy programs. A Spanish version of the application would create even greater tablet user adoption. Now the application will be ready to scale along with its growing user base.