Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JunoNgx/justjot-frontend
Frontend for JustJot, a keyboard-first note taking PWA
https://github.com/JunoNgx/justjot-frontend
Last synced: about 2 months ago
JSON representation
Frontend for JustJot, a keyboard-first note taking PWA
- Host: GitHub
- URL: https://github.com/JunoNgx/justjot-frontend
- Owner: JunoNgx
- Created: 2024-03-03T13:58:50.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-13T15:53:51.000Z (7 months ago)
- Last Synced: 2024-04-14T06:45:34.868Z (7 months ago)
- Language: TypeScript
- Homepage: https://justjot.app
- Size: 1.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-pocketbase - Frontend - backend) | [Homepage](https://justjot.app) | MIT | (Showcases)
- awesome-pocketbase - Frontend - backend) | [Homepage](https://justjot.app) | MIT | (Showcases)
README
# JustJot (frontend)
A minimalist keyboard-first note-taking Progressive Web App, tailored for fast operations.
Backend repository [here](https://github.com/JunoNgx/justjot-backend).
## Current deployment
The application is currently deployed at [justjot.app](https://justjot.app/) via Vercel.
## Tech stack
The project is powered by [React](https://react.dev/), [TypeScript](https://www.typescriptlang.org/) and [Vite](https://vitejs.dev/).
## UI Library
The project is mainly driven by [Mantine components library](https://mantine.dev/) and [Sass](https://sass-lang.com/), with dropdown menu and context menu cherry picked from [Radix Primitives](https://www.radix-ui.com/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.
## CSS
The project's CSS uses [BEM convention](https://getbem.com/naming/) 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.
## Running locally
```
yarn
yarn dev
```
## Tests
Run `yarn test` and `yarn intg-test` for unit tests (powered by [Vitest](https://vitest.dev/)) and integration tests (powered by [Playwright](https://playwright.dev/)), 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.
### Environment variable
This application requires the variable `VITE_BACKEND_URL`, which is an url pointing to an appropriate PocketBase instance.
## Feature roadmap
* Export user data to JSON format.
* Offline operations.
* Syntax highlighting and advanced keybindings with Monaco Editor.
## Contribution
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.