You Can Quit! …with the help of Vue and Dexie

I humbly assume that every single one of us has a bad habit we want to get rid of. At least I have those habits 😅. Be it committing untested code, coding without proper documentation, just copying-and-pasting code or not even programming or computer related things like spending too less time with family or friends, blaming others for any faults instead of taking responsibility or eating too many candies 🍭🤷🏻‍♂️.

Back in July 2018 I came to a point where I really got frustrated about my inability to listen to my wife. I mean real listening. Listening without instantly forgetting what she said in the next minutes. Listening while giving her full attention. Though it’s difficult being interrupted when you’re really into something like programming, I could at least properly communicate that now is not a good time to talk instead of pretending to listen and not knowing what she said as soon as she was leaving the room. This often resulted in discussions like “I thought we talked about that” or “I asked you to do that and you didn’t”. I didn’t liked that and knew, I had to do something about it.

Like a good programmer I first analyzed the problem. The problem was, that it just happened — it became one of my habits and habits are typically difficult to break, because it’s too easy to do things as always and I’m not aware of it being a bad thing in that situation. So my problem was summarized by this one question: How to get that awareness to actually improve myself? My programmer mind instantly knew the answer: Build a tool!

That is how you-can-quit was born. A tool that aims to help the user not doing something anymore on a daily basis, by tracking the progress, provide encouraging notifications, funny achievements and the possibility for the user to recognize patterns.

How it looks

I host this app at youcanqu.it. Just drop by and play around, test or use it as you like. I decided to do the layout and styling myself and not use a CSS Framework. The following are the main sections of the app.

Month view and actual input area

The month view shows the current or selected month. When hovering over a day in the past, some buttons to set the state of that day appear. You can use arrow keys to navigate between different months.

Stats

Currently the stats are just showing the current streak (number of successful days in a row until today), the longest streak and the total number of successful days.

Achievements

I thought it would be much more fun and a lot more effective to reach various small goals on the way. So I created 18 achievements where most of them can be rewarded multiple times. The white bar at the bottom of each achievement indicates its progress. More achievements are planned, as well as a score-of-success, that’s calculated based on streaks and weighted achievements score.

Year view

Here you have the possibility to find possible patterns over a longer time interval. Maybe you are more prone to failure on Mondays or a certain season in the year. You can navigate between years with STRG + arrow keys.

Administration

You can export, import or delete your data here.

How it works

It’s as simple as setting the past day(s) successful or failed, depending on whether you have reached your goal on that day or not. To do that, just move the cursor over one of the past days in the monthly overview and click the left or right button that appear (You can also set that day back to undecided, if you want). You can do that e.g. everyday in the morning for the past day. With every successful day, you will see your stats and achievements increase.

Under the hood, it’s a Vue.js SPA using Dexie.js to store the data via your browsers Indexed Database API. That means no data is leaving your machine or synchronized with a server. Privacy ✅!

If you want to know more details, check out the project repository.

You are very welcome to support this Github project by staring it ⭐, creating issues 🐛 or pull request 🏗. Maybe you have ideas for additional achievements or you want to translate this tool into your own language? See these guidelines if you’d like to contribute 💚

Final words

I really hope this project is as useful for some of you as it is for myself. I’m still in the process of improving my communication skills, but it helped me to literally see my progress and success. I always love to build something while knowing, that people are actually using it and it really helps them! That’s what Open Source is about, isn’t it?

Don’t hesitate to share your story of a bad habit in the comments. I’m sure we can all help each other to become a little bit better every day!

DEV-community-🤗! Keep it up, you are awesome.

Published: 27th April 2020 on dev.to