02 / 07Lead Developer2025

GenesisX

GenesisX is an AI storytelling platform for consumer-goods and retail brands. Its team produces mobile experiences — full-screen, swipeable, scene-by-scene sites — for brands such as Coca-Cola, Häagen-Dazs, Oreo and Starbucks. I led development of the internal tool those are made in: a visual editor where a campaign is composed as a set of scenes, wired together by gestures, and published without a developer in the loop.

Visit genesisx.com ↗

GenesisX — capture

Scenes, not pages

A GenesisX project is not a scrolling page but a set of full-screen scenes, designed against real device frames. A scene is built from layers — images, GIFs, video, rich text, embeds, custom code — and every layer carries three states: in, default and out. A scene can therefore assemble itself on arrival and clear itself on exit, without the designer scripting anything.

Wiring scenes together

RelationsEach scene can be linked to a neighbour in each of four directions — north, east, south, west — and a swipe that way takes you there.

TransitionsSlide, fade or reveal. Reveal has its own offset and a reverse mode, so the next scene can be uncovered from beneath the current one or drawn over it.

TriggersA relation fires on the gesture itself, on a timer, or when a video in the scene ends — which is how an experience can play itself like a story and still hand control back at any moment.

LinksAny layer can also jump to a scene on tap, with its own transition and duration.

The scenes map

Once a campaign has a dozen scenes linked in four directions, a list stops being enough. The scenes map lays the whole project out as a node graph, built on React Flow: every scene is a node showing a live preview of itself, swipe relations and tap links are drawn as differently coloured edges, and each edge leaves its node from the side that matches its direction — so the map reads the way the experience moves.

Two-way pairsWhen two scenes point at each other in opposite directions, the pair collapses into a single two-way edge instead of two overlapping arrows.

Fanned handlesSeveral edges leaving the same side are spread along it by a fixed offset, so parallel connections stay legible.

Floating edgesA link with no direction — a fade has none — attaches wherever the line between the two nodes crosses their borders, computed from the node rectangles.

Persistent layoutNode positions are saved with the project, so the map one designer arranges is the map the next one opens.

A state machine that follows the finger

On a phone, a transition is not an animation that plays — it is something the user drags. The runtime models that explicitly, as an XState machine: active, preparing, transitioning, then committed or cancelled.

Progress, not playbackWhile a swipe is in flight the incoming scene tracks the finger, its position or opacity derived from the drag distance on every frame.

ThresholdsRelease past the threshold and the transition completes; release short of it and the scene settles back. Fades commit far sooner than slides, because a fade has no distance to read.

Instant pathTaps, timers and video-end triggers enter the same machine through a separate transition that runs to completion over a set duration.

One runtimeThe editor preview runs the very same machine inside an iframe, so what a designer tests is what ships.

Publishing, export and AI

PublishingProjects publish to AWS — S3 and CloudFront, with certificates and custom domains provisioned through the API.

Code exportA project can also leave the platform entirely: exported as a Next.js codebase, rendered by the platform SDK, and pushed to a GitHub repository through a GitHub App.

AssistantsTwo LLM-backed assistants sit inside the editor — one writes visual effects, one writes code embeds — each taking the current state plus a prompt and returning strict JSON the editor can apply.

Architecture

The platform is a TypeScript monorepo: the editor, the API, a public read API, the export service, and a shared domain package whose types and zod schemas are used on both sides of the wire.

ServerHexagonal. One interface per port, use cases as the only entry points, MongoDB and HTTP as adapters, everything wired through dependency-injection modules.

ClientMVVM. View models own the state and expose methods; views can read it but never write it, so every mutation has a name.

EditingChanges travel as typed commands validated by the shared schemas — the same shape on the client and the server.

Editor

ReactTypeScriptViteReact FlowMVVMreact-jss

Runtime & SDK

Next.jsXStateCustom SDK

Backend

Node.jsExpressMongoDBRedisBullMQWebSocketszod

Infrastructure

AWS (S3, CloudFront, ACM, CodeBuild, ECS)GitHub AppAuth0Sentry

Anthropic APIOpenAI API

Next — 03IBM X-Force →