When I discovered an existing simple German dictionary web app, I felt dissatisfied with its basic functionality. I then embarked on a project to transform this app into an advanced educational platform equipped with learning analysis capabilities.
The original app only provided basic search functionality using TU Chemnitz dictionary data. While it was built with TypeScript and had a modern development environment using the Parcel bundler, it lacked any features that met learners' needs.
The first modification was implementing a learning history system. Rather than simple search history, I built a system that deeply analyzes user learning behavior. In addition to basic information such as searched words, search times, and search frequency, I also made it record behavioral data such as mouse movements and dwell time.
As a particularly interesting feature, I developed a mouse tracking system. I record in detail the mouse cursor trajectory, movement speed, acceleration, and number of direction changes when users search for words, and quantify learning difficulty and concentration levels. This made it possible to objectively understand which words users are struggling with.
Next, I worked on enhancing the practice text function. The original app had a simple text input area, but I expanded this into a high-functionality system that can manage multiple notes. Each note is linked with individual timestamps and learning history, allowing detailed tracking of learning progress.
Improving usability was also an important modification point. In the original app, a selection tool popup was displayed every time a search was performed, but I made this optional and added a mode where searches are executed directly with double-clicks. Additionally, through the function to switch between single-click and double-click, operations according to user preferences became possible.
In terms of data management, I implemented export and import functions for learning history. I made it possible to output learning data in JSON format and link with other devices and backup systems. I also set a limit of saving up to 1000 history entries, balancing performance maintenance and practicality.
As a technical challenge, I also built a self-hosting environment. While the original app depended on TU Chemnitz servers, I built my own CDN server and added an Express.js-based development server. This significantly improved development efficiency.
Ultimately, I was able to transform a simple dictionary search tool into an advanced application that analyzes learner behavior and provides personally optimized learning experiences. Through this modification, I realized the extensibility of open source projects and the possibility of creating new value using existing tools.