ngx-profile-comparison

A high-quality, production-ready Angular component library that visually compares two user profiles by highlighting their similarities and differences.

Features

• Visual Profile Comparison: Three-column layout showing user interests with shared interests in the center
• Text Similarity Analysis: Uses API Ninjas Text Similarity API to calculate interest similarities
• Face Detection & Alignment: Detects faces in profile images and aligns them eye-to-eye
• Interactive UI: Horizontal dragging with Swiper.js for overflow content
• Responsive Design: Mobile-first design with glassmorphism effects
• TypeScript Support: Fully typed with strict TypeScript interfaces
• Production Ready: Environment-based configuration with proper error handling

Installation

npm install ngx-profile-comparison

Setup

1. Environment Configuration

Create environment files in your Angular project:

environment.ts (Development)

export const environment = {
  production: false,
  apiKeys: {
    textSimilarity: 'YOUR_TEXT_SIMILARITY_API_KEY',
    faceDetection: 'YOUR_FACE_DETECTION_API_KEY'
  }
};

environment.prod.ts (Production)

export const environment = {
  production: true,
  apiKeys: {
    textSimilarity: process.env['TEXT_SIMILARITY_API_KEY'] || '',
    faceDetection: process.env['FACE_DETECTION_API_KEY'] || ''
  }
};

2. API Keys

Get your API keys from API Ninjas:

• Text Similarity API: https://api.api-ninjas.com/v1/textsimilarity
• Face Detection API: https://api.api-ninjas.com/v1/facedetect

3. Module Import

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ProfileComparisonComponent } from 'ngx-profile-comparison';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    ProfileComparisonComponent
  ],
  // ...
})
export class AppModule { }

Usage

Basic Usage

import { Component } from '@angular/core';
import { ProfileViewEvent } from 'ngx-profile-comparison';

@Component({
  selector: 'app-profile-demo',
  template: `
    <lib-profile-comparison
      [user1Interests]="user1Interests"
      [user2Interests]="user2Interests"
      [user3Interests]="user3Interests"
      [user1Image]="user1Image"
      [user2Image]="user2Image"
      [similarityThreshold]="0.8"
      (profileViewed)="onProfileViewed($event)"
    ></lib-profile-comparison>
  `
})
export class ProfileDemoComponent {
  user1Interests = ['Sushi', 'Travel', 'Photography'];
  user2Interests = ['Sushi', 'Cooking', 'Gardening'];
  user3Interests = ['Travel', 'Photography', 'Music'];

  user1Image = 'https://example.com/user1.jpg';
  user2Image = 'https://example.com/user2.jpg';

  onProfileViewed(event: ProfileViewEvent): boolean {
    console.log('Profile viewed:', event);
    return true;
  }
}

Input Properties

Property	Type	Description
user1Interests	string[]	Array of interests for User 1
user2Interests	string[]	Array of interests for User 2
user3Interests	string[]	Array of interests for User 3 (influences ordering)
user1Image	string	Image URL for User 1
user2Image	string	Image URL for User 2
similarityThreshold	number	Threshold for combining similar interests (default: 0.8)

Output Events

Event	Type	Description
profileViewed	ProfileViewEvent	Emitted when "View Profile" button is clicked

Architecture

Core Services

• ProfileComparisonService: Orchestrates the comparison logic
• TextSimilarityService: Handles text similarity API calls
• FaceDetectionService: Manages face detection and alignment
• ConfigService: Manages API configuration and environment variables

Key Features

1. Interest Ordering Algorithm:

   • User 3's interests influence vertical ordering
   • Similar interests are grouped together
   • Cross-user similarities determine center placement

2. Face Alignment:

   • Detects faces using API Ninjas Face Detection
   • Calculates eye positions for alignment
   • Applies transforms for eye-to-eye positioning

3. Error Handling:

   • Graceful fallbacks for API failures
   • User-friendly error states
   • Production-ready error boundaries

Development

Prerequisites

• Node.js 18+
• Angular 17+
• API Ninjas account

Setup

git clone https://github.com/your-username/ngx-profile-comparison.git
cd ngx-profile-comparison
npm install

Environment Setup

1. Copy projects/app/src/environments/environment.ts.example to environment.ts
2. Add your API keys to the environment file
3. Never commit API keys to version control

Running the Demo

ng serve app --port 4201

Visit http://localhost:4201 to see the component in action.

Building the Library

ng build lib

Testing

ng test lib

API Integration

Text Similarity API

The component uses API Ninjas Text Similarity API to calculate similarity scores between interests. This enables intelligent grouping and ordering of interests based on semantic similarity.

Face Detection API

Face detection is performed using API Ninjas Face Detection API, which returns bounding box coordinates. The component uses these coordinates to align faces eye-to-eye for a more natural comparison view.

Styling

The component uses modern CSS features including:

• CSS Grid and Flexbox for layout
• Glassmorphism effects with backdrop-filter
• CSS custom properties for theming
• Responsive design with mobile-first approach

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For support and questions:

• Create an issue on GitHub
• Check the documentation
• Review the demo application

Changelog

v1.0.0

• Initial release
• Core profile comparison functionality
• API integration with API Ninjas
• Responsive design with Swiper.js
• TypeScript support