🚀 ProLab - AI-Powered Interview Preparation Platform

🎯 Overview

ProLab (Project Laboratory) is an innovative AI-powered platform designed to revolutionize technical interview preparation for developers. By analyzing your project code, architecture, and implementation patterns, ProLab generates personalized interview questions that bridge the gap between your actual work and what recruiters really ask.

🌟 The Problem We Solve

"I built this amazing project, but I have no idea what questions they'll ask me about it in the interview."

Many developers struggle with:

• Unknown Interview Territory: Uncertainty about what questions interviewers will ask
• Generic Preparation: Using one-size-fits-all interview resources
• Technical Gap: Disconnect between personal projects and interview expectations
• Performance Anxiety: Lack of confidence due to inadequate preparation

💡 Our Solution

ProLab provides:

• Project-Specific Questions: AI-generated questions tailored to your actual codebase
• Deep Code Analysis: Understanding of your tech stack, architecture, and design decisions
• Realistic Interview Scenarios: Questions that interviewers actually ask
• Confidence Building: Comprehensive preparation based on your real work

✨ Features

🔍 Core Functionality

• GitHub Repository Analysis: Automatic code parsing and architecture understanding
• AI Question Generation: Google Gemini 2.5 Flash-powered personalized interview questions
• Interactive Interview Mode: Real-time practice with timer and voice input
• Smart Answer Evaluation: AI-powered feedback with scoring (0-100)
• Technology Detection: Automatic identification of frameworks, libraries, and patterns
• Repository Q&A: Context-aware AI responses about your projects
• Analysis Results Dashboard: Comprehensive view of repository analysis with tech stack breakdown
• Projects History: View and manage previously analyzed repositories

💬 Communication Features

• Public Chat System: Community discussions with GitHub username verification
• Admin Dashboard: Real-time user query management with reply functionality
• Session Persistence: Save and resume interview sessions

🎨 User Experience

• Neural Network Background: WebGL-powered animated background using CPPN algorithms
• Glass-morphism UI: Modern, translucent interface design
• Responsive Design: Seamless experience across all devices
• Dark Theme: Developer-friendly dark mode
• Voice-to-Text: Speak your answers using Web Speech API
• GSAP Animations: Smooth micro-interactions and transitions
• Generating Animation: Visual feedback during AI processing

🛠 Technical Features

• FastAPI Backend: High-performance async Python backend with Pydantic validation
• RESTful API: Clean and documented API endpoints with OpenAPI/Swagger docs
• Rate Limiting: Custom middleware for API protection and fair usage
• Error Handling: Centralized error handler middleware with graceful failure management
• MongoDB Integration: Motor async driver for optional database persistence
• Real-time Animations: Smooth 60fps WebGL animations with OGL library
• Context API: React Context for global state management

🏗 Tech Stack

Frontend

Technology	Version	Purpose
React	19.2.0	UI framework with hooks and functional components
Vite	7.2.2	Fast build tool and development server
Tailwind CSS	3.4.0	Utility-first CSS framework
React Router DOM	6.26.1	Client-side routing and navigation
OGL	1.0.11	Lightweight WebGL library for background effects
GSAP	3.13.0	Animation library for smooth transitions

Backend

Technology	Version	Purpose
FastAPI	0.115.6	High-performance Python web framework
Python	3.12.0	Runtime environment
Uvicorn	0.34.0	ASGI server for production
Pydantic	2.10.4	Data validation and settings management
Motor	3.6.0	Async MongoDB driver
HTTPX	0.24.1	Async HTTP client for GitHub API
Google GenAI	0.3.0	Gemini AI integration
Gunicorn	21.2.0	Production WSGI server

AI & APIs

• Google Gemini 2.5 Flash: Question generation, answer evaluation, and repository Q&A
• GitHub REST API v3: Repository analysis, code fetching, and structure parsing
• Web Speech API: Voice-to-text input functionality

Deployment & Infrastructure

• Vercel: Frontend and backend hosting with CI/CD
• MongoDB Atlas: Cloud database (optional)
• CORS Middleware: Cross-origin resource sharing configuration
• TrustedHost Middleware: Security middleware for host validation

📁 Project Structure

ProLab/
├── frontend/                      # React frontend application
│   ├── public/                    # Static assets
│   │   └── sw.js                  # Service worker
│   ├── src/                       # Source code
│   │   ├── components/            # React components
│   │   │   ├── AdminChat.jsx      # Admin chat dashboard
│   │   │   ├── Analysis.jsx       # Repository analysis page
│   │   │   ├── AnalysisResults.jsx # Analysis results display
│   │   │   ├── DarkVeil.jsx       # WebGL background component
│   │   │   ├── GeneratingAnimation.jsx # Loading animation
│   │   │   ├── Header.jsx         # Navigation header
│   │   │   ├── Home.jsx           # Landing page
│   │   │   ├── InterviewMode.jsx  # Interview practice mode
│   │   │   ├── Projects.jsx       # Analyzed projects list
│   │   │   ├── PublicChat.jsx     # Public chat interface
│   │   │   └── RepositoryQA.jsx   # Repository Q&A feature
│   │   ├── context/               # React Context providers
│   │   │   └── AnalysisContext.jsx # Analysis state management
│   │   ├── style/                 # Styling components
│   │   │   └── TextType.jsx       # Animated typography
│   │   ├── utils/                 # Utility functions
│   │   │   ├── api.js             # API request utilities
│   │   │   └── chatApi.js         # Chat API utilities
│   │   ├── assets/                # Images and static files
│   │   ├── App.jsx                # Main application with routing
│   │   ├── App.css                # Global styles
│   │   ├── index.css              # Base CSS
│   │   └── main.jsx               # Application entry point
│   ├── index.html                 # HTML template
│   ├── package.json               # Dependencies and scripts
│   ├── vite.config.js             # Vite configuration
│   ├── vercel.json                # Vercel deployment config
│   ├── tailwind.config.js         # Tailwind CSS configuration
│   ├── postcss.config.js          # PostCSS configuration
│   └── eslint.config.js           # ESLint configuration
├── backend/                       # FastAPI backend application
│   ├── routers/                   # API route handlers
│   │   ├── analysis.py            # Repository analysis endpoints
│   │   ├── chat.py                # Chat message endpoints
│   │   ├── health.py              # Health check endpoint
│   │   └── projects.py            # Projects management endpoints
│   ├── services/                  # Business logic services
│   │   ├── analysis_service.py    # Repository analysis logic
│   │   ├── chat_service.py        # Chat functionality
│   │   ├── gemini_service.py      # Google Gemini AI integration
│   │   └── github_service.py      # GitHub API interactions
│   ├── models/                    # Data models
│   │   ├── chat.py                # Chat message models
│   │   ├── project.py             # Project data models
│   │   └── schemas.py             # Pydantic request/response schemas
│   ├── middleware/                # Custom middleware
│   │   ├── error_handler.py       # Centralized error handling
│   │   └── rate_limiter.py        # Rate limiting middleware
│   ├── database/                  # Database utilities
│   │   └── services/              # Database service layer
│   ├── app.py                     # FastAPI application entry point
│   ├── database.py                # MongoDB connection management
│   ├── requirements.txt           # Python dependencies
│   ├── runtime.txt                # Python version specification
│   └── test_gemini_key.py         # Gemini API key testing
├── vercel.json                    # Root Vercel configuration
└── README.md                      # Project documentation

🚀 Installation

Prerequisites

• Node.js: Version 18.0 or higher
• Python: Version 3.10 or higher
• npm: Version 8.0 or higher (comes with Node.js)
• Git: For version control
• Google Gemini API Key: Get from Google AI Studio

Quick Start

1. Clone the Repository

   git clone https://github.com/[your-username]/ProLab.git
   cd ProLab

2. Backend Setup

   cd backend
   pip install -r requirements.txt
   
   # Create .env file
   echo "GEMINI_API_KEY=your_api_key_here" > .env
   echo "GEMINI_MODEL_NAME=gemini-2.5-flash" >> .env
   
   # Start backend server
   python app.py
   # or
   uvicorn app:app --reload

3. Frontend Setup

   cd frontend
   npm install
   npm run dev

4. Open in Browser

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:8000
   • API Docs: http://localhost:8000/docs

Build for Production

Frontend:

cd frontend
npm run build
npm run preview

Backend:

cd backend
pip install -r requirements.txt
python app.py

📚 API Documentation

Backend API Endpoints

Health Check

GET /health
# Returns: {"status": "ok", "timestamp": "..."}

Repository Analysis

POST /api/analysis/analyze
Body: {
  "repo_url": "https://github.com/user/repo"
}
# Returns: Repository analysis with tech stack, file structure, etc.

Generate Questions

POST /api/analysis/generate-questions
Body: {
  "repository_data": {...},
  "difficulty": "intermediate",
  "category": "all",
  "count": 8
}
# Returns: Array of personalized interview questions

Evaluate Answer

POST /api/analysis/evaluate-answer
Body: {
  "question": "...",
  "answer": "...",
  "repository_context": {...}
}
# Returns: Score, feedback, and improvement suggestions

Chat Endpoints

GET /api/chat/messages    # Get chat history
POST /api/chat/message    # Send message
DELETE /api/chat/clear    # Clear chat history

Repository Q&A

POST /api/chat/repository-qa
Body: {
  "question": "...",
  "repository_data": {...}
}
# Returns: Context-aware answer about the repository

For complete API documentation, visit http://localhost:8000/docs when running the backend.

🎮 Usage

Development Workflow

1. Start the Development Server

   cd frontend
   npm run dev

2. Code Structure

   • Components are located in src/components/
   • Styling utilities in src/style/
   • Global styles in src/App.css and src/index.css

3. Hot Reloading

   • Changes are automatically reflected in the browser
   • WebGL components support hot reloading

Customization

Modifying the Background

// Adjust WebGL background properties in DarkVeil.jsx
<DarkVeil 
  hueShift={0}
  noiseIntensity={0}
  speed={0.5}
  warpAmount={0}
/>

Styling Components

// Use Tailwind CSS classes for styling
<div className="bg-black/20 backdrop-blur-md border border-purple-500/20">
  // Glass-morphism effect
</div>

🧩 Components

Core Components

App.jsx

Main application component with React Router for navigation.

function App() {
  return (
    <AnalysisProvider>
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/analysis" element={<Analysis />} />
          <Route path="/results" element={<AnalysisResults />} />
          <Route path="/interview" element={<InterviewMode />} />
          <Route path="/chat" element={<PublicChat />} />
          <Route path="/admin/chat" element={<AdminChat />} />
        </Routes>
      </Router>
    </AnalysisProvider>
  )
}

Header.jsx

Navigation header with animated branding and responsive menu.

Features:

• Animated logo with TextType component
• Responsive navigation menu
• Glass-morphism styling
• Mobile-friendly hamburger menu

Home.jsx

Main landing page with multiple sections.

Sections:

• Hero section with call-to-action
• Features showcase
• How it works process
• Problem statement
• Call-to-action footer

Analysis.jsx

Repository analysis page for GitHub URL input and processing.

Features:

• GitHub URL input validation
• Repository fetching and analysis
• Tech stack detection
• Loading states with GeneratingAnimation

AnalysisResults.jsx

Display comprehensive analysis results.

Features:

• Tech stack breakdown visualization
• File structure display
• Repository statistics
• Question generation trigger

InterviewMode.jsx

Interactive interview practice session.

Features:

• Real-time timer
• Voice-to-text input (Web Speech API)
• AI-powered answer evaluation
• Score tracking (0-100)
• Question navigation

Projects.jsx

View and manage previously analyzed repositories.

Features:

• Project history list
• Re-analyze functionality
• Delete projects
• Quick access to results

PublicChat.jsx

Community chat interface.

Features:

• GitHub username verification
• Real-time message display
• Message submission
• Community discussions

AdminChat.jsx

Admin dashboard for managing user queries.

Features:

• View all user messages
• Reply functionality
• Message management
• User query tracking

RepositoryQA.jsx

Context-aware Q&A about analyzed repositories.

Features:

• Ask questions about your codebase
• AI-powered responses
• Repository context awareness
• Conversation history

DarkVeil.jsx

WebGL-powered background animation using neural networks.

Technology:

• OGL library for WebGL rendering
• CPPN (Compositional Pattern Producing Networks)
• Real-time shader compilation
• Performance-optimized rendering

GeneratingAnimation.jsx

Visual feedback component during AI processing.

Features:

• Animated loading states
• Processing indicators
• Smooth transitions

TextType.jsx

Animated typography component for dynamic text effects.

Features:

• Character-by-character typing animation
• Multiple text cycling
• Customizable speed and pauses
• Cursor animation effects

Context Providers

AnalysisContext.jsx

Global state management for repository analysis data.

Provides:

• Analysis results storage
• Repository data sharing across components
• State persistence during navigation

Styling Architecture

Tailwind CSS Classes

/* Glass-morphism effects */
.glass-card {
  @apply bg-black/20 backdrop-blur-md border border-white/10;
}

/* Gradient text */
.gradient-text {
  @apply bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent;
}

Responsive Design

• Mobile-first approach
• Flexible grid systems
• Responsive typography scales
• Adaptive spacing and layout

🎨 Styling

Design System

Color Palette

/* Primary Colors */
--primary-bg: rgb(15, 23, 42)      /* slate-900 */
--secondary-bg: rgb(30, 41, 59)    /* slate-800 */
--accent-blue: rgb(59, 130, 246)   /* blue-500 */
--accent-purple: rgb(147, 51, 234) /* purple-600 */
--accent-green: rgb(34, 197, 94)   /* green-500 */

/* Glass-morphism */
--glass-bg: rgba(0, 0, 0, 0.2)
--glass-border: rgba(255, 255, 255, 0.1)
--glass-backdrop: blur(12px)

Typography

/* Heading Scales */
.text-hero: 4rem     /* 64px - Main headlines */
.text-section: 3rem  /* 48px - Section titles */
.text-card: 1.5rem   /* 24px - Card titles */
.text-body: 1rem     /* 16px - Body text */

/* Font Weights */
.font-bold: 700      /* Headlines */
.font-semibold: 600  /* Subheadings */
.font-medium: 500    /* Navigation */
.font-normal: 400    /* Body text */

Spacing System

/* Consistent spacing scale */
.space-xs: 0.5rem    /* 8px */
.space-sm: 1rem      /* 16px */
.space-md: 1.5rem    /* 24px */
.space-lg: 2rem      /* 32px */
.space-xl: 3rem      /* 48px */
.space-2xl: 4rem     /* 64px */

🌊 Background Effects

WebGL Neural Network Background

The DarkVeil component creates stunning visual effects using:

CPPN Algorithm

// Compositional Pattern Producing Networks
// Generate organic, flowing patterns through neural network layers
vec4 cppn_fn(vec2 coordinate, float in0, float in1, float in2) {
    // Multiple sigmoid layers create complex patterns
    // Time-based inputs create flowing animations
    // Mathematical beauty through AI algorithms
}

Shader Features

• Real-time compilation: Dynamic shader programs
• Noise generation: Procedural texture creation
• Color transformation: HSV and YIQ color space manipulation
• Performance optimization: GPU-accelerated rendering

Visual Effects

• Flowing gradients: Smooth color transitions
• Particle systems: Dynamic point animations
• Scanline effects: Retro CRT monitor aesthetics
• Distortion effects: Wave-based deformations

Performance Optimization

// Efficient rendering loop
const animate = () => {
  // Update uniforms
  program.uniforms.uTime.value = time;
  
  // Render frame
  renderer.render({ scene: mesh });
  
  // Schedule next frame
  requestAnimationFrame(animate);
};

🔌 API Integration

Backend API Architecture

The backend uses a modular service-oriented architecture:

Services Layer

• gemini_service.py: Google Gemini AI integration for question generation and answer evaluation
• github_service.py: GitHub API integration for repository fetching and analysis
• analysis_service.py: Repository analysis logic and tech stack detection
• chat_service.py: Chat message handling with GitHub username verification

Routers Layer

• analysis.py: Repository analysis and question generation endpoints
• chat.py: Public chat and admin messaging endpoints
• projects.py: Project history management endpoints
• health.py: Health check and status endpoints

Middleware Layer

• rate_limiter.py: Custom rate limiting for API protection
• error_handler.py: Centralized error handling and logging

API Request Flow

// Frontend API utility (utils/api.js)
export const apiRequest = async (endpoint, options = {}) => {
  const url = `${getApiUrl()}${endpoint}`;
  const response = await fetch(url, {
    headers: {
      'Content-Type': 'application/json',
      ...options.headers,
    },
    ...options,
  });
  // Handle rate limiting and errors
  return response.json();
};

🤝 Contributing

We welcome contributions to ProLab! Here's how you can help:

Development Setup

1. Fork the Repository
2. Create a Feature Branch

   git checkout -b feature/amazing-feature

3. Make Changes
4. Test Your Changes

   npm run dev
   npm run build

5. Submit a Pull Request

Coding Standards

• ESLint: Follow the configured linting rules
• Component Structure: Use functional components with hooks
• CSS: Use Tailwind CSS utility classes
• Naming: Use descriptive, camelCase naming

Areas for Contribution

• Backend Development: API and AI integration
• UI/UX Improvements: Enhanced user experience
• Performance Optimization: Rendering and loading improvements
• Accessibility: WCAG compliance improvements
• Documentation: Code comments and user guides

🐛 Bug Reports

When reporting bugs, please include:

• Environment: Browser, OS, Node.js version
• Steps to Reproduce: Clear reproduction steps
• Expected Behavior: What should happen
• Actual Behavior: What actually happens
• Screenshots: Visual evidence when applicable

🚧 Roadmap

Phase 1: Foundation ✅ (Complete)

• React application setup
• WebGL background implementation
• Responsive design
• Component architecture
• Glass-morphism styling

Phase 2: Core Features ✅ (Complete)

• FastAPI backend development
• GitHub repository integration
• Google Gemini AI integration
• Question generation system
• Interactive interview mode
• Answer evaluation system
• Chat system (public & admin)
• Repository Q&A feature

Phase 3: Enhancement 🔄 (In Progress)

• Question difficulty scaling
• Voice-to-text input
• User authentication (Google OAuth)
• Progress tracking dashboard
• Performance analytics
• Bookmark & save questions

Phase 4: Scale 🚀 (Planned)

• Video interview mode
• Mobile application (iOS & Android)
• Company-specific prep (FAANG)
• System design module
• Resume analysis
• B2B enterprise features
• Multi-language support
• Global deployment & CDN

🚀 Deployment

Frontend Deployment (Vercel)

1. Push to GitHub

   git add .
   git commit -m "Deploy to production"
   git push origin main

2. Deploy on Vercel

   • Connect GitHub repository to Vercel
   • Set root directory to frontend
   • Deploy automatically on push

Backend Deployment (Vercel)

The backend is also deployed to Vercel using the Python runtime:

1. Prepare for Deployment

   cd backend
   # Ensure requirements.txt is up to date
   pip freeze > requirements.txt

2. Configure vercel.json

   {
     "builds": [
       { "src": "app.py", "use": "@vercel/python" }
     ],
     "routes": [
       { "src": "/(.*)", "dest": "app.py" }
     ]
   }

3. Set Environment Variables

   • Add GEMINI_API_KEY in Vercel dashboard
   • Configure FRONTEND_URL for CORS
   • Set API_VERSION and NODE_ENV

Environment Variables

Backend (.env):

GEMINI_API_KEY=your_gemini_api_key
GEMINI_MODEL_NAME=gemini-2.5-flash
MONGODB_URL=your_mongodb_url (optional)
GITHUB_TOKEN=your_github_token (optional)
FRONTEND_URL=https://your-frontend-url.com
API_VERSION=v1
NODE_ENV=production

Frontend (.env):

VITE_API_URL=https://your-backend-url.com

📊 Performance

Optimization Techniques

• Code Splitting: Lazy loading of components
• WebGL Optimization: Efficient shader compilation
• Bundle Size: Minimized JavaScript bundles
• Image Optimization: Compressed and optimized assets
• Caching: Strategic browser caching

Benchmarks

• Lighthouse Score: 95+ performance rating
• First Paint: < 1.5s
• WebGL FPS: Consistent 60fps
• Bundle Size: < 500KB gzipped

🔒 Security

Frontend Security

• Content Security Policy: XSS protection
• HTTPS Only: Secure communication
• Input Sanitization: Safe user input handling
• Dependency Scanning: Regular security updates

Backend Security

• CORS Configuration: Controlled cross-origin access
• TrustedHost Middleware: Host validation
• Rate Limiting: Custom middleware for API protection
• Pydantic Validation: Request/response data validation
• Error Handling: Centralized error handling with safe error messages

📞 Contact

ProLab Team

• GitHub: ProLab Repository
• Issues: Report a Bug

🌟 Support

If you find ProLab helpful, please:

• ⭐ Star the repository
• 🍴 Fork and contribute
• 📢 Share with others
• 📝 Report issues and suggestions

---

Built with ❤️ by developers, for developers

Transform your interview preparation with AI-powered insights tailored to your actual work.