日本語ノート — Nihongo Note

A personal Japanese vocabulary notebook and dictionary — built as a desktop app for daily self-study.

Nihongo Note is a local‑first companion for tracking words, grammar patterns, and kanji as you learn them. It is not a public flashcard platform; it’s your private notebook that happens to be searchable. Everything stays on your machine, in a single SQLite file, with no accounts or servers.

---

Screenshots

• Words View — searchable table with JLPT filters and favorites
• Detail Panel — example sentences with furigana, conjugations, tags, and personal notes
• Grammar Notes — pattern cards with optional image uploads (e.g., whiteboard notes)
• Kanji Grid — quick reference with grade and readings
• Kana Charts — hiragana and katakana tables

---

Features

• Vocabulary library — search, filter by JLPT level, and toggle favorites
• Rich detail view — per‑entry furigana‑enhanced examples, full conjugation tables, notes, and custom tags
• Grammar notes — reference cards with optional attached images (useful for lesson screenshots)
• Kanji reference grid — grade, readings, and a clean card layout
• Kana charts — hiragana and katakana for quick lookup
• Favorites — a curated list of words worth revisiting
• Keyboard shortcuts — ⌘/Ctrl+K to focus search, Esc to close modals
• Floating “Add” button — context‑aware (Add Word / Add Grammar / Add Kanji) with a smooth expand‑on‑hover animation
• Fully local — all data stored in a SQLite file on your own machine; no internet required

---

Tech Stack

Layer	Technology
UI	React, Tailwind CSS v4
Desktop shell	Electron (via vite-plugin-electron)
Backend	Node.js + Express (local server inside Electron)
Database	SQLite (better-sqlite3)
ORM / migrations	Drizzle ORM + drizzle-kit
Build tooling	Vite

Why this stack

• Express in Electron – the backend runs as a local HTTP server inside the Electron main process. This keeps the API framework‑agnostic and makes it easy to test or repurpose the backend independently.
• SQLite – single‑user, local‑first, and trivially backed up. The entire database is just one file.
• Drizzle – chosen over Prisma because it has no separate native query‑engine binary, which reduces packaging complexity for Electron.

---

Project Structure

PERSONAL-JISHO/
├── electron/                 # Electron main process & preload script
│   ├── main.js
│   └── preload.js
├── server/                   # Express app
│   ├── db/                   # Drizzle schema & database init
│   ├── routes/               # REST endpoints for vocabulary, grammar, kanji
│   └── index.js              # Server entry point
├── drizzle/                  # Generated SQL migrations (drizzle-kit output)
├── src/                      # React frontend
│   ├── components/           # Reusable UI pieces (modals, views, etc.)
│   ├── data/                 # Seed data (only used during initial database setup)
│   ├── api.js                # Frontend API client
│   ├── App.jsx
│   └── main.jsx
├── drizzle.config.js
└── vite.config.js

Getting Started

Prerequisites

• Node.js (LTS recommended)
• On Windows, you may need Visual Studio Build Tools (C++ workload) and Python 3 if a prebuilt better-sqlite3 binary isn't available for your platform.

Installation

git clone https://github.com/rimranhakimi12/personal-jisho.git
npm install

better-sqlite3 includes a native binary that must be compiled against Electron's Node version. This is handled automatically via a postinstall script (@electron/rebuild), so a plain npm install is sufficient.

Development

npm run dev

This starts:

• Vite dev server for the React frontend (hot-reload enabled) — typically on http://localhost:5173
• Electron window, which launches the Express backend on port 5174 (as defined in electron/main.js)

The frontend API client (src/api.js) automatically uses window.appInfo.apiUrl (exposed by the preload script) to connect to the backend.

Database Migrations & Seeding

The schema is defined in server/db/schema.js. When you change it, generate a new migration:

npx drizzle-kit generate

Migrations are automatically applied when the app starts. If the database is empty, the seed script (server/seed.js) will populate it with the sample data from src/data/japaneseData.js.

Building for Production

npm run build

The build output will be packaged by Electron into a distributable (via electron-builder if configured).

---

Roadmap

• Static frontend prototype migrated to React components
• Express API connected to SQLite
• Frontend wired to the API (vocabulary, grammar, kanji)
• Full CRUD via modals (Add/Edit/Delete)
• Image upload for grammar notes (base64 storage for now)
• Favorites toggling with persistence
• Implement settings logic
• Spaced-repetition / review scheduling for vocabulary
• Full-text search across all note types (SQLite FTS5)
• Data export/import (JSON or CSV) for backup and portability
• Packaged desktop builds via electron-builder (Windows, macOS, Linux)

---

License

This project is currently unlicensed. All rights reserved.