Initially, I did some research with the already available group generators and figured out what functionalities could be implemented in a short time. The design inspiration was the second most important step where I used dribbble.com to look for trendy designs. Moreover, with the technologies I was pretty certain that SPA framework would be a good choice to go for. I eventually chose Vue.js as I was familiar with the technology and as well as found some pretty suitable libraries to implement the earlier inspiration type design and logic for the challenge.
I had challenges with the libraries I chose for the development due to limited amount of documentation and support available online. However, eventually I cope with that challenge and finally implemented the things I planned for this application. The most important phase apart from the development was the pleasant user experience where I tried following some standard guidelines of clarity and to the point approach. I also focused on the visual methodology where I used illustrations to portray the idea itself. Finally, I also worked on making the application responsive on the standard screens.
If I had more time I would have worked on the following points:
- Component Level Testing
- Add option to upload the list of the participants (eg. excel)
- Link sharing feature (make results available across internet)
- Option to select different types of games and automatically creating the teams
- Brackets feature for teams (who will compete with whom)
- Pdf or excel download feature
- Responsive design testing across all standard devices
- Vue.js
- Vue Flow Form
- Vue Router
- Tailwindcss
- manypixels.co (Illustrations)
- avatars.dicebear (Avatar API)
- project-name-generator (Random name generator)
npm install
npm run serve