Current Version!
Current React Component
Mock Pick Game Page
Mock For Trackr Page

About the Project

Our hackathon project was inspired by our passion for esports and our interest in working with big data. We aimed to create a tool that would enhance the esports viewing experience by providing real-time and historical game data in a visually appealing and easily accessible format.

Inspiration

We love esports and have always been fascinated by the vast amount of data that each game generates. Our goal was to harness this data and present it in a way that adds value to the viewer's experience.

What it does

The app is a Chrome/Opera GX extension. It allows users to select a game and watch it from a websocket connection. While watching, a ticker displays major events in the game. Additionally, it provides game stats similar to Dotabuff and features a heatmap that showcases game activity.

How we built it

We developed the extension using a combination of technologies including JavaScript, React, Tailwind, and Canvas.

Challenges we ran into

One of the main challenges we faced was creating a Chrome extension and figuring out how to inject a React app into it. Parsing and normalizing the incoming data from the websocket also posed significant challenges.

Accomplishments that we're proud of

We're particularly proud of our ability to work with big data, normalizing and visualizing it in a meaningful way. Moreover, collaborating with a fantastic team under time constraints and delivering a functional product was a significant achievement.

What we learned

Through this project, we gained insights into how extensions work for Chrome and Opera. We also deepened our understanding of websockets in the context of React.

What's next for Grid Opera Extension

Our future plans include integrating with Grid's official API to enhance the data we can provide. We also aim to improve the styling and functionality of the extension. One of our main goals is to introduce additional layouts to further enhance the user experience.