A minimalist keyboard-first note-taking Progressive Web App, tailored for fast operations.
Backend repository here.
The application is currently deployed at justjot.app via Vercel.
The project is powered by React, TypeScript and Vite.
The project is mainly driven by Mantine components library and Sass, with dropdown menu and context menu cherry picked from Radix Primitives, which are well-known for being incredibly feature-rich. Native HTML elements are used when possible to minimise dependency on Mantine.
The current state of the codebase is the outcome of attempts to take ownership of CSS without excessively re-inventing the wheel.
The project's CSS uses BEM convention for elements' classnames.
Additionally, an experiment was performed to use PascalCase for classnames, instead of the more conventional kebab-case. The following block is an example for a typical classname:
.CollectionMenuDropdown__Item--IsSelected
This convention has improved (subjective) readability without any encountered issue. This remains in the codebase as of time of writing.
yarn
yarn dev
Run yarn test and yarn intg-test for unit tests (powered by Vitest) and integration tests (powered by Playwright), respectively.
Unit test passes are required for yarn build and deployment.
Playwright tests are performed separately with each push to the main branch as a GitHub Actions workflow.
This application requires the variable VITE_BACKEND_URL, which is an url pointing to an appropriate PocketBase instance.
- Export user data to JSON format.
- Offline operations.
- Syntax highlighting and advanced keybindings with Monaco Editor.
For bug reporting, issues, and design suggestions, please open new issues.
Due to the highly personal nature of this, I am selective about what to be developed and merged into production. Please discuss with me prior to investing non-trivial efforts.