<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=278116885016877&amp;ev=PageView&amp;noscript=1">

, , , , , , ,

May 4, 2021 | 4 Minute Read

Axelerant IPL Prediction Pro—A Prediction Game

Swarad Jagannath Mokal, Frontend Staff Engineer

Table of Contents

Introduction

Axelerant IPL Prediction Pro is the fun prediction game for the T20 cricket league (Indian Premier League) exclusively designed for cricket fans at Axelerant and by the team members at Axelerant.

#guild-cricket is one of the most active Slack channels at Axelerant, and when it’s the IPL season, fun banters by different team supporters are always on.  We wanted to spice things up, make it more fun, engage all the cricket lovers at Axelerant, and this is when we thought about utilizing the technology to create our own IPL prediction game.

Axelerant Team having fun predicting who would win IPL

Axelerant team members having fun

What did we do?

There are many fantasy league games out there, but we wanted to build a game custom-tailored to the Axelerant audience and the one that integrates directly with Slack.

We created an IPL Prediction Pro Slack Bot that allows users to predict the winning team, predict scores, and many other things to become an ultimate IPL Prediction Pro. Slack bots interpret, trigger responses, and communicate with the users on Slack.

How does it work?

The game is designed to take less than 20 sec to make predictions every match. Axelerant IPL Prediction Pro Slack Bot asks everyone to predict the winner of the match, and for every correct prediction, 1 point is awarded.

The bot asks the questions on Slack before every match and adds possible options to the answer as emojis to the Slack message. Axelerant team members then cast their vote by just clicking on the emojis. Voting begins as soon as the bot announces the question, which happens 75 mins before a match starts, and it ends as soon as the game starts. The bot also posts a message to indicate voting is closed. To know more about the game, check out the FAQ’s.

Axelerant IPL Prdiction Pro

IPL Prediction Pro Slack Bot

Axelerant IPL Prdiction Pro

IPL Prediction Pro Leaderboard


Along the way, we started receiving some encouraging feedback and suggestions from Axelerant Team members to improve the game’s overall experience. We introduced charts based on the correct prediction percentage and points as well.  Eventually, we ended Season 1 of the Axelerant IPL Prediction Pro on a high.

Recognition for Axelerant IPL Prediction

Recognition from Axelerant Team Members

Axelerant IPL Prediction Pro - Version 2.0

Version 1 of the Bot was a huge success, but we knew we had to prepare well for Season 2 (IPL 2021) and our Axelerant Team members would be expecting more. We introduced two new major changes to the application. 

1. IPL Prediction Pro Website

We built a fully decoupled website built in React to display statistics of the predictions made by the Axelerant team members.

https://iplpredictionpro.axelerant.com/

Axelerant IPL Prediction Pro

Leaderboard on the IPL Prediction Pro Website

2. Bonus Questions

We also introduced Bonus Predictions Questions along with the winning team prediction question. The Bonus Question asks to predict one of the match stats. 

Axelerant IPL Prediction Pro

Bonus Question by the Slack Bot


We received very positive feedback from our team members, and we immediately knew that we didn’t disappoint them with Version 2 of the application. 

Announcing the Version 2 of the Axelerant IPL Prediction Pro

Announcing the Version 2 of the Axelerant IPL Prediction Pro

How did we achieve it?

Version 1.0 of the bot was built just in a few hours over the weekend using low-code and no-code technologies like Google Sheets, Google App Scripts, Zapier, and Slack app (integration and bot).

  • Backend - We used Google Sheets as the Backend of this application. Different tabs within the Spreadsheet are used, similar to tables in the database. There were tabs for Schedule, Capturing Votes, Leaderboard, etc.
  • Scripting - Google App Script is used for doing some ETL and building Custom Functions in Google Sheets that generates JSON objects for APIs.
  • Workflow Automation via Zapier - Zapier was used as the automation tool that connects the spreadsheet and Slack and creates the prediction questionnaire workflow automation. Zapier workflow is configured to read the prediction and bonus questions, triggering the Slack Bot to send the messages on Slack, capturing the votes from the users, and then writes back to the Spreadsheet.
  • Slack Bot - App that is designed to interact with Axelerant team members on #guild-cricket via conversation. Slack Bot is responsible for doing all communications like sharing the questions before the match, capturing votes once the match starts announcing leaderboard every morning, and even sharing website release notes.

Visualization using React App

While Slack’s message and thread format are great for conversations and engaging users, it’s not user-friendly while consuming the data and information like leaderboard and stats. Version 1.0 of the IPL Prediction Pro Bot was sharing the leaderboard and other stats with the help of textual messages and static images of charts, which was very limited.

We quickly ideated and used our expertise in React to develop a Fully Decoupled React App as part of Version 2.0 of the Axelerant IPL Prediction Pro, a significant upgrade from textual Slack messages. React app shows schedule, prediction results, leaderboard, and various other stats to keep the user engaged and improve their prediction. React App now has a dedicated user page to show how a user has played the season, along with interactive charts and graphics. React App is a significant user experience upgrade for Axelerant Team members.

Axelerant IPL Prediction Pro

Game schedule on the React App

Axelerant IPL Prediction Pro

Leaderboard on the React App
 

Axelerant IPL Prediction Pro

User Page on the React App

We were able to use the Sheets API to connect our React app with the Google sheets platform, and without much hassle, we could present the data in a much more pleasing way. Google sheets have enough tricks under the hood to help you quickly clean & transform data into a structure required by the app. We managed to put together a working React App in just a few hours and hosted it on Netlify.

As we used Google Sheets to capture the predictions from Slack and perform ETL on the same, we essentially transformed Google sheets into a user-friendly backend platform that was mimicking a live database on the cloud.

Few takeaways for Product Development

  • Prototype your Product Idea - Prototyping or developing an MVP is an essential step for any product development. We adopted our Axelerant product engineering process, which allowed us to test the waters before developing a full-blown product quickly. Only when we got some traction, we developed the entire product.
  • Iterate - Feedback and Suggestions received from Axelerant Team members were crucial while iterating the product. It’s so important to listen to your early adoptions and iterate the product after the MVP.
Update message from the Slack Bot

Update message from the Slack Bot

  • Be Open - This project started with just a couple of team members spending some time over a weekend as a hackathon. While there were some initial issues or bugs, Axelerant team members helped improve the product by contributing to Frontend development, Quality Assurance, and other activities.

Next Steps

  • We look forward to adding more features, stats, and prediction questions to the Axelerant IPL Prediction Pro.
  • We would also like to adopt this for other sports leagues like NFA, NBA, UEFA Champions League, and more.
  • Future versions will also enable users to log their votes via the web app directly.

Important Note

Axelerant IPL Prediction Pro game doesn’t promote betting or gambling activities. This prediction game is only designed to have some fun with the team members during the IPL and gamify the usual banter of “who will win?” into an engaging experience.

About the Author
Prateek Jain, Director, Digital Experience Services
About the Author

Prateek Jain, Director, Digital Experience Services

Offline, if he's not spending time with his daughter he's either on the field playing cricket or in a chair with a good book.


swarad-mokal

Swarad Jagannath Mokal, Frontend Staff Engineer

Big time Manchester United fan, avid gamer, web series binge watcher, and handy auto mechanic.

Back to Top