Getting Started with the Sample App

The fastest way to get started with the Web Measurement Embedded App (WMEA) is to use our complete sample application. The sample app is a React application that demonstrates the complete WMEA integration workflow and can be deployed as-is or used as a reference for your own implementation. For those unfamiliar with React, we intend to publish a more basic vanilla JS sample app later.

Sample App Overview

The WMEA Sample App consists of a backend component that obtains authorization tokens from DeepAffex API and a frontend component which uses a modern React UI to collect user profile information, initializes the embedded measurement app, and displays comprehensive health measurement results.

Complete Features:

• Two-step profile wizard with validation for demographic and health information
• Embedded measurement app integration using the Web Measurement Embedded App npm package
• Comprehensive results display with categorized health metrics and visual indicators
• Multi-language support with ability to easily extend to languages you want to support
• Theme support which allows you to switch between Light/Dark themes
• Responsive design optimized for various screen sizes
• Type-safe development with full TypeScript support

The Sample App is provided as part of the delivered product package. Use of the Sample App requires a valid DeepAffex® license. For licensing inquiries or to obtain access, please contact our Sales team.

Quick Start

1. Get Access to the Sample App

You can clone the WMEA sample app repository from here.

2. Setup and Installation

Refer to the README in the sample app repository for complete setup instructions, including:

• Environment configuration
• Local development setup
• Build and deployment instructions
• Available scripts and commands

Two Integration Approaches

Approach 1: Use as Reference (Recommended for existing apps)

Best for: Teams with existing applications who want to add measurement capabilities.

1. Study the sample app to understand the complete integration pattern
2. Extract the components you need (profile forms, measurement interface, results display)
3. Build your own implementation using the sample as a guide
4. Maintain your existing architecture and design system

Approach 2: Modify the Sample App (Recommended for new projects comfortable with our tech stack)

Best for: New projects or teams wanting a complete solution quickly.

1. Customize the sample app as little or as much as you want
2. Update branding
3. Modify profile fields and validation rules as needed
4. Customize results display or storage
5. Deploy as your production app

Technical Architecture

Technology Stack

• Frontend: React 19, TypeScript, StyleX for styling
• State Management: Valtio for reactive state
• Routing: React Router v7
• Internationalization: i18next
• UI Components: @nuralogix.ai/web-ui our lightweight component library using StyleX
• Build Tool: Rollup with ESBuild

Application Flow

1. Profile Collection: Users complete a two-step form collecting demographic information and health questionnaire data
2. Measurement Initialization: The embedded measurement app is initialized with user profile data and authentication tokens
3. Measurement Process: Users perform the 30-second facial measurement using their device camera
4. Results Processing: Measurement results are received via WMEA event listeners and stored in application state
5. Results Display: Comprehensive health metrics are displayed with visual indicators and category organization

API Endpoints

The sample backend exposes three server endpoints consumed by the frontend:

• /health: Liveness/readiness probe used by deployment and local dev tooling.
• /api/studyId: Returns the study identifier for the configured DeepAffex Study. Contact Nuralogix to get the study ID and set it as STUDY_ID environment variable.
• /api/token: Returns authorization tokens (token, refreshToken) for your organization. Contact Nuralogix to get your license key and set it as LICENSE_KEY environment variable. This endpoint uses your license key to register your license and return tokens pairs.

Production Deployment

The production build creates optimized static assets that can be served by any web server. The backend component can be deployed as a Node.js application to handle API endpoints.

Key Integration Points

The embedded measurement component uses the @nuralogix.ai/web-measurement-embedded-app npm package with these integration points:

• MeasurementEmbeddedApp initialization with container, authentication, and profile data
• Event handlers for results, errors, and measurement lifecycle events
• Theme and language forwarding to maintain consistent user experience
• Results processing and navigation to display comprehensive health metrics

Package Installation (For Custom Implementation)

If building from scratch instead of using the sample app:

# yarn
yarn add @nuralogix.ai/web-measurement-embedded-app

# npm
npm install @nuralogix.ai/web-measurement-embedded-app
Copy