April 6, 2026

Overview

FINternship Academy trains new financial advisors in Singapore. It has product pages with video lessons and transcripts, sales scripts, exam prep and AI video roleplay. A flow builder maps each sales script as a diagram.

My role

Co-developer from February to April 2026. I joined a client product that Lovable built most of. Lovable made 3,085 of its 3,212 commits, and the client and another developer also committed.

• 49 commits on 6 days, the most of any person on the repo
• The script flow builder is my area. I created 25 of its 36 files.
• 2,593 of the 5,077 current lines in the flow builder's component folder are mine (51%)
• Mostly UI: 84% of the lines I changed are React components, pages and styles
• I wrote no database or edge function code

The study banks, learning track and sales content are the client's work.

What I built

• Script flow builder on React Flow: undo, redo, auto-layout, a minimap, export and keyboard shortcuts.
• Node shapes: hexagon, parallelogram, cylinder and document nodes in a shape palette.
• Edit panels for nodes and connections: colors, smooth, bezier or straight paths, and solid, dashed or dotted lines.
• Grid snap and node search on the canvas.
• Public share page: a read-only view of a flow, with a copy-link button.
• Page and folder editor: folders now reorder beside pages instead of nesting, new items save at once, and a floating save bar holds changes.
• Transcripts and resources: click-to-edit in the editor sidebar, and shown inline in the learner view.
• Video player fixes: native fullscreen, instant switching from the sidebar with auto-play, and a clear "not available" state.
• AI roleplay fixes: a 30-second Tavus timeout, recovery from stuck starts, and crash fixes in pitch analysis.

The flow builder's AI wizard and annotations are Lovable's. Lovable also created the page editor files I extended.

How I built it

I set the repo up for Claude Code on my first day. I added a 299-line CLAUDE.md, 5 skills, a /batch command and a database handoff file.

• A tag on each task sets its checks. For a [PLAN] task, 2 to 3 agents read the code, then a reviewer agent approves the plan.
• A [TEST] task must pass the build, a Playwright check and a QA agent's review.
• /batch works the queue on its own. It stops on database changes, unclear tasks or build errors.
• A Lovable handoff skill keeps agents out of the database. They write change specs, and Lovable applies them.

Tech stack

• Web: React, TypeScript, Vite, Tailwind CSS, shadcn/ui, TanStack Query
• Flow builder: React Flow, dagre
• Editors: Tiptap 3, CodeMirror 6, dnd-kit
• AI: Tavus video avatars, OpenAI Assistants API
• Backend: Supabase (42 Edge Functions, owned by the client)
• Quality: Playwright MCP for browser checks
• Agents: Claude Code, alongside the client's Lovable