About

Ofnote is a note taking application that is completely offline. All notes are stored locally per browser.

Features

• Markdown: notes support github flavored markdown
• Tags: notes can be tagged to make categorizing and finding them quick and easy
• Indexeddb: never run out of storage space for notes
• Dark mode: essential

Structure

.
├── README.md
├── package.json
|
├── .github/
|    └── worflows/ofnote.yml    # CI configuration
|
└── src/
     ├── __tests__/              # test files
     ├── containers/             # containers use and manipulate state
     ├── components/             # components are generally stateless
     ├── db/                     # IndexedDB access / queries
     └── store/                  # redux implementation - actions, reducer, selectors

Design Choices

Redux

Managing state using redux allows for edits to immediately propagate throughout the rest of the application. Asynchronous actions (thunks) ensure they maintain consistancy with the IndexedDB database, and online storage support could be integrated into actions easily in the future.

IndexedDB

Compared to the localStorage API, IndexedDB is asynchronous and indexed. It supports storage of significantly more data in it's native format (localStorage is strings only). In ofnotes, tags, title, and modified date are all indexed for extremely fast searches regardless of the number of notes, and support for 999MB worth of notes is possible with user permission. Dexie provides a more convenient wrapper around the native IndexedDB api.

React router

Ensures notes are accessible by a distinct URL. This makes it possible to bookmark or navigate to a particular note directly.

Built with

• ReactJS
• Material-UI
• Redux
• Dexie
• React Router
• Marked
• MomentJS

Continuous Integration

GitHub Actions is used for CI/CD by synchronizing with an AWS s3 static site enabled bucket. CI configuration can be viewed at .github/workflows/ofnotes.yml. Every push to master triggers the following steps:

1. Install nodejs and dependencies (npm ci)
2. Run tests (npm run test -- --coverage)
3. Upload test coverage to codecov
4. Build production application (npm run build)
5. Deploy application to s3 bucket

Local development

• Clone repo: git clone https://github.com/jhackshaw/ofnotes
• Install dependencies: npm install
• Run tests: npm run test
• Run tests with code coverage: npm run test -- --coverage
• Run development server: npm run start