documente/frontend/README.md

DocuMente Frontend

Modern React-based web interface for DocuMente - Sistema di Retrieval Agentico con AI.

🚀 Features

• Authentication: API Key-based login
• Dashboard: System overview with stats and recent documents
• Documents: Drag & drop upload, document management
• Chat: Conversational interface with RAG and source citations
• Settings: Theme toggle (light/dark), LLM provider selection
• Responsive: Mobile-friendly design

🛠️ Tech Stack

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• shadcn/ui - UI components
• Zustand - State management
• Axios - HTTP client
• React Router - Routing

📦 Installation

cd frontend
npm install

🔧 Development

# Start development server
npm run dev

# Server runs at http://localhost:3000

🔨 Build

# Build for production
npm run build

# Preview production build
npm run preview

🌐 Environment Variables

Create .env file in frontend directory:

VITE_API_URL=http://localhost:8000

📁 Project Structure

frontend/
├── src/
│   ├── components/
│   │   ├── layout/      # Layout components
│   │   └── ui/          # shadcn/ui components
│   ├── pages/           # Route pages
│   │   ├── Login.tsx
│   │   ├── Dashboard.tsx
│   │   ├── Documents.tsx
│   │   ├── Chat.tsx
│   │   └── Settings.tsx
│   ├── api/
│   │   └── client.ts    # API client
│   ├── stores/
│   │   ├── authStore.ts
│   │   ├── chatStore.ts
│   │   └── settingsStore.ts
│   ├── types/
│   │   └── index.ts     # TypeScript types
│   ├── lib/
│   │   └── utils.ts     # Utility functions
│   ├── App.tsx
│   └── main.tsx
├── public/
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

🔐 Authentication

The frontend supports API Key authentication:

1. Enter your API key on the login page
2. The key is stored in localStorage
3. Sent with every request via X-API-Key header

🎨 Customization

Themes

• Edit src/index.css for CSS variables
• Toggle between light/dark/system in Settings

API Configuration

• Update vite.config.ts proxy settings
• Or set VITE_API_URL environment variable

Adding Components

# Install shadcn/ui component
npx shadcn-ui@latest add button

📝 Available Scripts

Script	Description
npm run dev	Start dev server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

🔗 API Endpoints

The frontend connects to these API endpoints:

• GET /api/health - Health check
• GET /api/v1/documents - List documents
• POST /api/v1/documents - Upload document
• DELETE /api/v1/documents/:id - Delete document
• POST /api/v1/query - Query with RAG
• POST /api/v1/chat - Chat endpoint
• GET /api/v1/providers - List providers
• GET /api/v1/config - Get config

🐛 Troubleshooting

Build Errors

If you see TypeScript errors about unused variables:

# Check for unused imports
npm run lint

API Connection Issues

Make sure the backend is running on port 8000, or update the proxy in vite.config.ts.

CORS Errors

The Vite dev server proxies /api requests to the backend. For production, ensure CORS is configured on the backend.

📄 License

Same as the main project.