HTEco: A Data Toolkit for Hattrick, Evolved Over Two Years

HTEco is more than just a technical project; it's my first-ever personal product, born from a passion for the Hattrick online game and a drive to master new technologies. What began as a learning exercise has now been a stable, operational application for over two years. This project chronicles my journey in building a self-sustaining product, solving real-world challenges, and continuously evolving my technical skills.

The project has undergone a significant technical evolution, reflecting my growth and adaptation to modern development trends.

Version 1.0 (The Foundation): The first iteration was built on a robust, separated stack: a NestJS backend serving a React frontend (built with Vite and Material UI). This phase was crucial for solidifying my core full-stack development skills in a traditional architecture.

Version 2.0 (The Great Migration): To embrace a more modern, unified, and performant architecture, I re-architected the entire application using Fresh. This full-stack framework, built on Deno and Preact, allowed me to create a seamless development experience from server to client, styled with Tailwind CSS for a faster, more flexible UI.

The primary challenge was interfacing with Hattrick's legacy API, which uses SOAP/XML and OAuth 1.0. To solve this, I engineered an adapter layer that cleanly transforms the complex XML data into predictable JSON, creating a modern interface for the rest of the application to consume.

The Hattrick API often experiences slowdowns and only provides data on user request. To prevent a laggy UI, I implemented an intelligent pre-fetching strategy. The system analyzes user behavior to proactively load and cache necessary data in the background. This was critical for turning a potentially frustrating wait into a smooth, uninterrupted interaction, especially when the app needed to aggregate multiple pages of historical data for its calculations.

My role extended beyond development into data analysis. The core value of HTEco is its ability to transform raw data into insights. This involved:

Aggregating data and calculating new derivative metrics.

Most importantly, intelligently grouping disparate data rows into logical sets that tell a coherent story to the user through data visualization.

The deployment architecture also evolved alongside the tech stack.

Initially, the application was deployed on a DigitalOcean Droplet, with NGINX serving as a reverse proxy for both the frontend and backend services.

Following the migration to Fresh, I moved the deployment to Deno Deploy, leveraging its native support for the Deno runtime and edge computing capabilities for superior performance and simplified operations.