Thought it might be interesting to record some of the stories and mistakes from making Jumpers for Goalposts because I've made plenty! But every mistake is a learning opportunity so no good pretending they didn't happen.

​The first thing I'll go into is a success story rather than a mistake and it's everyone's favourite buzz word... AI!

Firstly, some background. This game is something I've had in my head for 15 odd years but only recently have I had the skills to ​tackle it on my own. The game is probably 70-80% backend with the frontend mobile app basically being a window into some data. That said, the frontend is the part I was going to find most difficult because I'm predominantly a backend programmer these days. I can use React and I've used Unity a lot but there was no way I was going to build this in Unity. Why? Unity is a heavy game engine that's great for 3D and even 2D games but this is mostly user interface. Despite improvements in this area over the years, Unity is not the tool for a UI based game. It takes an age to load the editor, application sizes are large, and the phone would run way hotter than it should for a UI. So that left React...

At the start of the project I threw together a very simple React dashboard to display the data from the game, making API calls etc. to prove the game worked. Within a few weeks I'd already proved this was something that could work as a game but now I had a problem. I am not going to ship a website for a game. Having looked at other options like Flutter and native Android development, I settled on React Native using the Expo framework. What I found surprising was how different React Native was to Web React. An entity custom set of components were needed to build the UI so switching from my Web dashboard was not as simple as I expected.

This is where AI came in and has been a God send in delivering this project in the time it's taken so far. I played around with a few tools including copilot, Claude, OpenAI but the one that made all this possible was Augment Code. Here was an agentic AI that runs in WebStorm and actually seems to understand project context. This was the biggest issue with all the other tools I tried. They could answer questions, but they didn't fully understand how everything works so would duplicate logic, create components with the wrong frameworks (such as ignoring that I'm using styled components and using in line styles instead). Augment genuinely shocked me on more than one occasion with understanding the things I hadn't mentioned but could be inferred with the right context.

Another thing it was really good at was UI design. I didn't really know what design I wanted in sone areas, so I would explain the things that were important from a UX point of view and its creations were almost always really good! An example: in the training screen, I was sure I wanted drop down combo boxes to select the player and the training area but having created that, it just didn't feel great. I asked Augment for suggestions and it created a modal with scrolling lists and paged sections. It immediately looked better,​ felt intuitive and gave me room to display more relevant content like the star rating and assistant feedback. ​​​​

Another area was the post match fixture details. I knew I wanted to display which players had played but not how to present both teams cleanly in a portrait interface. Augment had it covered with a tab design including some nice accents on the tabs to keep things readable.

Now none of this is perfect. Even Augment seems to struggle as the project gets bigger and the context needed is much greater. I will frequently have to point it towards common components because it has created yet another button style.

It's biggest failing was early on in the project though. I wanted to implement drag and drop for changing your team selection. The problem was, it kept implementing a UI where dragging a row up, would shuffle all the rows down - a common reordering pattern on mobile. ​​​That's not what I wanted though. I want to drag and drop one row on another row and swap those two rows. It could not figure it out. Many many iterations, we would get closer but it would fail with edge cases like dragging and scrolling the view at the same time, one item would animate and another wouldn't etc. Sometimes even going back to the reorder logic it started with. What was worse was that the code it created became an unreadable mess with logic from previous failed implementations confusing things. In the end, I found a tutorial for the common reorder UI and modified it to behave the way I wanted it to work. It was far simpler than I actually thought it would be. Implementation took less than a day, after many days of trying to get AI to do it for me. ​​​​Sometimes you have to know when to do something yourself and I probably misjudged that one. ​In the end I ditched the input method anyway because it was a frustrating and confusing way to change the team on mobile. I went with a tap on one player, tap second player to swap method which is a much better user experience. Here, at least, Augment redeemed itself, converting the input method from one to the other in one or two agent requests, ​​​ in way quicker time than I ever could.

AI is not coming for my job anytime soon and yet, the speed at which it is improving is frightening - both in a good and bad way. To see agentic AI solve problems and create mostly functioning - not just code, but whole applications - in a few minutes is incredible. And it's hard to get your head around it being only a couple of years ago since ChatGPT launched as basically Google on steroids. AI has made this project possible as I don't have the time to learn React Native outside of work the traditional way. Not if I want to make a game, avoid a divorce and my kids hating me. But I've got a good understanding of how it works now and a pretty functional game alongside it. While I'm not ready to call myself a React Native engineer just yet, I do at least have a good grounding in it because I'm understanding what AI is building and why.

AI can be a great learning tool. I've always found learning code from examples easier than reading documentation or even building something from nothing can be quite overwhelming at first. AI can help with that. Generating code and then understanding what it built and why. Asking questions, "why did you do this?" can help understand the thought process or best practices in real time.

We need to beware of total trust in an imperfect tool though. ​An advantage of having coded for over 20 years is recognising code smell. AI will very quickly generate utter garbage if you don't code review what it's building. Recognising when a system has gotten too complex and needs refactoring is really important. There are some scary examples of code written without the oversight of people who know what they're doing and we should be mindful about where this AI craze is taking us. The hype is real. AI is a super helpful development tool that's only going to get more powerful - assuming we don't burn the planet down first - but we need to stay realistic about what is possible right now and how to build safely and sensibly.