[Devember 2021] Dopamine detox app

Development Code
1

Build Status

[Devember 2021] Dopamine detox app

LIVE demo
GitHub repo

One-liner

Web app to aid in the process of weaning oneself off problematic, highly dopaminergic activities.

Problem

Many people who use a computer to do their job, find it difficult to resist distracting activities such as habitually checking Twitter or watching bozos on YouTube. :wink:

These time wasting habits are caused by a dysfunctional relationship with dopamine .

The distracting activities derive a more intense dopamine reward in the brain, causing the subject to feel more motivated to engage in these unproductive activities over their work.

Many believe that their problems are caused by a lack of motivation . This is WRONG . Those that feel internal resistance to doing the things they want to do are highly motivated . However, they are highly-motivated toward problematic activities, because of the greater dopaminergic reward that these activities elicit.

The more time spent doing problematic dopaminergic activities, the more the brain becomes flooded with dopamine. This de-sensitises the brains dopamine receptors, giving rise to a dependency on the problematic dopaminergic activities.

To fix the underlying excess dopamine issue requires going cold-turkey for at least two weeks. This gives the dopamine receptors in the brain time to adjust to normal sensitivity levels. This in-turn makes completing productive tasks more rewarding again.

Solution

A web app that teaches the user about the dopamine problem, then guides them through the dopamine detox process to maximise their chance of success.

Minimal viable product

10 minute time-tracker, with pre-defined positive and negative activities

  1. pre-defined activities
  2. start/stop time-tracker button
  3. timed pop-up prompt, with bell
  4. end of session summary

Complete product

New user

  1. brochure style homepage explaining dopamine detox and how the app helps
  2. call to action: OAuth sign up/sign in
  3. prompt user to think about life goals and write them down
  4. prompt user to think about time wasting activities not aligned to life goals
  5. prompt user to list positive activities
  6. prompt user to list negative activities
  7. list generalised tips for avoiding negative activities: increase resistance by removing bookmarks; logging out of social media accounts; etc.

Existing user

  1. login
  2. see personal overview screen showing progress, etc.
  3. user clicks prominent start time-tracking button to begin the time-tracker
  4. every 10 minutes, a prompt pops up requesting that the user records what activity they were doing for the past 10 minutes; they click a pre-defined activity sourced from setup stage
  5. process loops until user clicks stop time-tracking button
  6. forward to session summary screen

Research

Dopamine - wikipedia

Why You Fail When It Comes To Dopamine- youtube

4 Likes
2

Progress log

Week 1 - 22/11 > 28/11

Spec and Minimal Viable Product

  1. defined problem, proposed solution and app outline
  2. defined Minimal Viable Product spec
  3. worked through Nextjs quickstart guide (I’ve used React and Gatsby before, but not Next)
  4. played with tailwind css lib for the first time. liked it but took too long to implement
  5. switched to bootstrap css lib for quicker prototyping
  6. generated nextjs project boilerplate, including react-bootstrap lib
  7. created scratch page to play with generic bootstrap components
  8. started building 10-minute time tracker page and components utilising bootstrap styling
  9. read up on react hooks/useEffect in function based components (I’ve previously used class based components)
  10. added EventTimer to track passage of time (credit James Dietrich for react hooks solution)
  11. created mock API serving pre-defined positive and negative activities
  12. began logging activities in react state and outputting rows in table
  13. basic program loop now complete: click start tracking > time elapses > user prompted to select activity performed for the last x minutes > activity is logged > back to time elapses…

Next week

Show time breakdown page when stop tracking button has been clicked.

1 Like
3

Week 2 - 29/11 > 05/12

  1. code review and general tidy up
  2. minor bug fixes, such as no react key on component generation
  3. add loading spinner to tracker modal component
  4. added audible bell which sounds when tracker modal pops up
  5. attempted to implement custom useLocalStorage react hook, but struggled with bug which prevented compiling in the nextjs dev env because window was undefined. fixed by using useLocalStorage from react-use lib
  6. started using browser local storage to keep state persistent across reloads. will implement backend api later
  7. implemented more custom react hooks from react-use lib
  8. added sessions page with table summarising previous time-tracker sessions and giving score
  9. struggled with a firefox bug which caused the debugger to run immediately on opening dev tools on any site, with no way to turn it off! this was possibly caused by firefox silently updating in the background. however on restart the problem persisted. I had to disable several debugger about:config options that had somehow toggled from their default settings. very frustrating!

Next week

  1. add previous session detail page
  2. tidy the ui and add more useful information to aid the user
1 Like
4

Week 3 - 06/12 > 12/12

  1. reworked mock API structure
  2. implement getServerSideProps
  3. added basic SessionDetail page
  4. upgrade bootstrap from version 4 to 5. (I always forget to do an npm package update after using a create boilerplate script)
  5. show active link in navigation bar
  6. implement useBeforeUnload from react-use lib to prevent user navigating away from tracker page when tracker is active. does not prevent react navigation
  7. performed major refactor of tracker page state management using useReducer (similar to redux)
  8. fixed execution order bug where date object was expected but null received
  9. general code tidy up and var/func name changes to ensure code is self-documenting
  10. implemented moment lib to format and humanise dates and times
  11. added dev button to toggle timer interval duration from 3 seconds to production 10 minutes
  12. minimal viable product working and complete

session-detail
session-detail1278×613 11.7 KB

sessions
sessions1261×3620 191 KB

Next week

  1. perform minor tweaks and fix any major bugs
  2. add dummy jest test
  3. create docker build scripts
  4. implement travis-ci for automated builds
  5. make minimal viable product publicly accessible via docker and LINODE
5

Week 4 - 13/12 > 19/12

  1. added Dockerfiles for building frontend as Docker image
  2. installed Jest and setup dummy test
  3. added travis-ci config file and setup basic CD/CI
  4. frontend successfully builds on travis-ci and pushes the resulting docker image to docker-hub
  5. created new linode instance, used personal ansible scripts to install docker engine and setup the VPS to my personal preferences
  6. deployed my app docker image to: http://dopamine.edmunds.me/

Minimal viable product complete

1 Like