navidocs/docs/development/FRONTEND_QUICKSTART.md

NaviDocs Frontend Quick Start

Quick guide to run the polished Meilisearch-inspired frontend

---

Prerequisites

• Node.js 20+
• Backend running on port 8001
• Meilisearch running on port 7700
• Redis running on port 6379

---

Start Frontend (Development)

cd /home/setup/navidocs/client
npm install
npm run dev

Access: http://localhost:8080

---

Build for Production

cd /home/setup/navidocs/client
npm run build

Output: dist/ directory

---

Pages Available

1. Home Page

URL: http://localhost:8080/

Features:

• Search bar with glow effect
• Upload document button
• Three feature cards
• Link to Jobs dashboard

2. Search Results

URL: http://localhost:8080/search?q=pump

Features:

• Real-time search
• Highlighted matches
• Click results to view document

3. Document Viewer

URL: http://localhost:8080/document/:id

Features:

• PDF.js viewer
• Page navigation
• Dark theme

4. Jobs Dashboard

URL: http://localhost:8080/jobs

Features:

• Real-time job status
• Auto-refresh every 5s
• View completed documents
• Retry failed jobs

---

Design System

Colors

Primary (Purple):

• primary-500: #d946ef
• primary-600: #c026d3

Secondary (Pink/Rose):

• secondary-500: #f43f5e
• secondary-600: #e11d48

Success (Green):

• success-500: #10b981

Dark (Slate):

• dark-50: #f8fafc
• dark-900: #0f172a

Typography

Font: Inter (Google Fonts) Weights: 300, 400, 500, 600, 700, 800, 900

Buttons

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-outline">Outline Button</button>

Cards

<div class="card">Card content</div>
<div class="card-hover">Hoverable card</div>

Search Input

<input type="text" class="search-input" placeholder="Search...">

---

Testing Checklist

1. Upload Flow

• Click "Upload Document" button
• Drag & drop a PDF or browse
• Fill in boat metadata
• Upload and watch progress
• See success message

2. Jobs Dashboard

• Navigate to /jobs
• See uploaded document processing
• Watch progress bar
• Click "View Document" when complete

3. Search

• Type in search bar on home page
• Press Enter
• See results with highlighted text
• Click a result

4. Document Viewer

• PDF renders properly
• Previous/Next buttons work
• Jump to page works
• Back button returns to home

---

Troubleshooting

Frontend won't start

# Kill any process on port 8080
lsof -ti:8080 | xargs kill -9

# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install
npm run dev

API requests fail

• Ensure backend is running on port 8001
• Check Vite proxy config in vite.config.js
• Verify /api routes are working:

  curl http://localhost:8001/api/health
  

PDF.js not loading

• Check browser console for errors
• Verify PDF.js worker CDN is accessible
• Check PDF file exists at /api/documents/:id/pdf

Search not working

• Verify Meilisearch is running on port 7700
• Check backend can connect to Meilisearch
• Verify documents are indexed

---

Development Tips

Hot Module Replacement (HMR)

Vite provides instant HMR - edit .vue files and see changes immediately.

Vue DevTools

Install Vue DevTools browser extension for component inspection.

Tailwind IntelliSense

Install Tailwind CSS IntelliSense VS Code extension for class autocomplete.

Component Structure

src/
├── views/           # Page components
├── components/      # Reusable components
├── composables/     # Vue composables (useSearch, useJobPolling)
├── assets/          # CSS, images
└── router.js        # Route definitions

---

Performance Notes

Bundle Sizes (Gzipped)

• Main CSS: 5.37 KB
• Vendor JS: 37.64 KB
• PDF.js: 107.38 KB
• Total: ~150 KB

Load Time Goals

• First Contentful Paint: < 1s
• Time to Interactive: < 2s
• Search response: < 100ms

---

Browser Support

Tested:

• Chrome 120+
• Firefox 120+
• Safari 17+
• Edge 120+

Features requiring modern browser:

• CSS backdrop-filter
• CSS gradients
• PDF.js web workers
• ES modules

---

Screenshots

Color Palette

Primary:   ███ #d946ef (Purple)
Secondary: ███ #f43f5e (Pink/Rose)
Success:   ███ #10b981 (Green)
Dark-900:  ███ #0f172a (Slate)

Gradient Examples

/* Button gradient */
background: linear-gradient(to right, #d946ef, #f43f5e);

/* Text gradient */
background: linear-gradient(to right, #c026d3, #e11d48);
background-clip: text;
color: transparent;

---

Next Steps

1. Test full workflow:

   • Upload → Process → Search → View

2. Add authentication:

   • Implement JWT login/register
   • Protect routes

3. Add PWA:

   • Service worker
   • Offline support
   • Install prompt

4. Production deployment:

   • Build optimized bundle
   • Deploy to StackCP or VPS
   • Configure CDN

---

Questions? Check /home/setup/navidocs/docs/README.md for full documentation.