GRIDWatch

Inspiration

My inspiration was a player drafting system. I know that coaches have to watch hundreds of games to find players with certain attributes, so my platform would be like a preliminary step that could take those hundreds of players and games down to dozens, which keeps their jobs manageable, and cuts time down so they can dedicate more to game analysis.

What it does

GridWatch is a convenient way for coaches and captains to scout a new player for their team. Using grid data with advanced data analysis, it generates reports for a player, identifying their weaknesses and top skills. Users can see calculated metrics like positioning strategy, economy knowledge, and team support abilities.

How I built it

I started the design by listing things that I wanted the website to do, and started by making pages for teams, players and series, while being careful not to spend too much time on the interfaces, to prevent it from being another data visualisation app, as many already exist. Then I navigated the GRID API endpoints, and populated the pages with data. The final major step of the website were the analysis pages, where the actual AI analysis went. I started by downloading the JSONL events file and parsing it into combat, positioning, economy, and support stats for an individual player. I fed that into a Google Gemini endpoint, which I pre-trained using context from hundreds of game data points before hand, and then extracted feedback from the response.

Challenges we ran into

The main problem was loading the data. The GRID API offers event-by-event game analysis in the form of JSON list files, each counting thousands of individual events. Loading the series initially took minutes, which is unrealistic for coaches that may need to view dozens of potential picks for their team. To adress this issue I implemented persistent caching. This approach saved data that would be reused to the client, then when I needed to search for series that had a specific player, I could reused previously fetched data instead of making another web request which sped up the loading by up to around 50% when generating reports, and higher if generating reports for the same player over different time periods. I also added multithreaded loading, which concurrently loads data in batches. This way multiple files could be processed at the same time, which reduces the loading time further down to about 5 seconds per series. This solution far from perfect, and could be made faster with techniques like cloud computing with services like Google Cloud Run or AWS Fargate, but with the resources at my disposal, I find it to be an ideal approach.

Accomplishments that I'm proud of

This is one of the largest full stack applications that I have developed, and it survived multiple refactors and critical errors midway through the design, so I am proud that I stuck with the task and was able to develop a functioning application at the end.

What I learned

Most of the learning for this project came from handling the large data sets and implementing the analysis pipelines. I learned about industry-standard caching, data storage and batch processing techniques that I am excited to implement in my future applications (hopefully more cleanly).

What's next for GRIDWatch

The coming versions have two primary goals. One is a new function where users can build a fantasy team, selecting up to five players and getting an aggregate analysis of how they may play together. Then it could give recommendations for players with better support or combat capabilities if needed. They could also pitch these projected teams against each other and get an overview of how the game may be played.

The second goal would be for wider game support; currently the analysis function of the app is only compatible for Valorant matches, but the GRID API also has other games series available (e.g. League of Legends). Data and play-styles of vary significantly between games so much of my analysis code and model training would have to be revised to accommodate them.

Built With

• gemini
• grid
• nextjs
• sql
• supabase
• typescript