Show HN: Vanilla JavaScript refinery simulator built to explain job to my kids
A chemical engineer, not a software developer, built an impressive vanilla JavaScript refinery simulator to explain his job to his kids, showcasing the power of leveraging LLMs for complex projects. This interactive browser game demonstrates intricate chemical processes while offering invaluable technical insights for non-developers diving into web development with AI assistance. Hacker News celebrated the project's educational utility and the author's detailed breakdown of overcoming significant coding challenges without traditional frameworks.
The Lowdown
A chemical engineer created 'The Great Refinery Run', a detailed and interactive browser game designed to demystify the complex operations of a crude oil refinery. Built with vanilla HTML, CSS, and JavaScript, the game serves as an engaging educational tool for his children and others, explaining processes from crude extraction to gasoline blending.
- The author, a self-proclaimed novice developer, extensively utilized large language models (LLMs) like Claude, Copilot, and Gemini to write the 9,000-line single-page application.
- Key technical lessons learned included managing LLM output for large codebases by forcing 'patch file' formats, precisely mapping Matter.js physics to dynamic CSS boundaries, navigating mobile browser event handling intricacies, and implementing robust state management with custom teardown functions to prevent memory leaks.
- The simulator covers various phases of refining, such as electrostatic desalting, fractional distillation, hydrotreating, catalytic cracking, and gasoline blending, featuring engaging minigames for each.
- It is completely free, runs client-side, and is devoid of ads or sign-ups, embodying a passion project for learning and explanation.
This project stands as a testament to what can be achieved by determined individuals outside the software development field, leveraging modern AI tools to create sophisticated, educational applications.
The Gossip
Praiseworthy Project & Pedagogical Prowess
Many commenters lauded the author's impressive achievement as a non-developer and commended the game's unique approach to education. Users expressed admiration for the initiative to build such a complex tool for family and the clarity it provides on intricate industrial processes. The game was recognized for its educational value and the passion behind its creation.
LLM Learnings & Development Deliberations
The discussion delved into the author's detailed experience using LLMs in development, particularly his advice on managing their output in larger codebases by enforcing 'patch file' generation. This specific workflow insight resonated with others, highlighting practical strategies for integrating AI effectively into non-traditional development cycles and leveraging it for learning and rapid prototyping.
Technical Triumphs and Troubleshoots
Commenters engaged with the technical challenges and solutions presented by the author, such as handling Matter.js physics within CSS boundaries, mobile browser compatibility, and vanilla JavaScript state management. Some users reported specific bugs, like display issues in Firefox, which the author graciously acknowledged and committed to investigate, while others expressed interest in the code itself for boilerplate use.
Simulatory Successors & Historical Homages
A nostalgic thread emerged, with some commenters drawing parallels to classic simulation games. Specifically, the project was noted as a spiritual successor to 'SimRefinery,' a well-known educational simulation from the past, connecting the new game to a lineage of engaging, industry-specific learning tools.