ShadowCoder

• 

  Editor

As a developer, I’ve always noticed a major flaw in traditional technical interviews: coding assessments only evaluate the final, static code submission. They treat problem-solving as a pass-or-fail destination rather than a journey. A candidate could copy-paste an entire solution from LeetCode or ChatGPT, pass all the test cases, and appear to be a top-tier engineer. Conversely, a brilliant developer might get stuck on a tiny syntax error at the last minute and fail, despite having an incredible logical flow.

I wanted to build a platform that unmasks the true engineering process. Shadow Coder was inspired by the idea of an "X-ray vision" or high-fidelity DVR for technical recruiters—capturing every single keystroke, pause, run, and compile event so that companies can evaluate developer capability, resilience, and genuine problem-solving flow far beyond the final code output.

🛠️ How I Built It Shadow Coder is built as a highly integrated, full-stack application designed to capture massive streams of interaction data smoothly:

Frontend & Candidate Environment: I built the core user interface using a modern, responsive web framework. For the interview room, I embedded the premium Monaco Editor (the engine powering VS Code) to give candidates a world-class coding experience with smart syntax checking and auto-completion.

Telemetry & Logger: I built a custom, silent background activity logger that hooks into the editor to intercept and record typing density, backspaces, deletions, and paste actions in real time without lagging the UI.

Data Visualization: I integrated interactive Recharts stacked bar charts and toggleable typing heatmaps into the reviewer dashboard to turn raw keystroke streams into beautiful, digestible candidate metrics (WPM, edit ratios, thinking vs. coding phase breakdowns).

🛑 Challenges Faced Building a project of this scale as a solo developer pushed me to my absolute limits, particularly around telemetry data and security:

State Synchronization & Unload Prevention: Candidates accidentally refreshing or closing tabs mid-test is a massive issue. I had to build a server-synced countdown timer and implement aggressive browser unload prevention with auto-saving to ensure no session data is ever lost.

The Telemetry Flood: Logging every single keystroke creates a massive amount of real-time event data. Structuring this data so that it could be captured efficiently on the frontend, sent to the backend without causing network performance issues, and reconstructed perfectly into a smooth "High-Fidelity Playback" required deep optimization of event handlers.

🧠 What I Learned This project was a massive milestone for my personal growth as a software engineer. While I felt comfortable with UI design, building Shadow Coder forced me to master the deeper layers of system architecture:

Advanced Backend Engineering: I dive deeply into the backend, learning how to architect robust APIs that handle high-frequency event logging, manage full CRUD challenge management systems, and securely process isolated code execution environments.

Database Architecture & Optimization: Because keystroke logging generates vast amounts of chronological data, I learned how to model and optimize databases specifically for timeline tracking, candidate comparisons, and metric alignment rows.

Production Deployment: Building a local app is one thing, but launching it is another. I gained crucial experience in deploying a live backend ecosystem, configuring environment variables, handling production databases securely, and ensuring a seamless, low-latency communication channel between the live server and the candidate room.

Built With

• amazon-web-services
• aurora
• express.js
• next.js
• postgresql
• socket.io
• vercel