Alora-Ai - Modern Technical Interview Platform

A comprehensive technical interview platform designed to streamline the interview process for both candidates and hiring teams. The application provides automated resume parsing, personalized technical assessments, and detailed analytics to help companies make better hiring decisions while giving candidates a fair, consistent interview experience.

Features

For Candidates (Interviewees)

• 📄 Resume-Based Personalization: Upload your resume to receive customized interview questions
• 🤖 AI-Generated Questions: Personalized questions based on your resume and experience level
• ⏱️ Timed MCQ Tests: Multiple choice questions with adaptive difficulty levels
• 📊 Instant Feedback: Receive immediate scoring and feedback on your interview performance
• 📈 Progress Tracking: Monitor your improvement across multiple interview attempts
• 💾 Auto-Save Progress: Never lose your progress with automatic state persistence

For Hiring Teams (Interviewers)

• 👥 Candidate-Centric Dashboard: View and manage candidates with their aggregated performance metrics
• 🔍 Candidate Profiles: Dedicated pages for each candidate showing all their interview attempts
• 📋 Detailed Analytics: View comprehensive interview results with question-by-question breakdowns
• � Performance Tracking: Track candidate improvements across multiple interview sessions
• � Advanced Filtering & Sorting: Sort by best scores, filter by status, and search candidates efficiently

Technical Highlights

• ⚡ Modern Tech Stack: React 18, Redux Toolkit, Ant Design
• 🔄 Advanced State Management: Centralized state with candidate-centric data modeling
• 🎨 Professional UI: Clean, intuitive interface with responsive design
• 🧠 AI Integration: Advanced AI for resume analysis and question generation
• 🔀 Multi-Level Navigation: Two-tier dashboard with candidate list and detailed profile pages
• 📱 Mobile Responsive: Works seamlessly across all devices
• 🔒 Data Persistence: Reliable localStorage with Redux-persist

Quick Start

Prerequisites

• Node.js 18+ and npm
• AI API key (for AI features)

Installation

1. Clone the repository

git clone <repository-url>
cd hackathon

2. Install dependencies

npm install

3. Set up environment variables Create a .env file in the root directory:

VITE_GEMINI_API_KEY=your_api_key_here

4. Start the development server

npm run dev

5. Open your browser Navigate to http://localhost:5173

Getting Started

For Candidates

1. Create an Account: Sign up with your email or social accounts
2. Complete Your Profile: Add basic information to get started
3. Upload Your Resume: Upload a PDF or DOCX resume for personalized questions
4. Verify Information: Confirm the extracted information is correct
5. Take the Interview: Answer technical questions tailored to your experience
6. Review Results: Get immediate feedback and areas for improvement

For Interviewers

1. Log in to the Interviewer Portal: Access your dedicated dashboard
2. Review Candidates: See all unique candidates with their best performance metrics
   • Sort by best score, average score, or last interview date
   • Search by name or email
   • Filter by status (completed, in progress)
3. Analyze Individual Candidates
   • Click on any candidate to view their dedicated profile page
   • See all interview attempts for that specific candidate
   • Compare performance across multiple interview sessions
4. Deep-Dive Into Attempts
   • View detailed question-by-question breakdowns
   • Access AI-generated feedback and scoring
   • Review complete interview transcripts

🏗️ Architecture

Frontend Structure

src/
├── components/          # Reusable UI components
│   ├── InterviewFlow/   # Multi-step interview process
│   ├── MCQTest/        # Question and answer interface
│   ├── IntervieweeDashboard/  # User dashboard
│   └── InterviewSummary/      # Results display
├── pages/              # Route-level components
├── store/              # Redux state management
3. **Analyze Performance**: Dive deep into individual candidate results
4. **Compare Candidates**: Use filters and sorting to compare across candidates
5. **Export Reports**: Generate detailed reports for hiring discussions

## Technical Documentation

### System Architecture

InterviewPro is built with a modern React frontend and uses Redux for state management. The application features:

- **Component-Based Architecture**: Modular design for maintainability
- **Redux State Management**: Centralized state for predictable data flow
- **Error Boundary Protection**: Graceful error handling throughout the application
- **Responsive Design**: Works on desktop and mobile devices

### Directory Structure

/src /components # Reusable UI components /CandidateChat # Candidate chat interface /Dashboard # Main dashboard components /IntervieweeDashboard # Candidate dashboard /InterviewFlow # Multi-step interview process /InterviewSummary # Results display /MCQTest # Interview questions component /ResumeUploader # Resume upload functionality /Timer # Interview timing components /pages # Page-level components IntervieweePage.jsx # Main candidate experience InterviewerPage.jsx # Candidate-centric dashboard CandidatePage.jsx # Individual candidate profile page LandingPage.jsx # Application entry point /store # Redux state management intervieweeSlice.js # Candidate state interviewerSlice.js # Interviewer state with candidate-centric data model store.js # Redux store configuration /services # API and service integrations /utils # Utility functions /layouts # Layout components /hooks # Custom React hooks

### State Management

The application uses Redux with several main slices:

1. **intervieweeSlice**: Manages the candidate experience including:
   - Resume data and profile information
   - Interview progress tracking
   - Questions and answers management
   - Results and scoring

2. **interviewerSlice**: Manages the interviewer experience including:
   - Candidate-centric data model with nested attempts structure
   - Filtering and search functionality at both candidate and attempt levels
   - Advanced sorting with best/average scores and recent activity
   - Dynamic route-based candidate filtering

3. **settingsSlice**: Handles application configuration

4. **uiSlice**: Manages UI state across components

### Key Workflows

1. **Interview Process Flow**:
   - Dashboard → Resume Upload → Profile Verification → Interview Questions → Results
   - State transitions managed by Redux actions and local component state
   - Error handling at each step with fallbacks

2. **Interviewer Dashboard Flow**:
   - Candidate listing → Candidate Profile → Interview Detail View
   - Two-level architecture with candidate-centric organization
   - Multiple interview tracking with aggregate statistics
   - Dynamic route-based filtering via `/interviewer/candidate/:email`
   - Data visualization for performance metrics and comparison

## Recent Improvements

The application has been transformed from a prototype to a production-ready system:

### Critical Fixes Implemented
- **Candidate-Centric Dashboard**: Restructured dashboard to focus on unique candidates rather than sessions
- **Multi-Level Navigation**: Two-tier architecture with candidate list and detailed profile pages
- **Multiple Interview Attempts**: Candidates can now take multiple interviews with history preserved
- **Dynamic Route Filtering**: URL-based filtering with `/interviewer/candidate/:email` route structure
- **State Management Overhaul**: Eliminated state inconsistencies and implemented proper Redux patterns
- **Interview Flow Fixes**: Smooth navigation and proper validation between steps
- **Enhanced Components**: Professional UI with improved user experience
- **Results Analysis**: Comprehensive scoring with detailed feedback

### Interviewer Dashboard Restructure
- **Two-Level Architecture**: Main dashboard shows candidate list, clicking a candidate shows their profile
- **Candidate-Centric Views**: Data organized by unique candidates rather than individual sessions
- **Aggregated Metrics**: Best scores, average scores, and performance trends for each candidate
- **URL-Based Navigation**: Clean routes with `/interviewer/candidate/:email` structure
- **Contextual Information**: Stats and metrics filtered to the currently viewed candidate

### Performance Improvements
- Reduced unnecessary re-renders with proper memoization
- Fixed memory leaks in timer components
- Added comprehensive loading states and error handling
- Improved interview completion rate significantly

## Development Guide

### Getting Started

```bash
# Clone the repository
git clone https://github.com/4xush/alora-ai.git

# Install dependencies
cd interviewpro
npm install

# Start development server
npm start

Environment Setup

Create a .env file with the following variables:

VITE_GEMINI_API_KEY=your_api_key_here

Testing

# Run unit tests
npm test

# Run end-to-end tests
npm run test:e2e

Building for Production

# Create optimized production build
npm run build

# Preview production build
npm run preview

Extending the Application

Adding New Question Types

1. Create a new component in /components
2. Update the renderQuestion function in the MCQTest component
3. Add the new question type to the AI service prompt template
4. Update the scoring algorithm in scoreAnswers action

Custom Resume Parsing

The resume parsing can be extended by modifying:

• /services/resumeParser.js for document processing
• /services/aiService.js for information extraction

Contributing

We welcome contributions to InterviewPro! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Transform your interview process with AI-powered intelligence and comprehensive analytics.

Developed by Ayush :)