HireDesk - AI-Powered Recruitment Platform

HireDesk

Transform your hiring process with AI-powered candidate analysis

🌟 Overview

HireDesk is a modern, AI-powered recruitment platform that revolutionizes the hiring process. Upload resumes, analyze candidates with advanced AI, generate tailored interview questions, and make data-driven hiring decisions with confidence.

Key Features

• AI-Powered Resume Analysis**: Intelligent parsing and candidate profiling
• Smart Skills Matching**: Automated matching of candidate skills to job requirements
• Interview Question Generation**: AI-generated, role-specific interview questions
• Candidate Scoring**: Comprehensive fit analysis with detailed reasoning
• Data Persistence**: All analysis results persist across browser sessions
• Secure Authentication**: User registration and login system
• Responsive Design**: Modern, mobile-first UI with glassmorphism effects
• Real-time Processing**: Fast, efficient analysis with loading states

Quick Start

Prerequisites

• Node.js (v20 or higher)
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/Rafiqdevhub/HireDesk.git
   cd hiredesk

2. Install dependencies

   npm install

3. Environment Setup

   cp .env.example .env

   Configure your environment variables in .env:

   VITE_API_URL=http://localhost:5000/api
   VITE_APP_NAME=HireDesk
   VITE_APP_VERSION=1.0.0

4. Start Development Server

   npm run dev

   The application will be available at http://localhost:3000

Project Structure

hiredesk/
├── app/                          # Main application code
│   ├── components/               # Reusable UI components
│   │   ├── auth/                 # Authentication components
│   │   ├── layout/               # Layout components (Navbar, Footer)
│   │   ├── resume/               # Resume-related components
│   │   ├── toast/                # Notification components
│   │   └── ui/                   # Base UI components
│   ├── contexts/                 # React contexts (Auth, Toast)
│   ├── data/                     # Static data and configurations
│   ├── hooks/                    # Custom React hooks
│   ├── routes/                   # Page components and routing
│   ├── services/                 # API service functions
│   ├── utils/                    # Utility functions
│   └── root.tsx                  # Application root component
├── public/                       # Static assets
├── build/                        # Production build output
├── .env.example                  # Environment variables template
├── Dockerfile                    # Docker configuration
├── package.json                  # Dependencies and scripts
├── tailwind.config.js            # Tailwind CSS configuration
├── tsconfig.json                 # TypeScript configuration
└── vite.config.ts                # Vite build configuration

Development Workflow

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run typecheck    # Run TypeScript type checking

# Code Quality
npm run lint         # Run ESLint
npm run format       # Format code with Prettier

Development Guidelines

🔄 Git Workflow

1. Create a feature branch

   git checkout -b feature/your-feature-name

2. Make your changes following the established patterns

3. Test your changes

   npm run dev
   npm run typecheck

4. Commit with conventional commits

   git commit -m "feat: add new feature description"

5. Push and create a pull request

   git push origin feature/your-feature-name

📝 Code Style

• TypeScript: Strict type checking enabled
• ESLint: Code linting with React and TypeScript rules
• Prettier: Automatic code formatting
• Tailwind CSS: Utility-first CSS framework
• Component Structure: Functional components with hooks

Testing

# Run tests (when implemented)
npm run test

# Run tests with coverage
npm run test:coverage

UI/UX Design System

Color Palette

• Primary: Slate grays with blue accents
• Background: Clean white/light gray with glassmorphism effects
• Accent: Blue (#3B82F6) and purple (#8B5CF6) gradients (removed in favor of flat design)
• Semantic: Green for success, red for errors, yellow for warnings

Design Principles

• Glassmorphism: Semi-transparent elements with backdrop blur
• Minimalism: Clean, focused design with ample white space
• Accessibility: WCAG compliant contrast ratios and keyboard navigation
• Mobile-First: Responsive design that works on all devices
• Modern Aesthetics: Contemporary UI patterns and micro-interactions

Typography & Button Snippet (copy-paste ready)

Add this to another app to reuse HireDesk body typography, button sizing, and dark body colors. Ensure the Google Fonts imports are kept or swap to self-hosted files.

/* Load fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Tinos:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap");

:root {
  --font-family-sans:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-family-serif: "Tinos", Georgia, "Times New Roman", serif;
  --font-family-mono:
    "JetBrains Mono", "Fira Code", "Fira Mono", "Roboto Mono",
    "Source Code Pro", ui-monospace, SFMono-Regular, "SF Mono", Monaco,
    Inconsolata, "Roboto Mono", "Liberation Mono", Menlo, Consolas, monospace;

  /* Body colors (dark UI palette) */
  --body-bg: #0b1220;
  --body-text: #e2e8f0;
}

/* Body typography */
body {
  font-family: var(--font-family-sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--body-bg);
  color: var(--body-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variant-ligatures: common-ligatures;
}

/* Headings use the serif stack */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-serif);
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Primary buttons (16px text) */
button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease,
    background 0.15s ease;
}
button:hover:not(:disabled) {
  transform: scale(1.02);
}
button:active:not(:disabled) {
  transform: scale(0.98);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary/smaller buttons (14px text) */
.btn-sm {
  font-size: 14px;
  padding: 0.65rem 0.9rem;
}

/* Mono helper */
.font-mono {
  font-family: var(--font-family-mono);
}

API Integration

External Services

HireDesk integrates with AI-powered backend services for:

• Resume Analysis: https://hr-resume-analyzer-backend.vercel.app/api/hiredesk-analyze
• Question Generation: https://hr-resume-analyzer-backend.vercel.app/api/generate-questions

API Response Structure

Resume Analysis Response

{
  resumeData: {
    personalInfo: {...},
    workExperience: [...],
    education: [...],
    skills: [...]
  },
  roleRecommendations: [
    {
      roleName: string,
      matchPercentage: number,
      reasoning: string,
      requiredSkills: string[],
      missingSkills: string[],
      careerLevel: string,
      industryFit: string
    }
  ],
  questions: [
    {
      question: string,
      type: "technical" | "behavioral" | "experience",
      context?: string
    }
  ],
  fit_status: string,
  reasoning: string
}

Deployment

Docker Hub Image

HireDesk is available as a pre-built Docker image on Docker Hub, making deployment incredibly simple.

Pull the Official Image

# Pull the latest version
docker pull rafiq9323/hiredesk:latest

# Or pull a specific version/tag
docker pull rafiq9323/hiredesk:master

Run with Docker Hub Image

# Run the container
docker run -d \
  --name hiredesk \
  -p 3000:3000 \
  -e NODE_ENV=production \
  -e VITE_API_URL=http://localhost:5000/api \
  rafiq9323/hiredesk:latest

# Access at http://localhost:3000

Docker Compose Setup

For a complete development or production environment, use Docker Compose with multiple services.

Quick Start with Docker Compose

# Clone the repository
git clone https://github.com/Rafiqdevhub/HireDesk.git
cd hiredesk

# Start all services
docker compose up -d

# View logs
docker compose logs -f

# Stop all services
docker compose down

Available Docker Compose Profiles

The docker-compose.yml includes multiple profiles for different environments:

Production Profile (Default)

# Start production environment with Nginx reverse proxy
docker compose --profile prod up -d

# Includes: hiredesk (app), nginx (reverse proxy)

Development Profile

# Start development environment with hot reload
docker compose --profile dev up -d

# Includes: hiredesk-dev (hot reload), mock-backend (API simulation)

Full Profile (Complete Stack)

# Start complete environment with all services
docker compose --profile full up -d

# Includes: hiredesk, redis (caching), postgres (database)

Docker Compose Services Overview

Service	Profile	Purpose	Port
hiredesk	prod	Production React app with SSR	3000
hiredesk-dev	dev	Development with hot reload	3001
mock-backend	dev	Mock API for development	5000
nginx	prod	Reverse proxy & load balancer	80/443
redis	full	Caching layer	6379
postgres	full	Database (future features)	5432

Environment Variables for Docker Compose

Create a .env file or set environment variables:

# Application Configuration
NODE_ENV=production
VITE_API_URL=http://localhost:5000/api
VITE_APP_NAME=HireDesk
VITE_APP_VERSION=1.0.0

# Database (for full profile)
POSTGRES_DB=hiredesk
POSTGRES_USER=hiredesk_user
POSTGRES_PASSWORD=your_secure_password

# Redis (for full profile)
REDIS_PASSWORD=your_redis_password

Docker Compose Commands

# Build and start all services
docker compose up --build

# Start in background
docker compose up -d

# View service status
docker compose ps

# View logs for specific service
docker compose logs hiredesk

# Scale services (if needed)
docker compose up -d --scale hiredesk=3

# Clean up
docker compose down --volumes --remove-orphans

CI/CD Pipeline

HireDesk uses GitHub Actions for automated building and deployment.

Automated Docker Builds

Every push to master or main branch automatically:

1. Builds the Docker image using multi-stage Dockerfile
2. Tags the image with multiple strategies:
   • latest - Latest stable version
   • master - Branch-specific tag
   • master-<commit-sha> - Unique commit tags
3. Pushes to Docker Hub (rafiq9323/hiredesk)
4. Caches layers for faster subsequent builds

GitHub Actions Workflow

The CI/CD pipeline is defined in .github/workflows/docker-push-image.yml:

name: Build and Push Docker Image

on:
  push:
    branches: [master, main]
  pull_request:
    branches: [master, main]

jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
      - name: Set up Docker Buildx
      - name: Login to Docker Hub
      - name: Build and push image

Required GitHub Secrets

Set these secrets in your repository settings:

• DOCKER_USERNAME: rafiq9323
• DOCKER_PASSWORD: Your Docker Hub Personal Access Token

Pipeline Benefits

• Automated Deployment: No manual intervention required
• Version Control: Proper tagging for rollbacks
• Security: Automated security scanning
• Performance: Layer caching for faster builds
• Multi-Platform: Ready for ARM64/x86_64 builds

Build Your Own Docker Image

If you want to build the image locally:

# Build from source
docker build -t hiredesk .

# Build with specific Dockerfile
docker build -f Dockerfile.dev -t hiredesk-dev .

# Build for multiple platforms
docker buildx build --platform linux/amd64,linux/arm64 -t hiredesk .

🌐 Production Deployment Options

Option 1: Docker Hub + Docker Compose (Recommended)

# Use pre-built image
docker compose up -d

Option 2: Kubernetes Deployment

# Use the Docker Hub image in your K8s manifests
kubectl apply -f k8s/

Option 3: Cloud Platforms

• Railway: Connect GitHub repo, auto-deploys
• Render: Use Docker image from Docker Hub
• Fly.io: Deploy from Docker Hub image
• AWS ECS: Use Docker Hub image in task definitions

Monitoring & Troubleshooting

Health Checks

# Check container health
docker ps

# View application logs
docker compose logs hiredesk

# Test application health
curl http://localhost:3000

Common Issues

Port already in use:

# Find process using port 3000
netstat -tulpn | grep :3000

# Kill the process or change port mapping
docker run -p 3001:3000 rafiq9323/hiredesk:latest

Permission issues:

# Run as non-root user
docker run --user node rafiq9323/hiredesk:latest

Memory issues:

# Limit memory usage
docker run -m 512m rafiq9323/hiredesk:latest

Resource Requirements

• CPU: 0.5 vCPU minimum, 1 vCPU recommended
• Memory: 512MB minimum, 1GB recommended
• Storage: 200MB for application, plus logs
• Network: Standard HTTP/HTTPS ports (80/443)

Security Best Practices

• Use Docker Hub images from trusted sources
• Regularly update base images
• Scan images for vulnerabilities
• Use secrets management for sensitive data
• Implement proper network segmentation
• Enable HTTPS in production

Authentication

HireDesk includes a complete authentication system:

• User Registration: Email/password signup
• User Login: Secure authentication with JWT tokens
• Protected Routes: Route-level protection for authenticated users
• Profile Management: User profile updates and management
• Session Persistence: Automatic login state management

Data Persistence

All analysis results are automatically persisted using localStorage:

• Resume Data: Parsed resume information
• Analysis Results: Fit status, reasoning, and recommendations
• Generated Questions: Interview questions with categories
• UI State: Expanded/collapsed states for question categories

Contributing

We welcome contributions! Please follow these guidelines:

How to Contribute

1. Fork the repository
2. Create a feature branch from main
3. Make your changes following our coding standards
4. Add tests for new functionality
5. Update documentation as needed
6. Submit a pull request with a clear description

Contribution Guidelines

• Code Style: Follow the established TypeScript and React patterns
• Commits: Use conventional commit format
• PRs: Provide clear descriptions and link to issues
• Testing: Ensure all tests pass before submitting
• Documentation: Update README and code comments as needed

Development Setup for Contributors

# Clone your fork
git clone https://github.com/your-username/HireDesk.git
cd hiredesk

# Install dependencies
npm install

# Set up pre-commit hooks (if available)
npm run prepare

# Start development
npm run dev

Acknowledgments

• React Router for the excellent routing framework
• Tailwind CSS for the utility-first CSS framework
• Heroicons for the beautiful icon set
• Vite for the fast build tool
• AI Backend Services for powering the intelligent analysis

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: For business inquiries or support

---

Built with ❤️ using React, TypeScript, and AI

Transforming recruitment, one resume at a time.