Paperclip Habit Tracker
Click here to see it live!Move paperclips from one jar to another with a simple click. You can visually track your improvement, and feeling rewarded will boost your efficiency. Seems too simple? Read this short story.
Background
"In 1993, a bank in Abbotsford, Canada, hired a twenty-three-year-old stockbroker named Trent Dyrsmid. Abbotsford was a relatively small suburb, tucked away in the shadow of nearby Vancouver, where most of the big business deals were being made. Given the location, and the fact that Dyrsmid was a rookie, nobody expected too much of him. But he made brisk progress thanks to a simple daily habit.
Dyrsmid began each morning with two jars on his desk. One was filled with 120 paper clips. The other was empty. As soon as he settled in each day, he would make a sales call. Immediately after, he would move one paper clip from the full jar to the empty jar, and the process would begin again. “Every morning I would start with 120 paper clips in one jar and I would keep dialing the phone until I had moved them all to the second jar,” he told me.
Within eighteen months, Dyrsmid was bringing in $5 million to the firm. By age twenty-four, he was making $75,000 per year—the equivalent of $125,000 today. Not long after, he landed a six-figure job with another company."
From "Atomic Habits" by James Clear
Challenges
First things first: generate N paperclips and rotate them randomly, while keeping them inside the jars, while keeping them responsive? It took a little work.
The idea struck me while reading the book. I finished the first version right after two days, working in the late evening. But making it visually appealing took work. Choosing the right color and right animations took more time than establishing the architecture.
Stack: React, Authentication, TailwindCSS