Build a webapp with Sahha in 30 minutes - Learn to build with Sahha

In this tutorial we are going to stream data from the Sahha Demo/Dev mobile app to a Firebase backend using Sahha Webhooks, and display it on a webapp UI built with ShadCN and React Next.js.

To top it off, we will integrate OpenAI GPT to analyze the Sahha data to provide engagement recommendations based on user health/lifestyle!

Let’s get started!

Step 1. Setting up Sahha

You must create or sign-in to your Sahha account, then:

Make sure your are in Sahha Sandbox Environment on the Sahha Developer Dashboard
Download the Sahha Demo App
- Android: https://play.google.com/store/apps/details?id=com.sahha.android&hl=en_NZ
- iOS: https://apps.apple.com/nz/app/sahha/id1592241897
Sync the Sahha Demo App to your Sahha Developer Dashboard. Follow these steps.

Step 2. Create a backend and setup Sahha Webhooks.

Please follow this tutorial to setup Sahha with Firebase

Step 3. Create a dashboard UI using V0.

We have provided the code here with our complete UI and integration. Note, this project is made using Typescript.
- You will need to create a NextJS + ShadCn project by following this guide: https://ui.shadcn.com/docs/installation/next and all the project code to the page.tsx file
- You will need to also install additional ShadCn UI components using npm:
  - Cards: https://ui.shadcn.com/docs/components/card
  - Buttons: https://ui.shadcn.com/docs/components/button
  - Charts: https://ui.shadcn.com/docs/components/chart
- You will need to also install OpenAI in order for the GPT features to work.
  - Github: https://github.com/openai/openai-node
- And finally you need to install react-markdown to give the text generated by OpenAI a tiny bit of flair
  - Github: https://github.com/remarkjs/react-markdown
Sahha Webapp - Project Code

Alternatively, you can make your own dashboard, we used Vercel V0 / ShadCn for ours. Go to https://v0.dev/chat and generate a UI. This is the prompt we used to create the one in the project above was:

Create a very simple dashboard. The purpose of the dashboard is to display different health scores using Sahha.ai API in card UI form. There will then be a text box below the cards that shows an AI generated summery of the health information from Sahha.ai. In a seperate section below the summary a series of recommendations to engage the user (which the health data belongs to) based on their health information are displayed. These could be recommendations such as "User has poor readiness scores most days, so they are likely fatigued or tired in the morning - send them a notification later in the day

Step 4. Next up run npm run dev in your project and head to the localhost URL. You should see something similar to this:

Issues & Fixes:

No data is showing: If you have done everything correctly you might see your UI appear but perhaps no Sahha scores have been displayed. This could be because you will need to create an index in Firebase to handle the Firestore query in the code.
1. To easily create an index, right click on the webapp and goto inspect element, and click the console tab. There you will see an big error asking you to create an index. This error will contain a link to create the index. Click it, which will open Firebase where there is a simple UI to create the index - wait until it builds then refresh the webapp.
Expanding features of the demo-project
1. Allowing for more than one user’s data (more than one Sahha ExternalId)
2. Allowing for more queries
3. Creating more charts and visualisations.

Thank you, we hope you enjoy crafting webapps using Sahha data.