Say hello to sturmglas (a hackathon project)
Tags: javascript, iot, nextjs, mentalhealth
Published: 2021-09-01 07:50:59

## Introducing sturmglas - don't weather your emotions alone.

Hello everyone! With a few hours to spare, I am happy to share my contribution to the [Auth0/Hashnode](https://townhall.hashnode.com/auth0-hackathon) hackathon!

What a fun experience it has been in the last 25 days! I learned more about Next.js, IoT, and authentication/authorization.



## tl;dr

Here are the links!

- [sturmglas](https://sturmglas.com)
- [Sturmglas repository](https://github.com/winnekes/sturmglas) 

But keep reading to find out what these cuties are:

![Imgur](https://i.imgur.com/jDi0Qay.gif)

## Inspiration 🌟

Before [switching careers](https://winnekes.hashnode.dev/from-scrubs-to-slacks) I was a nurse and specialised in cardiology and psychiatry. 

Mental health is such an important part of our life and wellbeing, but often neglected. My nephew for example can never express his feelings without the help of his toys.

And maybe you just don't want to talk about how you feel or why you feel a certain way but still want the people around you to know. 

Introducing [sturmglas](https://winnekes.hashnode.dev/from-scrubs-to-slacks) and Companions.

## Video demos 📼

**Companion demo**

%[https://youtu.be/8u_i7pVv38M]


**Desktop (app only, without companion)**

%[https://youtu.be/lWHwMlVTJ20]


Here's a picture with all the Companions! Happy to share more about them. You can find the STL files (the 3d printer files) in the repo as well. 
The following companions exist, in emoji form: 🐰🦊​ 🐙🍀☁️

![Imgur](https://i.imgur.com/sH7Lk1o.jpg)

## Features 


- Add, edit, delete your mood!

![Imgur](https://i.imgur.com/ekTyBcA.gif)

- Share your mood as downloadable png!

![Imgur](https://i.imgur.com/Uqt1oxk.jpg)
  
- View insights/stats about your moods!

![Imgur](https://i.imgur.com/hzhvb8a.gif)


## Tech stack 🖥️



We have the PWA (installable web application) and the IoT companions.

I always wanted to see how I can build a complete server on Next.js and figured out to use GraphQL instead of REST on the backend. type-graphql and TypeORM were a bit of a pain to setup, certain Babel configurations where necessary, but I managed in the end.

**For the PWA (100% TypeScript):**

- Nextjs
- Auth0
- Chakra UI
- Chartjs
- Web Bluetooth API
- GraphQL (server and client)
- TypeORM
- PostgreSQL database (hosted on [supabase.io](https://supabase.io))

**For the IoT companions**:

- TTGO T-Display
- Pizo Buzzer
- LiPo battery (3.7v battery)
- 3d-printed case, designed using OpenSCAD and printed on an Ender 3 in different filaments.

Here I used C++ to setup the Bluetooth connection, the buzzer sounds (when connecting and disconnecting) and the way of rendering the cute faces. :blush: 
My boyfriend is a wizard and (patiently) taught me a lot about hardware, batteries, memoryd buffer.

## What is the one thing I would change? 😢

Looking back I believe I should have gone the native way.

PWA are awesome and I believe they are the future! But they are far from a native app can deliver to the user. The Web Bluetooth API for example is still quite experimental and in early stages despite its age.

I already see limitations - for example when I connect to a Companion my phone does not indicate that I am connected to a Bluetooth device. Further more I cannot be connected in the background - only while the web app is in the foreground can I interact with the Companion. 

We still can't automatically connect to a Bluetooth device after sucessful pairing - right now the user has to connect to their Companion every time they come back to the app. It is of course a security features so that malicious websites cannot hack into your devices.

Say hello to refactoring!

## What's coming next? ⌛

As mentioned, I will most likely refactor the application to React Native after research Bluetooth more. I want to more use of Auth0's features, especially role-based access.

Some of the features to come are:

- **The Companion**
  - The Companion is nothing more than a mirror of your emotions at the moment. The idea is that of a Tamagotchi in the future; you take care of the mental health of your Companion :muscle:
- **Habits**
  - [sturmglas](https://sturmglas.com) wants to help you build better habits and in turn improve your mental health and wellbeing. Say you want to stop smoking? Drink more water? [sturmglas](https://sturmglas.com) and your companion will help you stay on track.
- **Mood prediction**
  - So far I'm only collecting data and displaying it back to the user. I want to notice trends, suggest targeted challenges/habits/meditation that might help you feel better
- **Bonfires**
  - Start or join groups to discuss mental health, tips and tricks around those topics, share healthy habits and goals
- **For children**
  - Teaching children how to deal with feelings (especially negative ones) is not easy. With the help of the Companion they can express their emotions in a safe way
  - A dashboard for parents if users are underage

## "How do I get a Companion?" 🐰🦊​ 🐙🍀☁️

![Imgur](https://i.imgur.com/jDi0Qay.gif)

The little companions were completely manufactured by me. I listed the resources used, the STL files to print, and the code is available in the [repository](https://github.com/winnekes/sturmglas/iot). 

If you want you could build your very own!

That being said, should this idea have traction and people are requesting a companion I'll do my best to get that production line started for an initial alpha stage of [sturmglas](https://sturmglas.com).

Please subscribe to my newsletter on [Hashnode](https://winnekes.hashnode.dev). if you haven't done so already, feel free to leave a comment if you want to receive updates - I will soon embed a dedicated newsletter on [sturmglas](https://sturmglas.com).

Please try out the app and give me your honest feedback!