PeopleHub Documentation

Frontend Applications ​

Overview ​

PeopleHub consists of two React-based single-page applications (SPAs) serving different user groups: internal users (HR, managers, employees) and external candidates.

PeopleHub Web (Main Frontend) ​

Overview ​

Primary HRMS interface for internal users (HR, managers, employees).

Technical Stack ​

  • Framework: React 19.1.0
  • Build Tool: Vite 7.0.4
  • Language: TypeScript 5.8.3
  • Routing: TanStack Router 1.130.12 (file-based)
  • State Management: Zustand 5.0.8 (client state), TanStack Query 5.85.5 (server state)
  • Styling: Tailwind CSS 4.1.11, Radix UI components
  • Forms: React Hook Form 7.62.0 + Zod 4.0.14 validation
  • HTTP Client: Axios 1.12.2

Architecture ​

Deployment: AWS S3 + CloudFront CDN Build Size: ~3.1MB (optimized) Routes: 100+ routes across 17 HR modules

Key Features ​

  • Employee Management: Profiles, documents, org chart, skills
  • Recruitment: Job posting, candidate tracking, interview scheduling, referrals
  • Leave & Attendance: Leave application/approval, balance tracking, attendance logs
  • Performance Management: OKR creation/tracking, performance reviews, ratings
  • Separation: Resignation workflows, exit surveys, clearance tracking
  • Settings & Administration: Company settings, master data, user/role management

Authentication & Authorization ​

Authentication:

  • JWT-based authentication
  • Access token (4 hours) + Refresh token (7 days)
  • Tokens stored in HTTP-only cookies
  • Automatic token refresh on expiry

Authorization (RBAC):

  • 38+ defined permissions
  • Route-level protection (entire pages)
  • Component-level protection (UI elements)
  • Permission-based menu rendering

Development & Deployment ​

Local Development: npm run dev (Vite dev server) Build: npm run build (production build) Type Check: npm run typecheck

CI/CD: GitHub Actions workflow:

  1. Build with Vite
  2. Sync to S3 bucket
  3. Invalidate CloudFront cache

Deployment Time: <2 minutes

Performance ​

  • Initial Load: <2 seconds
  • Route Navigation: <100ms (client-side routing)
  • Global Latency: <50ms (CloudFront edge locations)
  • Caching: Aggressive caching for assets, no caching for index.html

Candidate Onboarding Frontend ​

Overview ​

Dedicated React application for candidate onboarding, isolated from the main HRMS frontend.

Purpose ​

Provides a simplified, focused interface for candidates to complete pre-joining formalities without access to the main HRMS system.

Technical Stack ​

Same as main frontend but with smaller build size:

  • React 19, Vite 7, TypeScript 5.8
  • TanStack Router, Tailwind CSS
  • React Hook Form + Zod

Architecture ​

Deployment: S3 + CloudFront (separate from main frontend) Domain: Separate subdomain for candidate portal Build Size: ~1.5MB (smaller than main app)

Features ​

Multi-Step Onboarding Workflow:

  1. Personal Information (name, DOB, contact details)
  2. Address Details (current and permanent)
  3. Education & Experience
  4. Family & Dependents
  5. Document Uploads (ID proofs, certificates)
  6. Background Verification Details
  7. Policy Review & E-Signature
  8. Final Submission

Document Management:

  • Upload multiple document types (PDF/images)
  • Direct upload to S3 via presigned URLs
  • Document status tracking

E-Signature Integration:

  • View company policies
  • Sign electronically via Digio
  • Track signature status

Progress Tracking:

  • Visual progress indicator
  • Save and continue later
  • Email reminders for incomplete sections

Authentication ​

Email Token-Based:

  • Candidate receives unique link via email
  • No password required
  • Token valid for 7 days
  • Auto-login on link click

User Experience ​

Simplified UI:

  • Step-by-step wizard
  • Clear instructions
  • Mobile-responsive
  • Progress saving

Accessibility:

  • Can be accessed from any device
  • No VPN or corporate network required
  • Works on mobile browsers

Isolation Benefits ​

Security:

  • Candidates can't access employee data
  • Separate authentication mechanism
  • Limited to onboarding functionality only

User Experience:

  • Focused, simple interface (not overwhelmed by full HRMS)
  • Faster load times (smaller app)
  • Candidate-specific branding possible

Technical:

  • Independent deployment
  • No impact on main application
  • Separate monitoring and analytics

Common Deployment Details ​

Environments ​

PeopleHub Web:

  • Dev: https://peoplehub.dev.wysbryxapp.com
  • Staging: https://peoplehub.staging.wysbryxapp.com
  • Production: Client domain

Candidate Portal:

  • Dev, Staging, Production candidate subdomains (separate from main app)

Deployment Strategy ​

Process:

  1. Build with Vite (optimized production build)
  2. Sync to S3 bucket (environment-specific)
  3. Invalidate CloudFront cache (instant propagation)

Characteristics:

  • Zero-downtime deployments
  • Instant rollback capability (S3 versioning)
  • Independent frontend/backend deployments