Game Tracker

• 

  receiving events while updating UI

• 

  fetching and displaying series data

Inspiration

Before starting this project, I referred to some similar websites, such as ESPN, GosuGamers, etc. I learned a lot from their products, for example, the UI designs, and the functionalities. So I was thinking I could make a similar website but could show more details for end users.

What it does

This project not only shows the basic information of series or teams but also displays more details of each game, such as KDA, heroes picked, and associated builds. Moreover, we also have the ability to replay each of those games, to review all the events that happened during the games.

How we built it

I used GraphQL to fetch data games of series used to display on our page. With the help of WebSocket, we can listen to the events for a certain game, and use that

Challenges we ran into

A non-technical challenge for me is I am not a gamer, I knew very little about e-sports, like dota2, or CS:go, so I had to spend some time getting myself familiar with those games, and associated terms. And technically, I did run into several issues when working with Nextjs, specifically, SSR and CRS issues, but luckily, I overcame them in the end.

Accomplishments that we're proud of

I am proud that I finished this project at the end of the day, although there is still a lot of room for improvement.

What we learned

I learned how to make use of those live, in-game data to build an esports web app showing meaningful information to end users. Also, by building this project, I refreshed some technologies and learned some new ones.

What's next for Game Tracker

As I mentioned above, there is a lot of room for improvement in this project. First of all, we could add some more features or pages to this project. Second, the UI design is okay, but still, there is some work we can do to make it look better. Furthermore, there are some repetitive codes here and there, meaning we can do some optimization work to make our codebase more concise and readable.

Built With

• graphql
• materialui
• nextjs
• redux-toolkit
• websockets