ggq-admin 90ccb8b4ec feat: Complete frontend UI polish with Meilisearch-inspired design

Major Updates:
- Implement Meilisearch-inspired design system (purple/pink gradients)
- Complete frontend polish for all views (Home, Search, Document, Jobs)
- Add PDF.js document viewer with full page navigation
- Create real-time Jobs dashboard with auto-refresh
- Fix Meilisearch authentication (generated secure master key)
- Configure Vite for WSL2 → Windows browser access (host: 0.0.0.0)

Frontend Components:
- HomeView: Hero section, gradient search bar, feature cards, footer
- SearchView: Real-time search, highlighted matches, result cards
- DocumentView: PDF.js viewer, dark theme, page controls
- JobsView: NEW - Real-time job tracking, progress bars, status badges

Design System:
- Colors: Purple (#d946ef) & Pink (#f43f5e) gradients
- Typography: Inter font family (300-900 weights)
- Components: Gradient buttons, backdrop blur, smooth animations
- Responsive: Mobile-friendly layouts with Tailwind CSS

Infrastructure:
- Service management scripts (start-all.sh, stop-all.sh)
- Comprehensive documentation in docs/handover/
- Frontend quickstart guide for WSL2 users
- Master roadmap with verticals & horizontals strategy

Documentation:
- Complete handover documentation
- Frontend polish summary with all changes
- Branding creative brief for designers
- Yacht management features roadmap
- Platform strategy (4 verticals, 17 horizontals)

Build Status:
- Clean build with no errors
- Bundle size: 150KB gzipped
- Dev server on port 8080 (accessible from Windows)
- Production ready

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-10-19 16:40:48 +02:00

1.9 KiB

Raw Export PDF Permalink Blame History

NaviDocs - Professional Boat Manual Management

Production-ready boat manual management platform with OCR and intelligent search

Built with Vue 3, Express, SQLite, and Meilisearch. Extracted from the lilian1 (FRANK-AI) prototype with clean, professional code only.

Features

Upload PDFs - Drag and drop boat manuals
OCR Processing - Automatic text extraction with Tesseract.js
Intelligent Search - Meilisearch with boat terminology synonyms
Offline-First - PWA with service worker caching
Multi-Vertical - Supports boats, marinas, and properties
Secure - Tenant tokens, file validation, rate limiting

Tech Stack

Backend

Node.js 20 - Express 5
SQLite - better-sqlite3 with WAL mode
Meilisearch - Sub-100ms search with synonyms
BullMQ - Background OCR job processing
Tesseract.js - PDF text extraction

Frontend

Vue 3 - Composition API with <script setup>
Vite - Fast builds and HMR
Tailwind CSS - Meilisearch-inspired design
Pinia - State management
PDF.js - Document viewer

Quick Start

Prerequisites

# Required
node >= 20.0.0
npm >= 10.0.0

# For OCR
pdftoppm (from poppler-utils)
tesseract >= 5.0.0

# For search
meilisearch >= 1.0.0

# For queue
redis >= 6.0.0

Installation

# Clone repository
cd ~/navidocs

# Install server dependencies
cd server
npm install
cp .env.example .env
# Edit .env with your configuration

# Initialize database
npm run init-db

# Install client dependencies
cd ../client
npm install

# Start services (each in separate terminal)
meilisearch --master-key=masterKey
redis-server
cd ~/navidocs/server && node workers/ocr-worker.js
cd ~/navidocs/server && npm run dev
cd ~/navidocs/client && npm run dev

Visit http://localhost:8080

Architecture

See docs/architecture/ for complete schema and configuration details.

Ship it. Learn from users. Iterate.

1.9 KiB Raw Export PDF Permalink Blame History