Horse Racer

About the project

Horse Racer was the first mandatory assignment for the Fullstack course, originaly called Fast horse race, built to explore web components, inter-component communication, and separation of concerns. But than just a technical exercise though, it was the project that changed how I think about web development and sparked a real interest in code optimization.

Up to four players share a keyboard, each assigned a horse and a key and mash it as fast as possible to race your horse emoji across the track, first to the finish line wins. The game flows from a 3-second countdown into an active race, with each keypress moving a horse forward 20 pixels until someone crosses the finish line and is crowned winner.

The game is built with four custom Web Components, each with a distinct responsibility: managing the countdown, controlling individual horses, tracking the race, and saving results. What made this architecture interesting is that there is no central state store, each components manage their own state entirely and communicate only through custom events on the document. Race results are saved to localStorage, keeping the 10 most recent winners through page reloads.

Horse Racer showed me really how satisfying it is to structure and optimize code well. It’s the project that made me discover how fun web development can really be.