cocoding.ai: AI application builder

A browser IDE and real-time AI chat that turn a prompt into a working full-stack app, built from the first commit to production.

Company
cocoding.aiAI app builder that turns natural-language prompts into full-stack SaaS applications.
Role
Software Engineer (part-time)
Period
Nov 2024 – Feb 2026
Location
France (remote)

cocoding.ai

build a todo app

Backend Developer

Instructions

Add a todos table and a typed data layer for it.

Reading pages

Setting up utilities

Bash

Install dependencies

$ npm install

Frontend Developer

Instructions

Build the todo UI: a list, an add form, and done and active filters.

Creating components

Bash

Install UI components

$ npx shadcn add checkbox

Updating pages

Your todo app is ready. Open the preview to try it, or ask for a change.

Your message here...
Explorer
  • Workspace
  • src
  • app
  • components
  • lib
TodoList.tsx

src › components › TodoList.tsx

'use client'import { useState } from 'react'import { AddTodo } from './AddTodo'import { TodoItem } from './TodoItem'export function TodoList() {  const [todos, setTodos] = useState([])  const [show, setShow] = useState('all')  const items = filterBy(todos, show)  return (    <section className="space-y-3">      <AddTodo onAdd={add} />      {items.map((todo) => (        <TodoItem key={todo.id} todo={todo} />      ))}    </section>  )}
OutputTerminalConnected

$ npm install

dependencies installed

$ npx shadcn add checkbox

✓ added checkbox

$ npm run dev

✓ Ready on http://localhost:3000

cocoding.app/app/37bc7619

Todos

3 tasks, 1 done

Built with cocoding.ai

Original reconstruction for this portfolio.

Overview

cocoding.ai turns natural-language prompts into full-stack SaaS applications. I architected and built its frontend from the first commit to production in Next.js, React, and TypeScript, and defined the state, API, and edge-auth layers.

Around them I built the Database Explorer, the WebSocket layer behind chat, code generation, files, and terminal, and the live preview that shows what the agents are doing while they work.

By the end, I had written 67% of the frontend’s commits, and 73% of the code still in production was mine.

Context and problem

An AI app builder has to show work that’s happening somewhere else: agents writing files, commands running in a container, an app booting in a preview. If the interface goes quiet, people assume it’s broken.

It also has to feel like a real development environment, because the people using it will read and edit the generated code.

My role and ownership

What I built

  • Architected and built the frontend from first commit to production (Next.js, React, TypeScript), including the state (Zustand, TanStack Query), API, and edge-auth layers.
  • Built a browser-based IDE around Monaco Editor: a file explorer, Output and Terminal xterm.js sessions attached to each chat’s Kubernetes pod, and a live preview.
  • Built the Database Explorer: Tables, Query, and Schema views with a SQL editor and query history, a filterable, paginated data table with a record editor, and ER diagrams auto-laid-out with React Flow and ELK.js.
  • Designed a real-time AI chat that streams multi-agent output over SSE into a live timeline: a block per specialist agent with its instructions, then grouped file operations and Bash commands as they happen.
  • Built the live activity preview: while agents work, the preview animates the current step (code typing into the file being written, a terminal, a file grid) above a message such as “Crafting interface: Creating TodoList.tsx component”.
  • Engineered a reusable WebSocket layer for 4 real-time channels (chat, code generation, files, terminal) with token refresh, auto-reconnect capped at 5 attempts, ping/pong heartbeats, and tab-focus recovery.
  • Improved web performance by 80% through code splitting, dynamic imports, critical-CSS inlining, and React re-render profiling.
  • Localized the platform and MDX blog into 16 languages (next-intl), with JSON-LD, sitemaps, and hreflang SEO.

Challenges

  • Making remote work visible

    Multi-agent generation produces a stream of agent hand-offs, file edits, and commands, while the preview has nothing to show until the app boots. The interface had to present the work as it happened, in order.

  • Four real-time channels that must not drop

    Chat, code generation, files, and terminal each need a live connection that survives expired tokens, flaky networks, and background tabs.

  • An IDE that still loads fast

    Monaco, terminals, and diagrams are heavy. Public pages also needed to rank and stay accessible.

Design and architecture decisions

  • A timeline, not a spinner

    Agent output streams into a live timeline of agent blocks, file groups, and Bash commands, and the empty preview animates the step in progress, so progress is legible step by step.

  • One WebSocket layer for every channel

    One base service handles token refresh, auto-reconnect capped at 5 attempts, ping/pong heartbeats, and tab-focus recovery, and each of the 4 channels extends it.

  • Load the IDE only when it’s needed

    Code splitting, dynamic imports, critical-CSS inlining, and re-render profiling took web performance up by 80%.

Selected implementation details

  • Browser IDE

    Monaco Editor, a file explorer that collapses to an activity bar, Output and Terminal xterm.js sessions attached to the chat’s Kubernetes pod, and a live preview.

  • Database Explorer

    Tables, Query, and Schema views over a dedicated database WebSocket. ER diagrams lay out top-down with ELK’s layered algorithm, with search, reset, and PNG or SVG export.

  • Global reach

    Platform and MDX blog localized into 16 languages with next-intl, plus JSON-LD, sitemaps, and hreflang.

Database Explorer

The Database Explorer lets people look inside their app’s database without leaving the IDE. It connects over its own WebSocket and opens each view as an editor tab: a filterable, paginated table with a record editor, a SQL editor that runs on Cmd/Ctrl + Enter and keeps a query history, and a schema diagram that ELK lays out top-down, with search, reset, and PNG or SVG export. I wrote all of it. Below is my own take on the schema view, with a few things I would add.

Loading the interactive reconstruction…

Outcomes

80%web performance improvement
Code splitting, dynamic imports, critical-CSS inlining, and re-render profiling.
100Lighthouse SEO, Accessibility, and Best Practices
Reported scores for the public-facing platform, with 91 Performance.
16languages
Platform and MDX blog localized with next-intl.
73%of production frontend code written by me
Measured by surviving lines, including all of the Database Explorer and over 95% of the chat. And 67% of the frontend’s commits.

Figures come from my resume or from measuring the shipped product. Where a number describes the product or the team rather than my work, the context says so.

Technologies

  • Next.js
  • React
  • TypeScript
  • Zustand
  • TanStack Query
  • Monaco Editor
  • xterm.js
  • React Flow
  • ELK.js
  • SSE
  • WebSockets
  • Motion
  • next-intl