Logo

dev-resources.site

for different kinds of informations.

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

Published at
6/3/2024
Categories
react
tauri
Author
hudy9x
Categories
2 categories in total
react
open
tauri
open
Author
6 person written this
hudy9x
open
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!

tauri Article's
30 articles in total
Favicon
Tauri (2) β€” Quick Start with Tauri + React (Open Source)
Favicon
Tauri (4) - Get the theme switching function fixed
Favicon
Tauri (3) - Get the window configuration right first
Favicon
Rewind AI + Cursor AI = screenpipe: how we built a high performance Rust frame streaming API (OSS)
Favicon
Interview with Prabhu Kiran Konda, Creator of Snail AI!
Favicon
Interview with Klauss Andrei, Creator of FocusPocus.io!
Favicon
I love Rust/Tauri & Svelte
Favicon
Tauri 2.0 - Sqlite DB - React
Favicon
Interview with Eson (Seven), Creator of DocKit!
Favicon
EcoPaste -Open source clipboard management tool for MacOS and Windows platforms
Favicon
Interview with Hussein Hareb, Creator of Ξ—w-monitor!
Favicon
Interview with Krzysztof Andrelczyk, Tauri Developer and Creator of Twili Recipes
Favicon
A story about prototyping a 'Desktop Directory Structure Visualization Tool' with Tauri
Favicon
How I Built an Open Source App That Went Viral
Favicon
Interview with Victor Aremu, Creator of Menote, Usezap and more!
Favicon
Interview with Johans Justs Eris, Tauri Developer for Blenderbase at PhysicalAddons
Favicon
Leptos + Tauri Tutorial
Favicon
Tauri dialog instead of window.confirm
Favicon
[Rust]How to make string handing to frontend on tauri app
Favicon
[Rust]Making struct for getting directory path
Favicon
Interview with Siddharth, creator of Micro, Tauri plugin decorum, and more!
Favicon
Tauri v2: Dos nuevos conceptos que debes conocer antes de actualizar tus apps a la nueva versiΓ³n
Favicon
How to Reasonably Keep Your Tauri Commands Organized in Rust
Favicon
Tauri vs. Electron: A Technical Comparison
Favicon
Interview with Simon Hyll, a Tauri Maintainer
Favicon
Interview with Vitor Ayres, a Tauri Maintainer
Favicon
I built an open-source multi-platforms Note-taking app using Reactjs and Tauri
Favicon
Announcing DevTools Premium
Favicon
Interview with Kareem Ebrahim, creator of TableX
Favicon
My opinion on the Tauri framework

Featured ones: