Q399: Implementation Capstone Building A Mini JS Practice Console

What Interviewers Want To Evaluate

This capstone tests whether you can combine the previous drills into one implementation plan.

The prompt is practical: build a mini JavaScript practice console.

The senior answer should cover UI layout, editor behavior, console capture, copy actions, safety limits, responsive design, accessibility, and verification.

Short Interview Answer

I would build a mini JS practice console with a large editor, a structured console output panel, run and clear actions, copy code and copy output buttons, basic editor shortcuts, error capture, output limits, and responsive layout. I would keep execution isolated enough for a learning tool, add tests for text transforms and copy behavior, and verify the full learner loop on desktop and mobile.

Feature Scope

First version:

code editor
run button
clear console
copy code
copy console
console.log capture
console.error capture
thrown error display
basic timeout
responsive layout

Out of scope for first version:

full Monaco editor
server sandbox
account sync
snippet sharing
advanced prompt library

Scope discipline matters.

UI Structure

Use:

PracticeWorkspace
PracticeToolbar
CodeEditorPanel
ConsolePanel
ShortcutStrip

This keeps the page readable.

It also prepares for TypeScript mode later.

Console Model

Represent entries:

id
runId
level
message
timestamp

This is better than storing one joined string.

Structured output supports copy, styling, filtering, and run separation.

Execution Flow

Flow:

create run id
clear or mark previous output
capture console methods
run code
catch thrown errors
restore console methods
write output entries
show status

Restoring console methods is essential.

Do not let one run leak into the app environment.

Safety Limits

Include:

timeout
max output entries
max message length
stop action later
clear execution context later

For a first version, even simple limits are valuable.

They make mistakes recoverable.

Editor Behavior

Support:

Tab indent
Shift Tab outdent
Alt Down duplicate line
Ctrl Enter run
Ctrl L clear

Add visible hints.

Shortcuts without hints feel hidden.

Accessibility

Include:

labelled editor
labelled console
button labels
visible focus
copy feedback
error text
keyboard reachable controls

A code tool can be keyboard-heavy and still accessible.

Testing Plan

Test:

run logs output
run thrown error
clear console
copy code
copy console
Tab transform
Alt Down transform
timeout message
mobile layout smoke

This covers the core learner loop.

Common Mistakes

• Building a huge editor before the workflow works.
• Capturing console globally and not restoring it.
• Letting output grow forever.
• Forgetting copy feedback.
• Ignoring keyboard shortcuts.
• Treating mobile as impossible instead of degraded but usable.
• Skipping error states.

Final Mental Model

The mini JS console is:

editor
execution
console capture
copy feedback
safety limits
keyboard flow
verification

Build the learning loop first.

Then make it richer.