JodNote

Appearance

Developer Guide ​

Welcome to the JodNote developer documentation. This guide will help you understand the architecture, build from source, and contribute to the project.

Project Overview ​

JodNote is a keyboard-first, local-first desktop note-taking application built with:

  • Frontend: Vue 3 + TypeScript + Vite
  • Backend: Tauri v2 (Rust)
  • Database: SQLite (via Tauri SQL plugin)
  • UI: Nuxt UI + Tailwind CSS

Technology Stack ​

  • Frontend: Vue 3 + TypeScript + Vite
  • Backend: Tauri v2 (Rust)
  • Database: SQLite (via Tauri SQL plugin)
  • UI: Nuxt UI + Tailwind CSS

Repository ​

Project Structure ​

jodnote/
├── src/                    # Vue frontend
│   ├── components/         # Vue components
│   ├── composables/        # Vue composables
│   ├── stores/             # Pinia stores
│   ├── views/              # Route views
│   ├── router/             # Vue router
│   └── utils/              # Utilities
├── src-tauri/              # Tauri backend (Rust)
│   ├── src/                # Rust source
│   └── Cargo.toml          # Rust dependencies
├── docs/                   # VitePress documentation
└── package.json            # Node dependencies

Prerequisites ​

To develop JodNote, you need:

Required ​

  • Node.js 18+ and pnpm
  • Rust 1.70+ (via rustup)
  • System dependencies (varies by OS)
  • VS Code with extensions:
    • Vue - Official
    • rust-analyzer
    • Tauri
    • ESLint
    • Prettier

Quick Start ​

bash
# Clone the repository
git clone https://github.com/techformist/jodnote.git
cd jodnote

# Install dependencies
pnpm install

# Run in development mode
pnpm tauri dev

Architecture Highlights ​

Local-First Design ​

All data stored in SQLite:

%APPDATA%\com.jodnote.app\jodnote.db

No network requests, no telemetry, complete privacy.

Two-Window System ​

  1. Quick Input - Lightweight, always-on-top, global hotkey
  2. Main Window - Full note browser, editing, management

Communication Flow ​

Vue Frontend ←→ Tauri Bridge ←→ Rust Backend ←→ SQLite

Key Technologies ​

Frontend ​

  • Vue 3 - Composition API
  • TypeScript - Type safety
  • Pinia - State management
  • Vue Router - Routing
  • Nuxt UI - Component library

Backend ​

  • Tauri v2 - Desktop framework
  • Rust - Systems language
  • SQLx - Database access
  • Tokio - Async runtime

Development ​

  • Vite - Fast HMR
  • pnpm - Package management
  • Cargo - Rust build tool

Development Workflow ​

1. Feature Development ​

bash
# Create feature branch
git checkout -b feature/my-feature

# Make changes and test locally
pnpm tauri dev

# Commit
git commit -m "feat: add my feature"

# Push and create PR
git push origin feature/my-feature

2. Testing ​

bash
# Test the application
pnpm tauri dev
pnpm test

# Rust tests
cd src-tauri
cargo test

3. Building ​

bash
# Development build
pnpm tauri dev

# Production build
pnpm tauri build

Code Style ​

TypeScript/Vue ​

  • ESLint + Prettier
  • Vue 3 Composition API (not Options API)
  • TypeScript strict mode
  • Composables for reusable logic

Rust ​

  • rustfmt for formatting
  • clippy for linting
  • Follow Rust API guidelines

Contributing ​

We welcome contributions! See Contributing Guide for:

  • Code of conduct
  • How to submit PRs
  • Coding standards
  • Issue templates

Common Tasks ​

Add a New Route ​

  1. Create view in src/views/
  2. Add route in src/router/index.ts
  3. Update navigation if needed

Add a New Component ​

  1. Create in src/components/
  2. Export from component index
  3. Use in views/components

Modify Database Schema ​

  1. Update schema in src-tauri/src/lib.rs
  2. Add migration logic
  3. Test with existing data
  4. Update docs

Add a Global Shortcut ​

  1. Register in Tauri config
  2. Handle in src-tauri/src/main.rs
  3. Update settings UI
  4. Document in shortcuts guide

Debugging ​

Frontend ​

  • Vue DevTools (browser extension)
  • console.log debugging
  • Vite HMR for instant feedback

Backend (Rust) ​

bash
# Run with debug output
RUST_LOG=debug pnpm tauri dev

# Use debugger (VS Code)
# Install rust-analyzer and CodeLLDB extensions

Database ​

bash
# Open database with SQLite CLI
sqlite3 "%APPDATA%\com.jodnote.app\jodnote.db"

# List tables
.tables

# Query notes
SELECT * FROM notes LIMIT 10;

Resources ​

Official Docs ​

Community ​

  • GitHub Issues for bugs
  • GitHub Discussions for questions
  • PRs welcome!

Next Steps ​

Happy coding! 🚀

Released under the MIT License.

Copyright © 2025 techformist