KYC Frontend Application

This is the frontend application for the KYC (Know Your Customer) verification system. It provides a user-friendly interface for identity verification, including document scanning and face liveness detection.

Features

• Identity Verification: Guided flow for users to submit identity documents.
• AWS Face Liveness: Integration with AWS Rekognition Face Liveness for advanced spoof detection and identity verification.
• FingerprintJS Integration: Device fingerprinting for enhanced security.
• Responsive Design: Built with Tailwind CSS and Radix UI for a modern, accessible, and responsive user experience.
• Multi-language Support: Internationalization support via i18next.

Tech Stack

• Framework: React with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• UI Components: Radix UI
• State Management: React Hooks
• AWS Services: AWS Amplify, Cognito, Rekognition (Face Liveness)

Prerequisites

• Node.js (Latest LTS version recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd kyc-app/frontend

2. Install dependencies:

   npm install
   # or
   yarn install

3. Environment Configuration:

   Copy .env.example to .env and fill in the required values.

   cp .env.example .env

   Required Environment Variables:

   # AWS Configuration
   VITE_AWS_REGION=us-east-1
   VITE_AWS_USER_POOL_ID=your-user-pool-id
   VITE_AWS_USER_POOL_CLIENT_ID=your-user-pool-client-id
   VITE_AWS_IDENTITY_POOL_ID=your-identity-pool-id
   VITE_AWS_S3_BUCKET=your-s3-bucket-name
   
   # Backend API Configuration
   VITE_BACKEND_API_URL=http://localhost:3000
   
   # API Configuration
   VITE_API_KEY=your-secret-api-key

Running the Application

• Development Server:

  npm run dev

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

• Build for Production:

  npm run build

• Preview Production Build:

  npm run preview

• Linting:

  npm run lint

Project Structure

• /src
  • /components: Reusable UI components.
  • /pages: Application pages and route handlers.
  • /services: API services and integrations (e.g., AWS Face Liveness).
  • /hooks: Custom React hooks.
  • /config: Configuration files (e.g., AWS Amplify setup).
  • /locales: i18n translation files.
  • /styles: Global styles and Tailwind configuration.

Documentation

For more details on specific integrations:

• AWS Face Liveness Integration