devmount / you-can-quit

A tool to support your progress in quitting whatever your bad habit is.

you-can-quit

This app is a tool to track your progress and encourage you on the way of quitting a bad habit. In a simple calendar view, you can set past days successful or failed. Based on this data, you can see encouraging stats about the number of days you succeeded in. Plus you can earn special achievements to reach different goals and keep you motivated on your way.

you-can-quit in short: UCQ, which also means (if you pronounce it): You Seek You. It's about you, making an impact on your own life.

This web app is based on Vue.js and Dexie.js.

ℹ This app values privacy. The data isn't meant to be synchronized between different devices, therefore local browser storage (IndexedDB) is used to store your data. However you have the possibility to export your data and import it on another browser or device.

Features

• 📅 Simple month and year views to see successful and failed days (and possible patterns) at one glance
• 📈 Stats section showing current and longest streak (successful days in a row) and the total number of successful days
• 🏆 Earn encouraging and funny achievements by reaching various goals, see progress of each achievement
• 🌐 UI supports multiple languages (currently only English and German)
• ⌨ Navigation with shortcuts:
  • ← / → to go to previous/next month
  • CTRL+← / CTRL+→ to go to previous/next year
  • R to reset to current month
• 💾 Provides administration section to backup, import or clear database
• ⚡ Made for offline usage, the data is stored only in your local browsers
• 🔒 Values privacy - no synchronisation of data around the web

Get started

Just head over to https://youcanqu.it and start your journey.

Build it yourself

1. Get all files

   git clone https://github.com/devmount/you-can-quit

2. Install all dependencies using Yarn

   cd you-can-quit
   yarn

3. Run the app by ...

   ... either run the you-can-quit/dist/index.html in your browser, e.g.

   firefox dist/index.html&

   ... or start the development server with hot reload at localhost:8080

   yarn serve

   ... or make the production build with minification yourself

   yarn build

Upgrade from 0.x to 1.x

The breaking change in version 1.x is, that the database was switched from Firebase to IndexedDB. This means, it's no longer compatible with your current data. If you rather want to migrate your data instead of starting from scratch (depends on how much days you already used this app), you can do the following:

1. Export your Firebase data into a local .json file in the following format:

   {
     "2019-02-02": 1,
     "2019-07-25": -1,
     "2019-01-10": -1,
     "2019-11-09": 1
   }

   The order of dates doesn't matter. If you have any problems to do so, please create an issue.

2. Update app files and dependencies

   cd you-can-quit
   git pull
   yarn

3. Run the app (see instructions above in the Get started section) and import this data file in the administration section at the bottom.

---

you-can-quit is completely free to use. If you enjoy it, please consider contributing, donating via Paypal or become a sponsor for further development. 💚

you-can-quit's Issues

markdown images

Add confirmation for dangerous actions

Is your feature request related to a problem? Please describe.
It's too easy to lose data.

Describe the solution you'd like
There should be a confirmation action to really overwrite or delete data.

Describe alternatives you've considered
None.

Additional context
None.

Migrate to Vite

Is your feature request related to a problem? Please describe.
Deployment is slow.

Describe the solution you'd like
Speed up deployment with Vitejs

Describe alternatives you've considered
None.

Additional context
devmount/third-stats#411

Add Italian translation

Hi,
I'd like to add the italian translation for this project.
I've seen the de.json translation in /src/locales, can I just add the it.json file there or is there more to do?

Vue3 support

Migrate to Vue3

Make it responsive

Currently the content has a fixed width and doesn't respond to different viewport sizes.
It would be nice, if the different parts (month, stats, achievements, legend and year) stack till a min-width is reached.

There's no way to switch language

Right now the app is shown in the same language as your browser (or in english if that language is not available).
There should be a language switcher (maybe in the footer?) to force a display language for those who wants to change it.

Animation/emphasis of the received achievement

Is your feature request related to a problem? Please describe.
I'm always frustrated when I got an achievement but cannot directly see, which one. So I have to go through all achievements to find, what I actually achieved.

Describe the solution you'd like
I would like to see an animation/emphasis of the achievement I received

Describe alternatives you've considered
An alternative solutions could be to show the name of the achievement in the notification.

Missing Favicon

Describe the bug
The favicon doesn't show up at all.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://youcanqu.it
2. Check browser tab icon
3. See only the Browsers default icon

Expected behavior
To see the favicon.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Latest Version

Additional context
None

Make sections fully responsive

Describe the bug
The sections month and year are not fully responsive and create scrollbars till a specific width.

To Reproduce
Steps to reproduce the behavior:

1. open web console and activate mobile view
2. resize the viewport
3. See the month section not scale properly

Expected behavior
Every section should be visible on all viewport widths

Visualization of progress

Visualization of progress
It would be nice, to see the progress of each achievement to see the impact of every single successful day.

Progressbar in each achievement badge
A possible solution would be, to have a progress bar at the bottom of each achievement badge. For one-time-achievements, the progressbar would be on 100%, for multi-achievements, the progressbar would indicate the percentage to gain the next one.

Alternative approach
Other approaches could be, to see the progress in the tooltip or the get a progress hint in the popup message, when marking a day successful.