Screw Notes - Lessons Learned Building a Server-less Productivity App

This post was originally published on Medium.com.

Over the years I’ve tried numerous “productivity” products to try to wrangle my workload. Evernote, OneNote, Pen + Paper, Notion.so, Word Documents, Excel Spreadsheets, Trello, etc.

The key that affects the success of me using those tools is the number of customers I’m working with at the time. If I work for just 1, or I’m on a single project for quite a while, then I find I don’t need these “productivity” tools, I can just track what needs to be done in my head or based on the emails in my inbox for the last few days. Once I add additional customers or projects, then I find I need to start writing down my To Dos or my stress levels will rise as I try to remember what each customer needs (the projects are rarely related). And it’s been a long time now since I’ve worked for just 1 customer or project.

The thing I finally settled on was Field Notes notebooks, because they have one feature rarely found in other notebooks — they fit easily in most pockets, not to mention too they have amazing cover designs. I again experimented with different approaches to tracking tasks, but after about a year I settled on what I call “Screw Notes”. Every time I need to do something, or I want to take note of something, I draw a little screw head at the start of it.

Once I start working on that item, I fill in half of the screw head. Once it’s done, I fill in the screw head. I used just empty circles first, but I kept forgetting to fill them in half way first, so the line through the middle is the reminder to track in-progress items.

I found though that the filled in screw head still wasn’t enough for me to disregard the item mentally — I now strike out the item contents too to force my brain forget about them.

This has worked for over a year, but the one thing that would keep happening is that I’d just forget my notebook. I’d walk between customer sites and leave it in my bag, I’d forget my pen, my pen would fall out of my pocket, or I’d leave the notebook at home and end up starting a new one to then have to manage two at the same time.

So, I turned my note taking process into a web app so it can follow me around.

Then, I realised this could be useful for others too, at least anyone who likes to take notes like I do.

Just like the screw heads on each item I write, it’s called Screw Notes. There are pages just like pages of a note book, and each page can have some number of items in it. They can be to-do items, but also just any sort of note.

Firebase

This app was built to operate with minimal expense, and to save me from needing to maintain any actual infrastructure, so I leveraged Firebase as the underlying platform. If you’ve never tried it I’d highly recommend it, as long as you’re happy to live within the Google ecosystem.

The project react-redux-firebase is heavenly to use with a functional/hooks-based React project, as it takes care of storing your firestore records within redux and manages all retrieval and updates without any code needing to be written.

Connecting firestore records to a component is trivial, and any changes are reflected to every listening client instantly:

With this library, from the client side every single item added or modified is instantly written into firestore.

Preventing users from seeing each other’s data is trivial with firestore rules, as it’s just a case of tracking the creating user’s ID for a record and setting the rules to compare that to the logged on user.

(in theory, someone could add a record with a different creatorId set, but the only thing that would achieve is making sure they can’t see the record themselves…)

Authentication is also handled by Firebase, through the lovely project firebase-web-react. In the end a single component is dropped in with some basic configuration defined for it to enable particular authentication providers:

Stripe Payments

I wasn’t sure how the world would receive an app like this, especially considering the Productivity app market is saturated (to put it mildly), but I realised if this app does actually get some number of active users per day it’ll start costing me real money. I’ve used Stripe in the past for other projects, but I wanted to keep this even simpler still so there’s no complicated workflows to build in the front end.

Stripe Checkout is the simple integration I needed. Simply adding the stripe.js import:

Making it available in the components and attaching the public key:

And then finally just calling the redirectToCheckout() function gives me a full payment service, without actually doing any of it myself on the front-end:

The hard part after a payment is made is knowing it was made — the tricky thing with Stripe Checkout is it’s a redirect out to Stripe, so your app is no longer running and listening to event changes. To overcome this, Stripe Hooks combined with Firebase Functions are the saviour. Simply setting Stripe to send the checkout.session.completed hook to a firebase function that I’ve created is the simplest solution:

The end result is a user subscribes successfully, the checkout data is sent to my function, my function interprets the contents of that and then creates a subscription record for the user correctly linked to their user record managed by Screw Notes. When the user is redirected back to Screw Notes by Stripe, just a few moments later the subscription info will flow down via the new firebase records that have been created, and thus open up more features for the user!

Should any of this fail I still have their customer record in Stripe, so I can still reconstruct the data they need to get the front-end to work correctly.

Mobile Friendly

After my co-founders suggestion from working with it on another project, I went with Material UI to be the UI framework for Screw Notes. I had tried it a long time ago, but it was far too immature — now it’s amazing. So much so I’m considering moving other projects I’ve built over to it.

I tried to make every page of the app Mobile friendly, which I think I’ve mostly achieved, but I have noticed some of the visual feedback isn’t good enough for the slower phone browsers, so there’s some work to do still there.

What’s Next?

This app currently operates on the assumption that you’ve always got an internet connection, which is a bad assumption to make. I’ll look at handling offline use next, and I also want to provide more options for authentication instead of just Google & Email + Password.

Conclusion

This note taking approach is the only way I’ve truly found my head can be cleared during the day and I that can switch context without anxiety. I hope Screw Notes can give that same clarity to you too. Try it out now, it’s free to use for up to 3 pages, and if you have any questions or ideas just comment below!

Timothy Quinn

Timothy Quinn

Managing Director of Congruent Labs