Encrypted Note Editor App In React Native

• EncryptedNotesApp

  1 27 7.8 TypeScript

  An encrypted notes app using TenTap and WatermelonDBCipher

  

I'm going to keep this guide straightforward and skip the super nitty-gritty details, because let’s face it, that would take all day and you want to see the juicy stuff. But don't worry, the entire app is open source. So, if you're curious about the bits and bobs of how everything works or want to dive deeper on your own, everything's available right here: https://github.com/10play/EncryptedNotesApp

• 10tap-editor

  1 239 9.7 TypeScript

  React Native Rich Text Editor

  

The Editor: The core of our app is the editor. We need an easy to use and robust rich text editor, that supports all of the features we want such as: headings, lists, placeholders, markdown, color, images, bold italic etc… For this we will use @10play/tentap-editor which is a rich text editor for react native based on Tiptap.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• WatermelonDB

  22 10,099 8.2 JavaScript

  🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️

  

Storing the notes: For storing the notes, we will use the amazing WatermelonDB package which is a popular sqlite wrapper for react-native. Instead of using the default package we will use a fork of this that uses sqlcipher instead of the regular sqlite, allowing us to encrypt the database by passing a secret key.

• WatermelonDBCipher

  1 2 3.8 C

  Watermelon db https://github.com/Nozbe/WatermelonDB for that uses SQLCipher

  

Storing the notes: For storing the notes, we will use the amazing WatermelonDB package which is a popular sqlite wrapper for react-native. Instead of using the default package we will use a fork of this that uses sqlcipher instead of the regular sqlite, allowing us to encrypt the database by passing a secret key.

• tiptap

  81 23,734 9.6 TypeScript

  The headless rich text editor framework for web artisans.

  

The Editor: The core of our app is the editor. We need an easy to use and robust rich text editor, that supports all of the features we want such as: headings, lists, placeholders, markdown, color, images, bold italic etc… For this we will use @10play/tentap-editor which is a rich text editor for react native based on Tiptap.

• react-native-keychain

  11 3,077 5.8 Java

  :key: Keychain Access for React Native

Storing the secret key: Since our db requires a key, it is important to store that key somewhere secure, so we will use react-native-keychain which will store our key securely.

• react-native-vision-camera

  26 6,482 9.8 TypeScript

  📸 A powerful, high-performance React Native Camera library.

Camera and Image Captioning: For taking pictures we will use react-native-vision-camera and for generating captions from the images, react-native-quick-tflite.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• react-native-fast-tflite

  1 522 8.8 C

  🔥 High-performance TensorFlow Lite library for React Native with GPU acceleration

Camera and Image Captioning: For taking pictures we will use react-native-vision-camera and for generating captions from the images, react-native-quick-tflite.

Suggest a related project