Explain My Code

Spent some time refining explanation clarity and testing different edge cases to see where the AI output breaks down or becomes confusing.

I focused on making the explanations more readable and consistent, especially for shorter code snippets where line-by-line explanations can feel awkward. I also tested rolling back and reapplying some UI changes to see how they affected readability.

This helped me better understand how small prompt and presentation changes can significantly impact how “smart” the tool feels, even when the underlying logic stays the same.

Today I focused on improving the user interface and overall layout of Explain My Code.

I redesigned the page structure to better separate input and output, making the app easier to scan and more comfortable to use. The results are now displayed in clear sections for the overview, line-by-line explanation, and issues/suggestions.

I also improved spacing, typography, and visual hierarchy so the tool feels more like a real developer product instead of a rough demo. These changes make explanations easier to read and improve the overall user experience.

Next, I plan to continue polishing the UI with small quality-of-life improvements.

I built a web tool that explains pasted code using an AI backend.

The frontend sends code to a Node + Express API, which calls an LLM and returns structured JSON containing an overview, line-by-line explanation, and improvement suggestions.

The hardest part was handling unreliable AI output (like markdown-wrapped JSON), so I added defensive parsing to make the app stable.

I turned Explain My Code into a real frontend–backend app.

The frontend now sends code to a backend API, which responds with structured explanations (overview, line-by-line, issues). Setting this up forced me to think about data formats and separation of concerns instead of dumping logic into the UI.

With this structure in place, adding real AI-generated explanations should be clean and straightforward.

I ran into an issue where clicking the Explain button wasn’t doing anything, even though there were no errors.

After debugging, I realized my JavaScript wasn’t properly running when the page loaded. I fixed the script setup and now the button actually reads the pasted code, does a basic analysis, and updates the output dynamically.

This made the project feel way more real, and it was a good reminder that small wiring issues can completely break functionality even if there are no visible errors.

Next, I want to improve what the explanation actually says instead of just placeholders.

I set up the initial structure for Explain My Code.

Right now it’s just a simple page with a title, description, and a text area where you can paste code. I wanted to get the basics in place before adding any logic so the flow feels clear from the start.

Next, I’m planning to add a button and an output section so the tool can actually show explanations.