DEV Community

Cover image for I built an open-source multi-platforms Note-taking app using Reactjs and Tauri
hudy9x
hudy9x

Posted on

I built an open-source multi-platforms Note-taking app using Reactjs and Tauri

Hi everyone, It's Hudy again.

Almost a month ago, I shared my open-source project manager with you guys. And it got a lot of attention from community. Besides, I received valuable comments from you all which helped me improve the app significantly.

So, today I'd love to share another open-source project with you: my Note-taking app that I built 2 years ago.

It's a simple note-taking app designed for personal use. You can find it's features here kompad.vercel.app. And here's the Github repository

Note: This app is open-source and free to use. However, it hasn't received updates in the past few months.

Preview

What frameworks did i use

Reactjs was still my favorite frontend framework that time. Additionally I discovered Tauri - an app construction toolkit that lets you build software for all major desktop operating system. This combination was fantastic for building multi-platform applications using Web technologies.

  • Tauri
  • Reactjs
  • Tiptap - a toolkit for building rich text WYSIWYG editors
  • Firebase (Authentication + Firestore + Storage)
  • Algolia - Full text search

Why Tauri, but Electronjs ?

Before I discovered Tauri, I tried Electron.js, which was incredibly easy to use and develop with. However, the resulting app file size was massive, exceeding 500mb. This significant size prompted me to explore alternatives, ultimately leading me to Tauri.

Tauri not only produces significantly smaller applications files compared to Electron.js (which relies on Node.js)but, it also leverages Rust for it's core functionality. After testing out, I was convinced it was the perfect choice for building this app.

What features did it have

I initially thought I only needed a few basic features, but that turned out I was wrong. As development progressed, I kept coming up with new features I wanted to add. Let's take a look at what I ended up building.

Markdown support and Search

As a developer, markdown was a must-have feature for the app. Next is the search function. Since Firestore doesn't support full-text search, I utilized Algolia for this functionality.

Markdown support

Code highlight

The second must-have feature was code highlighting. Because I take a lot of notes on code snippets, tutorials, and tech articles.

code highlight

Shortcuts

Being a Neovim user, I dislike using the mouse while writing or coding. Therefore, shortcuts were the third essential feature.

shortcuts

Folder, Tags and Favorites

This feature allows users to create folders, tags, and add notes to favorites for easy organization by category.

Folder tag and favorites

Word counting

Sometimes I want to know how many words I've written and how long it would take to read the note.
Word counting

Theme collection

A beautiful app motivates me to write. So, dark/light mode wasn't enough. It needed the ability to create and customize new themes.

Theme customization

Synced to Other devices

Of course, it also syncs updates to other devices. Updating a note on the Windows app will immediately sync it to the Web app, thanks to Firebase Firestore.

If it didn't sync, that would be a bug, not a feature! LOL

Support Windows, Linux, Macos, Web, PWA

I use Windows and macOS at the office and Linux at home. So, the app had to be multi-platform. It might sound strange, but in the office, I use macOS for coding and Windows for a local server. Sometimes I use it for coding, sometimes not.

Auto updates

Whenever the app has new updates, a small circle icon appears on the bottom left sidebar. You can then choose to update or not.

Auto updates

Basic Content Encryption

This feature encrypts your notes before saving them to the database. This makes your content difficult to read without your decryption code.

Cipher content

How to install

To run the app on your specific operating system, you'll need to install Tauri and build the app yourself. My friend has written a detailed installation guide here. Please let me know if you encounter any issues with the guide or if it seems outdated.

Important Note: Configuring authentication and rules for Firebase requires some prior experience with the platform.

Conclusion

Building open-source projects hones my coding and writing. I'm excited to share this app! Feedback on the app or installation guide is highly appreciated. Stay tuned for more projects coming soon!

Top comments (0)