$ show fccview/jotty
Jotty (formerly rwMarkable) is a full-stack, self-hosted productivity application for managing notes, checklists, and Kanban boards. It uses Next.js 16 (App Router), React 19, and TypeScript with a file-based storage system (Markdown files with YAML frontmatter). Key features include rich text editing (TipTap with custom extensions for diagrams, callouts, mentions), drag-and-drop (custom DnD engine for Kanban, @dnd-kit for checklists), user management with multiple authentication methods (local, LDAP, OIDC), MFA (TOTP), encryption (PGP, XChaCha20), granular sharing with permission inheritance, version history via Git, full-text search using grep, audit logging, and a PWA with offline support. The architecture is server-first with Next.js server actions for all mutations and a WebSocket broadcast for real-time updates. The codebase is well-organized with a clear separation of concerns: global UI components, feature-specific components, server actions, types, utilities, and hooks. It has extensive test coverage (Vitest) across server actions, API routes, utilities, and security. While file-based storage imposes scalability limitations, the application demonstrates high craftsmanship in its modular design, custom drag-and-drop implementation, encryption handling, and sharing system. It is actively maintained with regular releases and community contributions.
The LLM identified 5 files worth highlighting for reuse:
An interactive force-directed graph component that visualizes bidirectional links between notes and checklists. Built on react-force-graph-2d, it implements custom D3 forces, pointer event handling, label hitboxes, overlap avoidance, zoom-to-fit, and node inspection. It is self-contained with its own data types (graph-data.ts) and formatting utilities, making it extractable for any application needing a visual link graph.
A custom drag-and-drop engine built from scratch using pointer events, rect registry, auto-scroll, and math utilities. It provides context providers (DndProvider) and hooks (useDragItem, useDropList) for building sortable lists and Kanban boards. This demonstrates advanced browser API usage and is a reusable pattern for applications needing a lightweight, framework-agnostic DnD solution.
A server action module implementing a hierarchical sharing system with inheritance, mounts, and granular permissions (read/edit/delete). It manages sharing at item and folder levels, supports public/private toggles, and aggregates shared items into virtual mounts for the recipient's sidebar. The pattern demonstrates careful permission encoding, audit logging, and broadcast, and could be extracted as a reusable access control layer for any file-based content management system.
Utility module providing encryption and decryption using PGP (via openpgp) and XChaCha20-Poly1305 (via libsodium-wrappers-sumo). Includes key generation, import/export, encrypt/decrypt functions with proper error handling and key management. The code is isolated from the rest of the app and can be reused in any JavaScript project requiring client-side or server-side encryption with these algorithms.
A large static dictionary mapping over 700 English words to Unicode emoji characters. It is used for autocomplete and tagging in the editor. The data is self-contained, easy to extend, and can be reused in any application needing an emoji word replacement feature. Some entries use an object format for case-sensitive matching, demonstrating attention to detail in a simple data structure.