"Around 1 in 4 adults in the UK have high blood pressure, although many will not realise it. High blood pressure, or hypertension, rarely has noticeable symptoms. But if untreated, it increases your risk of serious problems such as heart attacks and strokes. The only way to find out if your blood pressure is high is to have your blood pressure checked." NHS 2023

Video Walkthrough

AWS Amplify Hackathon

My Dad has high blood pressure (70+ Years old) and had Type 2 Diabetes. By going to the gym and changing his eating habits, he was able to reverse his type 2 diabetes. Monitoring his blood pressure along the way helped to diagnose if we were on the right track. I hope this tool/blog genuinely helps you or someone connected to you who needs this. Just for information, this is how we used to monitor and track blood pressure:

My Dad would write the results tiny so that we could fit them on one page to compare today with the past. Not a great way to record blood pressure readings over time. His doctor asked for an average of over one week. That may prove easier said than done via pen and paper...

I also checked via the app store for blood pressure trackers. The free versions are plagued with Adverts and forcing you to upgrade to premium. Also, many blood pressure trackers need you to buy the more expensive blood pressure machines that come with a propriety app to monitor and track. Trustpilot has interesting feedback on why it doesn't work long term 😉 It would be more beneficial to build something Free and usable (without annoying adverts) that works with ANY blood pressure machine. At the same time, this project will most likely die if I don't find paying customers.

So... I saw the #AWSAmplifyHackathon is happening with Hashnode and thought... Let's do two things at once. Build something to continually help my dad monitor his blood pressure and provide a resource for others that might want the same service. Also, share and communicate this more widely to help others build with #AWSAmplify (Wait that's Four things... or maybe Five... 🤣)

I needed to turn an idea into something real and usable very quickly. You can check out the main AWS Amplify web page to read up more on the features and benefits. I hope you try it out! Even outside of this Hackathon, it's a great tool to use. Feel free to reach out to me directly in the comments here, on Twitter X or the AWS Amplify Discord.

If you want some guides on AWS Amplify, check out my previous blogs. One of them reached nearly 10k Readers 😳:

• A beginners guide to AWS Amplify Studio

Another one exploring some of the rich features of AWS Amplify:

• Build a serverless, real-time application with modern APIs: The GraphQL Real-time Race

The last one to share is one from The Matrix Fight Club. Great learnings on how to Solve Problems and Test New Ideas Fast with AWS Amplify:

• The Matrix with AWS Amplify (Blog Link)

OK! You should be good to go with resources/guides. The AWS Amplify beginners guide has SO Many resources to help you get going. Let's get into this project and build this Blood Pressure Monitor with AWS Amplify.

LET'S GO and Build!!! 🚀 The first thing I do with designing something and putting down my thoughts is a blank Piece of Paper and a Mechanical Pencil 😁 All this technology and the fastest way (I feel) to externalise ideas is this way (though do what you feel works best for you). Having fun and going direct to designing in Figma is a great option.

Here is my Picasso 🎨 piece of initial design, ideas and thoughts.

Initial Sketch / Design

Working Backwards

Sounds Amazonian 😉 I need speed and was debating whether to go with either Next.js or React. I am more familiar with Create React and I've been watching a lot of Amplify videos and the automated forms builder looks amazing! I would like to implement that new feature and less time spent learning a framework (ultimately Save Time).

I followed this Amplify Video below to do many of the tasks to build this blood pressure monitor. I think I've watched it at least 3 times. I would watch it to fast-track your development:

We've now got a rough sketch of what I would like to build. I did reflect on working backwards from stack to speed of development. It's time to move on to the Data Model. If you look at my art (sketch), I've already designed it - Date, Number (for Systolic, Diastolic and Pulse) readings.

I'll be using Amplify Studio (Visual Interface) to build out the Data Model:

I used the Amplify UI Library connected to Figma for the design:

Iteration 1 (It's Working! Testing Amplify UI):

Looks basic, though it's always a great feeling when you see it turn on and work for the first time. I used Amplify Hosting for Continous Integration and Continuous Deployment. Which enabled fast updates into local and live production environments.

Iteration 2 (Add Functionality, Start Design and Test on Mobile):

We are using a special combo of Amplify UI and Tailwind. Doing this mix helps to create reusable themeable components whilst remaining responsive to different screen sizes and devices. Also being already familiar with using Tailwind on other projects helps speed up development from design to production. The balance of learning new frameworks to reaching a Minimum Viable Product (MVP) is always in question 🤔

Iteration 3 (Add Graphs and Test Different Visualisations):

Visual and UI is very important in the design. The targeted audience needs easily readable, clear visuals to understand their readings. I opted to add and test Recharts with the app development.

Iteration 4 (Pick One Design and Improve UI):

I opted for bar chats based on user feedback. My dad needs to see the data BIG! I add touches of styling to give it a more engaging feel. Also, this helps those with colour blindness to distinguish between systolic, diastolic and pulse more easily (Dad feedback).

Figma

Throughout the iterations, I used Figma to Code (React) with reusable components with Amplify UI Kit. I've modified the Item Card to display the blood pressure readings. Whilst also using the ItemCardCollection template to create the grid template, enabling me to speed 🚀 up development. I tested many variations from 3, 4, and 6 in a row quickly. I showed it to a few test users and settled on 2 in a row for clarity and readability.

Analytics

I think after this blog goes live and it's published more widely. More users may start to use this app. Thinking backwards, It's good to track user engagement and retention. I added AWS Amplify Analytics to support the growth and development of this project. Having analytics integrated will help identify bottlenecks and areas to improve. I would recommend adding Analytics to your application.

useEffect(() => {
    Analytics.record({
      name: "App Opened",
    });
    Analytics.autoTrack("event", {
      enable: true,

      events: ["click"],

      selectorPrefix: "data-amplify-analytics-",

      provider: "AWSPinpoint",

      attributes: {
        attr: "attr",
      },
    });
  }, []);

Submitted Version

No doubt, I'll continue to work on this project after the hackathon. Here is the latest design/version before the end of the hackathon:

I hope you like the design and find it useful or an interesting read 😁 Please do take it for a test run!

Try it Out 🩸

Live Version is here: https://main.dh3lfluvxwzco.amplifyapp.com/

Git Repo is here: https://github.com/markramrattan/blood-pressure

#AWSAmplify and #AWSAmplifyHackathon

Conclusions

I think what's created is great learning 🤓. AWS Amplify has enabled me to build an MVP within the hackathon period and create something viable for my Dad and other users (who might find it useful). The improvements in AWS Amplify since my last blogs are amazing. The automated AWS Amplify form builders are a game changer. Also, I'm not used to blogging on Hashnode. This platform is built on AWS Amplify and I do like the wide views for blogging and the Grammarly integration (for British English).

If I can figure out a product-market fit for this blood pressure monitor, I'll be able to progress this idea. Though the more features you add, the more complexity you create. Take the following future improvements section with a questionable, does this add value... maybe... 🤔

Future Improvements

Providing value for users who would be willing to pay for Medical Help:

• 7 Day Average Blood Pressure result based on user data

• Create a membership subscription that shares Blood Pressure results with Medical Doctors and they call 📲 members to check in on readings and wellbeing

• Daily reminders to measure blood pressure & feedback (Notifications)

• Export and share results with others (inc Medical Doctors)

• NHS Data on recommendations and solutions for high blood pressure

• Offering one-to-one with Medical Doctors and integrating Stripe payments

• Video showing how to accurately use a blood pressure machine at home

• Visual Indicators of whether Good or Bad blood pressure results

Editor: Dr Shivani Kochhar