DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Say hello to sturmglas (a hackathon project)
Simona Winnekes
Simona Winnekes

Posted on • Originally published at winnekes.hashnode.dev

Say hello to sturmglas (a hackathon project)

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 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!

But keep reading to find out what these cuties are:

Imgur

Inspiration 🌟

Before switching careers 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 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

Features

  • Add, edit, delete your mood!

Imgur

  • Share your mood as downloadable png!

Imgur

  • View insights/stats about your moods!

Imgur

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)

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. 😊
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 πŸ’ͺ
  • Habits
    • sturmglas 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 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

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.

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.

Please subscribe to my newsletter on Hashnode. 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.

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

Top comments (1)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.