navidocs/DEVELOPMENT.md
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

389 lines
11 KiB
Markdown

# NaviDocs Development Guidelines
**Last Updated:** 2025-10-19
**Purpose:** Development standards, port management, and best practices
---
## Table of Contents
1. [Port Management](#port-management)
2. [System-Wide Port Registry](#system-wide-port-registry)
3. [Development Standards](#development-standards)
4. [Before You Code](#before-you-code)
---
## Port Management
### ⚠️ CRITICAL RULE: Always Check Ports Before Using
**BEFORE writing any code that uses a port, you MUST:**
1. **Check the System-Wide Port Registry** (see below)
2. **Verify the port is available** on the actual system
3. **Update the registry** if adding a new service
4. **Document the port** in relevant configuration files
### How to Check if a Port is Available
```bash
# 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
```bash
# 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:**
1.**Check this file** (DEVELOPMENT.md) for port allocations
2.**Verify ports are available** using `lsof` commands
3.**Check for port conflicts** with other running projects
4.**Update `.env` files** if you changed ports
5.**Test services start correctly** on assigned ports
6.**Update documentation** if you add new services
### AI Agents & Automated Tools
**If you are an AI agent (Claude Code, GitHub Copilot, etc.):**
1. **ALWAYS read this file FIRST** before suggesting port numbers
2. **ALWAYS check the System-Wide Port Registry** section
3. **NEVER use ports in the 3000-5500 range** for NaviDocs
4. **NEVER assume a port is available** - verify first
5. **UPDATE this registry** if you add a new service with a port
6. **DOCUMENT port changes** in commit messages
### Port Change Workflow
When changing or adding ports:
1. **Choose port** from available range (8000-8999 preferred)
2. **Check availability** using commands above
3. **Update configuration files:**
- `server/.env`
- `server/.env.example`
- `client/vite.config.js`
- Any service-specific configs
4. **Update this registry** (DEVELOPMENT.md)
5. **Update documentation** in all affected .md files
6. **Test the service** starts on new port
7. **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
```bash
# 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
```bash
# 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
```bash
# 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:**
```bash
# 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:**
1. Check this registry to see who owns the port
2. If FastFile is using 3000-5500, NaviDocs uses 8000-8999
3. Update NaviDocs configuration to use assigned port
4. Never fight over ports - each project has its own range
### Forgotten Which Port a Service Uses
**Solution:**
1. Check this file's **System-Wide Port Registry** section (always up to date)
2. Check `server/.env` for PORT variable
3. Check `client/vite.config.js` for server.port
4. Run `sudo lsof -i -P -n | grep LISTEN` to 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:**
1. Edit DEVELOPMENT.md
2. Update the appropriate table (Active Ports, Reserved Ports, etc.)
3. Add date to "Last Updated" at top of file
4. Commit with message: `docs: Update port registry - [reason]`
### Regular Audits
**Monthly checklist:**
- [ ] Run `sudo lsof -i -P -n | grep LISTEN` and 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
```bash
# 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:
1.**READ this entire DEVELOPMENT.md file**
2.**CHECK the System-Wide Port Registry table**
3.**VERIFY port is not in 3000-5500 range** (forbidden for NaviDocs)
4.**SUGGEST ports from 8000-8999** for NaviDocs web services
5.**RUN `sudo lsof -i :PORT`** to verify availability
6.**UPDATE this registry** after adding a new port
7.**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! 🎯