From sketch to live

Games, quizzes
& stories people
actually finish.

Irvan Fahlepi

Senior full-stack developer for games, quizzes and interactive stories, from first sketch to live.

Logitech
Udemy
Edifier
WHO
Batik Air
PGN
Embassy of Japan
Universitas Terbuka
Sierad
Gunung Sewu
Karena Kopi
Asian Games 2018

The brief

Four pieces built for the work luxury and beauty houses commission: a game, a survey, a scroll story, and the build behind them. Each is live, tested on real devices, and measured.

01 — Beauty · Play

Shade Match

An unofficial L’Oréal Paris concept. A 30-second colour game with a leaderboard you can’t fake.

OKLCH colour · WebGL gloss · Seeded rounds · Server-side replay

Play the game

02 — Fragrance · Ask

Maison Lumière

Fictional fragrance house

Five questions build a moodboard, and the moodboard picks your signature scent. Live answers from everyone who took it.

GSAP · Canvas share card · Live aggregates · Consent-gated GA4

Take the survey

03 — Leather goods · Tell

Atelier Nº 7

Fictional leather house

The making of a bag in seven gestures. Cinematic, scroll-driven, and built without an animation library.

CSS scroll timelines · Clip-path reveals · Zero JS libraries

Read the story

04 — Behind the build · Ship

The Lab

Analytics · QA · Deploy

Live funnels from the three demos, the device test matrix, and the pipeline that ships every change.

First-party events · Playwright · GitHub Actions · Vercel

Open the Lab

05 — The tool behind the games

PingPlay Forge

My own build tool, and the reason I ship games fast. It turns a brief and a brand kit into a finished, tested game: a 3D game with your assets in a few hours, a 2D mini game in a fraction of that.

Built by meMy pipeline, end to end
Games & mini gamesBrief to QA-passed build
Playable adsExports for ad networks
Host anywhereStatic build, any CDN

Made with Forge · live on PingPlay

70 games.
Playable now.

Every one built and shipped through the Forge pipeline, from cozy 3D open worlds to two-minute puzzles. Swap the art direction for a brand kit and it becomes a campaign.

Play the feed ↗Join the Forge waitlist ↗

Glow Haul Seoul · 3D beauty runner · runs right here

06 — Shipped & live

Eight projects.
All live.

Not mock-ups. Scroll, and open any of them.

01 / 08Mini-game platformPingPlayA swipeable feed of instantly playable HTML5 games, plus the studio where creators upload, test and track them.Open getpingplay.com ↗

02 / 08Beauty runner · made with ForgeGlow Haul SeoulA 3D shopping-spree runner through a Seoul beauty store, built and shipped through my Forge pipeline.Open getpingplay.com ↗

03 / 08Browser gameThe Last EmberA story-driven adventure through six realms, drawn live on canvas with synthesised sound. Touch-first, zero dependencies.Open mr-vero.github.io/the-last-ember ↗

04 / 08Live product customizerWhite LabelBrands design their own apparel: every garment renders live in up to 18 colourways, with artwork and labels placed in real time.Open whitelabelapparel.com ↗

05 / 08Festival site · Embassy of JapanJak-Japan Matsuri 2026The trilingual site for Indonesia’s largest Japan–Indonesia cultural festival, now in its 16th edition.Open jakjapanmatsuri.id ↗

06 / 08Conservation storytellingKCRMPIAn extinct volcano, four indigenous peoples, 168,000 hectares. A narrative site for a conservation programme in Papua New Guinea.Open kcrmpi.vercel.app ↗

07 / 08Album launchIvan SolénAn editorial, cinematic home for an artist’s album release, with pre-save, tour and the story behind the record.Open ivansolen.com ↗

08 / 08AI SaaSCostLabsConstruction cost estimation that turns a bill of quantities into a budget and schedule in minutes instead of days.Open costlabs.vercel.app ↗

03 / 08Browser gameThe Last EmberA story-driven adventure through six realms, drawn live on canvas with synthesised sound. Touch-first, zero dependencies.Open mr-vero.github.io/the-last-ember ↗

All live work

From private repositories

Walkthrough on request

Ava EngineScreen-aware voice agentJoins a customer on a call, sees the tab they share and talks them through onboarding, then hands off to a human. WCAG 2.1 AA audited, CI-gated.Real-time voice · Screen understanding · Node 22
LWD StudioMotion-graphics video studioTurns a topic or product page into a fact-checked motion-graphics video with a timeline editor, a unique art direction per video and QA gates before render.Remotion · Claude Code · Desktop app · TTS
PingPlay StudioCreator platform for gamesUpload, test, review and track HTML5 games against a published game contract, served from an isolated play origin.React · Express · Postgres · Blob storage
inKeyCamera hand-tracking keyboardType on an empty table with your phone’s camera: MediaPipe hand tracking, pinch-and-glide gestures and statistical word decoding.MediaPipe · Kotlin · Computer vision
MEXT ScholarshipRegistration platform · Embassy of JapanMulti-track application platform that moved 6,118+ applicants through one registration cycle, with an admin console for the review team.Next.js · PostgreSQL · Multi-step forms · i18n ID / JP

Showreel · How I work

Concept to live in 37 seconds · directed in code

Brief · Maison Lumière × agency

Find your signature scent

Deliverables: a 5-question quiz, a share card and a mini game

Audience: FR · EN · mobile first, on campaign traffic

Must have: GDPR consent and analytics from day one

Launch: live in 3 weeks

Concept → Live

Hero · type-led

Quiz × 5 · photo answers

Result + share card

1440 · responsive to 390

La Collection Lumière

Find your signature scent

Begin the ritualA rooftop gardenA quiet libraryA terrace by the seaA candlelit bar

Your signature

Rose Nocturne

Share my scent

#F2ECE2

#231E19

#9A5B2E

Aa Cormorant · Inter

Result.tsx — maison-lumiere

export default function
Result({ family, picks }: Props) {
const f = FRAGRANCES[family];
const [dist, setDist] = useState<Distribution | null>(null);
useEffect(() => {
fetch("/api/entries", { method: "POST", body: json(family) })
.then((r) => r.json()).then(setDist);
}, [family]);
const onShare = async () => {
track("share_click", { family });
const card = await renderShareCard(f);
await share(card, `My signature: ${f.name}`);
};

claude · maison-lumiere

> Add a share card to the result: 1080×1350, with the notes pyramid

● Reading Result.tsx, lib/data.ts

● Writing lib/shareCard.ts

✓ Canvas card renders at 1080×1350

✓ Added Playwright test: share produces a PNG

✓ 3 files changed · typecheck clean

$ npx playwright test

Desktop ChromeAndroid · Pixel 7iOS Safari

Survey flow

Consent

Share card

Shade Match

Scroll story

API & anti-cheat

47 passed · 3 devices · 0 failed

$ git push origin main

✓Push
✓CI · 47 checks
✓Preview
✓Production

irvan-fahlepi.vercel.app● Live

Find your signature scent

Demo data

1284Survey answers

3906Games played

18Share rate %

62Story completion %

Started

Completed

Shared

01 BriefRead the brief for what the client actually needs.

02 BlueprintEvery screen planned before a pixel is drawn.

03 DesignBrand assets gathered, then built into the experience.

04 Build with AII write it; Claude Code pairs on it, with tests.

05 QA on real devicesDesktop, Android and iOS, on every push.

06 ShipPreview for the client, production on merge.

07 MeasureThe funnel is agreed before launch, not after.

From prototype
to live.

See it in the Lab ↗

01
Prototype
A clickable build within days, so the client reacts to the real thing, not a deck.
02
Backend
Leaderboards, entries and live aggregates, validated on the server and ready for a campaign spike.
03
QA
Playwright on desktop Chrome, Android and iOS Safari on every push. A failing check blocks the release.
04
Deploy
A preview link per change for client review, production on merge, and one-click rollback.
05
Measure
Consent-first GA4 plus a first-party funnel, agreed before launch so the wrap report writes itself.

Built with Claude Code as a pair programmer. Scaffolding, tests and refactors move faster, and I review every line.

Games, quizzes& stories peopleactually finish.

Shade Match

Maison Lumière

Atelier Nº 7

The Lab

PingPlay Forge

70 games.Playable now.

Eight projects.All live.

All live work

Walkthrough on request

Showreel · How I work

From prototypeto live.

Prototype

Backend

QA

Deploy

Measure

Games, quizzes
& stories people
actually finish.

70 games.
Playable now.

Eight projects.
All live.

From prototype
to live.