I built DebugCraft Studio, an intelligent multi-language code debugging workspace inspired by the ChatGPT and Claude Canvas interfaces.
It features a 3-column pro developer layout:
• Left Panel: A collapsible AI debugging assistant copilot to diagnose stack traces, logic bugs, and compiler errors.
• Middle Panel: An interactive Monaco Code Editor (VS Code engine) with full syntax support for Java, C, and HTML.
• Right Panel: A dedicated Corrected Output column with one-click code copying and inline Git Diff comparison.
What was challenging:
• Structuring the responsive 3-column layout alongside full Monaco Editor instances without layout shifts.
• Managing port forwarding and container memory limits inside GitHub Codespaces.
• Handling deployment pipelines to Vercel so reviewers have permanent 24/7 uptime without container timeouts.
How to test it:
- Select a language preset (Java, C, or HTML).
- Click “Debug & Fix” (or ask the copilot in the chat).
- Check the right column for the cleaned output, toggle “Show Diff” to see line changes, and use “Copy Result” to grab the fix.
