Identivia Verification Dashboard

A modern, AI-powered Know Your Customer (KYC) verification dashboard built with React, TypeScript, and Vite. This application streamlines the identity verification process with automated face detection and multi-factor verification analysis.

Overview

This dashboard provides a comprehensive solution for reviewing and managing KYC profiles. It features real-time face similarity detection using TensorFlow.js, automated verification scoring across multiple dimensions, and an intuitive interface for profile review and approval workflows.

Key Features

• AI-Powered Verification: Automated face detection
• Multi-Factor Scoring: Comprehensive verification across face similarity, gender match, age verification, document validation, and country verification
• Interactive Radar Charts: Visual representation of verification scores for quick assessment
• Document Management: Support for front/back document images and selfie photos/videos
• Real-time Updates: Live profile status tracking with PocketBase backend
• Responsive Design: Modern UI built with shadcn/ui components and Tailwind CSS
• Role-Based Access: Secure authentication and reviewer assignment system

Technology Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite for fast development and optimized production builds
• UI Components: shadcn/ui with Radix UI primitives
• Styling: Tailwind CSS with dark mode support
• Charts: Recharts for data visualization
• Backend: PocketBase for real-time data management
• Icons: Tabler Icons and Lucide Icons

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm
• Docker
• PocketBase backend

Installation

Important: You must install dependencies before running any commands.

1. Clone the repository:

git clone <repository-url>
cd dashboard

2. Install dependencies first:

npm install

This step is required before running npm run dev, npm run build, or npm run lint.

3. Configure Environment Variables:

Copy the .env.example file to .env and update the values:

cp .env.example .env

Edit .env and set your PocketBase URL:

POCKETBASE_URL=https://your-pocketbase-url.com

Running the Application

Development Mode

Start the development server with hot module replacement:

npm run dev

Open your browser and navigate to http://localhost:5173.

Docker

You can run the application using Docker:

docker-compose up -d --build

This will start the application and serve it via Nginx on port 80.

Production Build

To create an optimized production build:

npm run build

The artifacts will be generated in the dist directory.

Project Structure

src/
├── components/       # Reusable UI components
│   ├── ui/          # shadcn/ui components
│   └── ...          # App-specific components
├── pages/           # Page components
│   ├── Dashboard.tsx
│   ├── ProfileDetails.tsx
│   └── ...
├── lib/             # Utility functions and helpers
│   ├── face-detection.ts
│   ├── pocketbase.ts
│   └── utils.ts
├── hooks/           # Custom React hooks
└── app/             # Application data