Crisp AI Interview Assistant

An intelligent, client-side platform for practicing technical interviews, powered by Google's Gemini API.

📋 About The Project

Crisp is a fully client-side web application designed to help developers prepare for full-stack technical interviews. It provides a realistic, timed interview experience where questions are dynamically generated by an AI. Candidates can answer using a rich text editor, and all sessions are saved locally for review on a comprehensive dashboard.

This project was built from the ground up, starting with detailed system architecture (SysArch, ERD, DFD) and progressing through a phased, bottom-up implementation, including extensive debugging and feature polishing.

✅ Project Goals & Requirements Status

This table explicitly details how each original project requirement was successfully implemented.

Requirement	Implementation Status & Method
Two Synced Tabs	✅ Met. The application features an "Interviewee View" and a "Dashboard View" built with Ant Design Tabs. State is synchronized between them using a centralized Redux store.
Resume Upload (PDF/DOCX)	✅ Met. Candidates can upload a resume in .pdf or .docx format. Client-side parsing is handled by the pdfjs-dist and mammoth.js libraries.
Extract & Confirm Details	✅ Met. The system extracts the Name, Email, and Phone number from the resume. To handle both missing fields and parsing errors, a confirmation modal appears, allowing the user to verify or correct their details before the interview begins.
Timed AI Interview	✅ Met. The app runs a timed interview where the AI dynamically generates 6 questions (2 Easy, 2 Medium, 2 Hard). The timer for each question (20s, 60s, 120s) is managed by a useEffect hook.
Auto-Submit on Timeout	✅ Met. When the timer for a question reaches zero, the currently typed text in the rich text editor is automatically submitted as the answer. If the editor is empty, a "(No answer provided)" message is sent.
Dashboard with Search & Sort	✅ Met. The dashboard shows a list of all candidates. It includes an input field to search by name and allows the list to be sorted by the final score.
Detailed Candidate View	✅ Met. Clicking on any candidate in the dashboard opens a detailed modal. This view shows the candidate's profile information, the final AI-generated summary, and a complete history of all questions, answers, and individual scores.
Data Persistence	✅ Met. All application state, including candidate records and in-progress interview details (timers, answers), is persisted in the browser's Local Storage using Redux Persist.
Pause & Resume Session	✅ Met. If the browser is refreshed during an interview, a "Welcome Back" modal appears on reload. This gives the user the option to continue the session exactly where they left off or to abort and start over.

✨ Core Features

• 📄 Resume Parsing: Upload a PDF or DOCX resume to automatically extract contact details.
• ✅ Data Confirmation: A user-friendly modal allows candidates to confirm or edit parsed details before starting.
• 🤖 AI-Powered Questions: Dynamically generates 6 questions (Easy, Medium, Hard) for a React/Node.js role using the Google Gemini API.
• ⏱️ Timed Responses: Each question has a specific time limit (20s, 60s, 120s), with smart auto-submission of the current answer.
• ✍️ Rich Text Editor: A modern Tiptap-based editor allows for formatted, multi-line answers with lists and styling.
• 🔄 Session Persistence: All progress is saved to local storage. Refreshing the page mid-interview triggers a "Welcome Back" modal to resume or abort the session.
• 📊 Review Dashboard: A comprehensive dashboard lists all candidates, their scores, and AI-generated summaries. Clicking a candidate opens a detailed modal with the full Q&A history.
• 📱 Responsive Design: The UI is fully responsive, providing an excellent experience on both desktop and mobile devices.

🏛️ Architecture & Design

The application is built on a modern, scalable foundation using the Flux pattern (via Redux) and a clear layered architecture. Key design patterns like Observer, Command, and a State Machine are used to ensure separation of concerns and maintainable code.

For architecture details, design patterns used and aplication flow, please see the Architecture Documentation.

🛠️ Tech Stack

• Front-End: React 19, Vite
• State Management: Redux Toolkit, Redux Persist
• UI Library: Ant Design
• Rich Text Editor: Tiptap
• AI Integration: Google Gemini Pro via @google/generative-ai
• Deployment: Vercel

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18 or later)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/ringerH/crisp-ai-assistant.git

2. Navigate to the project directory:

   cd crisp-ai-assistant

3. Install NPM packages:

   npm install

4. Set up your environment variables:

   • Create a .env.local file in the root of the project.
   • Add your Google AI Studio API key:

     VITE_GEMINI_API_KEY="YourSecretApiKeyGoesHere"

5. Run the development server:

   npm run dev

   Your application should now be running on http://localhost:5173.

🌐 Deployment

This project is deployed on Vercel. The deployment process is automated. The only manual step required is to add the VITE_GEMINI_API_KEY as an Environment Variable in the Vercel project settings to ensure the live application can access the AI service.