// REFERENCE PROJECT — HEALTH-TECH · DNA & HUMAN-OPTIMIZATION APP

Identity Code

Your biological operating manual, rebuilt as a black-and-gold premium lab.

Identity Code used to be a DNA-coaching process that ran on PDFs uploaded into ChatGPT. We rebuilt it as its own web app / PWA: a calm, precise premium lab in black and gold where unlocked digital experts guide users by chat based on their DNA. Member, practitioner and admin each get their own surface, with challenges, structured check-ins, DNA assignment and an LLM provider abstraction so the platform never depends on a single vendor.

View it live →

IDENTITY CODE

Digitale Experten

Psyche

Resilienz

Fitness

🔒Ernährung

🔒Health

🔒Fertilität

Industry

Health-tech · DNA & human optimization

Type

Web app / PWA with member, practitioner & admin surfaces

Cycle

3-phase build (foundation, challenge mode, practitioner & launch)

Stack

React · Vite · TypeScript · Node/Express · SQLite · lucide-react

// THE BRIEF

Kevin wanted to move Identity Code from a visible ChatGPT link to a product of its own: a black-and-gold DNA-plus-AI premium world that feels "15 years ahead" yet stays simple enough for an audience partly over 50. The formula DNA + epigenetics + neurobiology + AI had to translate into concrete routines without ever claiming medical advice. The reference material was strong but overloaded: too many panels, glows and tiny text. Our job was to keep the mood and cut the information density hard, while building member, practitioner and admin flows plus the cost, DNA and entitlement logic in a clean, functional way.

// WHAT SHIPPED

✓Black-and-gold premium-lab design system: Cinzel serif headlines, Montserrat body, gold as accent not fill, glow reserved for active states

✓Member app: calm dashboard, expert picker with locked/unlocked states, expert chat with context panel (DNA basis, focus areas, recommendations)

✓Challenge mode with structured check-ins (energy, mood, sleep, weight, stress) and progress/goal visualisation

✓Practitioner surface: client list, active client context, experts and chat per client, notes and insights

✓Admin backend: member management, invite and password-reset flow, DNA report assignment, cost/token limits and knowledge sources

✓LLM provider abstraction (mock plus prepared OpenAI/Claude adapters) with a safety guard for medical boundaries and server-side usage logging

// THE CYCLE

Phase 1 — Briefing & Scope

From vision to a usable baseline

From the call, website and mockups we distilled the core: digital experts as the product, chat as the main interaction, black-and-gold as the brand world. We locked the guiding decision: don't rebuild the full sci-fi screens, translate them into a calmer premium lab. Roles (member, practitioner, admin) and the hard 'no medical advice' boundary framed the scope.

Phase 2 — Prototype

Design system and expert logic, clickable

We implemented the design tokens: near-black surfaces, gold accent, Cinzel/Montserrat, glow only for active states. A first clickable build with login, expert picker (locked/unlocked) and expert chat plus context panel — enough to test the reduced information density against the references.

Phase 3 — Build

Three surfaces, challenges and cost control

We built out the member, practitioner and admin flows: challenge mode with structured check-ins, progress and goals, per-practitioner client management, and an admin with DNA assignment, entitlements and cost/token limits. The LLM provider was abstracted (mock plus prepared adapters), with a safety guard and server-side usage logging.

Phase 4 — Handover & Launch

Demo-ready and cleanly handed over

A single-server demo build (Express serves the app and API), real login with bcrypt and HttpOnly sessions, a SQLite data model and a smoke test across auth, admin, member, practitioner, LLM mock and safety guard. Handed over with a handover doc, acceptance checklist and documented next steps for the follow-on coder.

Outcome

Role surfaces (member, practitioner, admin) from one codebase

Digital DNA experts, each with its own briefing and unlock logic

NEXT PROJECT

Viking Hands →