03 / CodeMarker
Self-directed
Concept, design and build, solo

Code feedback, marked like an exam paper.

A code reviewer redesigned as an exam paper: you hand in your work and get it back marked in red pen.

A to Fa grade you read in a second
4pen colours, one meaning each
3questions every correction answers

The marked paper: code on the left, and on the right a circled F, 48 out of 100, and corrections grouped into Mistakes and Risks

Built with Next.js, TypeScript, Monaco editor, Sucrase, Pyodide and Framer Motion. Try it live (new tab)

The problem

It worked, and it looked like every other developer tool.

The first version was called CodeRev: near-black, neon green, a gradient headline promising your code "brutally reviewed".

The decision that changed it

One idea everyone already understands: getting work back marked.

The paper is ruled with a red margin line, code is set like typewriter text, and every judgement is made in pen. I dropped the badges, cut the copy down to two lines, and renamed it CodeMarker.

Handing it in. The paper comes back with a grade that draws itself and corrections in pen. The wait is shortened here.

Marked like an exam

Colour means one thing each.

The score becomes a letter circled in red pen that draws itself, with a remark underneath, from "Nothing left to fix" to "See me after class". Fixing problems raises it live.

Red pen is for mistakes, pencil orange for risks, blue for improvements, green only for done. Problem lines on the paper are underlined in the same colours, so the code and the corrections read as one page.

Written for everyone

Titles say what goes wrong, not what it is called.

"Crashes when the user isn't found", not "Unsafe non-null assertion". Errors, warnings and suggestions became Mistakes, Risks and Improvements.

Every correction answers the same three questions: what happens, when it happens, and why it matters. Then what to change, with the old code struck through in red and the fix written in pen.

An opened correction explaining in plain English why the code crashes, with the original struck through and a handwritten fix — An opened correction, with the tricky inputs showing the crash actually happening.

After applying a fix: one tick, one cross, and the grade raised from F to D — After a fix: one tick and one cross show exactly where things stand. The grade rises from F to D.

A score of 100 has to mean nothing left to fix.

Proving a fix works

A suggested fix is only a claim until you run it.

Scratch work is set up like a multiple-choice question. A tests the fixes; B, C and D run the code, try everyday examples and try the awkward inputs where most bugs hide.

JavaScript, TypeScript and Python run in the browser. C++, C# and Java need a compiler, so for those the letters copy ready-made tests to run in your own project instead of pretending.

An early version could give full marks and still list problems. The score, the corrections and the tests now have to agree.