PDF-RAG Frontend

A modern Next.js 15 frontend for the PDF-RAG (Retrieval-Augmented Generation) application. Chat with your PDF documents and get precise citations with exact page and coordinate references.

🚀 Tech Stack

Category	Technology
Framework	Next.js 15 (App Router, Static Export)
React	React 19
Language	TypeScript
Styling	Tailwind CSS
State Management	Redux Toolkit
Data Fetching	TanStack Query
Forms	React Hook Form + Yup
Charts	ApexCharts

📋 Prerequisites

• Node.js 18+ (recommended: 20+)
• Yarn (preferred) or npm
• Backend server running (see Backend README)

⚙️ Installation

1. Clone and navigate:

   cd Frontend

2. Install dependencies:

   yarn install
   # or
   npm install

3. Set up environment variables:

   cp .env.example .env.local

   Edit .env.local and configure:

   # Docker Compose (backend container name)
   NEXT_PUBLIC_API_URL=http://PDF-RAG-Backend:8000
   # Local backend on host:
   # NEXT_PUBLIC_API_URL=http://localhost:8000

🏃‍♂️ Development

Start the development server:

yarn dev
# or
npm run dev

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

🔨 Build & Deploy

Production Build

yarn build
# or
npm run build

Static Export

The app is configured for static export. After building:

yarn start
# or
npm start

📂 Project Structure

src/
├── app/                      # Next.js 15 App Router
│   ├── layout.tsx           # Root layout with providers
│   ├── page.tsx             # Home page
│   └── globals.css          # Global styles
├── components/
│   ├── charts/              # ApexCharts components
│   │   ├── ChartWrapper.tsx # SSR-safe chart wrapper
│   │   └── DocumentStatsChart.tsx
│   ├── providers/           # Context providers
│   │   └── Providers.tsx    # Redux + TanStack Query
│   └── ui/                  # Reusable UI components
│       ├── Button.tsx
│       ├── Card.tsx
│       └── Input.tsx
├── hooks/                    # Custom React hooks
│   ├── useChat.ts           # Chat mutations with Redux
│   └── useDocuments.ts      # Document CRUD operations
├── lib/                      # Utilities and configs
│   ├── api.ts               # API client
│   ├── queryClient.ts       # TanStack Query config
│   ├── utils.ts             # Helper functions
│   └── validations/         # Yup schemas
├── store/                    # Redux Toolkit
│   ├── index.ts             # Store configuration
│   └── slices/              # Redux slices
│       ├── chatSlice.ts
│       └── documentSlice.ts
└── types/                    # TypeScript types
    └── index.ts

🧩 Key Features

State Management

• Redux Toolkit for global state (documents, chat messages)
• TanStack Query for server state (caching, refetching)
• Typed hooks (useAppDispatch, useAppSelector)

Form Handling

• React Hook Form for form state management
• Yup schemas for validation
• Pre-built schemas in src/lib/validations/

Charts

• SSR-safe ApexCharts integration
• ChartWrapper component with dynamic imports
• Dark mode support

API Client

• Typed API methods in src/lib/api.ts
• Automatic error handling
• Query key management for cache invalidation

🎨 Styling

Tailwind CSS with:

• Custom utility function cn() for class merging
• Dark mode support
• Responsive design utilities

📝 Scripts

Script	Description
yarn dev	Start development server
yarn build	Build for production
yarn start	Start production server
yarn lint	Run ESLint

🤝 Contributing

1. Create a feature branch: git checkout -b feature/your-feature
2. Make your changes
3. Run linting: yarn lint
4. Test the build: yarn build
5. Commit with clear messages
6. Push and create a Pull Request

📄 License

MIT License - See LICENSE for details.