Form Teams Online: A React App
Tags: react, showdev, netlify
Published: 2020-12-26 07:37:01

I have built an app using React JS and hosted it over Netlify. I'm **not going to brag** about how I built this app and other technicalities, as there are just so many ReactJS tutorials available on this community already<span>&nbsp;</span><span> &#128512;</span>, BUT I'm gonna share **why I built this app** and **how it helps my folks**.

## The Problem Statement<span>&nbsp;</span><span> &#128293;</span>

There are a lot of fun activities and games that my company organizes on various occasions and being a part of the creative team:
* We send out registration forms to all employees across the company
* In turn, we get a lot of nominations
* We calculate on a total of how many teams that we can have out so many participation received/ how many teams can we form for a specific count of participation in a team.

> *For example: Suppose we have received 60 nominations*
* *if we need 15 teams, how can we equally distribute 60 participants in 15 teams. How many extras (participants left out) would we get.*
>* *if we want 12 participants in one team, how many teams could we form, and how many would be the extras*  

* We then have to form teams where we ensure that participants are equally distributed and shuffled at the same time in different teams.
* Sometimes we get nominations at the very last moment, and we try to fit that new participant in a team and end up reorganizing teams.
* The same process goes on if any participant backs out after all team formations are done.

And this whole task of forming teams is just so time-consuming.
<p><span>&nbsp;</span><span> &#128530;</span><span> &#128530;</span><span> &#128530;</span></p>

Hence, I decided to build an app for this to speed up the process.

## The Idea<span>&nbsp;</span><span> &#9749;</span>
I built a very user-friendly app that would have simple UI controls to
* Add/ Remove participants
* An input field that takes in the number of teams to create?
* An input field that takes in the number of participants per team?
<p><span> &#128526;</span><span> &#128526;</span><span> &#128526;</span></p>

https://formteamsforme.netlify.app/

I built this app using React JS and hosted it over Netlify to achieve CI/ CD in no time.

## The Advantages<span>&nbsp;</span><span> &#128513;</span>
<span> &#9889;<span>&nbsp;</span></span>Now anybody can form teams easily in minutes
<span> &#9889;<span>&nbsp;</span></span>Shuffling participants is no big deal
<span> &#9889;<span>&nbsp;</span></span>Teams shuffle for every new entry/ removal of participants 
<span> &#9889;<span>&nbsp;</span></span>Any addition/ removal of participants, teams adjust automatically
<span> &#9889;<span>&nbsp;</span></span>Get extras i.e. the list participants who fall out of teams 
<span> &#9889;<span>&nbsp;</span></span>In case you accidentally close the TAB in which the application is running, it would prompt you a message as a precautionary measure <span> &#128293;</span>. This is to prevent the user from losing any changes. 
<span> &#9889;<span>&nbsp;</span></span>Out of all, it is super fast, super easy and fun to create teams. So much time is saved!

## Yet to be done
I have some styling and alignment issues pending, which I'm working on. But do let me know if there's anything you like and needs to be added/ improved in the app. I'm all ears.

The Github link for this application is available [here](https://github.com/pradeepradyumna/iformteamshere)

Thank you for reading!<span>&nbsp;</span><span> &#9996;</span>