Skip to content

PROJECT_SPEC.md

Latest commit

 

History

History
253 lines (236 loc) · 8.47 KB

PROJECT_SPEC.md

File metadata and controls

253 lines (236 loc) · 8.47 KB

BrowserForge - Privacy-First In-Browser Tools Suite

Vision

Build a superior alternative to inbrowser.app — a comprehensive suite of 100+ privacy-first tools that run entirely in the browser. No backend servers, no data uploads. Extends the concept with AI/ML tools powered by WebGPU, ONNX Runtime, and Transformers.js.

Tech Stack

  • Framework: Next.js 14+ (App Router) with React 18+
  • Language: TypeScript (strict mode)
  • Styling: Tailwind CSS + shadcn/ui components
  • State Management: Zustand (lightweight, per-tool)
  • Package Manager: pnpm
  • Build: Turbopack
  • Testing: Vitest + Playwright
  • AI/ML: Transformers.js, ONNX Runtime Web, WebGPU, Tesseract.js
  • PDF: pdf-lib, pdfjs-dist
  • Image: Sharp (WASM), browser-image-compression, Squoosh libs
  • Crypto: Web Crypto API + noble-hashes
  • Monorepo: Turborepo with pnpm workspaces

Design Philosophy

  • Modern glassmorphism UI with dark/light mode
  • Responsive grid layout with tool cards
  • Category sidebar navigation with search
  • Each tool is a standalone page with consistent layout
  • Tool favorites/recents stored in localStorage
  • PWA support for offline use
  • Animated transitions with Framer Motion
  • Accessibility-first (WCAG 2.1 AA)

Project Structure

browsertools/
├── apps/
│   └── web/                    # Next.js application
│       ├── app/
│       │   ├── layout.tsx      # Root layout with sidebar
│       │   ├── page.tsx        # Homepage with tool grid
│       │   └── tools/
│       │       ├── layout.tsx  # Tools layout
│       │       └── [category]/
│       │           └── [tool]/
│       │               └── page.tsx
│       ├── components/
│       │   ├── ui/             # shadcn/ui components
│       │   ├── layout/         # Sidebar, Header, Footer
│       │   ├── tools/          # Tool-specific components
│       │   └── shared/         # FileDropzone, CopyButton, etc.
│       └── lib/
│           ├── tools/          # Tool implementations
│           ├── registry/       # Tool registry & metadata
│           ├── workers/        # Web Workers for heavy tasks
│           └── ai/             # AI model loading & inference
├── packages/
│   ├── tool-utils/             # Shared utility functions
│   ├── crypto-utils/           # Cryptographic utilities
│   ├── network-utils/          # Network calculation utilities
│   └── ai-utils/               # AI/ML inference utilities
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

Tool Registry Schema

Each tool is registered with metadata:

interface ToolDefinition {
  id: string;                    // unique slug
  name: string;                  // display name
  description: string;           // short description
  category: ToolCategory;        // category enum
  icon: string;                  // Lucide icon name
  tags: string[];                // searchable tags
  isAI?: boolean;                // uses AI/ML models
  modelSize?: string;            // AI model download size
  component: React.LazyComponent; // lazy-loaded component
  metadata?: {
    inputTypes?: string[];       // accepted input types
    outputTypes?: string[];      // output types
    requiresWebGPU?: boolean;    // needs WebGPU
    requiresCamera?: boolean;    // needs camera access
    requiresMicrophone?: boolean; // needs mic access
  };
}

Categories & Complete Tool List

1. Hash & Crypto Tools (20 tools)

  • SHA-256/384/512 Hash (text + file)
  • SHA-1 Hash (text + file)
  • MD5 Hash (text + file)
  • RIPEMD-160 Hash (text + file)
  • Keccak Hash (text + file)
  • BLAKE2b Hash (text + file)
  • BLAKE2s Hash (text + file)
  • xxHash XXH32 (text + file)
  • xxHash XXH64 (text + file)
  • CRC Checksum Calculator
  • Bcrypt Password Generator
  • Bcrypt Password Verifier
  • HMAC Generator
  • SRI Hash Generator
  • AES Encryptor
  • AES Decryptor
  • SSH Key Generator
  • Random Password Generator
  • Argon2 Hash Generator (NEW)
  • File Checksum Verifier (NEW - multi-hash comparison)

2. Network & Web Tools (24 tools)

  • CIDR Parser
  • CIDRs Merger & Excluder
  • IP/CIDR Normalizer
  • IP Range to CIDR Converter
  • DNS Lookup
  • My IP Address
  • IP Info Lookup
  • Reverse IP Lookup
  • IPv6 to MAC Converter
  • MAC to IPv6 Link Local Converter
  • Current Network Time
  • Port Number Lookup
  • HTTP Status Code Lookup
  • MIME Type Lookup
  • Unicode ↔ Punycode Converter
  • URL Component Encoder/Decoder
  • URL Parser and Builder
  • Basic Auth Generator
  • Basic Auth Decoder
  • JWT Signer
  • JWT Decoder & Verifier
  • MAC Address Lookup
  • HTTP Header Parser (NEW)
  • SSL Certificate Decoder (NEW)

3. UUID & ID Tools (16 tools)

  • UUID v1/v3/v4/v5/v6/v7 Generators
  • ULID Generator
  • Nil UUID Generator
  • Max UUID Generator
  • UUID v4 Bulk Generator
  • UUID Decoder
  • UUID Validator
  • UUID v1 ↔ v6 Converter
  • UUID Format Converter (Base64/Hex/Dec/Oct/Bin)
  • NanoID Generator (NEW)
  • CUID2 Generator (NEW)

4. PDF Tools (6 tools)

  • Remove PDF Owner Password
  • Look Scanned (make PDF look scanned)
  • PDF Merge (NEW)
  • PDF Split (NEW)
  • PDF Compress (NEW)
  • PDF to Images (NEW)

5. Image Tools (12 tools)

  • Favicon Assets Generator
  • PNG Optimizer (Oxipng WASM)
  • SVG Optimizer (SVGO)
  • EXIF Viewer
  • QR Code Generator
  • QR Code Reader (camera + file)
  • Barcode Generator
  • Image Optimizer (Squoosh-like)
  • Placeholder Image Generator
  • Image Format Converter (NEW - PNG/JPG/WebP/AVIF)
  • Image Resizer & Cropper (NEW)
  • Color Picker from Image (NEW)

6. Data Format Converters (16 tools)

  • Markdown ↔ HTML
  • JSON ↔ YAML
  • JSON ↔ TOML
  • YAML ↔ TOML
  • XML ↔ JSON
  • CSV ↔ JSON
  • JSON Formatter
  • Base64 Encoder/Decoder
  • File ↔ Data URI
  • JSON Schema Generator (NEW)
  • JSON Path Evaluator (NEW)

7. Text & Code Tools (18 tools)

  • Text Diff (Monaco Editor)
  • Case Converter
  • Text Statistics
  • Lorem Ipsum Generator
  • ASCII Art Generator
  • Slug Generator
  • Number Base Converter
  • Roman Numeral Converter
  • Unicode Escape/Unescape
  • HTML Entity Encoder/Decoder
  • Morse Code Converter (with audio)
  • ROT Cipher Encrypt/Decrypt
  • Cron Expression Parser
  • Cron Expression Generator
  • Unix Timestamp Converter
  • Color Converter (HEX/RGB/HSL/CMYK)
  • HTML Color Names Browser
  • Chmod Calculator
  • Regex Tester (NEW)
  • Diff/Patch Generator (NEW)

8. Developer Tools (8 tools)

  • Git .gitignore Generator
  • Device Information
  • Credit Card Validator (Luhn)
  • Authenticator (TOTP/HOTP)
  • tldr Pages Viewer
  • User Agent Parser (NEW)
  • JWT Debugger (NEW)
  • Webhook Tester (NEW - local only)

9. AI-Powered Tools (15+ tools) ⭐ NEW CATEGORY

  • Background Remover - Remove image backgrounds using RMBG/U2Net (ONNX/WebGPU)
  • Speech to Text - Whisper model for audio transcription (WebGPU)
  • Text to Speech - Generate natural speech from text (Transformers.js)
  • OCR / Text Extraction - Extract text from images (Tesseract.js WASM)
  • Image Captioning - Generate descriptions of images (BLIP model)
  • Object Detection - Detect objects in images (YOLO/DETR via ONNX)
  • Image Segmentation - Segment anything in images (SAM2)
  • Depth Estimation - Generate depth maps from images (DPT/MiDaS)
  • Image Upscaler - AI super-resolution upscaling (ESRGAN)
  • Style Transfer - Apply artistic styles to images
  • Text Summarizer - Summarize long text (DistilBART)
  • Language Translator - Translate between languages (MarianMT/NLLB)
  • Sentiment Analyzer - Analyze text sentiment
  • Zero-Shot Classifier - Classify text without training
  • Text Embeddings - Generate text embeddings for similarity
  • Face Detection - Detect faces in images (BlazeFace)
  • Pose Estimation - Detect human poses (MoveNet)

Shared Components

  • FileDropzone - Drag & drop file input with preview
  • CopyButton - One-click copy to clipboard
  • DownloadButton - Download results as file
  • ToolLayout - Consistent tool page layout
  • InputOutput - Split input/output pane
  • CodeEditor - Monaco-based code input
  • ModelLoader - AI model download progress UI
  • ResultDisplay - Formatted result display
  • SettingsPanel - Per-tool settings sidebar

Design System

  • Colors: Slate/Zinc base, Emerald accent (matching brand)
  • Typography: Inter for UI, JetBrains Mono for code
  • Spacing: 4px grid system
  • Border radius: 8px default, 12px cards, 16px modals
  • Shadows: Subtle elevation with colored glow on hover
  • Dark mode default, light mode toggle
  • Glass morphism cards with backdrop-blur