How I made an application for myself, and many liked it

How I made an application for myself, and many liked it

Hello, my name is Artem and I am the Frontend Team Lead at Surf. I really love two things: gamification and graphics. Now I work with people more than code, so I read a lot of articles on the topic. That’s how, on a quiet evening, in one of them I came across the idea of ​​combining Moving Motivators and a petal diagram.

Moving Motivators is a game method of working with a team of Management 3.0 practices, read you can here

And the article where I found the idea here

While reading, a picture appeared in my head – a good overview comparing the motivation of the team with a graph, all kinds of tips and analytics. I thought that it would be very useful for me as a team leader to have such a tool to understand what inspires and frustrates, what is important and what is not – for the team on average and for each person individually. After a quick google I couldn’t find anything similar. Well, I decided, everything is described, you just have to take it and do it.

However, there was a problem at the start – the lack of planning, the impulsiveness of decisions and the uncontrollable urge to experiment led to the fact that I hit my face on the rake and redid the application four times (no need so)

At first, I started working on the usual stack (CRA, which by then was morally outdated, plus Ant Design and MobX) — and got stuck pretty quickly, I don’t remember what, trying to do well right away. I gave it up and didn’t touch it for a while. And then, on another quiet evening (in general, quiet evenings are often when the head cooks best), the thought crossed my mind: “if this is gamification, why not do it all in GameMaker?” (I didn’t understand Unity, so I prefer GM). I scrapped all the hard work and started with a clean slate.

The second approach ran nice and smooth for quite a while, but at one point I got stuck on a mundane action – I couldn’t seem to get the timing of the animations perfect. Frustrated, I abandoned development again for about a month.

When I cooled down and realized my mistake, I rewrote it twice more from scratch, this time using the usual React stack and not experimenting with technologies.

But not with methodologies. In the third approach, for some reason, I decided to implement Feature Sliced ​​​​Design at the same time, having no experience in building such an architecture from scratch. It turned out that this method was not suitable for such a project, and I was more solving the problems of “how to correctly divide into layers”, instead of dealing with the application itself. Fortunately, this failure did not lead to another turning of the table and a long break in development – when I realized the problem, I immediately created a new folder for the project.

In the last attempt, I decided that I would do it as simply, as quickly as possible, and as efficiently as possible. I took the connection of Typescript + Next.js + RSuite + Apache ECharts without any state managers and other complications and started writing “as the letter will lie”. Then, of course, it all had to be refactored and distributed, but this approach brought me a long-forgotten pleasure — the speed of implementing features, correcting errors, and implementing new ideas (which, of course, arose on the go) were incredible, and the result was beauty on the shelves.

There were no particular problems with the content – the content was ready even before the first iteration: screen design and an exemplary understanding of the flow, images generated using Stable Diffusion, adapted card names and a lot of data according to their description.

Although not. There were problems with the names and description — some of the card names were very difficult to translate into Russian, without losing parts of the meaning. I had to read the definitions of the original names in dictionaries and look for the most suitable replacements.

For example, Acceptance, which, in addition to the obvious “acceptance”, also implies “acceptance of responsibility”. Or the unexpectedly versatile Honor. Or Relatedness, which still lost part of its meaning, turning into “connection”. I tried to close the missing values ​​with the block “Also known as…”

In part, ChatGPT helped me in this, but it did not cope with all the tasks that I set before it. So I had to do a lot of finalizing myself. As a result, the result bears little resemblance to the original cards – it was not a screen adaptation, but a film “based on the work” and also adapted. Such a “Motivational brotherhood”. But since at that time the program was created without aiming at a wide audience, I liked the result.

After I decided “that’s it, it’s done!”, there were two beta tests (on my wife and on colleagues), which helped to close the problems that were not obvious to me, added some nice little things and brought a lot of satisfaction that many people liked the app.

Right now, I’m writing this text with one hand, and with the other I’m finishing the same page from my imagination that I set out to implement this project – an interface for processing the results of commands. More precisely, the page is already ready, but it became obvious that using it without instructions is a little more difficult than the basic functionality. So before I post a new build, I need to write an article or record a video explaining how to use it all. In order not to be speechless, keep the screen.

Once upon a time, at the dawn of my career, I worked as a designer. As you can see, the world got a little better when I stopped doing it. But in pet projects, the choice is not rich and you have to do everything yourself as much as you can.

From the strategic plans, so far only banalities — backend, registration and data storage on the server. Perhaps, when a large amount of data and feedback is collected, something else will be born. And for now, I will continue to write as the letter will lie. Try the web version of the program → you can here

More interesting content for developers → in the Surf Web Team Telegram channel

P.S. We publish cases, best practices, news and Surf vacancies there, as well as conduct live broadcasts.

Related posts