Interview Copilot RAG Frontend

Frontend application for the Interview Copilot RAG platform.

This project provides a recruiter-facing AI assistant UI that allows recruiters, hiring managers, and interviewers to chat with "Charmaine Cat" — an AI-powered personal assistant grounded on resumes, GitHub repositories, uploaded files, notes, and RAG-based retrieval.

The frontend is built with:

• React
• Vite
• React Router
• TailwindCSS
• TypeScript-style architecture patterns
• Streaming chat UI
• Docker + Nginx production deployment

---

Features

AI Interview Assistant

• Streaming AI responses
• Recruiter / HR / Technical Interviewer modes
• Context-aware responses
• RAG grounded answers
• Retrieved evidence/source panel
• GitHub repository ingestion support
• Uploaded document retrieval

---

Charmaine Cat Profile System

• Public profile page
• Story gallery
• Photo gallery
• Social-style clickable assistant avatars
• Admin-managed stories/photos

---

Admin Features

• Knowledge ingestion
• GitHub repository sync
• Missing-question review queue
• MFA authentication
• Source management
• Retrieval debugging
• Embedding model support

---

MFA Authentication

The frontend supports TOTP-based MFA for admin accounts.

Compatible with:

• Google Authenticator
• Microsoft Authenticator
• Authy
• 1Password

Features:

• MFA setup flow
• MFA verification during login
• MFA status indicator
• MFA enable/disable/reset
• Secure challenge-based verification

---

Tech Stack

Area	Technology
Frontend	React
Build Tool	Vite
Routing	React Router
Styling	TailwindCSS
Runtime	Node.js
Production Serving	Nginx
Containerization	Docker
API Style	REST + SSE Streaming

---

Project Structure

src/
├── app/
├── assets/
├── components/
│   ├── chat/
│   ├── common/
│   └── profile/
├── lib/
├── pages/
│   ├── admin/
│   ├── auth/
│   └── public/
├── styles/
├── types/
└── main.tsx

---

Environment Variables

Local Development

VITE_APP_BASE_PATH=/
VITE_API_BASE_PATH=http://localhost:8080

---

Production Example

VITE_APP_BASE_PATH=/rag
VITE_API_BASE_PATH=/rag

---

Development

Install Dependencies

npm install

---

Start Development Server

npm run dev

Default Vite dev server:

http://localhost:5173

---

Production Build

npm run build

---

Docker Deployment

Build

docker compose build

---

Start

docker compose up -d

---

Rebuild Only Frontend

docker compose build --no-cache frontend
docker compose up -d frontend

---

View Logs

docker compose logs -f frontend

---

Stop Containers

docker compose down

---

Reverse Proxy Deployment

The frontend supports deployment under a subdirectory.

Example:

https://example.com/rag

This is controlled by:

VITE_APP_BASE_PATH=/rag

---

Streaming Chat

The frontend supports:

• SSE token streaming
• Incremental assistant rendering
• Retrieved source display
• Retrieval highlighting
• Streaming-friendly UI updates

---

RAG Features

Supported retrieval sources:

• Resume
• GitHub repositories
• Uploaded files
• Notes
• Job descriptions

The frontend can display:

• Retrieved chunks
• Source metadata
• Highlighted keywords
• Evidence panels

---

Chat Modes

Available conversation modes:

• Recruiter
• HR
• Hiring Manager
• Technical Interviewer
• Resume Reviewer

---

Profile System

The assistant behaves like a real social/chat profile.

Features include:

• Clickable assistant avatars
• Public profile page
• Story feed
• Photo gallery
• Animated UI interactions

---

Docker Notes

Rebuild Single Service

docker compose build frontend
docker compose up -d frontend

---

Force Clean Rebuild

docker compose build --no-cache frontend

---

Restart Single Service

docker compose restart frontend

---

Remove Old Containers

docker compose down
docker compose up -d

---

Common Deployment Issues

Blank Screen After Deployment

Usually caused by incorrect Vite base path.

Check:

VITE_APP_BASE_PATH=/rag

and ensure Vite config uses:

base: process.env.VITE_APP_BASE_PATH || "/"

---

API 404 Errors

Usually caused by incorrect API base path.

Check:

VITE_API_BASE_PATH=/rag

---

Assets Returning 404

Usually caused by build using /assets/... instead of /rag/assets/....

Rebuild frontend after changing environment variables:

docker compose build --no-cache frontend

---

React + Vite Reference

This project originally started from the official React + Vite template.

Official plugins:

• @vitejs/plugin-react
• @vitejs/plugin-react-swc

---

Future Improvements

• QR-code MFA setup
• Multi-agent workflows
• Live interview coaching
• Voice integration
• Real-time collaboration
• Advanced retrieval analytics
• Per-source permissions
• Conversation memory
• Evaluation dashboards

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.