Inspiration

During the 2018 Winter Break, I told my friend that if I ever failed to study my C++ textbook less than 10 hours in a day, I would pay him $50. I would record a timelapse of myself working over 2 weeks and log my daily schedule as proof of completion. The result? I succeeded in studying for a minimum of 10 hours a day (totalling up to 168 hours over the course of 2 weeks) and ended up learning much more computer science than what was taught in one semester at school.

During 2019, I figured that I needed to practice playing the piano more, so I set up a Beeminder goal that would charge me $5 every day I failed to play for 2 hours. It managed to keep me practicing the piano for longer than I had ever before in my life, lasting over a month.

During the summer of 2019, in an attempt to break out from my inner introvert, I told my friend that I would pay him $50 if I had failed to hug 20 people at Canada's Wonderland before I returned. I kept a phone in my pocket to record audio as proof of my efforts. (He ended up getting $50, for I weaseled out of the challenge until around the final two hours, during which time I had probably asked around 20 people but only received like 10 hugs. However, 10 hugs is more than plenty for a giant introvert like me.)

Perhaps you're cringing at the thought of doing something this embarrassing (I definitely am), but it still emphasizes the power of precommitments and accountability. It literally got me, an enormous introvert, to walk around the waterpark at Canada's Wonderland asking random strangers for a hug.

Accountability is an enormously powerful tool, but it isn't always easy to find somebody to keep you accountable. It's even harder to be kept accountable with the use of the Internet, where distractions thrive in every corner you turn, and where it's also quite difficult to set up a form of proof for those keeping you accountable that prevents you from cheating (besides self-morals, which can easily disintegrate under large consequences).

As a proof-of-concept, during the summer of 2019, I had tried to study a programming textbook, and I decided to keep myself accountable by streaming my workstation (my desk + my screen) on Twitch. Not only did this end up frying and breaking my phone (which was being used to stream), but the setup and maintenance of the stream often generated friction between me and my work. There had to be a way to keep myself accountable without this amount of hassle.

I recalled a strategy Thomas Frank once used to ensure that he woke up early in the mornings. He would schedule a tweet to be sent out every day at 6:10AM in the morning stating that the few people to reply to it or so would receive $5. I thought that automating accountability so that you can't really weasel out would be a great idea, except I wanted a tool that would extend accountability beyond just waking up in the mornings. Right now, I'm struggling with sticking to a schedule that balances my goals into timeboxed sessions; I sometimes don't feel like working on a particular task that my schedule asks from me, which without accountability, allows me to be led astray from my larger goal at hand. I would seriously benefit from a combination of accountability + precommitment where if others would catch me straying from my schedule, I would be punished with a consequence (such as paying whoever catches me $5, etc.)

That's where the idea for Paranoia comes in.

What it does

Paranoia comes in two parts, a desktop app and a web app. We'll refer to the person wishing to keep themselves accountable as the user, and the ones who would be keeping them accountable their friends.

The user downloads the desktop app and sets up a schedule using the in-app calendar that they hope to follow. It could be a one time "work period" from 5PM - 7PM on May 17th, or it could be a recurring task, such as studying vocabulary.com every morning from 6AM - 7AM on weekdays. In any case, during this time frame, Paranoia becomes "active," meaning that any of the user's friends could open the web app and press a button, which would send them a screenshot of the user's screen.

Yes, that's right. Paranoia's taking something that probably only malware would do and turning it into a near bullet-proof way to keep somebody accountable.

Evidently, there are a few concerns with this idea, and after thinking about it for some time, I believe that the following two requirements will help mitigate most, if not all of these concerns:

  • The user's screenshot will be heavily blurred so that you could only tell what they're doing (playing Minecraft vs. typing something up in Google Docs), but it would be impossible to read any text on their screen.
  • Paranoia will only be active (and permit screenshots) in the time frame the user defines.

There are a lot of different use cases for such an app. I know of many "Study with Me" videos online that motivate people to get working, for people tend to feel more motivated when they work alongside somebody else. Paranoia provides a real-time, more motivating alternative to a pre-recorded video. For example, if my friend and I wished to work on our ICS assignment for an hour, we could both set up Paranoia so that each others' real-time screen would be a click away, and thus whenever we would feel unmotivated, we would be able to check up on the other person and gain back motivation to continue working.

One of Paranoia's main purposes would be keeping the user accountable to avoid distractions. I had previously tried such a tactic with streaming, but the maintenance and effort it required simply didn't make it feasible and worth the accountability it provided. Paranoia serves as an alternative to streaming as an accountability tool, and instead it allows anybody to check up on what I'm doing whenever they want (emulating the real-time of a stream), while also not depleting my resources and making it as painless as possible for me to work.

Paranoia also provides benefits to the friend who's keeping the user accountable. For me, there are a lot of friends that I look up to, and having the ability to check up on what they're doing and seeing them hard at work would often give me a spark of motivation to continue pushing through whatever boring work I would be doing in the moment. By using Paranoia, not only are you keeping yourself accountable, but you're also helping motivate others who potentially are lacking motivation that might benefit from witnessing your productivity.

In the app, you have the option to preview your screenshots and adjust the blurring as you so desire. This way, you'll be aware of what your friends see. Paranoia puts full control into the user's hands of how they'd like to keep themselves accountable. It's up to the user to provide an appropriate precommitment to make sure that the accountability provided by Paranoia translates into productivity for them.

How I built it

I built the desktop app using Electron, which is a framework that allows people to build cross-platform desktop apps (for Windows, MacOS, and Linux) using simple web technologies such as HTML, CSS, and JavaScript. With a desktop app, it's easy to reliably take screenshots without forcing the user to deal with a multitude of permission issues.

I recently learned Vue, a JavaScript framework which in my opinion is much more clean and enjoyable to code in than React. This hackathon was the first time I decided to use Vue for my hack, and it's the first time where I've tried using it with Electron. Thankfully, there was already a simple integration between Electron and Vue on GitHub, so that made it easy to get up and running, which is especially important in a 24-hour hackathon like hths.hacks().

For the web app, I hosted a Node.js + Express app on Heroku using ordinary HTML, CSS, and JavaScript. I also took advantage of socket.io, which allowed for real-time communication between the server and the client.

In terms of the UI, I did take advantage of a pre-built calendar by Toast UI, which would've taken me ages to build on my own. For both the web and desktop app, I decided to use Bootstrap, because it provided me with UI Components that helped my app look at least a bit better than your default gray buttons. However, I mainly focused on functionality for this hackathon, so the UI was a secondary priority, but Bootstrap and Toast UI's calendar component still helped me make a presentable UI in a short amount of code and time.

Challenges I ran into

Socket.io can sometimes become a bit confusing and make a bit hard to track down bugs. There was also the problem of the Toast UI calendar continually being refreshed, but I couldn't find anything online that mentioned anything about it. After searching for a while, I decided to leave it as is, since it's not a complete app-breaking bug and it wouldn't hinder the demo too much.

Accomplishments that I'm proud of

This is the first hackathon project where I've used Electron and Vue, so this hack was a small step outside my comfort zone. I did have a decent amount of experience with Electron and Vue prior to this hackathon, but the projects I've used them for often took a lot longer to build, so I was a bit worried whether or not I would fit between the 24 hour time limit. However, it turns out that Electron is also suitable for when you need to build MVPs as quickly as possible, as well as with Vue, so it wasn't as big of a matter as I originally thought. I'm proud of challenging myself to use these less familiar technologies, and I don't regret choosing Vue over React :)

What I learned

I've learned that Vue is much easier and more reliable to program in, considering my past experiences with React. The only thing that's preventing me from switching in hackathon projects is the lack of popularity among hackers, meaning that my teammates are much less likely to know the framework than its more popular counterparts: React and Angular. However, Vue is definitely my goto framework if I ever decide to work solo again in the future. I've also (finally) learned how to pass values from the Express app to the views through EJS (although the way I did it seemed pretty hacky), which I've been wondering how to do for some time.

What's next for Paranoia

To me, I believe that Paranoia has great potential to become a powerful accountability tool. I'm hoping to integrate precommitment within the app, instead of making it an addition that the user ultimately has to add in order to maximize its effectiveness. For example, there's nothing stopping you from simply just deciding not to stick with your precommitment. In the future, I'm hoping to take some ideas from Spar, a challenge app where users pool in money to maintain a challenge for some time (e.g. biking 10 miles a day) and submit proof at the end of each day. Those who break the streak lose the challenge and their money, and the leftover money at the end of the challenge gets split between those who remain. With Paranoia, proof now becomes less of a problem when it comes to being productive and staying away from distractions.

I've also had friends ask about the possibility that a user could be distracted on their phone or on another device. In the future, I hope to add a "idle" detector that can detect when there hasn't been motion for a suspicous amount of time. Ultimately though, Paranoia is for people that are dedicated to becoming more productive. The deliberate use of Paranoia and the sharing of the link to friends would only make cheating the system feel more guilty, contrary to something like Beeminder where it's a machine on the other end of the deal. In my case (as you can see during the demo clip), I have Screen Time enabled on my iPhone as well as Freedom, two apps which reliably block distractions on my phone. Perhaps in the future, I could make a Paranoia for Android? (But definitely not iOS; there's no way Apple allows apps like Paranoia setting around on iOS devices.)

Note

I did come up with the idea for Paranoia before the hackathon started, but all the code that you see in the GitHub repo was written during this hackathon. I had previously built a somewhat working prototype, but never really got around to finishing it. As well, I hadn't used a JavaScript framework for the old app, which made the code next to unmaintainable. In other words, for this hack, I did not reuse, copy + paste, or even refer to any of the previous code during this hackathon and I can guarantee that all the programming work on Paranoia was done during the time frame of this hackathon (it should be quite evident if you compared my old code side-by-side with the new code).

Should you have any questions, please don't hesitate to message me. You can visit the old repositories of the app and server, and verify that the code is much different than it is in my hackathon project's repository.

Links

Desktop (Electron) App GitHub Repo: https://github.com/leonzalion/ParanoiaApp

Node Server GitHub Repo: https://github.com/leonzalion/ParanoiaServer

Link to Server: https://paranoia-app.herokuapp.com

Share this project:

Updates