Skip to content

A facial validation service for KYC that compares face images to verify if they belong to the same person. Simple to use, with REST API support and Nextjs as Web interface

Notifications You must be signed in to change notification settings

adamsnows/kyc-check-nextjs

Repository files navigation

KYC-CHECK

A facial validation service for KYC (Know Your Customer) processes that compares two face images to determine if they belong to the same person.

You can use documents such as a driver's license to verify if it matches the photo.

πŸ“‹ Table of Contents

✨ Features

  • βœ… Upload two images containing faces
  • βœ… Real-time image preview
  • βœ… Face similarity comparison
  • βœ… Percentage-based similarity score
  • βœ… Modern user interface with theme switching
  • βœ… REST API for integration with other systems
  • βœ… Internationalization (Portuguese & English)
  • βœ… Monorepo architecture with separate packages
  • βœ… Next.js frontend with TypeScript
  • βœ… Docker and Kubernetes support

πŸ“š Articles

πŸ—οΈ Architecture

KYC-CHECK is structured as a monorepo using pnpm workspaces, consisting of two main packages:

  • API: Backend service for face detection and comparison
  • Web: Next.js frontend application with TypeScript and Tailwind CSS

This architecture allows independent development and deployment of each package while maintaining a unified codebase.

πŸš€ Installation

# Clone the repository
git clone https://github.com/juninhopo/kyc-check.git
cd kyc-check

# Install dependencies
pnpm install

# Download face recognition models
pnpm run download-models

βš™οΈ Environment Setup

Create a .env file in the root directory with the following variables:

PORT=3000
API_THRESHOLD=0.50

πŸ’» Usage

# Start development environment for both packages
pnpm dev

# Start only the API development server
pnpm --filter api dev

# Start only the Web development server
pnpm --filter web dev

# Build for production
pnpm build

# Start production server
pnpm start

Access the application at http://localhost:3000

🎨 Tailwind CSS

This project uses Tailwind CSS for styling. Here are the available commands for working with Tailwind CSS:

# Build Tailwind CSS once
pnpm --filter web build:css

# Watch for changes and rebuild Tailwind CSS automatically
pnpm --filter web watch:css

# Start development server with Tailwind CSS watching
pnpm --filter web dev

Custom Tailwind Components

The project includes several custom Tailwind components:

  • .btn - Base button style
  • .btn-primary - Primary action button
  • .btn-secondary - Secondary action button
  • .card / .card-dark - Card containers for light/dark modes
  • .lang-button - Language selection buttons
  • .language-active - Active language indicator
  • .theme-toggle - Theme toggle button

You can find and modify these styles in the web package.

πŸ“‘ API Reference

Face Validation Endpoint

POST /api/validate-faces

Request Parameters

Parameter Types Description
image1 File First face image
image2 File Second face image

Response Structure

type ValidationResponse = {
  success: boolean;
  data?: {
    isMatch: boolean;
    similarity: number;
    debugInfo?: {
      // Debug information about face detection
    };
  };
  error?: string;
};

Example Response

Success Response:

{
  "success": true,
  "data": {
    "isMatch": true,
    "similarity": 0.92,
    "debugInfo": {
      "face1": {
        "confidence": 0.99,
        "detectionTime": 156
      },
      "face2": {
        "confidence": 0.98,
        "detectionTime": 142
      },
      "comparisonTime": 85
    }
  }
}

API Usage Examples

Using cURL:

# Production
curl -X POST \
  https://kyc-check-production.up.railway.app/api/validate-faces \
  -H 'Content-Type: multipart/form-data' \
  -F 'image1=@/path/to/first/image.jpg' \
  -F 'image2=@/path/to/second/image.jpg'

# Local Development
curl -X POST \
  http://localhost:3000/api/validate-faces \
  -H 'Content-Type: multipart/form-data' \
  -F 'image1=@/path/to/first/image.jpg' \
  -F 'image2=@/path/to/second/image.jpg'

🌍 Internationalization

KYC-CHECK supports both Portuguese (Brazil) and English (US) languages:

User Interface Language

Users can switch between languages by clicking on the language buttons (flags) located in the header:

  • πŸ‡§πŸ‡· Portuguese (Brazil) - Default language
  • πŸ‡ΊπŸ‡Έ English (US)

All interface elements, validation messages, and results will automatically be translated based on the selected language.

API Language Support

When using the API, you can specify the preferred language for error messages:

curl -X POST \
  http://localhost:3000/api/validate-faces \
  -H 'Content-Type: multipart/form-data' \
  -H 'Accept-Language: en-US' \
  -F 'image1=@/path/to/first/image.jpg' \
  -F 'image2=@/path/to/second/image.jpg'

For Portuguese responses, use Accept-Language: pt-BR. If not specified, the API will default to Portuguese.

πŸ“ Project Structure

kyc-check/
β”œβ”€β”€ packages/
β”‚   β”œβ”€β”€ api/              # Backend service
β”‚   β”‚   β”œβ”€β”€ models/       # Face recognition models
β”‚   β”‚   └── src/          # API source code
β”‚   β”‚       β”œβ”€β”€ api/      # API endpoints
β”‚   β”‚       β”œβ”€β”€ services/ # Face detection services
β”‚   β”‚       β”œβ”€β”€ types/    # TypeScript definitions
β”‚   β”‚       └── utils/    # Utility functions
β”‚   └── web/              # Next.js Frontend
β”‚       β”œβ”€β”€ public/       # Static assets
β”‚       └── src/          # Frontend source code
β”‚           β”œβ”€β”€ app/      # Next.js app directory
β”‚           β”œβ”€β”€ components/  # React components
β”‚           β”œβ”€β”€ contexts/ # React contexts
β”‚           └── services/ # API service calls
β”œβ”€β”€ k8s/                  # Kubernetes configurations
β”œβ”€β”€ Dockerfile            # Docker configuration
β”œβ”€β”€ pnpm-workspace.yaml   # pnpm workspace configuration
└── package.json          # Project root dependencies

🚒 Deployment

Docker

Build and run the application using Docker:

# Build the Docker image
docker build -t kyc-check .

# Run the container
docker run -p 3000:3000 kyc-check

Kubernetes

Deploy to a Kubernetes cluster using the provided configuration files:

kubectl apply -f k8s/deployment.yaml
kubectl apply -f k8s/service.yaml

πŸ™ Credits

  • Icon designed by Eric Viana
  • This project is based on the original KYC-CHECK by juninhopo
  • Special thanks to the developers of face-api.js and its Node.js port by @vladmandic
  • Interface redesigned with Next.js and TailwindCSS for improved usability and performance

🀝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

About

A facial validation service for KYC that compares face images to verify if they belong to the same person. Simple to use, with REST API support and Nextjs as Web interface

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •