LoL Esports Stat Tracker (Lolest)
Dec. 2019
Summary
Created over a 10 week period as a group project for CSE115, Intro to Software Engineering, Lolest was developed using Agile and Scrum practices, and designed to provide League of Legends esports fans with a means of visualizing the statistics of players and teams across multiple regions. We used React, Bootstrap, and D3 for the front end, while using Flask and MongoDB for the backend and data scraping. Individually, I worked on the UI and created the two data visualizations, with parallel coordinates and a bar chart. We were quite happy with the final result of the project, and functionality-wise it was very effective in delivering clear statistics visualizations and comparisons. However, the overall interface could definitely be improved for better appearance and usability. Due to time constraints, we just barely had to cut the login system that we wanted to have, which would've allowed users to save their favorite players/teams statistics.
Team: Alfred Lam, Jake Hwang, Gus Person, Perry Yang, Michael Hsieh
Takeaways
- D3 and React- Through the project, I learned React, which was my first introduction to web frameworks and the reasons to use them. I also learned how to integrate interactive D3 visualizations within a React framework, as well as how to retrieve the data from a backend.
- Time Estimates - Be careful with underestimating the amount of time it takes to get features done - as the project progressed we got better at estimates, but early on we often underestimated how long a feature would take.
- Prototyping - Make early prototypes to ensure that the frameworks/APIs that you're using will work well together. Integrating D3 charts with React took much longer than it would have, if we had made a prototype first instead of immediately adding detailed, data-driven visuals to a half-finished website. The parts that we did prototype, such gathering the data, storing it in the database, and retrieving it through React, were much smoother to develop into the final project.
- Team Meetings- As the project progressed, we learned what needed to be said during Scrum meetings and what could be done individually or in smaller groups, without taking up everybody's time. As a result, we kept meetings short and to the point, a valuable skill in team projects.