MemoRyu (メモ龍)

Japanese Language Notes Manager - Project Documentation

Overview

The Japanese Language Notes Manager is a personal productivity tool designed to help learners of Japanese organize their language study materials. It consists of three main components:

1. A local server that stores and manages all notes
2. A web interface for comprehensive note management
3. A browser extension for quick access and note-taking while browsing

Why This Project?

Learning Japanese involves accumulating vocabulary, grammar points, kanji, and cultural notes from various sources. This project solves several problems:

• Centralized storage: All notes in one place instead of scattered across apps
• Quick access: Browser extension for immediate note-taking while reading Japanese content
• Organization: Structured categorization for efficient review
• Local-first approach: Privacy-focused with all data stored on your own machine
• Cross-device availability: Web interface works on any device on your local network

System Architecture

┌──────────────────────┐    ┌──────────────────────┐    ┌──────────────────────┐
│                      │    │                      │    │                      │
│   Browser Extension  │───▶│   Local Node  │◀──▶│   SQLite/PostgreSQL  │
│   (React-based)      │    │   Server (API)      │    │   Database           │
│                      │    │                      │    │                      │
└──────────────────────┘    └──────────────────────┘    └──────────────────────┘
                                ▲
                                │
                                ▼
┌──────────────────────┐    ┌──────────────────────┐
│                      │    │                      │
│   Web Interface      │────│   Auto-start Service │
│   (React App)        │    │   (Systemd/Launchd)  │
│                      │    │                      │
└──────────────────────┘    └──────────────────────┘

Key Components

1. Backend Server:

   • Primary: Django with REST API (DRF)
   • Backup: Node.js/Express alternative
   • Manages all CRUD operations for notes
   • Runs persistently on localhost

2. Database:

   • SQLite (default for simplicity)
   • PostgreSQL option for advanced users
   • Stores all notes with categories, tags, and metadata

3. Web Interface:

   • React-based single-page application
   • Full-featured note management
   • Advanced filtering and search

4. Browser Extension:

   • Provides quick access to notes
   • Allows capturing content from web pages
   • Minimalist UI for distraction-free use

5. Auto-start Service:

   • Ensures server starts on system boot
   • Configured for Windows, macOS, and Linux

Features

Core Features

• Note Management:

  • Create, read, update, and delete notes
  • Categorize as Vocabulary/Grammar/Kanji/Phrase
  • Add examples and tags
  • Markdown formatting support

• Organization:

  • Filter by category
  • Tag-based organization
  • Full-text search
  • Sort by date/alphabetical

• Quick Capture:

  • Browser extension popup
  • Save current page content
  • Context menu integration

Technical Features

• Local-First Architecture:

  • All data stays on your machine
  • No cloud dependencies
  • Optional backup/export

• Cross-Component Sync:

  • Web app and extension share the same data
  • Real-time updates via API

• Persistent Service:

  • Auto-starts with your computer
  • Runs in background

Getting Started

Prerequisites

• Python 3.8+ (for Django backend)
• Node.js 16+ (for web interface and extension)
• Modern browser (Chrome/Firefox/Edge)

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/japanese-notes-manager.git
   cd japanese-notes-manager

2. Set up backend:

   cd server
   pip install -r requirements.txt
   python manage.py migrate

3. Set up frontend:

   cd ../web
   npm install

4. Set up extension:

   cd ../extension
   npm install

Running the System

1. Start the backend server:

   cd server
   python manage.py runserver

2. Start the web interface:

   cd ../web
   npm start

3. Load the extension:

   • In Chrome, go to chrome://extensions
   • Enable "Developer mode"
   • Click "Load unpacked" and select the extension directory

Configuration Options

Server Configuration

Edit server/config/settings.py:

# Change port if needed
SERVER_PORT = 8000

# Enable CORS for additional domains
CORS_ALLOWED_ORIGINS += [
    "http://your-other-domain:port"
]

Database Configuration

To switch to PostgreSQL:

1. Install psycopg2: pip install psycopg2-binary
2. Update settings.py:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'japanese_notes',
        'USER': 'your_db_user',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

Project Structure

japanese-notes-manager/
├── server/                 # Django backend
│   ├── notes_api/          # Main app
│   │   ├── migrations/     # Database migrations
│   │   ├── models.py       # Data models
│   │   ├── serializers.py  # API serializers
│   │   └── views.py        # API views
│   └── config/            # Project settings
│
├── web/                    # React web interface
│   ├── public/             # Static files
│   └── src/                # React components
│       ├── components/     # UI components
│       ├── pages/          # Application pages
│       └── services/       # API services
│
└── extension/              # Browser extension
    ├── src/                # Extension source
    │   ├── popup/         # Popup UI
    │   ├── background.js  # Extension background
    │   └── content.js     # Content scripts
    └── manifest.json      # Extension manifest

Why These Technologies?

Django (Primary Backend)

• Batteries-included framework with admin interface
• ORM for easy database management
• Scalable from personal use to multi-user
• Secure with built-in protections

React (Frontend)

• Component-based architecture for UI consistency
• Reusable between web app and extension
• State management for responsive interface
• Large ecosystem of supporting libraries

SQLite (Database)

• Zero-configuration - works out of the box
• Serverless - no separate database process
• Portable - single file database
• Sufficient for personal use scale

Roadmap

Short-term

• Basic note CRUD operations
• Category filtering
• Browser extension integration
• Auto-start service configuration

Medium-term

• Anki export functionality
• Rich text editor integration
• Tag management system
• Backup/restore functionality

Long-term

• Mobile companion app
• Cross-device sync option
• Spaced repetition integration
• Community plugin system

Contribution Guidelines

While this is primarily a personal project, contributions are welcome:

1. Fork the repository
2. Create a feature branch
3. Submit a pull request with:
   • Clear description of changes
   • Updated documentation if needed
   • Passing tests (when applicable)

License

MIT License - Free for personal and educational use

---

This README provides comprehensive documentation of your project's purpose, architecture, and technical details - perfect for both users and potential employers reviewing your resume. Would you like me to add any additional sections or modify the existing content?