TalentFlow - Hiring Pipeline

TalentFlow is a professional-grade recruitment pipeline management tool featuring a Kanban board interface for tracking candidates through customizable hiring stages. Built as a fully interactive demo with 20 realistic candidate profiles, drag-and-drop functionality, and comprehensive candidate management.

Kanban Board

Drag-and-Drop Pipeline

• 7 hiring stages: Lead, Phone Screen, Interview, Technical Test, Offer, Hired, Rejected
• Drag candidates between stages with optimistic UI updates
• Customizable stage colors with a 12-color palette + custom color picker
• Add, rename, and delete stages inline
• Stage candidate counts with real-time updates

Candidate Cards

• Candidate name, email, and location at a glance
• Skills badges (max 3 shown with overflow count)
• AI evaluation score with color-coded indicators
• Stage and job badges when viewing by alternate grouping
• Quick action buttons on hover: Edit, Hire, Archive, Delete
• Archived candidates shown with grayscale styling

Candidate Management

Detail Drawer

• 600px slide-out drawer with fullscreen toggle (90vw)
• Complete candidate profile with inline editing
• Contact information: Name, email, phone, location, LinkedIn, portfolio
• Application details: Stage, source, interview date, availability, salary

AI Evaluation

• Simulated AI scoring across 4 dimensions:
  • Overall Score (0-10)
  • Education Score (0-10)
  • Skills Score (0-10)
  • Role Fit Score (0-10)
• AI reasoning text with evaluation summary
• Color-coded score cards (green/yellow/red)
• Loading animation during scoring

Rich Candidate Profiles

• Education timeline with institution, degree, field, and dates
• Work history with company, position, dates, and descriptions
• Languages with proficiency levels (basic to native)
• Skills as tags with full list display
• Tags for categorization
• Notes with auto-save textarea

Search & Filtering

Real-Time Search

• Full-text search across name, email, location, and skills
• Keyboard shortcut support (Cmd/Ctrl + F)
• Active search displayed as filter chip

Filter Panel

• Filter by job position (5 open positions)
• Filter by source (LinkedIn, Referral, Manual, Job Board, Website)
• Toggle archived candidates view
• Active filter chips with individual clear buttons
• Reset all filters button

Group By Toggle

• Switch between Stage view and Job view
• Instant regrouping of all candidates
• "No Stage" and "No Job" columns auto-created when needed

Architecture

State Management

• Zustand store for centralized state
• Optimistic UI updates for drag-and-drop
• No backend required - all state managed client-side

Design System

• Teal primary color (#149ea3) matching Growee branding
• Clean white card-based layout
• Subtle shadows and borders for depth
• Smooth animations for drawer, modal, and dropdown
• Custom scrollbar styling

Demo Data

• 20 candidates with realistic profiles
• 5 job positions across Engineering, Design, Infrastructure, Marketing
• 7 hiring stages with appropriate color coding
• International candidate pool (US, Germany, UK, Spain, France, India, Japan, Mexico, Italy, Sweden)

Use Cases

For Recruiters

• Track candidates through the entire hiring pipeline
• Quick search and filter to find specific candidates
• Manage multiple job positions simultaneously

For Hiring Managers

• Review candidate scores and qualifications
• Move candidates between stages with simple drag-and-drop
• Share candidate information with team members

For HR Teams

• Customize pipeline stages to match company workflow
• Archive candidates for future reference
• Maintain detailed candidate notes and history

Technical Highlights

Modern Stack

• React 19 with hooks and functional components
• TypeScript for full type safety
• Vite 6 for fast builds
• Tailwind CSS 3 for utility-first styling
• Zustand for lightweight state management
• Lucide React for consistent iconography

Interactive Features

• Native HTML5 drag-and-drop (no library overhead)
• Inline editing with save/cancel controls
• Keyboard navigation and shortcuts
• Responsive design for all screen sizes

Built with expertise by BinarCode - Your partner in building exceptional digital products.

Interested in a custom hiring platform or HR tool? Let's talk about your project.