A few weeks ago, I wrote an article where I explained my intention of reviewing concepts about Genetic Algorithms. As I mentioned before, I divided the articles into 3 different parts:

1. Part 1: I am going to install Matlab (or even better, search for an alternative open source), explain how the algorithm should work, and write the code.
2. Part 2 (This Article): I will migrate the code to JS and using React I will build a simple interface to be able to execute the algorithm.
3. Part 3: Finally, I will build a BFF and incorporate register and login screens, so people can create games and invite people to join their games, and where the organizer can trigger the algorithm to see different options.

The second part, then, is about migrating the Octave’s code to JavaScript. I will migrate the code from this repo, and you will find the new code in this one.

Before jumping into the code and next steps, I would like to start designing a very simple UI using Adobe XD, you can install and use it for free, so I would recommend you to use it always to start drawing the first sketches, even tho it is a great tool for professional UX design. You can also search for free templates/designs or pay for them if you don’t want to think, or you are not good at designing like me (I found this website template that we can adapt to our problem so let’s use it).

For the sake of simplicity, but also because I am not a designer, just decided to keep it simple and prepare only one screen (also because at least for now is not really important how it looks).

So now we know what we want to design, what is next? Let’s decide how we are going to do this, let’s decide the stack!

Because the idea is not to just code in JS but also practice/learn new technology, I will use NextJS because I want to use React and review the concepts of SSR and test how the last version (NextJS v12) looks like. You can read more about it here.

I am not going to go too deep into the details of how to start, so I will describe the different points and then explain when I consider it worth it.

Quick Steps

1. Getting Started with NextJS (Bootstrap the code and create the basic page).
2. git init and configure the repo. Mine is https://github.com/b3nshi/ga-team-selector-nextjs.
3. Migrate our Octave Project and write the different functions using unit tests.
4. Connect all the pieces and run the code!

At the repo, you will find different commits where I have done baby steps to migrate the code, but let me show you the most important ones, and you can always check them one by one later.

Initial commit from Create Next App

The first step was to bootstrap the code following the “Getting Started” guide of NextJS. Nothing special to explain here, just auto-generated code.

Applying mockup to the index page

Here I just applied the design to our code. Have you seen the meme “AliExpress expectation vs reality”, well, here is what I did as the first step:

I know it doesn’t look exactly like the design, but it can be always improved later, and for the purpose of this article is good enough to move forward.

Configure the repo

There were a couple of things I forgot to configure that are actually useful to improve the code quality and test it better. I added Typescript and Jest to be able to continue migrating the code.

Migrate the GA methods and test them using Jest

Now is time to start migrating the different functions used in our GA. In order to test them, I wrote for every function a test, so we can quickly check if they are doing what we need to.

One commit per function:

• Fitness function with tests
• Init Population Function with test
• Adding selection function
• Cross function
• Mutate function with test
• Ignored test to validate the results

Finally, Implement UI and connect all the dots

Adding Vote/Add/Remove player: This commit is where I implemented the logic to add new players and save them using the localStorage. Of course, this doesn’t scale, and since we are not using a server to persist the data, it is not possible to get access to the same data using different computers, but again, we are just testing and checking how it works.

Select teams for the new game: Here is where I implemented the selection of players. You need to select an even number of players to be able to run the algorithm.

Add team selection to run algorithm: Finally, I added a new page where we will list the different options to make the teams and show the scores.

In the last screen, we can see what is the maximum score we can get, the maximum score of teams we found, and also get the list of players for every team.

It is important to mention that it is possible to get more than one option with the same players but in different orders. We should improve it later to show only unique options.

Next Steps

From here we need to continue improving our code, as I mentioned before, we could clean the final population and remove all the duplicated results, also show the score reached by the team and allow selecting not only the ones with the highest result but also the ones that are close to it, and many other improvements, but I will leave them to you!

Conclusion

Until here, I have implemented the solution using Octave and JavaScript (React), and in both cases, the results are pretty similar. Running the code in the browser is not making it any slower, so I think we could keep using it there or, as expected in part 3, move it to the backend, and persist the results. But I will do it in the next article. Thanks for reading me!