TechFit Analyzer

AI-powered job candidate skill matching platform. Analyze your technology stack against job requirements and get personalized career recommendations powered by Google Generative AI.

🎯 Project Overview

TechFit Analyzer is a full-stack application designed to help job seekers understand how well their technical skills match job postings. The platform provides intelligent analysis through:

• Backend: NestJS REST API with Google Gemini AI integration
• Frontend: Chrome extension providing user-friendly interface for skill management and job analysis
• Architecture: Microservices-ready with containerized deployment

Key Features

✨ AI-Powered Analysis - Uses Google Gemini 2.5-flash for intelligent skill matching
🔍 One-Click Job Parsing - Extract job requirements directly from webpages
💾 Profile Management - Store and manage your technology skills
📊 Detailed Insights - Get match percentage, found skills, missing skills, and personalized advice
🐳 Docker Ready - Complete containerized setup with Docker Compose
🚀 Production Ready - Type-safe TypeScript, comprehensive testing, proper error handling

📋 Table of Contents

• Project Structure
• Technology Stack
• Prerequisites
• Quick Start
• Development Setup
• Production Deployment
• API Reference
• Architecture
• Contributing
• Troubleshooting

📁 Project Structure

main/
├── backend/                          # NestJS backend service
│   ├── src/
│   │   ├── ai/                      # AI module with job analysis
│   │   ├── app.module.ts            # Root module
│   │   └── main.ts                  # Entry point
│   ├── package.json
│   ├── Dockerfile
│   ├── README.md                    # Backend documentation
│   └── ...
├── techfit-analyzer/                 # Chrome extension frontend
│   ├── src/
│   │   ├── components/              # React components
│   │   ├── hooks/                   # Custom React hooks
│   │   └── content.ts               # Content script
│   ├── manifest.json                # Chrome extension manifest
│   ├── vite.config.ts               # Vite configuration
│   ├── package.json
│   ├── README.md                    # Frontend documentation
│   └── ...
├── docker-compose.yaml              # Container orchestration
├── README.md                        # This file
└── .gitignore

🛠️ Technology Stack

Backend

Technology	Version	Purpose
NestJS	^11.0.1	Framework
TypeScript	~6.0	Language
Google Generative AI	^0.24.1	AI Model Integration
Jest	^30.0.0	Testing
PostgreSQL	Latest	Database (optional)
Docker	Latest	Containerization

Frontend

Technology	Version	Purpose
React	^19.2.5	UI Library
TypeScript	~6.0	Language
Vite	^8.0.9	Build Tool
Tailwind CSS	^3.4.17	Styling
Radix UI	^1.1.13	Component Primitives
Axios	^1.15.2	HTTP Client
CRXJS	^2.4.0	Chrome Extension Build

📦 Prerequisites

System Requirements

• Node.js: v18.0.0 or higher
• npm or pnpm: v8.0.0 or higher (pnpm recommended)
• Chrome Browser: v88 or higher (for extension)
• Docker: v20.0.0 or higher (for containerized deployment)
• Docker Compose: v1.29.0 or higher

API Requirements

• Google Gemini API Key: Required for AI features
  • Get it from: Google AI Studio

🚀 Quick Start

Option 1: Docker Compose (Recommended)

The easiest way to run the entire application:

# Navigate to main directory
cd main

# Create backend .env file
cp backend/.env.example backend/.env
# Edit backend/.env and add your GEMINI_API_KEY

# Start all services
docker-compose up -d

# Backend will be available at http://localhost:3000

To stop services:

docker-compose down

Option 2: Local Development

1. Backend Setup

cd backend

# Install dependencies
pnpm install

# Create .env file
cp .env.example .env
# Edit .env and add your GEMINI_API_KEY and PORT

# Start development server
pnpm run start:dev

# Backend runs at http://localhost:3000

2. Frontend Setup (in new terminal)

cd techfit-analyzer

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Extension builds to dist/

3. Load Extension in Chrome

1. Open chrome://extensions/
2. Enable Developer mode (top right)
3. Click Load unpacked
4. Select the techfit-analyzer/dist/ folder
5. Extension is now ready to use

💻 Development Setup

Backend Development

cd backend

# Install dependencies
pnpm install

# Start in watch mode
pnpm run start:dev

# Run tests
pnpm run test

# Run E2E tests
pnpm run test:e2e

# Lint and format code
pnpm run lint
pnpm run format

# Build for production
pnpm run build

Backend Documentation: See backend/README.md for detailed backend setup and API documentation.

Frontend Development

cd techfit-analyzer

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Build for production
pnpm run build

# Lint code
pnpm run lint

Frontend Documentation: See techfit-analyzer/README.md for detailed frontend setup and usage guide.

Environment Configuration

Backend (.env)

Create backend/.env:

# Server
PORT=3000

# Google AI
GEMINI_API_KEY=your_key_here

Frontend

The frontend connects to the backend at http://localhost:3000 by default. To change this, edit src/components/Analyzer.tsx.

🐳 Production Deployment

Docker Build

Build Docker image:

docker build -f backend/Dockerfile -t techfit-analyzer-backend .

Docker Compose Deployment

1. Prepare .env file in backend directory
2. Run:

   docker-compose up -d

Manual Deployment

1. Backend:

   cd backend
   pnpm run build
   pnpm run start:prod

2. Frontend:

   cd techfit-analyzer
   pnpm run build
   # Upload dist/ folder to Chrome Web Store or distribute as .crx file

📡 API Reference

Base URL

http://localhost:3000

Main Endpoint

Analyze Job Match

Endpoint: POST /ai/analyse-job

Request:

{
  "text": "Senior React developer needed with 5+ years experience...",
  "userStack": ["JavaScript", "React", "Node.js", "PostgreSQL"]
}

Response:

{
  "match_percentage": 85,
  "found_skills": ["JavaScript", "React", "Node.js"],
  "missing_skills": ["Python", "AWS"],
  "advice": "Focus on AWS and Python to increase match percentage."
}

Full API Documentation: See backend/README.md for complete API reference.

🏗️ Architecture

System Design

┌─────────────────────────────────────────────────────────┐
│                    User's Browser                       │
├─────────────────────────────────────────────────────────┤
│  Chrome Extension (techfit-analyzer)                   │
│  ├── Profile Manager (React Component)                │
│  ├── Job Analyzer (React Component)                   │
│  ├── Content Script (Page Parsing)                    │
│  └── Chrome Storage API (Data Persistence)            │
└──────────────────┬──────────────────────────────────────┘
                   │ HTTP/REST
                   ▼
┌─────────────────────────────────────────────────────────┐
│          Backend API (http://localhost:3000)           │
├─────────────────────────────────────────────────────────┤
│  NestJS Application                                    │
│  ├── AI Module (Job Analysis)                        │
│  ├── Controllers (HTTP Endpoints)                    │
│  ├── Services (Business Logic)                       │
│  └── DTOs (Request Validation)                       │
└──────────────────┬──────────────────────────────────────┘
                   │ API Call
                   ▼
┌─────────────────────────────────────────────────────────┐
│        Google Generative AI (Gemini 2.5-flash)        │
│        Performs Intelligent Skill Matching             │
└─────────────────────────────────────────────────────────┘

Data Flow

1. User opens extension → Loads Profile tab
2. User enters skills → Stored in Chrome storage
3. User navigates to job posting → Content script parses page
4. User clicks "Parse from page" → Sends message to content script
5. Content script extracts job text → Sends to extension popup
6. User clicks "Analyze" → Extension sends request to backend
7. Backend receives request → Calls Google Generative AI
8. AI returns analysis → Backend formats and returns to extension
9. Extension displays results → User sees match details

🧪 Testing

Backend Tests

cd backend

# Run all tests
pnpm run test

# Watch mode
pnpm run test:watch

# Coverage report
pnpm run test:cov

# E2E tests
pnpm run test:e2e

Frontend Tests

Frontend currently uses ESLint for code quality:

cd techfit-analyzer

# Run linter
pnpm run lint

📚 Documentation

Detailed documentation for each component:

• Backend Documentation - API endpoints, setup, testing, deployment
• Frontend Documentation - Extension usage, development, Chrome API integration

🔧 Configuration

Backend Configuration

All backend configuration is in backend/.env:

• PORT: Server port (default: 3000)
• GEMINI_API_KEY: Google API key for AI features

Frontend Configuration

Frontend configuration in techfit-analyzer/:

• Backend URL: src/components/Analyzer.tsx
• Chrome permissions: manifest.json
• Build settings: vite.config.ts

🐛 Troubleshooting

Backend Issues

Problem	Solution
Port 3000 already in use	Change PORT in .env or kill process: lsof -ti:3000 | xargs kill -9
API key error	Verify GEMINI_API_KEY in .env
Dependencies error	Delete node_modules and pnpm-lock.yaml, reinstall
Connection refused	Ensure backend is running on correct port

Extension Issues

Problem	Solution
Extension won't load	Enable Developer mode, rebuild dist/, reload extension
Parse fails	Ensure you're on a job posting page with description text
Backend unreachable	Verify backend running at http://localhost:3000, check CORS
Profile not saving	Clear extension data, check Chrome permissions

Docker Issues

Problem	Solution
Build fails	Verify Docker installed, check Dockerfile, rebuild: docker-compose build --no-cache
Container won't start	Check logs: docker-compose logs backend
Port conflict	Change port in docker-compose.yaml

🚢 Deployment Checklist

Before Production

• Set strong GEMINI_API_KEY
• Configure production environment variables
• Run all tests and linters
• Build both backend and frontend
• Test with Docker Compose
• Document API endpoints
• Set up monitoring and logging

Production Steps

1. Build Docker image
2. Push to registry (Docker Hub, AWS ECR, etc.)
3. Deploy to hosting platform
4. Configure domain and SSL
5. Set up CI/CD pipeline
6. Monitor application health

🤝 Contributing

Code Style

• TypeScript: Strict mode enabled
• Formatting: Prettier (run pnpm run format)
• Linting: ESLint (run pnpm run lint)

Before Committing

# Backend
cd backend
pnpm run format
pnpm run lint
pnpm run test

# Frontend
cd techfit-analyzer
pnpm run lint

Commit Message Format

type(scope): subject

body

footer

Types: feat, fix, docs, style, refactor, test, chore

📖 Project Roadmap

Current Features

• ✅ Backend API with Gemini AI
• ✅ Chrome extension frontend
• ✅ Job parsing from webpages
• ✅ Skill matching analysis

Planned Features

• 🔄 Multiple language support
• 🔄 Database integration for persistence
• 🔄 User authentication
• 🔄 Historical analysis tracking
• 🔄 Skill recommendation engine
• 🔄 Salary prediction
• 🔄 Career path suggestions

📞 Support & Contact

For issues, questions, or contributions:

1. Check the troubleshooting sections
2. Review detailed documentation:
   • Backend README
   • Frontend README
3. Contact the development team

📝 License

This project is proprietary and confidential.

---

Quick Reference

Essential Commands

# Full setup with Docker
docker-compose up -d

# Local development setup
cd backend && pnpm install && pnpm run start:dev
cd ../techfit-analyzer && pnpm install && pnpm run dev

# Load extension in Chrome
# 1. chrome://extensions/
# 2. Enable Developer mode
# 3. Load unpacked -> select techfit-analyzer/dist/

# Build for production
cd backend && pnpm run build
cd ../techfit-analyzer && pnpm run build

# Run tests
cd backend && pnpm run test
cd backend && pnpm run test:e2e

# Code quality
pnpm run lint
pnpm run format

Important Files

• Backend entry: backend/src/main.ts
• Frontend entry: techfit-analyzer/src/main.tsx
• Backend API: backend/src/ai/
• Frontend components: techfit-analyzer/src/components/
• Extension manifest: techfit-analyzer/manifest.json
• Docker config: docker-compose.yaml

---

Last Updated: April 2026
Version: 1.0.0
Status: Production Ready

For the most up-to-date information, refer to the backend README and frontend README.