Skip to content

development.md

Latest commit

 

History

History
133 lines (104 loc) · 4.99 KB

development.md

File metadata and controls

133 lines (104 loc) · 4.99 KB
Raw

Developer Guide & Workflow

This document provides guidelines, environment setup instructions, and testing workflows for engineers contributing to the Resume Builder project.

1. Prerequisites

  • Node.js: v18.0.0 or higher (tested with Node v20.x and v24.x).
  • Package Manager: npm (comes bundled with Node.js).
  • Optional for AI Features: A Google Gemini API Key from Google AI Studio.

2. Local Setup & Installation

  1. Clone the Repository:

    git clone https://github.com/naphiertech/resumebuilder.git
cd resumebuilder

  2. Install Dependencies:

    npm install

  3. Configure Environment Variables: Copy .env.example to .env:

    cp .env.example .env

    Configure the variables in .env:

    # Server-side Google Gemini API Key for Job Match
GEMINI_API_KEY=your_actual_gemini_api_key_here

# Gemini Model (Default: gemini-3.5-flash)
GEMINI_MODEL=gemini-3.5-flash

# Production Canonical Site URL (Used for SEO and Open Graph)
VITE_SITE_URL=https://naphix-resume.netlify.app

  4. Start Development Server:

    npm run dev

    The application will be accessible at http://localhost:5173/.

3. Available npm Scripts

Command Description
npm run dev Starts the Vite development server with the /api/job-match server middleware.
npm run build Runs TypeScript compilation (tsc) and compiles the production bundle into dist/.
npm run preview Starts a local server to preview the built dist/ production assets.

4. Automated Testing Suites

The repository contains specialized automated test suites in the scripts/ directory executed via npx tsx:

1. SEO & Metadata Validation Suite

Validates metadata, Open Graph, Twitter cards, Schema.org JSON-LD, robots.txt, and sitemap.xml:

npx tsx scripts/test_seo.ts

2. Job Match Security & Rate Limiting Suite

Validates IP concurrency locks, sliding window limits, daily quotas, token bomb defense, cryptographic caching, and circuit breaker mechanics:

npx tsx scripts/test_job_match_security.ts

3. Gemini Job Match & Schema Audit Suite

Validates model configuration, input sanitization, error propagation, and real Gemini API response schemas:

npx tsx scripts/test_job_match.ts

4. Universal Resume Importer Comprehensive Corpus (35 Cases)

Tests the 10-stage importer pipeline across 16 valid resume layouts, 12 negative non-resume controls (invoices, receipts, certificates), and 7 borderline layouts:

npx tsx scripts/test_universal_importer_comprehensive.ts

Run All Test Suites in Batch

npx tsx scripts/test_seo.ts && npx tsx scripts/test_job_match_security.ts && npx tsx scripts/test_job_match.ts && npx tsx scripts/test_universal_importer_comprehensive.ts

5. Code Structure & Conventions

src/
├── components/          # React UI components
│   ├── editor/          # Accordion forms & custom section manager
│   ├── export/          # PDF/Word download modal
│   ├── importer/        # Universal Resume Importer dialog & staged review
│   ├── jobMatch/        # Job Match modal & results visualization
│   ├── preview/         # Live A4 canvas & zoom toolbar
│   └── ui/              # Reusable UI primitives (Button, Modal, Input)
├── features/            # Domain-driven feature modules
│   ├── importer/        # 10-stage document extraction & parsing engine
│   ├── jobMatch/        # Client API & store for Gemini Job Match
│   └── resume/          # Core resume data models, Zustand store, utilities
├── landing/             # Marketing landing page components & section data
├── seo/                 # Centralized SEO site config, JSON-LD, and usePageSeo hook
├── templates/           # Resume templates (Developer standard with PDF/DOCX builders)
├── App.tsx              # Root component & route switcher
└── main.tsx             # Application mount point

server/
├── config.ts            # Security constants, rate limit policies, and model config
├── jobMatchApiHandler.ts # HTTP pipeline with security headers & request ID
├── jobMatchService.ts   # Server-side Gemini client with injection defenses
└── security/            # Rate limiter, cache, circuit breaker, input validator

Coding Conventions

  • Language: TypeScript with strict type checking enabled.
  • Component Pattern: Functional components with TypeScript interfaces for props.
  • Styling: Tailwind CSS classes; use clsx or tailwind-merge for conditional class joining.
  • State Updates: Immutable Zustand mutations (set((state) => ({ ... }))).
  • Icons: Lucide React.
  • File Naming: PascalCase for React components (JobMatchModal.tsx), camelCase for modules and utilities (resumeImporter.ts, rateLimiter.ts).