A complete Next.js 14 frontend for the Claro document intelligence application. Transform complex documents into clear, actionable insights with AI-powered analysis.

• Node.js 18+ or higher
• npm or yarn

# Install dependencies
npm install

#or

yarn install

1. Copy .env.example to .env.local:

cp .env.example .env.local

2. Fill in the required environment variables:

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here (generate with: openssl rand -base64 32)
NEXT_PUBLIC_API_URL=http://localhost:3000/api

# Supabase (when ready to integrate)
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Claude API
ANTHROPIC_API_KEY=your-anthropic-api-key

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

claro/
├── app/                              # Next.js 14 App Router
│   ├── (auth)/                       # Authentication routes (login, signup)
│   ├── (dashboard)/                  # Protected dashboard routes
│   │   ├── page.tsx                  # Dashboard home
│   │   ├── upload/page.tsx           # Document upload
│   │   ├── documents/[id]/page.tsx   # Document results
│   │   └── history/page.tsx          # Document history
│   ├── (landing)/                    # Public landing page
│   ├── api/                          # API routes
│   │   ├── auth/                     # Authentication
│   │   ├── upload/route.ts           # File upload endpoint
│   │   ├── documents/                # Document management
│   │   └── health/route.ts           # Health check
│   ├── layout.tsx                    # Root layout
│   └── globals.css                   # Global styles
├── components/
│   ├── layout/                       # Layout components
│   │   ├── Navbar.tsx
│   │   ├── Sidebar.tsx
│   │   └── Footer.tsx
│   ├── document/                     # Document display components
│   │   ├── SummaryCard.tsx
│   │   ├── MetricsDisplay.tsx
│   │   ├── ActionItemList.tsx
│   │   ├── FlagCard.tsx
│   │   └── ChatBar.tsx
│   ├── upload/                       # Upload components
│   │   └── FileUploader.tsx
│   └── shared/                       # Reusable components
│       ├── Button.tsx
│       ├── Badge.tsx
│       ├── Loading.tsx
│       └── ErrorBoundary.tsx
├── hooks/                            # Custom React hooks
│   ├── useAuth.ts
│   ├── useDocuments.ts
│   ├── useUpload.ts
│   └── useChat.ts
├── store/                            # Zustand state management
│   └── documentStore.ts
├── types/                            # TypeScript type definitions
│   ├── document.ts
│   └── api.ts
├── lib/                              # Utility functions
├── public/                           # Static assets
├── tailwind.config.ts                # Tailwind CSS config
├── tsconfig.json                     # TypeScript config
├── next.config.js                    # Next.js config
└── package.json                      # Dependencies

• Hero section with product overview
• Feature highlights
• Call-to-action buttons
• Responsive design for all devices

• Login (/login) - Email/password authentication
• Signup (/signup) - New user registration

• Document list with filtering and search
• Upload status tracking
• Quick statistics (total, completed, processing, failed)
• Sort by date or name

• Drag & drop file uploader (using react-dropzone)
• Support for PDF, DOCX, TXT formats
• Max file size: 50MB
• Real-time upload progress

• Summary Card - Plain English overview and impact statement
• Key Metrics - Extracted numbers, dates, financial data
• Action Items - Prioritized tasks with deadlines
• Flags & Alerts - Risks, opportunities, inconsistencies
• Chat Bar - Ask follow-up questions about the document

• Complete document list with metadata
• Sort options (date, name)
• Delete functionality
• Quick access to analyses

<Button
  variant="primary" | "secondary" | "danger"
  size="sm" | "md" | "lg"
  loading={false}
  fullWidth={false}
  onClick={() => {}}
>
  Click Me
</Button>

<Badge
  label="High Priority"
  variant="primary" | "success" | "warning" | "error"
  size="sm" | "md" | "lg"
/>

<Loading message="Loading documents..." />

<ErrorBoundary>
  <YourComponent />
</ErrorBoundary>

Displays document type, overview, and user impact statement

Shows extracted key metrics with categories and confidence levels

Priority-sorted action items with deadlines and consequences

Grouped alerts and risks organized by category

Interactive chat interface for document questions

The app uses Zustand for lightweight state management:

import { useDocumentStore } from '@/store/documentStore'

const {
  documents,
  selectedDocument,
  selectedAnalysis,
  isLoading,
  searchTerm,
  selectedTags,
  setDocuments,
  setSelectedDocument,
  addDocument,
  removeDocument,
  updateDocument,
  getFilteredDocuments,
} = useDocumentStore()

Handles user authentication (login, signup, logout)

const { login, logout, signup } = useAuth()

Manages document fetching, selection, and deletion

const { documents, isLoading, fetchDocuments, fetchDocument, deleteDocument } = useDocuments()

Handles document file uploads with progress tracking

const { uploadDocument, isLoading, error, progress } = useUpload()

Manages chat messages and conversation with documents

const { messages, isLoading, sendMessage, clearMessages } = useChat(documentId)

The frontend currently uses mock data via hooks. To test the full flow:

1. Dashboard: Shows mock documents list
2. Upload: Creates mock document entry (no real upload yet)
3. Results: Displays placeholder analysis
4. Chat: Shows placeholder responses

The frontend is ready to connect to backend APIs:

1. POST /api/upload - Handle file uploads

   • Body: multipart form with file
   • Response: { documentId, status: "PROCESSING" }

2. GET /api/documents - Fetch user's documents

   • Query: page, limit, status, sort
   • Response: { documents[], total, page, pages }

3. GET /api/documents/:id - Fetch document with analysis

   • Response: { document, analysis }

4. POST /api/documents/:id/ask - Chat endpoint

   • Body: { question, conversationHistory }
   • Response: Stream of chat messages (SSE)

5. DELETE /api/documents/:id - Delete document

6. POST /api/auth/signin - User login

   • Body: { email, password }
   • Response: { sessionToken, user }

The project uses Tailwind CSS with custom utilities:

• Primary: Blue (#2563EB)
• Secondary: Gray (#64748B)
• Success: Green (#10B981)
• Warning: Amber (#F59E0B)
• Error: Red (#EF4444)

• .btn - Button styles
• .card - Card container
• .badge - Badge styles
• .input - Input field
• .label - Form label

• Next.js 14 - React framework
• React 18 - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• Zustand - State management
• react-dropzone - File upload
• next-auth - Authentication (stub)
• date-fns - Date formatting
• axios - HTTP client (utility)
• clsx - Class name utilities

• All form inputs are validated
• Error messages don't leak sensitive info
• File size/type validation on client
• Environment variables not exposed to client (removed from build)
• Error boundaries prevent app crashes

The app is fully responsive:

• Mobile: Single column layout, hamburger menu
• Tablet: 2-column dashboard
• Desktop: Full sidebar + content layout

npm run build

• Code splitting automatic with Next.js
• Images optimized with next/image
• Lazy loading for document lists
• Debounced search input
• Memoized components where needed

1. Implement Backend APIs

   • Connect document upload to Supabase Storage
   • Implement Claude API integration
   • Set up database queries

2. Add Authentication

   • Implement NextAuth.js properly
   • Add social login providers
   • Implement logout functionality

3. Real Data

   • Replace mock data with API calls
   • Add error handling
   • Implement loading states

4. Testing

   • Add unit tests (Jest)
   • Add integration tests
   • Add E2E tests (Playwright/Cypress)

5. Deployment

   • Deploy to Vercel
   • Set up CI/CD pipeline
   • Configure production environment

MIT

For issues or questions, please check the architecture plan at /home/codespace/.claude/plans/functional-petting-stroustrup.md