Tranquiex Logo

FocusX Developer Documentation

Understand how the platform works across web, AI, and hardware.

Overview

FocusX is a full-stack AI-powered productivity application that seamlessly integrates with wearable devices and camera tracking technology. Our platform combines hardware and software to deliver an immersive focus-enhancing experience.

Tech Stack

Frontend

  • • Next.js 15 with App Router
  • • TypeScript & TailwindCSS
  • • Framer Motion animations

Backend

  • • Node.js server architecture
  • • MongoDB database
  • • WebSocket real-time updates

AI Components

  • • TensorFlow.js for ML models
  • • MediaPipe face/iris tracking
  • • Custom focus detection algorithms

Hardware

  • • Wearable device
  • • Haptic motor integration
  • • Google Authenticator support

Frontend Structure

Component Hierarchy

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── [...routes]
├── components/
│   ├── Hero/
│   ├── Timer/
│   ├── Dashboard/
│   ├── DeviceControl/
│   └── AuthPopup/
└── lib/
    └── utils/

APIs

Core Endpoints

/focusx/start-timer

Initiates a new focus session with parameters

/focusx/check-presence

Verifies user presence via camera tracking

/focusx/verify-code

Validates authenticator codes for security

/focusx/stats

Retrieves session statistics and analytics

Hardware Integration

The hardware integration layer manages communication between the web app and wearable device:

  • • Real-time WebSocket connection for device synchronization
  • • Command flow from screen interactions to device alerts
  • • Bidirectional status updates and error handling

Command Structure

{
  "command": "alert" | "pause" | "reset",
  "intensity": number,
  "duration": number,
  "pattern": "single" | "double" | "long"
}