DocuFlow - Client-Side PDF & Page Organizer

DocuFlow is a client-side document organizer and PDF compiler. It operates inside the browser, leveraging WebAssembly-based document compilation (pdf-lib) and rendering (react-pdf) to ensure speed, privacy, and full offline functionality.

Key Features

1. Shuffle & Reorganize: Drag-and-drop sortable page grid powered by @dnd-kit/sortable with support for group/bulk selection drags.
2. Rotate & Duplicate: Precision rotation (in 90° intervals) and page duplicate logic.
3. Insert Blank Page Templates: Generate standard blank A4 pages, Lined paper, Grid paper, or Cornell note guides programmatically.
4. Automatic Image Conversion: Converts standard image uploads (.jpg, .jpeg, .png) to PDF wraps on-the-fly in browser memory.
5. Interactive Compilation Options:
   • Watermarking: Overlay semi-transparent text diagonally across compiled document pages.
   • Page Numbering: Render Page numbers ("Page X of Y") in margins (bottom center, bottom right, top right).
   • Form Flattening: Lock fillable interactive form fields to static elements on merge.
   • Security & Password Protection: Client-side encryption of export bytes using @pdfsmaller/pdf-encrypt-lite.
6. Session Workspace Persistence: Continuous, debounced auto-saving of loaded files and grid layouts to IndexedDB, recovering progress automatically on crashes or page refresh.
7. Portable Projects: Export/Import portable .docuflow workspace save files to transfer your active project across machines.

---

Tech Stack & Setup

• Framework: React 19 + Vite 8
• Language: TypeScript
• Styling: Premium Custom Vanilla CSS Variables (backdrop-filter, 3D stacked paper shadows, smooth active scaling transitions)
• PDF Core Engine: pdf-lib + @pdfsmaller/pdf-encrypt-lite
• PDF Viewer Engine: react-pdf (based on PDF.js worker API)
• Drag & Drop Context: @dnd-kit/core + @dnd-kit/sortable

Quick Start

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

   The application will run on http://localhost:3000.
3. Compile production bundle:

   npm run build

   Outputs HTML, CSS, and JS assets in the dist/ directory.

---

Directory Layout

• src/App.tsx: Handles central page and file states, drag-and-drop contexts, keyboard shortcut bindings, and IndexedDB auto-save hooks.
• src/index.css: Custom design system definitions, glassmorphism templates, animations, and typography tokens.
• src/services/pdfService.ts: Operations for template generation, image wrapping, watermarks, numbering overlays, flattening, and encryption.
• src/services/storageService.ts: Serializes loaded File buffers and layout metadata directly into browser IndexedDB.
• src/services/projectService.ts: Exports/Imports workspace states as portable .docuflow files.
• src/components/: Renders UI frames (Sidebar, Toolbar, Page grids, Custom modals, switches, and buttons).