Jotter

Overview and objective

Jotter is a project I built for my own use: to track the books I read and the notes I write while reading. It eventually turned into a product, one that I launched and intend to work on, with the possibility of adopting the SaaS (software as service) model as server costs increase. It was my first public project that had been built with the MERN stack.

Where It Began

I started my co-op at SFU OLC in January and had been working for a few months, which meant I had a more stable schedule compared to my time at the university and enough time to catch up to my readings. To track my progress, I use Goodreads; however, I am in the habit of taking notes while reading, which is not an enjoyable task to do on this site. After a lot of searching on the web, I realized this is a good opportunity to create a tool that I would be interested to use. I started the project in May, working on it 1-2 times a week after my work and sometimes during weekends, aiming to reach MVP (minimum viable product) by mid-August.

Designing the experience

Since I had been using GatsbyJS for a while, I chose to use it for building the app. GatsbyJS uses pages (similar to a view) which can have their own unique URLs. This allowed me to quickly create a user flow using Figma and think about the overall structure of the application.

Development

Even though I had experience with SQL, I used this opportunity to learn using NoSQL databases, choosing MongoDB Realm. It allowed to use a serverless model which in this case meant offloading the responsibility for infrastructure management. It's a new service so I ended up reading a lot of documentation and entering a more or less uncharted territory.

Since I decided to turn Jotter into a product, I also used Auth0 to handle user authentication and management. I am using the starter plan which doesn't allow a seamless connection to external databases, so I had to write a custom triggers to connect Auth0 to MongoDB. This involved creating a process in Auth0's pipeline, from the moment users connect through Auth0 to the end of their journey.

In order to allow note-taking, I used Draft.js, which ended up being more customizable than other alternatives, and certainly more complex. I spent some time on the editor, thinking about the process, handling states and performance. I found myself looking at the requirements and asking questions:

1. Should the editor fetch the newest version of the note every time the user refreshes?
2. What is the best way to differentiate between "new note" and "existing note" states?
3. How to handle multiple editing instances of the same note?
4. And other questions on state management and edge cases.

Final thoughts and moving forward

While working on Jotter, a lot of concepts started clicking. It allowed me to solidify my React knowledge and learn even more, such as creating custom hooks and integrating MongoDB into it. This is where I began to truly understand the declarative nature of React as well as state management, thanks to which I ended up iterating on my components and reflect on my app's architecture. It still needs a lot of work so I aim to re-write and improve/add new features Jotter whenever I have enough time.