Rocket League Analytics

Comprised of a frontend React app and backend node server, Rocket League Analytics provides in-game analytics, match history, and statistics tracking for Rocket League players. All the player has to do is submit an image of the in-game scoreboard...

Rocket League Analytics on various devices

Tell me more ...

When players of the video game Rocket League join a match, they do not know the abilities of their random opponents or teammates. Furthermore, the game does not record match history or provide statistics tracking. I decided to address these issues for my final year university project. Some limited solutions already existed, though these were just for PC players, so I was determined to achieve a solution that console players could use.

At the start of each Rocket League match they play, users of my app will submit a screenshot of the in-game scoreboard, from which the app will extract player usernames. This unique feature ensures my app remains platform independent and so available to console players. For the ~15% of names which my app misreads, users can manually edit them. Data on those players is scraped from Rocket League statistics website Tracker Network and presented to the user in an easily-consumable fashion to be absorbed whilst playing. Once the match has concluded, the same data is scraped again and the result can be calculated by identifying the differences in each player's MVPs, goals, wins, assists, saves, and shots. This match data is stored in a PostgreSQL database, enabling the app to also provide users with match history and statistics tracking over time.

The concept of 'sessions' are used within the app such that users can create and view sessions, and new matches are added to a session. Logged in users can control a session from multiple devices, allowing them to take the screenshots on their phone but view the analytics on a larger screen. Users can also co-host sessions, where any host of a session can edit names and add new matches, which is useful for when playing with friends. All hosts and viewers of a session see the same analytics which update in real-time.

The React app utilised Redux and React Router, and I opted to include React Bootstrap due to the time contraints of the project. The backend Node.js server used Google Cloud Vision API to identify text from screenshots, JSON Web Tokens for managing sessions, Firebase authentication for user logins, and Knex.js to build database queries. Testing was conducted using Jest.

Screenshots

Landing page
Landing page
Login page
Login page
Adding a new match to a session
Adding a new match to a session
In-game analytics
In-game analytics
Editing a username
Editing a username
Teammates can be invited to co-host a session
Teammates can be invited to co-host a session
Match results are calculated once the game has finished
Match results are calculated once the game has finished
Match history
Match history
Viewing details of a match in match history
Viewing details of a match in match history
Statistics tracking
Statistics tracking