DEV Community

Pradeep Pradyumna
Pradeep Pradyumna

Posted on Edited 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!  ✌

Top comments (0)