README.md

Fast Logbook PWA

_{Measured on Jan 17, 2026 by Lighthouse-badges — Measure now!}

Record with one tap. Instantly tally. No installation required.

• Quick: Instantly stamp with a tap or by pressing the number keys 1-9.
• Aggregate: Instantly calculate totals and grand totals.
• Secure: Data stays 100% in your browser — no server, no account.

Overview

Fast-logbook-PWA is a lightweight PWA for recording and aggregating daily work logs quickly and securely, on any device with a browser.

Issue & Reason

Existing work log management tools require installation or account creation, or lack aggregation features, making daily recording cumbersome. Fast-logbook-PWA was created to provide a work log experience where you can "record with one action and aggregate instantly" without requiring installation or accounts.

🚀 Live Demo

 

✨ Features

• No account required; data remains only in your browser
• PWA with offline support; installable as an app on both PC and mobile
• Totals and grand totals calculated by category
• One-tap stamping with number keys (1-9), free input also available
• Download as HTML with copy buttons, including HTML/Markdown/plain text formats
• Exclude break time from working hours
• Dark mode support
• Internationalization (en, ja)

🚀 Quick Start

Run with Docker

# Development
docker compose up

# Production build
docker compose up --build

Run with Podman

# Development
podman compose up

# Production build
podman compose up --build

Run locally

pnpm install
pnpm run dev     # dev server on http://localhost:3000
pnpm run build   # production build → dist/
pnpm run preview # preview production build

📲 How to Install

It is possible to use the PWA without installing it.

1. Access https://fast-logbook.netlify.app/.
2. Click the hamburger menu to open the sidebar.
3. Click the "Install PWA" button at the bottom of the sidebar.
4. When the installation dialog is displayed, click the "Install" button.

📖 Usage

1. Setup

Option settings are saved automatically.

1. Open the config screen.
2. Enter the tasks corresponding to numbers 1 to 9. You can change the tasks even after stamping.
3. If you prefix a task name with "^", it will be excluded from the actual working hours during that task. Please use this function for measuring break time, etc.

2. Stamp

1. When you click Labels 1 to 9, the preset tasks you set on the Options screen will be registered in the area at the bottom of the pop-up along with the current time.
2. Clicking the 0 field moves the focus to the free input field. Enter the task details. Pressing the Enter key clears the 0 field and completes the registration.
3. No matter which key you use to register a task, the date and time will be automatically appended. The text at the bottom of the popup can be freely edited, so you can modify it after registration.

3. Download logs

1. Clicking the View Log button at the top of the sidebar will open an HTML file in another tab with an HTML table, plain text, and Markdown table all in one.
2. Click the Download Log button at the top of the sidebar to download an HTML file with the HTML table, plain text, and Markdown table all in one.

🛠️ Tech Stack

• React 19 + TypeScript
• Vite 8 (build + dev server)
• vite-plugin-pwa / Workbox (Service Worker, offline support)
• IndexedDB via idb (data storage)
• i18next / react-i18next (i18n)
• React Router DOM v7

🏗️ Architecture

Client-only PWA — no backend. All logic runs in the browser. Data stored in IndexedDB.

Module structure

src/
├── main.tsx           # React entry point
├── App.tsx            # Main page (log input, shortcuts, sidebar)
├── ConfigApp.tsx      # Settings page
├── components/
│   ├── Drawer.tsx     # Sidebar / hamburger menu
│   └── Modal.tsx      # Modal dialog
├── i18n/
│   ├── index.ts       # i18next setup
│   └── locales/       # en / ja JSON translation files
└── lib/
    ├── download.ts    # Log parsing, time calculation, HTML export
    ├── storage.ts     # IndexedDB CRUD (idb) + localStorage migration
    └── utils.ts       # Date helpers, localStorage keys, theme, PWA install

Key design notes

• Storage: IndexedDB via idb. One-time migration from localStorage runs on first load.
• Log format: YYYY-MM-DD HH:MMCategory;Detail\n — datetime always 16 chars. ^ prefix excludes entry from work-time totals.
• Service Worker: Generated by vite-plugin-pwa (Workbox). stale-while-revalidate strategy. Auto-updated on new build.
• i18n: i18next + react-i18next. Locale files in src/i18n/locales/.
• Export: generateFormattedLog() builds an HTML blob; opened in a new tab or downloaded.

📸 Screenshots

Details

Input screen

---

Main menu

---

Configuration screen

---

Help modal dialog

---

Exported summary HTML file

🤝 Contributing

Bug reports and pull requests are welcome.
Please note that this project uses Takumi Guard in CI workflows to scan dependencies for malware and ensure supply chain security. This scanning only applies to CI and does not affect your local development environment.

📄 License

MIT