Skip to main content

CodeTyper Use Case: Challenges

This document outlines the primary challenges encountered during the development of the CodeTyper application.

1. Simulating a Real Code Editor​

The most significant challenge was to replicate the behavior of a real code editor within the constraints of a typing tutor application. This involved several key features:

  • Automatic Indentation: When the user presses Enter, the new line should automatically have the same indentation as the previous line. This is more complex than it sounds, as the correct indentation can vary depending on the context of the code (e.g., a line with a closing brace should have less indentation than the previous line).
  • Smart Backspace: The Backspace key should be able to delete entire blocks of indentation at once, rather than requiring the user to press the key multiple times.
  • Cursor Synchronization: The cursor must remain synchronized with the user's typing, even when the typed text temporarily deviates from the target code (e.g., when the user has incorrect indentation).

2. Real-time WPM Calculation​

Calculating the user's words per minute (WPM) in real-time presented another challenge. The initial implementation only updated the WPM when the user paused typing, which did not provide a live, continuous feedback loop. The solution required a more sophisticated timer implementation that would not be reset on every keystroke.

3. Handling User-Provided Code​

The application allows users to provide their own code to practice with. This introduced a number of complexities:

  • Syntax Highlighting: The application must be able to apply syntax highlighting to any code snippet provided by the user, regardless of the language.
  • Error Handling: The application must be robust enough to handle malformed or incomplete code without crashing.

4. State Management​

The application's state is complex, with many different pieces of information to track (e.g., the user's typed text, the current character index, the cursor position, the WPM, the accuracy, etc.). Managing this state effectively was a key challenge, and it required careful use of React's state management features.

The Solutions​

The following documents in this series will detail the solutions that were implemented to address these challenges.