a11rew / noter

📝 Noter: An Android and iOS application for taking notes.

📝 Noter

Android and iOS application for taking notes.

Description

Users can create new notes, see all existing notes, open any note to view details as well as edit it, notes can be deleted and notes are automatically saved and persisted on change.

Built with React Native and unit tested with Jest and React Native Testing Library. Application-wide state is managed with MobX and locally persisted with the key-value store library AsyncStorage.

Application navigation is handled with React Navigation and vector icons provided by the NPM package, react-native-vector-icons.

Installation

Try Noter out on Android by installing the prebuilt APK available on the releases page.

Development

Setup a React Native development environment if you have not already.

Running on Android

Attach a device or start and emulator and run the following commands.

$ yarn install
$ yarn react-native start
$ yarn android

Running on iOS

With CocoaPods installed, run the following commands.

$ yarn install
$ cd ios
$ pod install
$ cd ..
$ yarn ios

Running tests

$ yarn install
$ yarn test

Project Structure

Overview

Noter is setup as a Typescript React Native project. Code style and quality are enforced by ESLint and Prettier.

Tests are run with Jest as the general test framework and React Native Testing library for React Native specific test utility functions.

MobX is used for managing application state. When users create notes, they are saved to the MobX store, serialized and persisted to device storage with AsyncStorage. On launch, these persisted notes are retrieved from device storage, deserialized and added to the MobX store for use in the application.

Edits to notes are automatically saved and persisted. Updates to the persisted store from note edits are batched by way of a debounce to minimize disk operations and prevent performance bottlenecking.

Testing

Components, screens and custom hooks in the application are unit tested with a variety of different test cases with the goal of ensuring high test coverage. Native modules as well as some external JavaScript dependencies are mocked, with said mocks in the src/mocks directory.

Test suites for each component, hook and screen are located in their respective directories with a .test.(js|ts(x?)) extension.

Tests are continuously run on pushes to the Noter repository with a CI Action to check for regressions.

Folders Description

Description of folders in the project directory

• android|ios/: Platform specific native code.
• src/assets: Binary files bundled alongside application like fonts and images.
• src/common: Extended JSX elements and constants.
• src/components: Reusable React UI components.
• src/hooks: Reusable functions for abstracting React component logic.
• src/mocks: Jest mocks for project dependencies.
• src/store: MobX store for notes.
• src/utils: General helper functions.

Screenshots