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.
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.
Code highlight
The second must-have feature was code highlighting. Because I take a lot of notes on code snippets, tutorials, and tech articles.
Shortcuts
Being a Neovim user, I dislike using the mouse while writing or coding. Therefore, shortcuts were the third essential feature.
Folder, Tags and Favorites
This feature allows users to create folders, tags, and add notes to favorites for easy organization by category.
Word counting
Sometimes I want to know how many words I've written and how long it would take to read the note.
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.
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.
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.
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)