bhuwanenthiran/athletedna-ai

Purpose and Runtime

AthleteDNA AI is a React/TypeScript sports-coaching prototype: athletes complete movement assessments, receive a seven-trait biomechanical profile, compare against a generic matched profile, and consume personalized training, nutrition, and recovery guidance. It is a Vite client application with an optional server bootstrap. Core entry/runtime paths: src/start.ts, src/server.ts, vite.config.ts.

Application Composition and Navigation

Routing is centralized through the router and generated route tree, with a root layout providing shared application framing. The main product journey spans onboarding, assessment, results, scan comparison, and plan; returning and staff workflows use dashboard, coach chat, and team views.

• src/router.tsx

• src/routeTree.gen.ts

• src/routes/__root.tsx

• src/components/AppShell.tsx

Athlete Assessment and Profile Flow

The athlete-facing flow begins by capturing sport, role, and goals, proceeds through webcam/pose-assessment UI, then presents scored profile results. These screens currently consume typed local data rather than a backend, preserving a replacement boundary for real capture, pose-analysis, and scoring services.

• src/routes/onboarding.tsx

• src/routes/assessment.tsx

• src/routes/results.tsx

• src/data/types.ts

• src/data/mocks.ts

Biomechanical Visualization Stage

The scan comparison route is the visual centerpiece: it composes a controlled 3D hologram scene with two simplified pose/skeleton figures, then overlays animated match and trait-comparison UI. Three.js runs through react-three-fiber/drei; motion sequencing is expected through Framer Motion. The scene is isolated from general route UI to constrain graphics complexity and support mobile-specific layout behavior.

• src/routes/scan-comparison.tsx

• src/components/scan/ScanScene.tsx

• src/components/scan/HologramFigure.tsx

Recommendation and Engagement Surfaces

After comparison, the plan route turns the matched-profile and trait data into training/nutrition/recovery guidance. Dashboard exposes longitudinal trends, streaks, and reassessment prompts. Coach chat is the future integration point for an AI coaching service, while team supports a coach-facing multi-athlete comparison workflow.

• src/routes/plan.tsx

• src/routes/dashboard.tsx

• src/routes/coach-chat.tsx

• src/routes/team.tsx

Shared Presentation, State, and Localization

The UI is a dark biometric-lab design built from shared components, theme/mobile hooks, and translation resources. useTranslation and locale JSONs form the localization boundary. The generated UI component library under src/components/ui supplies primitives but is not the product domain layer.

• src/styles.css

• src/hooks/useTheme.tsx

• src/hooks/useTranslation.tsx

• src/locales/en.json

Offline and Client Resilience

The app includes progressive-web-app behavior: service-worker assets, an offline fallback, install/banner handling, and a client-side persistence/error boundary layer. Browser storage/database behavior is encapsulated rather than distributed through routes.

• public/sw.js

• public/offline.html

• src/hooks/usePWA.tsx

• src/lib/db.ts

• src/lib/error-capture.ts

External Boundaries

Current domain values are local mocks; no backend, authentication provider, webcam SDK, pose-tracking API, or AI model integration is represented in the tree. Planned external boundaries are therefore: browser media capture and pose analysis feeding assessment results; an AI/backend service producing profile matching and plans; and potentially durable athlete/team storage. Lovable is the project synchronization/deployment environment, not an in-app runtime dependency.