Palestra

Palestra is a coding education platform (file explorer, code editor, and chat panel in one workspace) where the twist is that the codebase you're practicing on doesn't have to exist yet. A React frontend talks to an Express/TypeScript backend that asks Claude to generate an entire project from a short description, and the result becomes something you can click through, open files in, and edit like a real repo.

Getting a language model to produce a multi-file project reliably comes down to how the prompt is shaped: it isn't asked for "some code," it's asked for a strict JSON tree of folders and files with full file contents inline, with the schema spelled out in the prompt itself and an explicit instruction to return nothing else.

private buildCodeGenerationPrompt(request: CodeGenerationRequest): string {
  return `Generate a ${request.complexity} ${request.framework} project called "${request.projectName}".

Project Description: ${request.projectDescription}

Required Features:
${request.features.map(f => `- ${f}`).join('\n')}

Please structure your response as a JSON object with this exact format:
{
  "files": [
    {
      "name": "folder-name",
      "type": "folder",
      "isOpen": true,
      "children": [
        { "name": "file-name.tsx", "type": "file", "content": "// Complete file content here" }
      ]
    }
  ]
}

Important: Return ONLY the JSON object, no additional text or formatting.`;
}

The response gets parsed back into the same FileStructure tree the file explorer already renders, which is why the generated project can be dropped straight into the editor without a separate code path. As far as the UI is concerned, an AI-generated codebase and a hand-written one look identical.