{"id":31733667,"url":"https://github.com/rafiqdevhub/jobpsych","last_synced_at":"2025-10-09T08:53:28.888Z","repository":{"id":318505938,"uuid":"994500939","full_name":"Rafiqdevhub/JobPsych","owner":"Rafiqdevhub","description":"A comprehensive AI-powered career development platform offering smart career guidance, resume optimization, interview preparation, and recruitment tools. Built with React 19, Vite, Tailwind CSS, and modern web technologies.","archived":false,"fork":false,"pushed_at":"2025-10-07T16:17:07.000Z","size":2990,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T16:37:06.922Z","etag":null,"topics":["docker","nextjs","reactjs"],"latest_commit_sha":null,"homepage":"https://jobpsych.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rafiqdevhub.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-02T03:18:25.000Z","updated_at":"2025-10-07T16:17:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"76c216ec-7701-4b9e-b8d2-de39d9c09f4e","html_url":"https://github.com/Rafiqdevhub/JobPsych","commit_stats":null,"previous_names":["rafiqdevhub/jobpsych"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Rafiqdevhub/JobPsych","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rafiqdevhub%2FJobPsych","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rafiqdevhub%2FJobPsych/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rafiqdevhub%2FJobPsych/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rafiqdevhub%2FJobPsych/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rafiqdevhub","download_url":"https://codeload.github.com/Rafiqdevhub/JobPsych/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rafiqdevhub%2FJobPsych/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001055,"owners_count":26082991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","nextjs","reactjs"],"created_at":"2025-10-09T08:53:24.438Z","updated_at":"2025-10-09T08:53:28.874Z","avatar_url":"https://github.com/Rafiqdevhub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JobPsych Frontend\n\nA comprehensive AI-powered career development platform offering smart career guidance, resume optimization, interview preparation, and recruitment tools. Built with React 19, Vite, Tailwind CSS, and modern web technologies.\n\n## Table of Contents\n\n- [Overview](#-overview)\n- [Features](#-features)\n- [Quick Start](#-quick-start)\n- [Complete Application Workflow](#-complete-application-workflow)\n- [Project Structure](#-project-structure)\n- [Configuration](#-configuration)\n- [API Integration](#-api-integration)\n- [Component Architecture](#-component-architecture)\n- [User Journey](#-user-journey)\n- [Rate Limiting System](#-rate-limiting-system)\n- [Error Handling](#-error-handling)\n- [Deployment](#-deployment)\n- [Development Guide](#-development-guide)\n- [Troubleshooting](#-troubleshooting)\n- [Support](#-support)\n\n## Overview\n\nJobPsych is a full-stack career development platform that helps job seekers optimize their resumes, prepare for interviews, and discover career opportunities. The platform integrates multiple AI-powered tools into a unified experience with modern UI/UX and enterprise-grade features.\n\n## Features\n\n### AI-Powered Career Tools\n\n- **Role Suggestions**: AI-driven career matching based on skills, personality, and market trends\n- **ATS Analyzer**: Resume optimization tool that ensures compatibility with Applicant Tracking Systems\n- **InterviewPrep AI**: Generate personalized interview questions and practice scenarios\n- **HireDisk Pro**: Advanced recruitment platform for HR professionals and hiring managers\n\n### Core Functionality\n\n- **Resume Upload \u0026 Analysis**: Support for PDF, DOC, and DOCX files with drag-and-drop interface\n- **Real-time AI Analysis**: Instant feedback with detailed insights and improvement suggestions\n- **Custom Interview Questions**: Generate tailored questions based on resume content and job requirements\n- **Progress Tracking**: Monitor career development and interview preparation progress\n- **Multi-tier Subscription**: Flexible pricing plans (Free, Pro, Premium) with upgrade options\n\n### User Experience\n\n- **Mobile-Responsive Design**: Optimized for all device sizes and screen resolutions\n- **Intuitive Navigation**: Clean, modern interface with smooth transitions\n- **Real-time Feedback**: Loading states, progress indicators, and instant results\n- **Comprehensive FAQ System**: Categorized help sections for all features\n- **Success Stories**: Testimonials showcasing real user experiences\n- **Progressive Web App**: Offline functionality with service worker support\n\n### Security \u0026 Performance\n\n- **Secure Authentication**: Clerk-powered authentication with token management\n- **File Type Validation**: Client-side and server-side verification for uploaded files\n- **Rate Limiting**: Intelligent usage limits with clear notifications and upgrade paths\n- **Error Boundaries**: Graceful error handling to prevent application crashes\n- **Optimized Performance**: Fast loading with Vite's optimized build process\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js 18+ and npm\n- Modern web browser with JavaScript enabled\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone\ncd\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\n### Available Scripts\n\n```bash\nnpm run dev      # Start development server (usually http://localhost:3000)\nnpm run build    # Build for production\nnpm run preview  # Preview production build locally\nnpm run lint     # Run ESLint code analysis\n```\n\n## 🔄 Complete Application Workflow\n\n### Application Architecture\n\n```\n┌─────────────────────────────────────────────────────────────────┐\n│                        JobPsych Platform                         │\n├─────────────────────────────────────────────────────────────────┤\n│                                                                   │\n│  ┌─────────────┐  ┌──────────────┐  ┌──────────────┐           │\n│  │   Landing   │  │     Role     │  │  Interview   │           │\n│  │    Page     │→│  Suggestions │  │   Prep AI    │           │\n│  └─────────────┘  └──────────────┘  └──────────────┘           │\n│                                                                   │\n│  ┌─────────────┐  ┌──────────────┐  ┌──────────────┐           │\n│  │     ATS     │  │   HireDisk   │  │   Chatbot    │           │\n│  │   Analyzer  │  │              │  │  (Support)   │           │\n│  └─────────────┘  └──────────────┘  └──────────────┘           │\n│                                                                   │\n└─────────────────────────────────────────────────────────────────┘\n                            ↓\n        ┌───────────────────────────────────────┐\n        │      Backend AI Services              │\n        ├───────────────────────────────────────┤\n        │  • Resume Analysis API                │\n        │  • Career Coaching AI                 │\n        │  • Interview Question Generator       │\n        │  • ATS Compatibility Checker          │\n        └───────────────────────────────────────┘\n```\n\n### User Journey Flow\n\n#### 1. **Landing Page** (`/`)\n\n**Entry Point \u0026 Discovery**\n\n```\nUser Visits → Sees Hero Section → Explores Features → Views FAQ\n                                        ↓\n                        Chooses Tool → Navigates to Feature\n```\n\n**Key Components:**\n\n- `HeroSection`: Main call-to-action with animated gradients\n- `FeaturesSection`: Showcases all 4 main tools with icons\n- `FAQSection`: Answers common questions about each tool\n- `TestimonialsSection`: Social proof from real users\n- `Footer`: Quick navigation and contact information\n- `Header`: Global navigation with authentication support\n\n**Features:**\n\n- Mobile-responsive design with glassmorphism effects\n- Smooth scroll animations and transitions\n- Real-time feature cards with hover effects\n- SEO-optimized with meta tags and structured data\n\n---\n\n#### 2. **Role Suggestions** (`/role-suggestions`)\n\n**AI-Powered Career Guidance (100% Free)**\n\n**Workflow:**\n\n```\nUpload Resume → (Optional) Add Target Role/Job Description → Analyze\n                                    ↓\n            AI Processing (5-15 seconds) → Display Results\n                                    ↓\n        ┌─────────────────────────┬──────────────────────────┐\n        │  Role Recommendations   │   Skill Analysis         │\n        │  - Job Titles           │   - Technical Skills     │\n        │  - Industry Match       │   - Soft Skills          │\n        │  - Seniority Level      │   - Certifications       │\n        └─────────────────────────┴──────────────────────────┘\n```\n\n**Key Features:**\n\n- **Rate Limiting**: 5 analyses per day (resets at midnight UTC)\n  - Visual quota display in header (X/5 analyses left)\n  - Color-coded status indicator (green/amber/red)\n  - Hover tooltip with detailed information\n  - Modal notification when limit reached\n  - Countdown timer for reset\n- **File Upload**:\n  - Drag \u0026 drop interface with visual feedback\n  - Supported formats: PDF, DOC, DOCX\n  - File size validation\n  - Real-time upload progress\n- **Optional Inputs**:\n  - Target Role: Specify desired position\n  - Job Description: Paste job posting for better matching\n- **Analysis Results**:\n  - Top 3 recommended roles with match scores\n  - Skills breakdown (technical, soft, certifications)\n  - Career path suggestions\n  - Industry insights\n  - Salary expectations\n- **UI Components**:\n  - Animated gradient backgrounds\n  - Glassmorphism cards\n  - Pulsing status indicators\n  - Responsive grid layout\n\n**Technical Implementation:**\n\n```javascript\n// Rate Limiting Check\nconst rateLimitInfo = getResumeAnalysisRateLimit();\nif (rateLimitInfo.remaining \u003c= 0) {\n  showRateLimitModal(); // Display upgrade modal\n  return;\n}\n\n// File Upload\nconst formData = new FormData();\nformData.append(\"resume\", file);\nformData.append(\"targetRole\", targetRole);\nformData.append(\"jobDescription\", jobDescription);\n\n// API Call\nconst response = await fetch(ANALYZE_RESUME, {\n  method: \"POST\",\n  body: formData,\n});\n\n// Increment Counter\nincrementResumeAnalysisCount();\n\n// Display Results\nsetRoleRecommendations(response.data.recommendations);\n```\n\n---\n\n#### 3. **InterviewPrep AI** (`/interview-prepai`)\n\n**AI Interview Practice Platform (Free)**\n\n**Workflow:**\n\n```\nSelect Category → Review Sample Questions → Practice Recording\n                                    ↓\n                    Track Progress → Get Feedback → Improve\n```\n\n**Key Features:**\n\n- **Question Categories**:\n  - Technical Skills\n  - Behavioral\n  - Situational\n  - Leadership\n  - Industry-Specific\n- **Practice Mode**:\n  - Recording simulation with timer\n  - Question randomization\n- **Progress Tracking**:\n  - Questions practiced\n  - Time spent\n  - Confidence ratings\n  - Weak areas identification\n- **AI Feedback**:\n  - Answer structure analysis\n  - Key points identification\n  - Improvement suggestions\n  - Best practice tips\n\n**Components:**\n\n- Interactive question cards\n- Recording interface\n- Progress dashboard\n- Performance analytics\n- Tips and resources section\n\n---\n\n#### 4. **ATS Analyzer** (`/ats-analyzer`)\n\n**Resume Optimization Tool**\n\n**Workflow:**\n\n```\nUpload Resume → (Optional) Add Job Description → Analyze\n                                    ↓\n                    ATS Compatibility Check (Multiple Platforms)\n                                    ↓\n        ┌──────────────────────────────────────────────┐\n        │  Compatibility Scores by Platform:           │\n        │  • Workday: 85%                              │\n        │  • Greenhouse: 78%                           │\n        │  • LinkedIn: 92%                             │\n        │  • Taleo: 88%                                │\n        └──────────────────────────────────────────────┘\n                                    ↓\n        ┌──────────────────────────────────────────────┐\n        │  Optimization Recommendations:               │\n        │  • Add missing keywords                      │\n        │  • Improve formatting                        │\n        │  • Fix parsing issues                        │\n        │  • Enhance skill descriptions                │\n        └──────────────────────────────────────────────┘\n```\n\n**Key Features:**\n\n- **Multi-Platform Analysis**:\n  - Workday compatibility\n  - Greenhouse optimization\n  - Lever parsing\n- **Keyword Optimization**:\n  - Industry-specific keywords\n  - Role-relevant skills\n  - Action verbs suggestions\n  - Buzzword warnings\n- **Formatting Check**:\n  - Section structure validation\n  - Header/footer issues\n  - Table/column detection\n  - Font and spacing recommendations\n- **Scoring System**:\n  - Overall ATS score (0-100)\n  - Platform-specific scores\n  - Category breakdowns\n  - Improvement priority list\n\n**Components:**\n\n- Upload interface with preview\n- Multi-platform score cards\n- Keyword density chart\n- Formatting issue list\n- Before/after comparison\n- Downloadable report\n\n---\n\n#### 5. **HireDisk** (`/hiredisk`)\n\n**Premium Recruitment Platform (Pro/Premium)**\n\n**Workflow:**\n\n```\nHR Professional Login → Upload Candidate Resumes → Generate Questions\n                                    ↓\n        ┌────────────────────────────────────────────┐\n        │  AI-Generated Interview Questions:         │\n        │  • Role-specific questions                 │\n        │  • Skill assessment queries                │\n        │  • Cultural fit questions                  │\n        │  • Technical challenges                    │\n        └────────────────────────────────────────────┘\n                                    ↓\n        Schedule Interviews → Track Candidates → Make Decisions\n```\n\n**Key Features:**\n\n- **Candidate Management**:\n  - Bulk resume upload\n  - Candidate database\n  - Status tracking\n  - Notes and ratings\n- **Question Generation**:\n  - AI-powered question creation\n  - Customizable templates\n  - Industry-specific questions\n  - Difficulty adjustment\n- **Interview Scheduling**:\n  - Calendar integration\n  - Email notifications\n  - Reminder system\n  - Time zone handling\n- **Team Collaboration**:\n  - Multi-user access\n  - Feedback sharing\n  - Decision workflows\n  - Analytics dashboard\n\n---\n\n### Global Features (All Pages)\n\n#### Chatbot Support\n\n**AI-Powered Help Assistant**\n\n```\nUser Click → Chatbot Opens → Ask Question → Get Answer\n                                    ↓\n            Complex Query → Escalate to Human Support\n```\n\n**Features:**\n\n- Context-aware responses\n- Quick action buttons\n- Feature navigation\n- Contact form integration\n- 24/7 availability\n\n**Implementation:**\n\n```javascript\n// Chatbot Component\n\u003cChatbot\n  position=\"bottom-right\"\n  greeting=\"Hi! How can I help you today?\"\n  suggestions={[\n    \"How does rate limiting work?\",\n    \"What file formats are supported?\",\n    \"How to upgrade my plan?\",\n  ]}\n/\u003e\n```\n\n#### Navigation System\n\n**Seamless Multi-Page Navigation**\n\n```\n┌──────────────────────────────────────┐\n│  Header (Sticky)                     │\n│  ┌────────────────────────────────┐  │\n│  │ Logo │ Features │ Auth │ Menu │  │\n│  └────────────────────────────────┘  │\n└──────────────────────────────────────┘\n                ↓\n┌──────────────────────────────────────┐\n│  Main Content Area                   │\n│  (Route-specific component)          │\n└──────────────────────────────────────┘\n                ↓\n┌──────────────────────────────────────┐\n│  Footer                              │\n│  ┌────────────────────────────────┐  │\n│  │ Quick Links │ Features │ Legal │  │\n│  └────────────────────────────────┘  │\n└──────────────────────────────────────┘\n```\n\n**Components:**\n\n- `Header`: Sticky navigation with authentication\n- `Footer`: Quick access to all features\n- `NavigationButton`: Reusable navigation component\n- `ErrorBoundary`: Graceful error handling\n\n---\n\n### Data Flow Architecture\n\n```\n┌─────────────────────────────────────────────────────────┐\n│                    React Frontend                        │\n│                                                          │\n│  ┌──────────────┐    ┌──────────────┐    ┌──────────┐ │\n│  │   UI Layer   │←──→│  State Mgmt  │←──→│  Storage │ │\n│  │  (Components)│    │   (Context)  │    │(localStorage)│\n│  └──────────────┘    └──────────────┘    └──────────┘ │\n│         ↕                    ↕                          │\n│  ┌──────────────────────────────────────────────────┐ │\n│  │          API Communication Layer                  │ │\n│  │  • Rate Limit Service                            │ │\n│  │  • Error Handler                                 │ │\n│  │  • Request Interceptors                          │ │\n│  └──────────────────────────────────────────────────┘ │\n└─────────────────────────────────────────────────────────┘\n                         ↕\n┌─────────────────────────────────────────────────────────┐\n│                  Backend Services                        │\n│                                                          │\n│  ┌──────────────┐    ┌──────────────┐                  │\n│  │ Resume API   │    │  Career AI   │                  │\n│  │ (Vercel)     │    │  (Gemini)    │                  │\n│  └──────────────┘    └──────────────┘                  │\n│                                                          │\n│  ┌──────────────┐    ┌──────────────┐                  │\n│  │  ATS Engine  │    │  Interview   │                  │\n│  │              │    │  Generator   │                  │\n│  └──────────────┘    └──────────────┘                  │\n└─────────────────────────────────────────────────────────┘\n```\n\n### State Management\n\n**Context Providers:**\n\n- `AuthContext`: User authentication state\n- `ToastProvider`: Global notifications\n- `ErrorBoundary`: Application-level error handling\n\n**Local Storage:**\n\n- `resume_analysis_rate_limit`: Rate limiting data\n- `authUser`: User profile information\n- `authAccessToken`: JWT access token\n- `authRefreshToken`: Refresh token\n\n**Session State:**\n\n- Component-level state (useState)\n- Form data (controlled inputs)\n- UI state (modals, dropdowns, loading)\n\n---\n\n### Performance Optimizations\n\n```\nBuild Time:\n├── Vite Code Splitting\n├── Tree Shaking\n├── CSS Purging (Tailwind)\n└── Asset Optimization\n\nRuntime:\n├── Lazy Loading Components\n├── Debounced Input Handlers\n├── Memoized Calculations\n├── Optimized Re-renders\n└── Image Lazy Loading\n\nNetwork:\n├── Request Batching\n├── Response Caching\n├── API Rate Limiting\n└── CDN Asset Delivery\n```\n\n## Project Structure\n\n```text\njobpsych-frontend/\n├── public/                    # Static assets\n│   ├── favicon.ico           # App favicon\n│   └── logo.png              # Brand logo\n│\n├── src/\n│   ├── components/           # React components organized by feature\n│   │   ├── buttons/\n│   │   │   └── NavigationButton.jsx    # Reusable navigation button\n│   │   ├── error/\n│   │   │   ├── ErrorBoundary.jsx       # Global error boundary\n│   │   │   ├── LoadingError.jsx        # Loading state errors\n│   │   │   ├── NetworkError.jsx        # Network failure handler\n│   │   │   └── RateLimitError.jsx      # Rate limit notifications\n│   │   ├── faq/\n│   │   │   ├── FAQDropdown.jsx         # Collapsible FAQ item\n│   │   │   └── FAQSection.jsx          # FAQ container\n│   │   ├── features/\n│   │   │   └── FeaturesSection.jsx     # Features showcase\n│   │   ├── hero/\n│   │   │   └── HeroSection.jsx         # Landing page hero\n│   │   ├── layout/\n│   │   │   ├── Footer.jsx              # Global footer\n│   │   │   └── Header.jsx              # Global header\n│   │   ├── resume/\n│   │   │   ├── ResumeUpload.jsx        # File upload component\n│   │   │   ├── ResumeRateLimitInfo.jsx # Rate limit display\n│   │   │   └── ResumeRateLimitError.jsx# Limit reached modal\n│   │   ├── testimonials/\n│   │   │   └── TestimonialsSection.jsx # User testimonials\n│   │   ├── toast/\n│   │   │   ├── Toast.jsx               # Toast notification\n│   │   │   ├── SimpleToast.jsx         # Fallback toast\n│   │   │   └── ToastManager.jsx        # Toast provider\n│   │   ├── Chatbot.jsx                 # AI support chatbot\n│   │   └── TypewriterText.jsx          # Animated text effect\n│   │\n│   ├── context/\n│   │   └── AuthContext.jsx             # Authentication context\n│   │\n│   ├── data/                           # Static data files\n│   │   ├── atsAnalyzerFeatures.js      # ATS feature data\n│   │   ├── candidateTips.js            # Resume tips\n│   │   ├── enhancePlan.js              # Pricing plans\n│   │   ├── faqs.js                     # FAQ content\n│   │   ├── features.js                 # Platform features\n│   │   ├── hireSuggestions.js          # Hiring tips\n│   │   ├── roleSuggetionsFeatures.js   # Role features\n│   │   └── testimonials.js             # User testimonials\n│   │\n│   ├── hooks/\n│   │   ├── useToast.js                 # Toast notification hook\n│   │   └── useUserManager.js           # User management hook\n│   │\n│   ├── pages/                          # Route pages\n│   │   ├── ATSAnalyzer.jsx             # ATS analyzer page\n│   │   ├── HireDisk.jsx                # HireDisk platform\n│   │   ├── InterviewPrepAI.jsx         # Interview practice\n│   │   ├── LandingPage.jsx             # Home page\n│   │   ├── NotFound.jsx                # 404 page\n│   │   └── RoleSuggestion.jsx          # Resume analysis\n│   │\n│   ├── utils/                          # Utility functions\n│   │   ├── api.js                      # API endpoints config\n│   │   ├── errorHandler.js             # Error utilities\n│   │   ├── paymentService.js           # Payment integration\n│   │   ├── rateLimitService.js         # Rate limit tracking\n│   │   ├── resumeRateLimitService.js   # Resume-specific limits\n│   │   └── userManager.js              # User management\n│   │\n│   ├── App.jsx                         # Root component\n│   ├── main.jsx                        # App entry point\n│   └── index.css                       # Global styles\n│\n├── .github/\n│   ├── copilot-instructions.md         # AI assistant guide\n│   └── workflows/                      # GitHub Actions\n│       └── dockerhub-push-image.yml    # Docker build workflow\n│\n├── docker-compose.yml                  # Docker Compose config\n├── Dockerfile                          # Docker build config\n├── nginx.conf                          # Nginx server config\n├── vercel.json                         # Vercel deployment config\n├── vite.config.js                      # Vite configuration\n├── tailwind.config.js                  # Tailwind CSS config\n├── eslint.config.js                    # ESLint configuration\n├── package.json                        # Dependencies\n├── DOCKER.md                           # Docker documentation\n└── readme.md                           # This file\n```\n\n## Component Architecture\n\n### Core Components\n\n#### 1. **Page Components** (`src/pages/`)\n\n**LandingPage.jsx**\n\n- Purpose: Main entry point and feature showcase\n- Features: Hero, Features, FAQ, Testimonials\n- Navigation: Links to all tools\n- SEO: Optimized meta tags and structured data\n\n**RoleSuggestion.jsx**\n\n- Purpose: Resume analysis and career matching\n- State Management: Rate limiting, file upload, analysis results\n- Key Features:\n  - Resume upload with drag \u0026 drop\n  - Optional target role and job description\n  - Rate limiting (5/day) with visual indicators\n  - AI-powered role recommendations\n  - Skill gap analysis\n- Dependencies: ResumeUpload, ResumeRateLimitInfo, ResumeRateLimitError\n\n**InterviewPrepAI.jsx**\n\n- Purpose: Interview practice and preparation\n- Features:\n  - Sample question library\n  - Recording simulation\n  - Progress tracking\n  - Performance analytics\n- Components: Question cards, recording interface, progress dashboard\n\n**ATSAnalyzer.jsx**\n\n- Purpose: Resume ATS compatibility checking\n- Features:\n  - Multi-platform ATS testing\n  - Keyword optimization\n  - Formatting recommendations\n  - Compatibility scoring\n- Output: Detailed analysis report with actionable items\n\n**HireDisk.jsx**\n\n- Purpose: Professional recruitment platform\n- Target: HR professionals and hiring managers\n- Features:\n  - Candidate management\n  - Interview question generation\n  - Team collaboration\n  - Analytics dashboard\n\n**NotFound.jsx**\n\n- Purpose: 404 error page\n- Design: Matches app theme with helpful navigation\n- Features: Quick links back to main pages\n\n---\n\n#### 2. **Layout Components** (`src/components/layout/`)\n\n**Header.jsx**\n\n```jsx\nFeatures:\n- Sticky navigation\n- Mobile responsive menu\n- Authentication status\n- Feature quick links\n- Dropdown navigation\n\nStructure:\n\u003cHeader\u003e\n  \u003cLogo /\u003e\n  \u003cDesktopNav\u003e\n    \u003cFeatureLinks /\u003e\n    \u003cAuthSection /\u003e\n  \u003c/DesktopNav\u003e\n  \u003cMobileNav\u003e\n    \u003cHamburgerMenu /\u003e\n    \u003cDropdown /\u003e\n  \u003c/MobileNav\u003e\n\u003c/Header\u003e\n```\n\n**Footer.jsx**\n\n```jsx\nFeatures:\n- Quick feature access\n- Contact information\n- Legal links\n- Social proof (rating)\n- Newsletter signup\n\nStructure:\n\u003cFooter\u003e\n  \u003cBrandSection /\u003e\n  \u003cQuickLinks /\u003e\n  \u003cFeaturesGrid /\u003e\n  \u003cContactInfo /\u003e\n  \u003cLegalLinks /\u003e\n\u003c/Footer\u003e\n```\n\n---\n\n#### 3. **Feature Components**\n\n**ResumeUpload.jsx**\n\n```jsx\nProps:\n- onFileUpload: (file) =\u003e void\n- isLoading: boolean\n- onError: (error) =\u003e void\n\nFeatures:\n- Drag \u0026 drop zone\n- File type validation (PDF, DOC, DOCX)\n- File size checking\n- Visual feedback\n- Error handling\n- Upload progress\n\nImplementation:\nconst ResumeUpload = ({ onFileUpload, isLoading, onError }) =\u003e {\n  const [dragActive, setDragActive] = useState(false);\n\n  const handleDrop = (e) =\u003e {\n    e.preventDefault();\n    const file = e.dataTransfer.files[0];\n\n    // Validate file\n    if (!isValidFile(file)) {\n      onError({ message: 'Invalid file type' });\n      return;\n    }\n\n    onFileUpload(file);\n  };\n\n  return (\n    \u003cdiv\n      onDrop={handleDrop}\n      onDragOver={(e) =\u003e e.preventDefault()}\n      className={dragActive ? 'border-blue-500' : ''}\n    \u003e\n      {/* Upload UI */}\n    \u003c/div\u003e\n  );\n};\n```\n\n**ResumeRateLimitInfo.jsx**\n\n```jsx\nProps:\n- remaining: number (0-5)\n- total: number (default: 5)\n- resetTime: timestamp\n\nFeatures:\n- Visual progress bar\n- Color-coded status (green/amber/red)\n- Countdown timer to reset\n- Usage statistics\n- Upgrade prompt when low\n\nStatus Colors:\n- Green (\u003e60%): 4-5 remaining\n- Amber (20-60%): 1-3 remaining\n- Red (\u003c20%): 0 remaining\n```\n\n**ResumeRateLimitError.jsx**\n\n```jsx\nProps:\n- onClose: () =\u003e void\n- resetTime: timestamp\n\nFeatures:\n- Modal overlay with glassmorphism\n- Countdown timer display\n- Upgrade call-to-action\n- Contact support link\n- Close button\n\nUsage:\nShows when user exceeds 5 daily analyses\nDisplays time until midnight UTC reset\nProvides upgrade options\n```\n\n---\n\n#### 4. **Utility Components**\n\n**NavigationButton.jsx**\n\n```jsx\nProps:\n- to: string (route path)\n- className: string (optional)\n- children: ReactNode\n\nFeatures:\n- React Router Link wrapper\n- Custom styling support\n- Hover effects\n- Active state styling\n\nUsage:\n\u003cNavigationButton to=\"/role-suggestions\"\u003e\n  Analyze Resume\n\u003c/NavigationButton\u003e\n```\n\n**ErrorBoundary.jsx**\n\n```jsx\nFeatures:\n- Catches React component errors\n- Displays fallback UI\n- Logs errors to console\n- Provides recovery options\n- Prevents full app crash\n\nImplementation:\nclass ErrorBoundary extends React.Component {\n  state = { hasError: false, error: null };\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error, info) {\n    console.error('Error caught:', error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return \u003cErrorFallbackUI /\u003e;\n    }\n    return this.props.children;\n  }\n}\n```\n\n**Toast.jsx / ToastManager.jsx**\n\n```jsx\nFeatures:\n- Global notification system\n- Success/error/warning types\n- Auto-dismiss with timer\n- Stack management\n- Custom positioning\n- Animation support\n\nUsage:\nconst { showToast } = useToast();\nshowToast('Analysis complete!', 'success');\n```\n\n**Chatbot.jsx**\n\n```jsx\nFeatures:\n- Floating chat widget\n- Context-aware responses\n- Quick action buttons\n- Expandable/collapsible\n- Message history\n- Support escalation\n\nImplementation:\n\u003cChatbot\n  position=\"bottom-right\"\n  greeting=\"How can I help?\"\n/\u003e\n```\n\n---\n\n### State Management\n\n#### Context Providers\n\n**AuthContext**\n\n```javascript\nProvides:\n- user: User object or null\n- accessToken: JWT string\n- refreshToken: JWT string\n- login: (credentials) =\u003e Promise\n- logout: () =\u003e void\n- checkLocalStorage: () =\u003e void\n\nUsage:\nconst { user, login, logout } = useAuth();\n```\n\n**ToastProvider**\n\n```javascript\nProvides:\n- showToast: (message, type) =\u003e void\n- hideToast: (id) =\u003e void\n- toasts: Toast[]\n\nTypes: 'success' | 'error' | 'warning' | 'info'\n```\n\n---\n\n### Custom Hooks\n\n**useToast**\n\n```javascript\nReturns:\n- showToast: (message, type, duration?) =\u003e void\n\nFeatures:\n- Auto-dismiss after duration\n- Multiple toasts support\n- Type-based styling\n```\n\n**useUserManager**\n\n```javascript\nReturns:\n- user: User | null\n- updateUser: (data) =\u003e void\n- clearUser: () =\u003e void\n\nFeatures:\n- localStorage persistence\n- Automatic serialization\n```\n\n---\n\n### Utility Services\n\n#### Rate Limiting Service (`resumeRateLimitService.js`)\n\n```javascript\nAPI:\n- getResumeAnalysisRateLimit(): RateLimit\n  Returns current limit status\n\n- canMakeResumeAnalysisRequest(): boolean\n  Checks if requests remaining\n\n- incrementResumeAnalysisCount(): RateLimit\n  Increments counter and returns new status\n\n- handleRateLimitHeaders(response): void\n  Syncs with server-side rate limits\n\n- getTimeUntilReset(): string | null\n  Returns formatted time (e.g., \"2h 15m\")\n\nData Structure:\n{\n  count: number,          // Requests made today\n  resetTime: timestamp,   // Midnight UTC\n  remaining: number       // Requests left (5 - count)\n}\n\nStorage: localStorage['resume_analysis_rate_limit']\n```\n\n#### Error Handler (`errorHandler.js`)\n\n```javascript\nFunctions:\n- classifyError(error): ErrorType\n  Categorizes error types\n\n- getErrorMessage(error): string\n  Returns user-friendly message\n\n- handleAPIError(error, fallback): void\n  Processes API errors\n\nError Types:\n- NETWORK_ERROR: Connection issues\n- RATE_LIMIT: Too many requests\n- VALIDATION_ERROR: Invalid input\n- AUTH_ERROR: Authentication failure\n- SERVER_ERROR: Backend issues\n```\n\n#### API Configuration (`api.js`)\n\n```javascript\nEndpoints:\n- AI_API_BASE_URL: Career AI backend\n  https://evaai-seven.vercel.app/api\n\n- ANALYZE_RESUME: Resume analysis endpoint\n  https://hr-resume-analyzer-backend.vercel.app/api/analyze-resume\n\nUsage:\nimport { ANALYZE_RESUME } from '@utils/api.js';\n\nconst response = await fetch(ANALYZE_RESUME, {\n  method: 'POST',\n  body: formData\n});\n```\n\n---\n\n### Styling Architecture\n\n#### Tailwind CSS Configuration\n\n```javascript\n// tailwind.config.js\nexport default {\n  content: [\"./index.html\", \"./src/**/*.{js,jsx}\"],\n  theme: {\n    extend: {\n      colors: {\n        primary: \"#4F46E5\", // Indigo\n        secondary: \"#06B6D4\", // Cyan\n        success: \"#10B981\", // Emerald\n        warning: \"#F59E0B\", // Amber\n        danger: \"#EF4444\", // Red\n      },\n      animation: {\n        \"pulse-slow\": \"pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n      },\n    },\n  },\n};\n```\n\n#### Design System\n\n**Colors:**\n\n- Slate: Background, cards, borders\n- Indigo/Violet: Primary actions\n- Cyan: Secondary accents\n- Emerald: Success states\n- Amber: Warning states\n- Red: Error states\n\n**Effects:**\n\n- Glassmorphism: `backdrop-blur-xl bg-white/10`\n- Gradients: Multi-color diagonal gradients\n- Shadows: Soft shadows with color tints\n- Animations: Pulse, bounce, fade, slide\n\n**Responsive Breakpoints:**\n\n- sm: 640px (mobile)\n- md: 768px (tablet)\n- lg: 1024px (desktop)\n- xl: 1280px (large desktop)\n- 2xl: 1536px (extra large)\n\n---\n\n### Routing Structure\n\n```javascript\n// main.jsx\nconst router = createBrowserRouter([\n  {\n    path: \"/\",\n    element: \u003cApp /\u003e,\n    errorElement: \u003cErrorBoundary /\u003e,\n    children: [\n      { index: true, element: \u003cLandingPage /\u003e },\n      { path: \"role-suggestions\", element: \u003cRoleSuggestion /\u003e },\n      { path: \"interview-prepai\", element: \u003cInterviewPrepAI /\u003e },\n      { path: \"ats-analyzer\", element: \u003cATSAnalyzer /\u003e },\n      { path: \"hiredisk\", element: \u003cHireDisk /\u003e },\n      { path: \"*\", element: \u003cNotFound /\u003e },\n    ],\n  },\n]);\n\n// App.jsx wrapper provides:\n// - Global background effects\n// - Outlet for child routes\n// - Chatbot component\n// - Error boundaries\n```\n\n## 🔧 Configuration\n\n### Environment Variables\n\nThe app uses Clerk for authentication and connects to multiple backend APIs. Configure the following in your environment:\n\n```javascript\n// Clerk Authentication (src/utils/api.js or environment file)\nconst CLERK_PUBLISHABLE_KEY = \"your-clerk-publishable-key\";\n\n// API Endpoints\nconst API_BASE_URL = \"https://your-backend-url.com\";\nconst ATS_API_URL = \"https://ats-analyzer-api.com\";\nconst INTERVIEW_API_URL = \"https://interview-prep-api.com\";\n```\n\n### Authentication System\n\n- **Clerk Integration**: Secure authentication with social login options\n- **Token Management**: Automatic storage of access and refresh tokens in localStorage\n- **Session Persistence**: Maintains user sessions across browser refreshes\n- **Protected Routes**: Role-based access control for different features\n\n### Rate Limiting\n\n- **Free Plan**: 2 analyses per 24 hours across all features\n- **Pro Plan**: 20 analyses per 24 hours with priority processing\n- **Premium Plan**: Unlimited usage with advanced features\n- **Reset Time**: Daily at midnight UTC\n- **Behavior**: Smart notifications with countdown timers and upgrade prompts\n\n### Caching Policy\n\n- Service worker disabled for fresh content\n- Browser caching disabled via meta tags\n- Local storage cleared on app initialization\n- Vite caching disabled in development\n\n## API Integration\n\n### Core Endpoints\n\n#### Resume Analysis\n\n```http\nPOST /api/analyze-resume\nContent-Type: multipart/form-data\nBody: FormData with 'resume' file field\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n#### ATS Compatibility Check\n\n```http\nPOST /api/ats-analyze\nContent-Type: multipart/form-data\nBody: FormData with 'resume' file field and 'jobDescription' text\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n#### Interview Preparation\n\n```http\nPOST /api/generate-questions\nContent-Type: application/json\nBody: {\n  \"resumeData\": {...},\n  \"jobRole\": \"Software Engineer\",\n  \"experience\": \"3 years\"\n}\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n#### Career Suggestions\n\n```http\nPOST /api/career-suggestions\nContent-Type: application/json\nBody: {\n  \"skills\": [...],\n  \"interests\": [...],\n  \"experience\": \"3 years\"\n}\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n### Response Formats\n\n**Success Response**:\n\n```json\n{\n  \"success\": true,\n  \"data\": {\n    \"analysis\": \"Detailed analysis text...\",\n    \"score\": 85,\n    \"recommendations\": [...],\n    \"questions\": [...]\n  },\n  \"usage\": {\n    \"remaining\": 15,\n    \"resetTime\": \"2025-09-11T00:00:00Z\"\n  }\n}\n```\n\n**Rate Limit Response**:\n\n```json\n{\n  \"success\": false,\n  \"error\": \"Rate limit exceeded\",\n  \"message\": \"Daily limit reached. Resets in 14 hours.\",\n  \"retryAfter\": 50400\n}\n```\n\n**Authentication Error**:\n\n```json\n{\n  \"success\": false,\n  \"error\": \"Authentication required\",\n  \"message\": \"Please log in to continue\"\n}\n```\n\n## Error Handling\n\n### Rate Limit Errors\n\n- Displays modal with countdown timer until next midnight UTC\n- Shows contact information for additional quota requests\n- Provides helpful tips while waiting\n- Auto-calculates time remaining with live updates\n\n### File Upload Errors\n\n- Validates file types (PDF, DOC, DOCX only)\n- Shows file size and format requirements\n- Handles network errors gracefully\n- Provides retry options\n\n### Fallback Components\n\n- `SimpleResumeUpload`: Basic file upload if main component fails\n- `SimpleToast`: Basic notifications if main toast fails\n- `ErrorBoundary`: Catches and handles React component errors\n\n## Browser Support\n\n- **Modern Browsers**: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+\n- **Mobile**: iOS Safari 14+, Chrome Mobile 90+\n- **Features**: ES6+, Fetch API, FormData, File API\n\n## Security Features\n\n- Client-side file type validation\n- File size limits enforced\n- No sensitive data stored in localStorage\n- CORS-compliant API requests\n- Input sanitization for file names\n\n## Troubleshooting\n\n### Common Issues\n\n**Upload Fails**:\n\n- Check file format (PDF, DOC, DOCX only)\n- Verify internet connection\n- Check if rate limit exceeded\n\n**Rate Limit Reached**:\n\n- Wait until countdown expires (resets at midnight UTC)\n- Contact \u003cmailto:rafkhan9323@gmail.com\u003e for additional quota\n\n**App Won't Load**:\n\n- Clear browser cache and cookies\n- Check JavaScript is enabled\n- Try incognito/private browsing mode\n\n### Debug Mode\n\nIn development, check browser console for detailed error messages and network request logs.\n\n## 💻 Development Guide\n\n### Setting Up Development Environment\n\n#### Prerequisites\n\n```bash\n# Required\nNode.js \u003e= 18.0.0\nnpm \u003e= 7.0.0\n\n# Recommended\nVS Code with extensions:\n  - ESLint\n  - Prettier\n  - Tailwind CSS IntelliSense\n  - ES7+ React/Redux/React-Native snippets\n```\n\n#### Initial Setup\n\n```bash\n# 1. Clone repository\ngit clone\ncd\n\n# 2. Install dependencies\nnpm install\n\n# 3. Configure environment (optional)\n# Create .env file for custom API endpoints\necho \"VITE_API_URL=http://localhost:5000\" \u003e .env\n\n# 4. Start development server\nnpm run dev\n\n# Access at http://localhost:3000\n```\n\n### Development Workflow\n\n#### Feature Development\n\n```bash\n# 1. Create feature branch\ngit checkout -b feature/new-feature-name\n\n# 2. Make changes and test\nnpm run dev\n\n# 3. Run linter\nnpm run lint\n\n# 4. Build for production test\nnpm run build\nnpm run preview\n\n# 5. Commit changes\ngit add .\ngit commit -m \"feat: add new feature\"\n\n# 6. Push and create PR\ngit push origin feature/new-feature-name\n```\n\n#### Code Style Guide\n\n**Component Structure:**\n\n```jsx\n// 1. Imports\nimport React, { useState, useEffect } from \"react\";\nimport ComponentA from \"@components/ComponentA\";\nimport { utilityFunction } from \"@utils/helpers\";\n\n// 2. Component Definition\nconst MyComponent = ({ prop1, prop2 }) =\u003e {\n  // 3. State Declarations\n  const [state1, setState1] = useState(initialValue);\n\n  // 4. Effects\n  useEffect(() =\u003e {\n    // effect logic\n  }, [dependencies]);\n\n  // 5. Event Handlers\n  const handleClick = () =\u003e {\n    // handler logic\n  };\n\n  // 6. Render Logic\n  return \u003cdiv className=\"container\"\u003e{/* JSX */}\u003c/div\u003e;\n};\n\n// 7. Export\nexport default MyComponent;\n```\n\n**Naming Conventions:**\n\n- Components: PascalCase (`UserProfile.jsx`)\n- Functions: camelCase (`getUserData`)\n- Constants: UPPER_SNAKE_CASE (`API_BASE_URL`)\n- Files: Match component name (`UserProfile.jsx`)\n- CSS Classes: Tailwind utilities\n\n**Import Aliases:**\n\n```javascript\n@/         → src/\n@components → src/components/\n@pages     → src/pages/\n@utils     → src/utils/\n@data      → src/data/\n@hooks     → src/hooks/\n```\n\n#### Testing Strategy\n\n**Manual Testing Checklist:**\n\n- [ ] Desktop responsiveness (1920px, 1366px, 1024px)\n- [ ] Tablet responsiveness (768px)\n- [ ] Mobile responsiveness (375px, 414px)\n- [ ] File upload functionality\n- [ ] Rate limiting behavior\n- [ ] Error handling\n- [ ] Navigation flow\n- [ ] API integration\n- [ ] Loading states\n- [ ] Toast notifications\n\n**Browser Testing:**\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n#### Test Coverage\n\n**Current Coverage Report (October 2025):**\n\n```text\n % Coverage report from v8\n-----------------------------|---------|----------|---------|---------|-------------------------------------------\nFile                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s\n-----------------------------|---------|----------|---------|---------|-------------------------------------------\nAll files                    |   38.97 |    83.92 |      68 |   38.97 |\n src                         |       0 |        0 |       0 |       0 |\n  App.jsx                    |       0 |        0 |       0 |       0 | 1-20\n  main.jsx                   |       0 |        0 |       0 |       0 | 1-60\n src/components              |   90.63 |    85.36 |   81.81 |   90.63 |\n  Chatbot.jsx                |   98.36 |     87.5 |      90 |   98.36 | 51-52,67,214,224\n  TypewriterText.jsx         |       0 |        0 |       0 |       0 | 1-26\n src/components/buttons      |   80.39 |       40 |   66.66 |   80.39 |\n  NavigationButton.jsx       |   80.39 |       40 |   66.66 |   80.39 | 26,31-33,37-38,50-53\n src/components/error        |   97.82 |    85.71 |     100 |   97.82 |\n  ErrorBoundary.jsx          |   98.71 |     92.3 |     100 |   98.71 | 27-28\n  LoadingError.jsx           |     100 |      100 |     100 |     100 |\n  NetworkError.jsx           |   95.55 |    57.14 |     100 |   95.55 | 22,24,33,35,44,46\n  RateLimitError.jsx         |   95.33 |    86.66 |     100 |   95.33 | 24-26,49-52\n  ResumeRateLimitError.jsx   |     100 |      100 |     100 |     100 |\n src/components/faq          |     100 |    96.66 |     100 |     100 |\n  FAQDropdown.jsx            |     100 |      100 |     100 |     100 |\n  FAQSection.jsx             |     100 |    66.66 |     100 |     100 | 46\n src/components/features     |     100 |      100 |     100 |     100 |\n  FeaturesSection.jsx        |     100 |      100 |     100 |     100 |\n src/components/hero         |       0 |        0 |       0 |       0 |\n  HeroSection.jsx            |       0 |        0 |       0 |       0 | 1-283\n src/components/layout       |    51.6 |    93.54 |   72.72 |    51.6 |\n  Header.jsx                 |     100 |    96.66 |      80 |     100 | 77\n src/components/resume       |   60.21 |     87.5 |      90 |   60.21 |\n  ResumeRateLimitInfo.jsx    |       0 |        0 |       0 |       0 | 1-111\n  ResumeUpload.jsx           |     100 |    90.32 |     100 |     100 | 48,93,102\n src/components/testimonials |     100 |      100 |     100 |     100 |\n  TestimonialsSection.jsx    |     100 |      100 |     100 |     100 |\n src/components/toast        |   27.64 |    66.66 |   11.11 |   27.64 |\n  SimpleToast.jsx            |       0 |        0 |       0 |       0 | 1-113\n  Toast.jsx                  |   31.55 |      100 |       0 |   31.55 | ...23-136,140-153,157-170,174-187,338-587\n  ToastManager.jsx           |   34.54 |      100 |      50 |   34.54 | ...03-114,141-144,150-165,172-187,190-195\n src/hooks                   |   98.27 |    97.43 |     100 |   98.27 |\n  useAIChat.js               |   98.14 |    97.29 |     100 |   98.14 | 81-83\n  useToast.js                |     100 |      100 |     100 |     100 |\n src/pages                   |       0 |        0 |       0 |       0 |\n  ATSAnalyzer.jsx            |       0 |        0 |       0 |       0 | 1-415\n  HireDisk.jsx               |       0 |        0 |       0 |       0 | 1-381\n  InterviewPrepAI.jsx        |       0 |        0 |       0 |       0 | 1-378\n  LandingPage.jsx            |       0 |        0 |       0 |       0 | 1-40\n  NotFound.jsx               |       0 |        0 |       0 |       0 | 1-54\n  RoleSuggestion.jsx         |       0 |        0 |       0 |       0 | 1-1432\n src/utils                   |   98.87 |    85.43 |     100 |    98.87 |\n  aiApi.js                   |   98.74 |    67.74 |     100 |   98.74 | 32,59-60\n  api.js                     |     100 |      100 |     100 |     100 |\n  env.js                     |     100 |      100 |     100 |     100 |\n  errorHandler.js            |   99.18 |    93.61 |     100 |    99.18 | 59\n  resumeRateLimitService.js  |    98.7 |    90.47 |     100 |    98.7 | 91-92\n-----------------------------|---------|----------|---------|---------|-------------------------------------------\n```\n\n**Coverage Summary:**\n\n- **Overall Coverage**: 38.97% (Statements), 83.92% (Branches), 68% (Functions), 38.97% (Lines)\n- **Components Coverage**: 90.63% (High coverage for reusable components)\n- **Error Components**: 97.82% (Excellent coverage for error handling)\n- **Hooks Coverage**: 98.27% (Well-tested custom hooks)\n- **Utils Coverage**: 98.87% (Comprehensive utility testing)\n- **Test Files**: 19 test files, 360 passed tests, 1 skipped\n\n**Key Coverage Highlights:**\n\n- **Error Boundary Components**: 97.82% coverage (ErrorBoundary: 98.71%, RateLimitError: 95.33%)\n- **Core Components**: Chatbot (98.36%), NavigationButton (80.39%)\n- **Utility Functions**: 98.87% coverage across all utility modules\n- **Custom Hooks**: 98.27% coverage with comprehensive testing\n\n### Common Development Tasks\n\n#### Adding a New Page\n\n```bash\n# 1. Create page component\ntouch src/pages/NewPage.jsx\n\n# 2. Implement component\ncat \u003e src/pages/NewPage.jsx \u003c\u003c 'EOF'\nimport React from 'react';\nimport Header from '@components/layout/Header';\nimport Footer from '@components/layout/Footer';\n\nconst NewPage = () =\u003e {\n  return (\n    \u003cdiv className=\"min-h-screen\"\u003e\n      \u003cHeader /\u003e\n      \u003cmain className=\"container mx-auto py-12\"\u003e\n        {/* Page content */}\n      \u003c/main\u003e\n      \u003cFooter /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default NewPage;\nEOF\n\n# 3. Add route in main.jsx\n# Add to router children array:\n# { path: 'new-page', element: \u003cNewPage /\u003e }\n\n# 4. Add navigation link\n# Update Header.jsx or Footer.jsx with:\n# \u003cNavigationButton to=\"/new-page\"\u003eNew Page\u003c/NavigationButton\u003e\n```\n\n#### Adding a New API Endpoint\n\n```javascript\n// 1. Define in src/utils/api.js\nexport const NEW_ENDPOINT = \"https://api.example.com/new-endpoint\";\n\n// 2. Create service function (optional)\n// src/utils/newService.js\nexport const callNewEndpoint = async (data) =\u003e {\n  const response = await fetch(NEW_ENDPOINT, {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application/json\" },\n    body: JSON.stringify(data),\n  });\n\n  if (!response.ok) {\n    throw new Error(\"API call failed\");\n  }\n\n  return response.json();\n};\n\n// 3. Use in component\nimport { callNewEndpoint } from \"@utils/newService\";\n\nconst result = await callNewEndpoint({ param: \"value\" });\n```\n\n#### Adding Rate Limiting to New Feature\n\n```javascript\n// 1. Create rate limit service\n// src/utils/featureRateLimitService.js\n\nconst STORAGE_KEY = \"feature_rate_limit\";\nconst DAILY_LIMIT = 10;\nconst RESET_INTERVAL = 24 * 60 * 60 * 1000;\n\nexport const getFeatureRateLimit = () =\u003e {\n  const stored = localStorage.getItem(STORAGE_KEY);\n  if (!stored) {\n    return {\n      count: 0,\n      resetTime: Date.now() + RESET_INTERVAL,\n      remaining: DAILY_LIMIT,\n    };\n  }\n\n  const data = JSON.parse(stored);\n  const now = Date.now();\n\n  if (now \u003e= data.resetTime) {\n    const resetData = {\n      count: 0,\n      resetTime: now + RESET_INTERVAL,\n      remaining: DAILY_LIMIT,\n    };\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(resetData));\n    return resetData;\n  }\n\n  return {\n    ...data,\n    remaining: Math.max(0, DAILY_LIMIT - data.count),\n  };\n};\n\nexport const incrementFeatureCount = () =\u003e {\n  const rateLimit = getFeatureRateLimit();\n  if (rateLimit.remaining \u003c= 0) {\n    throw new Error(\"Rate limit exceeded\");\n  }\n\n  const newData = {\n    ...rateLimit,\n    count: rateLimit.count + 1,\n    remaining: rateLimit.remaining - 1,\n  };\n\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(newData));\n  return newData;\n};\n\n// 2. Use in component\nimport {\n  getFeatureRateLimit,\n  incrementFeatureCount,\n} from \"@utils/featureRateLimitService\";\n\nconst [rateLimitInfo, setRateLimitInfo] = useState(null);\n\nuseEffect(() =\u003e {\n  setRateLimitInfo(getFeatureRateLimit());\n}, []);\n\nconst handleAction = async () =\u003e {\n  if (rateLimitInfo.remaining \u003c= 0) {\n    alert(\"Daily limit reached\");\n    return;\n  }\n\n  try {\n    incrementFeatureCount();\n    // Perform action\n    setRateLimitInfo(getFeatureRateLimit());\n  } catch (error) {\n    console.error(error);\n  }\n};\n```\n\n### Performance Optimization\n\n#### Build Optimization\n\n```bash\n# Analyze bundle size\nnpm run build -- --mode production\n\n# Check dist/ folder\nls -lh dist/\n\n# Typical sizes:\n# - index.html: ~5KB\n# - CSS: 50-100KB (with Tailwind purge)\n# - JS: 200-500KB (with code splitting)\n```\n\n#### Code Splitting\n\n```javascript\n// Lazy load heavy components\nconst HeavyComponent = lazy(() =\u003e import(\"./HeavyComponent\"));\n\n// Use with Suspense\n\u003cSuspense fallback={\u003cLoadingSpinner /\u003e}\u003e\n  \u003cHeavyComponent /\u003e\n\u003c/Suspense\u003e;\n```\n\n#### Image Optimization\n\n```jsx\n// Use lazy loading\n\u003cimg\n  src=\"/image.jpg\"\n  loading=\"lazy\"\n  alt=\"Description\"\n/\u003e\n\n// Provide multiple sizes\n\u003cimg\n  srcSet=\"/image-320.jpg 320w,\n          /image-640.jpg 640w,\n          /image-1280.jpg 1280w\"\n  sizes=\"(max-width: 320px) 280px,\n         (max-width: 640px) 600px,\n         1200px\"\n  src=\"/image-640.jpg\"\n  alt=\"Description\"\n/\u003e\n```\n\n---\n\n### Docker Deployment\n\n#### Build Docker Image\n\n```bash\n# Basic build\ndocker build -t jobpsych-frontend:latest .\n\n# With build args\ndocker build \\\n  --build-arg VITE_API_URL=https://api.jobpsych.com \\\n  --build-arg VITE_STRIPE_PUBLISHABLE_KEY=pk_live_xxxxx \\\n  -t jobpsych-frontend:latest .\n```\n\n#### Run Container\n\n```bash\n# Run on port 8080\ndocker run -d \\\n  -p 8080:80 \\\n  --name jobpsych \\\n  jobpsych-frontend:latest\n\n# Access at http://localhost:8080\n```\n\n#### Docker Compose\n\n```bash\n# Start services\ndocker-compose up -d\n\n# View logs\ndocker-compose logs -f\n\n# Stop services\ndocker-compose down\n\n# Rebuild\ndocker-compose build --no-cache\n```\n\n#### Docker Configuration\n\n**Dockerfile:**\n\n```dockerfile\n# Build stage\nFROM node:20-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci\nCOPY . .\nARG VITE_API_URL\nRUN npm run build\n\n# Production stage\nFROM nginx:alpine\nCOPY --from=builder /app/dist /usr/share/nginx/html\nCOPY nginx.conf /etc/nginx/nginx.conf\nEXPOSE 80\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n\n**nginx.conf:**\n\n```nginx\nserver {\n    listen 80;\n    server_name localhost;\n    root /usr/share/nginx/html;\n    index index.html;\n\n    # SPA routing\n    location / {\n        try_files $uri $uri/ /index.html;\n    }\n\n    # Cache static assets\n    location ~* \\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {\n        expires 1y;\n        add_header Cache-Control \"public, immutable\";\n    }\n\n    # Security headers\n    add_header X-Frame-Options \"SAMEORIGIN\" always;\n    add_header X-Content-Type-Options \"nosniff\" always;\n    add_header X-XSS-Protection \"1; mode=block\" always;\n\n    # Gzip compression\n    gzip on;\n    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;\n}\n```\n\n---\n\n### CI/CD Pipeline\n\n#### GitHub Actions (`.github/workflows/deploy.yml`)\n\n```yaml\nname: Deploy to Production\n\non:\n  push:\n    branches: [main]\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v4\n\n      - name: Setup Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: \"20\"\n          cache: \"npm\"\n\n      - name: Install dependencies\n        run: npm ci\n\n      - name: Run linter\n        run: npm run lint\n\n      - name: Build\n        env:\n          VITE_API_URL: ${{ secrets.VITE_API_URL }}\n          VITE_STRIPE_PUBLISHABLE_KEY: ${{ secrets.VITE_STRIPE_PUBLISHABLE_KEY }}\n        run: npm run build\n\n      - name: Deploy to Vercel\n        uses: amondnet/vercel-action@v20\n        with:\n          vercel-token: ${{ secrets.VERCEL_TOKEN }}\n          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}\n          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}\n          vercel-args: \"--prod\"\n```\n\n---\n\n### Post-Deployment Checklist\n\n- [ ] Verify all pages load correctly\n- [ ] Test file upload functionality\n- [ ] Check API connectivity\n- [ ] Verify rate limiting works\n- [ ] Test authentication flow\n- [ ] Check mobile responsiveness\n- [ ] Validate SSL certificate\n- [ ] Test external links\n- [ ] Check error pages (404, 500)\n- [ ] Verify analytics tracking\n- [ ] Test payment integration (if applicable)\n- [ ] Check SEO meta tags\n- [ ] Validate structured data\n- [ ] Test chatbot functionality\n- [ ] Monitor error logs\n\n---\n\n## 📞 Support \u0026 Contact\n\n### Getting Help\n\n**Email Support:**\n\n- **Email**: rafkhan9323@gmail.com\n- **Response Time**: 24-48 hours\n- **Issues**: Technical support, feature requests, rate limit increases\n\n**Self-Service Resources:**\n\n- FAQ Section: In-app help for common questions\n- Chatbot: Real-time assistance for basic queries\n- Error Messages: Detailed error information with solutions\n\n**Report an Issue:**\n\n```markdown\n**Issue Type:** [Bug/Feature Request/Question]\n**Page/Feature:** [Which part of the app]\n**Description:** [Detailed description]\n**Steps to Reproduce:** [If bug]\n**Expected Behavior:** [What should happen]\n**Actual Behavior:** [What actually happens]\n**Browser/Device:** [Your environment]\n**Screenshots:** [If applicable]\n```\n\n**Feature Requests:**\n\n- Submit via email with detailed use case\n- Include mockups or examples if possible\n- Explain problem it solves\n- Estimated user impact\n\n**Rate Limit Increases:**\n\n- Contact via email\n- Provide use case and requirements\n- May require verification\n- Typically processed within 48 hours\n\n## 🆕 Recent Features\n\n### v2.2.0 - ATS Analyzer (September 2025)\n\n- **Resume Optimization**: AI-powered ATS compatibility analysis\n- **Keyword Matching**: Automatic keyword suggestions for job applications\n- **Compatibility Scoring**: Detailed ATS compatibility reports\n- **Industry Insights**: Job market trends and requirements analysis\n\n### v2.1.0 - InterviewPrep AI (September 2025)\n\n- **AI Interview Practice**: Personalized interview question generation\n- **Progress Tracking**: Monitor interview preparation progress\n- **Custom Scenarios**: Industry-specific interview simulations\n- **Feedback System**: Detailed performance analysis and tips\n\n### v2.0.0 - Major Platform Enhancement (August 2025)\n\n- **Multi-Feature Architecture**: Unified platform for all career tools\n- **Advanced Authentication**: Clerk-powered secure authentication\n- **Responsive Design**: Mobile-first approach with modern UI\n- **Comprehensive FAQ**: Categorized help system for all features\n\n## 🏛️ Architecture Overview\n\n### Technology Stack\n\n- **Frontend**: React 18 with Hooks, Vite build system\n- **Styling**: Tailwind CSS with custom design system\n- **Authentication**: Clerk authentication service\n- **State Management**: React Context API\n- **Routing**: React Router for client-side navigation\n- **API Communication**: Axios with custom error handling\n\n### Component Architecture\n\n- **Feature-based Organization**: Components grouped by functionality\n- **Reusable Components**: Shared UI elements across features\n- **Error Boundaries**: Graceful error handling at component level\n- **Progressive Enhancement**: Core functionality works without JavaScript\n\n### Data Management\n\n- **Static Data**: JSON files for FAQs, testimonials, and pricing\n- **API Integration**: RESTful APIs for dynamic content\n- **Local Storage**: Token persistence and user preferences\n- **Caching Strategy**: Optimized for performance and offline use\n\n## 📄 License\n\nThis project is private and proprietary. All rights reserved.\n\n---\n\n## 📊 Application Summary\n\n### Key Metrics\n\n**Application Stats:**\n\n- **Pages**: 6 main pages + 1 error page\n- **Components**: 30+ reusable components\n- **Routes**: 5 feature routes + landing\n- **API Endpoints**: 2 main backend services\n- **Rate Limits**: 5 resume analyses per day (free tier)\n- **Supported Files**: PDF, DOC, DOCX\n- **Max File Size**: 10MB\n- **Build Size**: ~500KB (gzipped)\n- **Load Time**: \u003c3s on 3G\n\n**Technology Stack:**\n\n```\nFrontend:        React 18.x\nBuild Tool:      Vite 5.x\nStyling:         Tailwind CSS 3.x\nRouting:         React Router 6.x\nState:           React Context API\nAuthentication:  Clerk (optional)\nNotifications:   Custom Toast System\nDeployment:      Vercel / Docker\n```\n\n### Feature Comparison Matrix\n\n| Feature              | Free       | Pro               | Premium            |\n| -------------------- | ---------- | ----------------- | ------------------ |\n| **Role Suggestions** | ✅ 5/day   | ✅ 20/day         | ✅ Unlimited       |\n| **Resume Upload**    | ✅ PDF/DOC | ✅ All formats    | ✅ All formats     |\n| **AI Analysis**      | ✅ Basic   | ✅ Advanced       | ✅ Premium AI      |\n| **InterviewPrep AI** | ✅ Samples | ✅ Custom         | ✅ Mock interviews |\n| **ATS Analyzer**     | ✅ Basic   | ✅ Multi-platform | ✅ Full reports    |\n| **HireDisk Access**  | ❌         | ❌                | ✅ Full access     |\n| **Priority Support** | ❌         | ✅ Email/Chat     | ✅ 24/7 Support    |\n| **Team Features**    | ❌         | ❌                | ✅ Collaboration   |\n| **API Access**       | ❌         | ❌                | ✅ Full API        |\n| **Export Reports**   | ❌         | ✅ PDF            | ✅ PDF/Excel       |\n\n### Quick Reference\n\n**Common Commands:**\n\n```bash\n# Development\nnpm run dev              # Start dev server (localhost:3000)\nnpm run build           # Production build\nnpm run preview         # Preview build locally\nnpm run lint            # Check code quality\n\n# Docker\ndocker build -t jobpsych .                    # Build image\ndocker run -p 8080:80 jobpsych               # Run container\ndocker-compose up -d                          # Start with compose\n\n# Deployment\nvercel                                        # Deploy to Vercel\nvercel --prod                                 # Production deploy\n```\n\n**File Paths:**\n\n```\nAPI Config:       src/utils/api.js\nRate Limiting:    src/utils/resumeRateLimitService.js\nError Handling:   src/utils/errorHandler.js\nAuthentication:   src/context/AuthContext.jsx\nRoutes:           src/main.jsx\nGlobal Styles:    src/index.css\nVite Config:      vite.config.js\nTailwind Config:  tailwind.config.js\n```\n\n**Environment Variables:**\n\n```bash\n# Optional - defaults to hosted services\nVITE_API_URL=https://evaai-seven.vercel.app/api\nVITE_RESUME_API=https://hr-resume-analyzer-backend.vercel.app/api\nVITE_STRIPE_PUBLISHABLE_KEY=pk_test_xxx  # If using payments\nVITE_CLERK_PUBLISHABLE_KEY=pk_test_xxx   # If using auth\n```\n\n### API Endpoints Reference\n\n**Resume Analysis:**\n\n```\nPOST https://hr-resume-analyzer-backend.vercel.app/api/analyze-resume\nContent-Type: multipart/form-data\n\nRequest:\n- resume: File (PDF/DOC/DOCX)\n- targetRole: string (optional)\n- jobDescription: string (optional)\n\nResponse:\n{\n  \"success\": true,\n  \"data\": {\n    \"recommendations\": [...],\n    \"skills\": {...},\n    \"analysis\": \"...\"\n  }\n}\n\nRate Limit: 5 requests per day per IP\nReset: Daily at midnight UTC\n```\n\n**Career AI:**\n\n```\nPOST https://evaai-seven.vercel.app/api/chat\nContent-Type: application/json\n\nRequest:\n{\n  \"message\": \"string\",\n  \"context\": \"string\",\n  \"sessionType\": \"coaching|analysis|general\"\n}\n\nResponse:\n{\n  \"success\": true,\n  \"data\": {\n    \"response\": \"AI response text\",\n    \"timestamp\": \"2025-10-05T...\"\n  }\n}\n```\n\n### Rate Limiting Details\n\n**Implementation:**\n\n```javascript\n// Client-Side Tracking\nStorage: localStorage['resume_analysis_rate_limit']\nStructure: { count: number, resetTime: timestamp, remaining: number }\nReset: 24 hours (midnight UTC)\nLimit: 5 per day\n\n// Server-Side Headers\nX-RateLimit-Limit: 5\nX-RateLimit-Remaining: 3\nX-RateLimit-Reset: 1728086400\nRetry-After: 43200  // seconds\n\n// Synchronization\nClient checks remaining before request\nServer validates and returns headers\nClient updates from server response\nModal shown when limit exceeded\n```\n\n**User Experience:**\n\n- Visual quota in header (always visible)\n- Color-coded status (green/amber/red)\n- Hover tooltip with details\n- Modal notification at limit\n- Countdown timer to reset\n- Upgrade prompts and CTAs\n\n### Error Handling Matrix\n\n| Error Type     | User Message                           | Recovery Action   |\n| -------------- | -------------------------------------- | ----------------- |\n| **Rate Limit** | \"Daily limit reached. Resets in Xh Xm\" | Wait or upgrade   |\n| **Network**    | \"Connection failed. Please try again\"  | Retry button      |\n| **File Type**  | \"Only PDF, DOC, DOCX supported\"        | Choose valid file |\n| **File Size**  | \"File too large. Max 10MB\"             | Compress file     |\n| **API Error**  | \"Analysis failed. Please retry\"        | Retry button      |\n| **Timeout**    | \"Request timed out. Try again\"         | Retry button      |\n| **Auth Error** | \"Please log in to continue\"            | Login redirect    |\n| **Server 500** | \"Service temporarily unavailable\"      | Contact support   |\n\n### Security Measures\n\n**Client-Side:**\n\n- File type validation\n- File size checking\n- Input sanitization\n- XSS prevention\n- CORS headers\n\n**API Communication:**\n\n- HTTPS only\n- Request validation\n- Error message sanitization\n- Rate limiting\n- Token-based auth (optional)\n\n**Data Privacy:**\n\n- No sensitive data in localStorage\n- No permanent file storage\n- Analysis data not retained\n- GDPR compliant\n- Privacy policy available\n\n### Browser Support\n\n| Browser           | Minimum Version | Features        |\n| ----------------- | --------------- | --------------- |\n| **Chrome**        | 90+             | ✅ Full support |\n| **Firefox**       | 88+             | ✅ Full support |\n| **Safari**        | 14+             | ✅ Full support |\n| **Edge**          | 90+             | ✅ Full support |\n| **Mobile Safari** | iOS 14+         | ✅ Full support |\n| **Chrome Mobile** | 90+             | ✅ Full support |\n\n**Required APIs:**\n\n- Fetch API\n- FormData API\n- File API\n- LocalStorage API\n- ES6+ JavaScript\n\n### Performance Benchmarks\n\n**Load Performance:**\n\n```\nFirst Contentful Paint:    \u003c 1.5s\nLargest Contentful Paint:  \u003c 2.5s\nTime to Interactive:       \u003c 3.5s\nCumulative Layout Shift:   \u003c 0.1\nTotal Blocking Time:       \u003c 300ms\n```\n\n**Build Performance:**\n\n```\nBuild Time:     15-30 seconds\nBundle Size:    ~450KB (gzipped)\nCSS Size:       ~80KB (purged)\nImage Assets:   ~50KB\nTotal Size:     ~600KB\n```\n\n-\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafiqdevhub%2Fjobpsych","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafiqdevhub%2Fjobpsych","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafiqdevhub%2Fjobpsych/lists"}