Kit - Bookmark Management Tool

06/2024 ~ Present

Full-Stack Development
Database Design
Serverless
Cloudflare
Active
Featured

A modern bookmark management system based on React Router v7 + Cloudflare, supporting multi-level folders, tag classification, and drag-and-drop sorting

Project Introduction GitHub Project Knowledge Source
Kit - Bookmark Management Tool

Tech Stack

Remix (React Router v7)

Full-stack React framework handling SSR and API routes

Cloudflare Pages

Serverless deployment platform with edge computing and zero cold starts

Cloudflare D1

Serverless SQLite database

Drizzle ORM

Type-safe database operations and migration management

shadcn/ui

High-quality component library based on Radix UI

Tailwind CSS

Utility-first CSS framework

dnd-kit

Drag-and-drop sorting implementation

Project Overview

Kit is a self-hosted bookmark management tool designed to solve the pain of disorganized browser bookmarks. Through a three-tier architecture of Workspace, Tab, and Folder combined with a tag system, it lets users organize large numbers of web resources intuitively.

The full-stack application is deployed on Cloudflare Pages with a D1 Serverless SQLite database, achieving zero server maintenance costs and fast global edge-computing access.

Core Features

Dual-Mode Classification System

Each Tab can choose between Folder Mode or Tag Mode. Folder Mode provides a traditional tree structure; Tag Mode supports Tag Groups with AND / OR / SINGLE filter logic.

Each Tab can choose between Folder Mode or Tag Mode. Folder Mode provides a traditional tree structure; Tag Mode supports Tag Groups with AND / OR / SINGLE filter logic.

Drag-and-Drop Sorting

Built on @dnd-kit to enable drag-and-drop sorting for Tabs, Folders, Bookmarks, and Tag Groups. Uses floating-point sort_order values to avoid frequent re-ordering, keeping interactions smooth and responsive.

Built on @dnd-kit to enable drag-and-drop sorting for Tabs, Folders, Bookmarks, and Tag Groups. Uses floating-point sort_order values to avoid frequent re-ordering, keeping interactions smooth and responsive.

Cross-Workspace Full-Text Search

Built-in Cmd/Ctrl + K quick search enables multi-field full-text search across all Tabs in the current Workspace, supporting multi-keyword AND logic, highlighted matches, and keyboard navigation.

Built-in Cmd/Ctrl + K quick search enables multi-field full-text search across all Tabs in the current Workspace, supporting multi-keyword AND logic, highlighted matches, and keyboard navigation.

Bookmark Sharing

Generate a Share Token to create a read-only public link, with support for custom short links and additional button configurations, making it easy to share organized bookmarks with others.

Generate a Share Token to create a read-only public link, with support for custom short links and additional button configurations, making it easy to share organized bookmarks with others.

Smart Cache Acceleration

A hash-based cache mechanism designed for public share pages uses a lightweight probe to verify the data version. On a cache hit, it skips 7+ database queries, significantly reducing the load from repeated visits.

A hash-based cache mechanism designed for public share pages uses a lightweight probe to verify the data version. On a cache hit, it skips 7+ database queries, significantly reducing the load from repeated visits.

Technical Architecture

Frontend

Remix (React Router v7) serves as the core framework, paired with the shadcn/ui component library and Tailwind CSS to build a modern interface. Phosphor Icons handles the icon system and @dnd-kit manages drag-and-drop interactions.

Backend

Runs on Cloudflare Workers edge computing environment, using Cloudflare D1 (SQLite) as the database and Drizzle ORM for type-safe data operations and migration management.

Authentication

Custom-built JWT authentication (jose), with passwords hashed using PBKDF2-SHA256 (100,000 iterations), Cookie-based session management, and support for a registration allowlist.

Database Design

Uses Cloudflare D1 (SQLite) with Drizzle ORM, covering users, workspaces, bookmark content, the tag system, and the sharing mechanism.

Table Description Key Columns
users User accounts id, email, password_hash
workspaces Workspaces (each user can create multiple) id, user_id, title, sort_order
tabs Tabs (supports folders / tags modes) id, workspace_id, title, type

API Design

RESTful-style API endpoints built on Remix Action Handlers, passing parameters via FormData:

Bookmark Management api.bookmarks

Supports CRUD, cross-folder moves, and batch sort-order updates

Folder Management api.folders

Supports CRUD, nested sub-folders, and collapsed-state toggling

Tag System api.tags / api.tag-groups / api.bookmark-tags

Tag group management, tag CRUD, and bookmark-tag association operations

Workspaces and Tabs api.workspaces / api.tabs

Multi-workspace switching and tab mode management (folders / tags)

Share System api.shares

Generate read-only share links, custom short links, and additional buttons