For anyone who uses tampons, it can be difficult to keep track of how long it's been since you last changed one. I've personally experienced this tons, and commiserated with friends over how much of a pain it can be when you've got all of life to keep track of and you're out and about! Leaving a tampon in for longer than about 8 hours can cause Toxic Shock Syndrome (TSS), which can be potentially fatal. I was especially inspired by Lauren Wasser, a double-amputee who lost both her legs to TSS, and is now a model and spokesperson working to raise awareness for TSS caused by leaving a tampon in too long.
What it does
CSS not TSS (uploaded to the Fitbit app store under the name "TamponTimer" for searchability and clarity) is an app for the Fitbit Versa family of devices. You enter the current time when you insert a tampon, and then make use of the app throughout the day. It'll calculate how much time has passed since you inserted the tampon, and display this in the center of the screen. It'll also change color from green, to yellow, to orange, to red based on the amount of time that has passed relative to the recommended 8 hours, and display a simple prompt at the bottom of the screen letting you know what you should do at this time: not to worry, to plan ahead, or to change soon or NOW. The app is live on the Fitbit app store through the url cssnottss.tech - thanks domain.com!
How I built it
I first sketched out some wireframes for the app to hold the most useful information to the user, and went through a few iterations of UI to make it as minimalist as possible for use on the go. I did some research on the risks of tampon usage re: TSS, and the recommended windows of time to keep one in. I built the app using the Fitbit SDK, and drawing on the Fitbit Developer documentation to get started. The app was built in Node.js, and I made use of my knowledge of HTML + CSS as well to get the app's GUI up and running.
Challenges I ran into
The Fitbit SDK environment is quite unique, and there were a number of files to link together is very specific ways. I had to make the base js file for the app interlace with the GUI layout, a widgets link, some stylesheets, a companion js file, a few other dependencies, and a settings js file that drew on user settings. It was especially complex to link the user settings from outside the Fitbit environment to the app itself. I have never learned JS and this is really my second time building anything with it, so I had to do a lot of trial and error and learn as I went.
Accomplishments that I'm proud of
I worked on this app in just one day, and was proud to spend my Saturday getting something up and running that worked without bugs, handled errors, and is genuinely very useful to me. Fitbit's built-in user settings also don't allow time to be input, so I had to work around it by setting the user input to be a text field that I then parsed. I was proud that it worked perfectly! I built this app for my friends and myself, so I hope that many other outside my circle can genuinely find use in it - TSS is scary and we can help keep the risk from tampons specifically at bay.
What I learned
I feel like I took leaps and bounds in my comfort level with JS, and making several components work together. I also learned a lot about when using a physical Fitbit was best to test the app, and when it was better to use the emulator on desktop - I look forward to applying this to future hardware projects. Working with time in JS was a bit tricky, especially since the Fitbit environment doesn't allow you to important most external libraries. Finding workarounds to set and calculate time taught me a lot of pure JS that I will use going forward. Lastly, I learned that a small app on your wrist doesn't need to be complex to be valuable. It just needs to be dependable and accurate, and to be there when you need it.
What's next for CSS not TSS
I'm hoping to add more features while still keeping the actual UI simple! First, I'll be adding in compatibility with more families of Fitbit devices. I'd also like to add options to the user settings to set the absorbency level of the tampon in use, and to set the user's current flow level (low, medium, or high), and then automatically adjust the "safety windows" to display a more accurate suggestion of when the tampon should be changed.