Recording the Journey — Project 1

Oh what a journey!

For this project I built a simple reading tracker and note taking app. The need for this app arose out of my own notetaking and logging needs when reading books for a book club I am a part of.

I like to take notes about the book as I am reading it, however all the existing solutions I have found are not well designed for books. This app aims to fix that!

I had a lot of fun creating this app and I hope you enjoy it.

View it Live | Source Code

Design Stage

With almost any project a lot of serious design work has to happen before you can even start thinking about writing a single line of code. This project was no exception!

I broke my design process for this project into a few non-linear steps.

Interviews

An important part of solving any problem is making sure you completely understand it and what makes the current solutions insufficient.

This is where conducting interviews is really beneficial.

For this project I conducted a couple interviews, one more formal, the other in a more informal group discussion.

From those discussions I came away with a list of things people liked and disliked about their current reading tracking solutions.

NOTE: The following table combines feedback from multiple different sources discussing features of several different solutions.

In addition to understanding what people liked and disliked I wanted to get a good grasp of the motivations people had for tracking their reading.

Everyone I interviewed for this project was part of their own book clubs. As such, notetaking for discussions was the primary motivating factor for tracking their reading.

Some also liked to have a way to keep track of what books they had read and what they thought about them.

After all my discussions and interviews I felt I finally had enough of an understanding of what was important to people in a reading tracking application to begin sketching some initial designs.

Sketching

Especially after conducting my interviews I had a lot of different ideas when it came to the potential layout for my app. By sketching these different ideas I was able to get a much better idea of how each potential layout would look and work without having to go through the whole process of designing and developing each one.

I like the look and feel of physical books and bookshelves so I tried a few designs that really leaned into that.

Another design was essentially a physical notebook where each page contained scrollable notes about a specific book.

Other designs leaned less heavily on skeuomorphic elements.

For example this design was heavily inspired by social media feeds.

I had a few more completely different designs and design variations that combined different elements in a number of different ways, but the design I ultimately settled on was this one.

I liked this design for a few reasons. Not only did I feel like it was the most user friendly with a clear bookshelf on the left and notes panel on the right, but it also let me combine some minimal skeuomorphic elements like physical looking books, with a more modern bookshelf and editor layout.

Since I was happy with this design I copied the concept over to Figma to create a more formal looking wireframe and layout to play around with.

Once I was in Figma I was able to start choosing colors and styles.

While websites are typically the domain of clean minimal sans-serif fonts, books and printed material still overwhelmingly use serif fonts. Since I was looking to create a bookish feel I knew very early on that I wanted to use a nice serif font.

Although you have a couple options, when it comes to serif fonts it is hard to go wrong when choosing a Garamond typeface. I settled on EB Garamond in part because it is freely available on Google Fonts, but also because it’s a variable font that supports all the bells and whistles like ligatures and italics.

In a similar vein I knew that I wanted my colors to feel natural and book inspired. I took inspiration from a green themed color palette I found online (pictured above) and combined some of those colors with the light cream of faded book pages and a classic dark gray and white to form my final color palette.

Finally, I took all of that and expanded my initial sketch and wireframe into a full design prototype in Figma.

Feedback

Aside from conducting initial interviews it is important to get feedback early and often to ensure you don’t sink too much time and/or resources into something the end user doesn’t want.

I certainly followed at least the first part of that mantra. I got feedback on some of my early designs and sketches but did not get as much feedback later in the process.

Most of the feedback I got was pretty positive, however some of the early feedback led me to realize I had overlooked the goal tracking elements of the project in my initial designs and sketches.

This feedback is another reason I ended up selecting the design concept I did, since not only did it give me a place to put the notes about each book, but also a convenient place to include this overlooked goal tracking functionality.

The App

The app itself is divided into two main panels. On the left is the persistent bookshelf. This shows all the books that you have added and gives you the opportunity to add and switch between books.

On the right is the reading log. This includes information about progress towards your yearly reading goal as well as a graph showing all the reading you have logged.

The reading goal widget shows the number of books you have read as well as your goal for the year. This goal can be edited by clicking the “Edit goal” link.

The reading streak widget shows all the reading you have logged and gives you an update on your streak. You can add to your log by either clicking the “Add to log” link to add reading to the current day, or click on any of the days in the chart to add or edit reading for that day.

Back on the left side, the bookshelf pane the “Add to log” or streak button also allows you to add reading to your log for the day.

To add a new book to your bookshelf you use the “Add a book” button. This pulls up a modal in which you can enter the book details.

You can hit “Cancel” or the close icon to close without saving or click “Save book” to finish adding your new book to the bookshelf.

You should now see your newly added book on your bookshelf! If you click on it, or any of your other books it will pull up a notes panel on the right in place of your reading log. This is where you can write away! Take any notes you want here. This editor is intentionally rather unstructured to allow you the most freedom to write your notes the way you want them.

The editor supports many markdown features but also includes a WYSIWYG editor toolbar at the bottom for those unfamiliar with markdown.

Additionally on the left side of the toolbar you will find the bookmark and finished reading options. You can use the bookmark option to keep track of what page you are on in the book and when you are finished click the checkmark button and it will add it to your yearly reading goal.

You can switch between books and all your data will be saved.

BONUS: I actually implemented a dark mode, although I ran out of time to add a toggle for it. Instead if you switch your computer’s preferred color scheme it will update the UI to match.

Here is a brief video demoing the features.

Implementation Details

Especially towards the beginning I organized all the code rather well. I tried to use best coding practices and make everything that could be a well designed reusable component. You can see this most easily with the Button component as it is the first one I started.

As I added more features though and got closer to the deadline I started to become a little less organized and started throwing most of my code in the main +page.svelte file.

This touches a little on the future work I would like to do, but if I had more time I would have done a lot more code cleanup and utilizing routing. I think both the reading log panel and the notes panel should have been their own separate components/pages and the bookshelf a part of the layout. I had originally started the project using SvelteKit because I intended to do a lot more pagination/routing but I simply ran out of time.

One of the features I am most proud of is the reading streak graph. I spent a lot of time (probably too much) implementing it as a custom graph so that I could get it to work and look exactly how I wanted it to. I think it turned out pretty well but in the future I would probably just use an existing graphing library to save on time.

Another cool feature was the notes editor. I knew from the start I wanted something vaguely inspired by Notion and Google Docs, two of the solutions people had said they liked using during my interviews. They liked the free-form nature of being able to easily type and format as they so desired instead of being forced to use some popup or form.

The easy way for me to implement this would have been to just give them a textarea and call it a day, but if I did that I felt a key component of the experience would have been missing — the formatting.

I wanted it to be fully customizable and match my theme correctly, however creating an editor like this from scratch is a lot of work and would likely take a lot longer than I have to get a probably only mediocre final product.

What I ended up using is a library called Tiptap. Tiptap is a headless rich text editor built on ProseMirror. Essentially what that means is that Tiptap provides the place to type and you use the editor’s API to create all your own buttons, styles, and other functionality.

This vastly simplified the complexity of implementing such a feature and is what made it anywhere close to feasible to implement on this timeline.

Use of AI

I didn’t use much AI for this project. Every now and then when I had a bug or problem that MDN or StackOverflow couldn’t answer I would ask Google Gemini and it would sometimes give a useful answer.

I did experiment with using AI to write a function to generate random mock data for the reading log and it worked pretty well for that (although I later changed the data structure I was using to store that data and had to make a bunch of changes to it).

I have never found AI to be particularly adept at designing visual things and since this is ultimately a design project I did not find huge use for it.

Future Work

Other than the obvious, I would love to actually hook this app up to a database of some kind, there are a few things I didn’t have time to get to that I would love to do if I had more time.

• I would love to make it more responsive/work on mobile.

  • It is responsive enough to work on most desktop/laptop screens and maybe a tablet, but there is still a lot of work I would need to do If I wanted to make it a good experience on more devices.

• There are a few minor bugs in both the UI and functionality that don’t seriously affect the user experience but bug me nonetheless.

• I mentioned it before, but some of the code is a mess. If I continued working on this project further I would have to clean some of that up.