Diary of Making Notas - First Week

Issue

It has been about a week since I revealed the "Making Notas Note-taking App" article to readers. During this time, I have been almost completely focused on this project. The initial vision of Notas has gradually become clear, and I think the process of building Notas is quite interesting. Therefore, it would be more useful to keep a diary of the development of my first utility app.

But before I start, I have a few things to say!

After just one or two posts on Facebook (previously, I rarely posted on Facebook, from personal pages to groups), it seems that many people are quite impatient with "long" articles. They call them long, but the length of these articles varies from around 1000 to less than 2000 words, which, in my opinion, is not really long. I secretly thought that maybe people are getting used to the trend of "fast" information, so for a long article, it can be overwhelming.

I believe that a successful article is one that convinces readers, regardless of its length, as long as they feel that the writer is presenting the issue seriously, it is a preliminary success. The purpose of a long article is to guide readers into the context, to help them understand the background, and therefore make it easier to persuade. But no matter what, if they don't read it, even if you force them, it's impossible. I hope readers understand what I'm saying, so that they can have an objective view of what I write.

Back to the issue!

Last week, I mainly focused on researching all the cases related to the logic of a note-taking app. When I started saying "I will make a note-taking app," it sounded easy (even I thought it was easy at that time), but the problem only arises when you actually start doing something.

Approach

Usually, before starting a project, everyone spends some time thinking about what they need to do, preparing what they need, and how to do it.

When making Notas, it was the same. As in the previous article, I identified the frameworks and libraries to use for the app. Many familiar names like Nuxt.js, Tailwind, and the DaisyUI library. These are tools that I am familiar with and can take advantage of to speed up the development process of Notas.

Because there are plans for open-source, spending time thinking about the structure is also an issue. In fact, no matter how good a structure is, it cannot be applied to all cases. I am thinking of a more suitable architecture, which means it is clear, easy to understand, and from there, it can speed up the process of contributing code or making changes if needed. The folder structure of Notas is divided according to the position of the components in the puzzle that makes up Notas.

In terms of architecture, it is divided into 3 main layers: GUI, Logic, and Adapter. GUI is the interface, Logic is a layer that processes data retrieved from the Adapter, and Adapter is the place to retrieve data. The Adapter can be implemented in any way you like, as long as it ensures enough data retrieval functions to work as a database for Notas.

The simplest Adapter I am building is the LocalStorage of the browser. Just storing and retrieving data in this local memory is enough to test if the Adapter works as intended. So far, I haven't encountered any issues with the Adapter, everything seems to be going in the right direction.

The text editor is perhaps the heart of Notas, as suggested by a friend on how to make the text editor more versatile, I designed it to separate the editor into components in Vue. This means you can easily add any text editor you like, as long as you implement all the necessary methods of a text editor. The two integrated names initially are Tiptap and SimpleMDE, in addition, there are many other potential names to integrate, such as CKEditor and TinyMCE.

First Week Results

Basically, the interface of the desktop version of Notas has been shaped. It consists of 3 columns corresponding to the folder list, note list, and note editor. The interface has not been refined much because the focus was on defining the functional buttons, and then it may need more advice from others regarding the UI/UX for Notas.

Currently, I am implementing the simplest Adapter to store data, which is the LocalStorage of the browser. The data is stored in JSON format for easy processing. This is also one of the Adapters that will appear in Notas, in addition, you can also implement your own Adapter to store data wherever you want. After that, I will write a few more Adapters for SQLite and Turso to synchronize notes online.

Notas can now add/edit/delete folders and add/edit/delete notes - the most basic features of a note-taking app. In addition, some other useful features such as pinning/unpinning notes to the top, setting/removing passwords for notes, and the Trash feature are also working (with some minor bugs - but not significant :D).

Challenges

There are quite a few challenges that I am facing.

First is time, an issue that cannot be cried over. I can only spend a few hours each evening to focus on Notas because the daytime is for my main job. But besides coding, there are many other tasks to do such as research, feature analysis, as well as coming up with solutions to immediate issues.

One of the issues I am currently facing is setting passwords for notes. Hmm... just let the user set a password and then use it to lock/unlock, isn't that easy? But remember, if anyone can read the code, not everyone will know how to handle passwords, right? So breaking the password at the client-side will be very easy. But don't worry, I have come up with a solution to increase the security of this part, just haven't had time to test it. Hopefully, next week I will have time to experiment.

Lastly is the synchronization issue. A note-taking app can become meaningless without this feature. LocalStorage can only store locally, so this Adapter definitely cannot be used for synchronization. Instead, I will take advantage of Turso to create an online database, the difficulty here is how to set up the connection configuration to Turso and how to make it easy for users to configure the Adapter.

Conclusion

With everything that has been achieved, Notas can now perform basic operations, alongside many challenges that are being identified. But I'm not a very serious person when it comes to setting goals, but rather have the tendency of "just do it, and it will be done!"