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?

    😎 😎 😎

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  😁

⚑ 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!  ✌

Discussion (0)