head

From the developers

In this website, you can learn a lot about the past season of the Overwatch League. The first page of the website is the schedule of the season where you can see the detailed information about the matches and scores by stage and the corresponding week. For the Standing page, you can see the ranks of all 20 teams. As for status, you could see the core status of each players in the Overwatch League. Moreover, you can rearrange the order by clicking the headers. If you want to see the more detailed information about this player, you can click the player icon on the left and it will redirect you to the official website where has more information.

Some background stories

We are a group of four web developers(Siyu Zhuang, Tiancheng Lu, Chi Song and Ziyuan Xu)When we first discussed the topic for our final project, we actually had no clues for what to choose. Then we realized that we four are all gamers, why don't we choose the topic we most interested in? We are all Overwatch players and we all love the game very much. Maybe some of you never heard or played this game before, frankly overwatch is not that popular as League of Legends, DOTA2 or CS: GO. But we still have an active which support the game. Beside the game itself, there is a professional Esport league based on overwatch-the Overwatch League (OWL). 2020 has been the third year for this grand Esport tournament. One particular advantage of eSport compared to traditional sports is that every movement in the games is recorded. Moreover, the Overwatch League provides an official API interface, which has almost all the critical information related to OWL. That is why we made this information display website.

fans

Something about our design

We use Vue as our front-end framework, which is a little bit different form the Bootstrap we learned from the class. For the style sheet, we used Bootstrap-Vue correspondingly. As for back-end framework, we chose express.js. And finally, for database we chose MongoDB.

Some reference we use for this website

Connection

A video tutorial for learning the MERN Stack Here is the course for the MERN Stack

MongoDB

The official mongoose documentation.Here is the link

Express

The official Express documentation.Here is the link

A Express.js Tutorial by Mosh

Node.js

The official Node.js documentation.Here is the link

Vue

Some tutorial of Vue and Bootstrap Vue