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>
11 KiB
NaviDocs Development Guidelines
Last Updated: 2025-10-19 Purpose: Development standards, port management, and best practices
Table of Contents
Port Management
⚠️ CRITICAL RULE: Always Check Ports Before Using
BEFORE writing any code that uses a port, you MUST:
- Check the System-Wide Port Registry (see below)
- Verify the port is available on the actual system
- Update the registry if adding a new service
- Document the port in relevant configuration files
How to Check if a Port is Available
# Method 1: Check specific port
sudo lsof -i :8001
# If output is empty, port is free
# Method 2: Check all listening ports
sudo ss -tlnp | grep :8001
# Method 3: List all used ports
sudo lsof -i -P -n | grep LISTEN
# Method 4: Check specific port range
sudo lsof -i :8000-8999
How to Find an Available Port
# Quick scan for available ports in a range
for port in {8000..8999}; do
if ! sudo lsof -i :$port > /dev/null 2>&1; then
echo "Port $port is available"
break
fi
done
Port Selection Guidelines
NaviDocs Projects:
- Primary range: 8000-8999 (web services, APIs)
- Alternative range: 9000-9999 (monitoring, metrics)
- Database range: 6000-6999 (Redis 6379)
- Search range: 7000-7999 (Meilisearch 7700)
FORBIDDEN RANGES:
- 3000-5500: Reserved for other projects (FastFile, frank-ai, etc.)
- Avoid: 80, 443, 22, 21, 25 (system services)
System-Wide Port Registry
This registry tracks ALL ports used across ALL projects on this development machine.
Active Ports (Currently Running)
| Port | Service | Project | Status | Notes |
|---|---|---|---|---|
| 22 | SSH | System | 🔒 System | DO NOT USE |
| 80 | HTTP | System | 🔒 System | DO NOT USE |
| 443 | HTTPS | System | 🔒 System | DO NOT USE |
| 4000 | Gitea | System | ✅ Active | Keep - explicitly requested |
| 6379 | Redis | NaviDocs | ✅ Active | Job queue (BullMQ) |
| 7700 | Meilisearch | NaviDocs | ✅ Active | Search engine |
| 8001 | Backend API | NaviDocs | ✅ Active | Express server |
| 8080 | Frontend | NaviDocs | ✅ Active | Vite dev server |
Reserved Ports (May Be Active)
| Port Range | Project | Purpose | Status |
|---|---|---|---|
| 3000-3999 | FastFile / frank-ai | Various services | ⚠️ Avoid - conflicts |
| 5000-5500 | FastFile / frank-ai | Various services | ⚠️ Avoid - conflicts |
NaviDocs Port Allocations
| Port | Service | File | Environment Variable |
|---|---|---|---|
| 8001 | Backend API | server/index.js |
PORT=8001 in server/.env |
| 8080 | Frontend | client/vite.config.js |
server.port: 8080 |
| 6379 | Redis | server/services/queue.js |
REDIS_PORT=6379 in server/.env |
| 7700 | Meilisearch | server/config/meilisearch.js |
MEILISEARCH_HOST in server/.env |
Future NaviDocs Ports (Planned)
| Port | Planned Service | Priority | Status |
|---|---|---|---|
| 9001 | Monitoring Dashboard | Low | 📋 Planned |
| 9002 | Metrics API | Low | 📋 Planned |
| 8888 | Admin Panel | Medium | 📋 Planned |
| 8081 | WebSocket Server | Medium | 📋 Planned |
Legacy/Deprecated Ports
| Port | Old Service | Project | Status | Action |
|---|---|---|---|---|
| 3001 | Backend API (OLD) | NaviDocs | ❌ Migrated | Changed to 8001 |
| 5173 | Frontend (OLD) | NaviDocs | ❌ Migrated | Changed to 8080 |
| 5174 | Frontend (OLD) | NaviDocs | ❌ Migrated | Changed to 8080 |
| 3333 | StackCP Test Server (OLD) | NaviDocs | ❌ Migrated | Changed to 8333 |
Other Projects (Not NaviDocs)
| Project | Port Range | Status | Notes |
|---|---|---|---|
| FastFile | 3000-5500 | ⚠️ Active | DO NOT USE these ports |
| frank-ai / lilian1 | 3000-5500 | ⚠️ Legacy | Should be stopped if not needed |
Development Standards
Before You Code
EVERY TIME you start working on NaviDocs:
- ✅ Check this file (DEVELOPMENT.md) for port allocations
- ✅ Verify ports are available using
lsofcommands - ✅ Check for port conflicts with other running projects
- ✅ Update
.envfiles if you changed ports - ✅ Test services start correctly on assigned ports
- ✅ Update documentation if you add new services
AI Agents & Automated Tools
If you are an AI agent (Claude Code, GitHub Copilot, etc.):
- ALWAYS read this file FIRST before suggesting port numbers
- ALWAYS check the System-Wide Port Registry section
- NEVER use ports in the 3000-5500 range for NaviDocs
- NEVER assume a port is available - verify first
- UPDATE this registry if you add a new service with a port
- DOCUMENT port changes in commit messages
Port Change Workflow
When changing or adding ports:
- Choose port from available range (8000-8999 preferred)
- Check availability using commands above
- Update configuration files:
server/.envserver/.env.exampleclient/vite.config.js- Any service-specific configs
- Update this registry (DEVELOPMENT.md)
- Update documentation in all affected .md files
- Test the service starts on new port
- Commit changes with clear message about port change
Example Port Change Commit Message
feat: Change backend API port from 3001 to 8001
- Avoid conflict with FastFile project (uses 3000-5500 range)
- Updated server/.env PORT=8001
- Updated vite.config.js proxy target
- Updated all documentation references
- Verified port 8001 is available and working
BREAKING CHANGE: Backend API now runs on port 8001
Developers must update their .env files and restart services.
System Health Checks
Quick Service Check
# Check all NaviDocs services are running on correct ports
sudo lsof -i :6379 # Redis
sudo lsof -i :7700 # Meilisearch
sudo lsof -i :8001 # Backend API
sudo lsof -i :8080 # Frontend
# Or use ss
sudo ss -tlnp | grep -E ':(6379|7700|8001|8080)'
Stop Conflicting Services
# If you need to stop services on conflicting ports
# Find process using port
sudo lsof -i :3001
# Kill by PID
kill -9 <PID>
# Or kill by port (requires fuser)
fuser -k 3001/tcp
Start NaviDocs Services
# Ensure correct ports from .env
cd /home/setup/navidocs
# Start Redis (if not running)
redis-server &
# Start Meilisearch (if not running)
meilisearch --master-key=changeme123 &
# Start backend (port 8001)
cd server
node index.js &
# Start OCR worker
node workers/ocr-worker.js &
# Start frontend (port 8080)
cd ../client
npm run dev
Troubleshooting
Port Already in Use
Error: Error: listen EADDRINUSE: address already in use :::8001
Solution:
# Find what's using the port
sudo lsof -i :8001
# Check if it's another NaviDocs instance
ps aux | grep node
# If it's an old NaviDocs process, kill it
pkill -f "node.*index.js"
# If it's another project, stop that project or use a different port
Port Conflicts Between Projects
Problem: FastFile and NaviDocs both want port 3001
Solution:
- Check this registry to see who owns the port
- If FastFile is using 3000-5500, NaviDocs uses 8000-8999
- Update NaviDocs configuration to use assigned port
- Never fight over ports - each project has its own range
Forgotten Which Port a Service Uses
Solution:
- Check this file's System-Wide Port Registry section (always up to date)
- Check
server/.envfor PORT variable - Check
client/vite.config.jsfor server.port - Run
sudo lsof -i -P -n | grep LISTENto see all listening ports
Port Registry Maintenance
Updating This File
When to update:
- Adding a new service with a port
- Changing an existing port
- Discovering a port conflict
- Starting/stopping projects
How to update:
- Edit DEVELOPMENT.md
- Update the appropriate table (Active Ports, Reserved Ports, etc.)
- Add date to "Last Updated" at top of file
- Commit with message:
docs: Update port registry - [reason]
Regular Audits
Monthly checklist:
- Run
sudo lsof -i -P -n | grep LISTENand compare to registry - Remove entries for stopped/deleted projects
- Verify NaviDocs services are on correct ports
- Check if any legacy ports can be freed up
- Update project status (Active, Deprecated, Stopped)
Quick Reference
NaviDocs Ports (Current)
Backend API: http://localhost:8001
Frontend: http://localhost:8080
Redis: localhost:6379
Meilisearch: http://localhost:7700
Gitea: http://localhost:4000
Port Checking Commands
# Check if port 8001 is free
sudo lsof -i :8001 || echo "Port 8001 is available"
# List all ports 8000-8999
sudo lsof -i :8000-8999
# Find NaviDocs processes
ps aux | grep -E "node|meilisearch|redis"
# Quick port availability check function
check_port() { sudo lsof -i :$1 > /dev/null && echo "❌ Port $1 is USED" || echo "✅ Port $1 is FREE"; }
check_port 8001
For Claude Code / AI Agents
CRITICAL INSTRUCTIONS FOR AI AGENTS:
Before Suggesting ANY Port Number:
- ✅ READ this entire DEVELOPMENT.md file
- ✅ CHECK the System-Wide Port Registry table
- ✅ VERIFY port is not in 3000-5500 range (forbidden for NaviDocs)
- ✅ SUGGEST ports from 8000-8999 for NaviDocs web services
- ✅ RUN
sudo lsof -i :PORTto verify availability - ✅ UPDATE this registry after adding a new port
- ✅ DOCUMENT the change in commit message
Never Do This:
- ❌ Suggest ports without checking this file first
- ❌ Use ports 3000-5500 for NaviDocs
- ❌ Assume a port is free without verification
- ❌ Forget to update this registry after port changes
- ❌ Assign same port to multiple services
- ❌ Use system reserved ports (80, 443, 22, etc.)
Always Do This:
- ✅ Check registry before coding
- ✅ Verify port availability
- ✅ Use NaviDocs port ranges (8000-8999)
- ✅ Update this file when adding services
- ✅ Document port changes in commits
- ✅ Test services start on assigned ports
Contact & Questions
Port Conflicts? Check this registry first, then update it. Adding New Service? Choose from 8000-8999, verify availability, update registry. AI Agent? Follow the instructions above EVERY TIME.
Document Version: 1.0 Last Updated: 2025-10-19 Maintained By: Development Team + AI Agents Authority: This file is the single source of truth for port allocations
Remember: Port conflicts cause hours of debugging. Taking 2 minutes to check this file saves time! 🎯