Home
Red Notebook Project Progressive Web App

Red Notebook Project Progressive Web App

to : We built an ultra-secure web app for storing your life's most important information so it can be passed down in times of crisis.

Showcase & Media

Video Case Study

Post Mortem Discussion

Screenshots

Check out photos of this project

Architectural Diagrams

Check out architectural diagrams of this project

Problem

What was the problem to be solved?

Dr. Douglas Jewett developed the Red Notebook Project

After working with numerous adults, he found the discussion of advanced planning for end-of-life issues was lacking.

In order to get the discussion started, he came up with this notebook where adults of all ages can have one location for all of the information needed for emergencies, when they are no longer able to speak for themselves, or after they are gone.

Everyone wishes for peace of mind when they approach difficult times.

Making sure everything is in order is a big part of the gift that people can leave for their loved ones.

The Red Notebook is a physical notebook that acts as a personal, step-by-step preparation guide to help compile and organize important information and documents, so they are immediately available for others to manage and settle the notebook owner's affairs.

It's a Secure and easy way to organize critical information so others can manage the personal and financial affairs in the manner that the owner of the Notebook would want.

It enables those loved ones to focus less on details and more on the people who matter most at the time when it matters most.

The Notebook helps loved ones by ensuring that end-of-life intentions and decisions are known.

Following and completing the Red Notebook Project gives owners comfort knowing everything is in order for loved ones.

And it gives family peace-of-mind as they carry out those intentions.

​The problem, however, was that the Notebook was a physical device and as Doug updated its contents, he would have to physically mail updates.

Users were having trouble making edits and backups and sharing the notebook proved to be a challenge, too.

Solution

What was the proposed solution?

The solution was obvious.

Users needed an app that could act as a companion or stand-in for the physical notebook.

This would allow remote backups of the data, which could be edited and shared instantly.

Additionally, when Jewett added new content or surveys, the users would be alerted and could fill in the new content easily.

Finally, the app needed to be available on any device include print to accommodate users no matter how they wanted to interact with the product.

Challenges

What challenges arose during the project?

The Red Notebook Project presented several challenges.

"There was a lot of data and a lot of types of data," Gunner Technology CEO, Cody Swann, said. "The app needed to support dates, surveys, file uploads, photos and more. We needed a flexible data model that we could present in a structured way and also allow the admin to modify it at any time."

But that wasn't even the close to the hardest part.

"Security," Swann said. "Security, then Security, then Security and finally Security were the top concerns with this app. We're pretty much asking people to put their entires lives in the cloud via an app. Drivers license, passport, medical history, prescription drug information, financial statements, wills, everything."

Printing was a challenge as well because the app needed to look as close to the physical notebook as possible when printed out.

Finally, the initial budget was modest so keeping costs low was going to be a challenge as well.

Technical

What was the technical approach to the project?

To address the data model problem, Gunner chose MongoDB because of it's document model.

"Normally, we'd use Amazon DynamoDB if we're going NoSQL, but DynamoDB has a hard size limitation for individual entries that we couldn't get around," Swann said.

DynamoDB allowed the entire unedited Notebook to be collapsed into a single JSON document.

Then when users fill in the notebook, the app would create entries for each of their responses that matched the single JSON document.

"That way, the admin could in essence, edit the Notebook at any time without effecting the user's responses," Swann said. "It also allowed us to avoid duplicating the questions and input for each user."

Gunner used React to build the frontend which made delivering the final app as a Progressive Web App simple.

"We used Material UI to implement the Material Design Design Framework," Gunner designer Cory Schneider said. "This kept us from having to reinvent the wheel with CSS3, HTML5 and JavaScript."

To get the print outs looking good, Gunner overrode the styles using media queries.

To connect the frontend to the backend, Gunner used Node.js with a GraphQL API.

"This is a very typical stack for us," Swann said. "JavaScript for the front and backends, Yarn for dependency management, Webpack for bundling and Babel for transpiling ES6 JavaScript to vanilla JavaScript."

The team implemented Google Analytics to deliver usage reports and built the initial wireframes in Adobe Photoshop.

But the 1,200 pound gorilla still had not been addressed.

"We needed to be really smart about Security," Swann said. "We have built many apps where HIPPA comes into play, so we were very familiar with that, but this goes beyond HIPPA. It's a totally different animal."

Gunner needed to solve the problem of data being 100% Secure but also shareable and readily available.

To tackle that, Gunner came up with a unique approach.

"We have the basic best practices," Swann said. "MFA. Strong passwords - all that. But what we did is encrypt all respondents data with a self-selected key. This key is not stored anywhere online. We encourage users to write it down and keep it somewhere safe. When they log in, they have to enter that key into the app. Otherwise, the data will be useless."

With this additional step, even if an attacker somehow penetrated Gunner's Secure architecture, without each individual user's key (which only the user would know), the data would be encrypted and essentially worthless.

"There are two places we are storing data - Amazon S3 and the MongoDB database," Swann said. "Both of those are encrypted at REST using internal mechanisms. All data is encrypted in flight using SSL. But then on top of all that, we have another layer of encryption that is user provided. With that, only they can read their data. We can't even read the data if we wanted to."

Management

What was the project management approach to the project?

Nothing out of the ordinary here.

"Yep. Boring but effective," project manager, Lisa Brignac, said. "Agile Scrum was what we went with."

Specifically, the team kicked off the project with two Research Sprints, followed by feature sprints and Bug Sprints when necessary.

Each sprint, or iteration, was a week long and was capped off with an IPM that included a project demonstration.

"That's what blew Doug away," Brignac said. "Each week he'd see the progression and could make suggestions and changes."

The demos also served as built-in documentation.

"That's the other thing; we record everything," Brignac said. "So demos are recorded. You can actually see the app work with a voiceover explaining what's going on. So training is very simple. All you have to do is watch the videos."

Architectural Description

What platform was built for this project?

As is usually the case, Gunner learned heavily on Amazon Web Services to build out the infrastructure for this project.

"We went with Serverless to build Microservices," Swann said. "This is pretty much the sliver bullet for architectures as it provides automated failover, backups and recoveries. It's Self-healing, redundant, highly available and scalable without lifting a finger."

Specifically, the team looked to AWS Amplify and AWS AppSync as a convenience to working with other services such as AWS Lambda (to execute code), Amazon API Gateway (to route API requests), Apollo (to interact with the GraphQL API), Amazon S3 (to store and retrieve files), Amazon SQS (for background processing and asynchronous notifications), Amazon SNS (to deliver SMS notifications), Amazon SES (to deliver email notifications), and Amazon Cognito (for user management, authentication and resource authorization).

Additionally, Gunner created three separate environments - development, staging and Production - to implement a Continuous Development, Git-based, DevOps framework leveraging technologies such as AWS CodeCommit, AWS CodeDeploy, AWS CodePipeline and AWS CodeBuild.

For Security and threat detection, Gunner leveraged Amazon Inspector, Amazon GuardDuty, AWS CloudTrail, Amazon CloudWatch and AWS Config.

Lessons

What did you learn from working on this project?

There was an important lesson Gunner learned from this project.

"For an app to be truly Secure, there needs to be multilayers of Security and one of those layers must be managed offline," Swann said.

Benefits

How did this project benefit the client?

The new digital format for the Notebook allowed Jewett to reach a new audience.

It also helped him cut costs dramatically as updates could be delivered without costly printing and shipping.

Why Gunner?

Why was Gunner selected for this project?

Jewett met Swann at a community function and after learning what Swann did, Jewett approached him with his idea for the Notebook.

"He was a bit like an abused puppy," Swann said. "And that's very typical in situations like this. He had taken his idea to a few other firms and was mortified by the quotes he received."

The two met to discuss some details and Jewett quickly rekindled his passion for the project.

"Our quote was about 10% of the other quotes he had gotten," Swann said. "The last thing we want to do is eat up all of an entrepreneur's budget before they get off the ground. That kills the project before it starts."

Related Projects

What are similar projects Gunner has worked on?

[object Object]

Code Name: Talk it Out

Both the Red Notebook Project and Talk it Out involved encryption and situations where Security and privacy were critical factors.

[object Object]

uConsent Mobile App

Much like Red Notebook Project, uConsent deals with highly sensitive data that absolutely must be kept Secure.

[object Object]

Posthost Progressive Web App

As a Progressive Web App, Posthost relied on many of the same implementation details as Red Notebook Project

Proficiencies

What tools, techniques and methodologies were used on this project?

[object Object]

Adobe Photoshop

Photoshop is Adobe's photo editing, image creation and graphic design software.

[object Object]

Agile

Agile software development refers to a group of software development methodologies based on iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams

[object Object]

Amazon API Gateway

Amazon API Gateway is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale.

[object Object]

Amazon CloudWatch

Monitor AWS resources and custom metrics generated by your applications and services

[object Object]

Amazon Cognito

Simple and Secure User Sign-Up, Sign-In, and Access Control

[object Object]

Amazon DynamoDB

DynamoDB is a nonrelational database for applications that need performance at any scale

[object Object]

Amazon Guard​Duty

Intelligent threat detection and continuous monitoring to protect your AWS accounts and workloads

[object Object]

Amazon Inspector

Automated security assessment service to help improve the security and compliance of applications deployed on AWS.

[object Object]

Amazon Route 53

Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service.

[object Object]

Amazon S3

Object storage built to store and retrieve any amount of data from anywhere

[object Object]

Amazon SES

Flexible, affordable, and highly-scalable email sending and receiving platform for businesses and developers

[object Object]

Amazon SNS

SNS is Pub/Sub messaging and mobile notifications for microservices, distributed systems, and serverless applications.

[object Object]

Amazon SQS

Fully managed message queues for microservices, distributed systems, and serverless applications

[object Object]

Apollo

Apollo binds data to your UI with the ultra-flexible, community-driven GraphQL client for React, JavaScript, and native platforms.

[object Object]

AWS Amplify

AWS Amplify is a toolchain which includes a robust feature set for simplifying mobile and web application development.

[object Object]

AWS AppSync

AWS AppSync automatically updates the data in web and mobile applications in real time, and updates data for offline users as soon as they reconnect.

[object Object]

AWS CloudTrail

Record AWS API calls for your account and have log files delivered to you

[object Object]

AWS CodeBuild

Build and test code with continuous scaling.

[object Object]

AWS CodeCommit

AWS CodeCommit is a fully-managed source control service that hosts secure Git-based repositories.

[object Object]

AWS CodeDeploy

Automate code deployments to maintain application uptime

[object Object]

AWS CodePipeline

Continuous delivery service for fast and reliable application updates

[object Object]

AWS Config

AWS Config is a service that enables developers to assess, audit and evaluate the configurations of their AWS resources.

[object Object]

AWS Lambda

AWS Lambda lets you run code without provisioning or managing servers.

[object Object]

AWS Shield

AWS Shield is Managed DDoS Protection for platforms and services built on AWS.

[object Object]

Babel

Babel is a compiler for writing next generation JavaScript

[object Object]

CSS3

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1

[object Object]

ES6

The next version of JavaScript

[object Object]

Git

Fast, scalable, distributed revision control system

[object Object]

Google Analytics

Google Analytics provides Enterprise-class web and mobile analytics.

[object Object]

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

[object Object]

HTML5

HTML5 is the 5th major revision of the core language of the World Wide Web

[object Object]

JavaScript

JavaScript is the world's most widespread programming language, powering the Internet.

[object Object]

Material Design

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

[object Object]

Material UI

Material UI is a CSS Framework and a Set of React Components that Implement Google's Material Design

[object Object]

Node.js

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications

[object Object]

React

React is a JavaScript library for building user interfaces.

[object Object]

RxJS

Reactive Extensions for JavaScript

S

Scrum

Scrum is a framework for project management that emphasizes teamwork, accountability and iterative progress toward a well-defined goal.

[object Object]

Serverless Framework

Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more

[object Object]

Webpack

Webpack is a module bundler

[object Object]

Yarn

Yarn is a package manager for JavaScript