DEV Community

Pradeep Pradyumna
Pradeep Pradyumna

Posted on • Updated on

Form Teams Online: A React App

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  😀, BUT I'm gonna share why I built this app and how it helps my folks.

The Problem Statement  🔥

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.

  😒 😒 😒

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

The Idea 

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?

    😎 😎 😎

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

The Advantages  😁

 Now anybody can form teams easily in minutes
 Shuffling participants is no big deal
 Teams shuffle for every new entry/ removal of participants
 Any addition/ removal of participants, teams adjust automatically
 Get extras i.e. the list participants who fall out of teams
 In case you accidentally close the TAB in which the application is running, it would prompt you a message as a precautionary measure 🔥. This is to prevent the user from losing any changes.
 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

Thank you for reading! 

Top comments (0)