Team Damaged Souls Website

Web design and content management for "Team Damaged Souls" esports team with dynamic elements determined by API calls and content management systems.

Role

Creator & Designer

Purpose

Comissioned Web Design

Site

GitHub Repo

GitHub-Mark-120px-plus.png
 

ProbLEm

An esports team that I am involved in required a website to promote themselves and create a professional presence. As the only individual with technical experience, I took the task of developing the site.

 
TDS Drip Purple.png

Requirements

  • Engage visitors with the team produced content and culture

  • Generate revenue by managing merchandise sales

  • Redirect visitors to team members personal social media accounts

  • Utilize a content management system (CMS) to allow for site editing by individuals without programming experience

 

Developed Features

I utilized Wix to decrease development time while still allowing for custom elements. The following elements were created using Wix's built-in IDE.

REsponsive Twitch Streamers Page

As with any team, the promotion of the team and the care for each member are of the utmost importance. To highlight our content creators, I created a dynamic page that lists all team members that are currently live streaming, shown below. 

TDS LiveStreamers.PNG

TDS Live Streams Page

I accessed the Twitch Teams API by going through the OAuth Authentication flow, then calling the 'users' property to get an array of users on the team, which is constantly changing. I concatenated each username to one URL that was fetched and returned with the data of all live members, such as thumbnail, current viewers, and description. This data was then inserted to a relational database and called on the front-end to populate a repeating element.

Members Pages

Visitors can also find a static page with the current team members. The "Members" pages filter a database for the particular division of each page, then populated a repeating element with the data such as an image, title, social media links, and a description.

tdsTeam.PNG

TDS Leadership Page

 

Result

The development of this site, although built using Wix, gave me the opportunity to use OAuth, relational databases that drive front-end elements, and balance the needs of a business with creating impressive features. I'm proud to say that the TDS website holds up against the sites of large esports corporations such as Team Solo Mid and Rouge, drives upwards of 300 viewers a month, and has generated over $750 in revenue.

The development of these features has greatly reduced the time required to onboard, reorganize, and add descriptors for new members. Since development, others on leadership have been taught how use the content management database to manage the team roster.

Please visit my GitHub repository if you have any interest in viewing the code snippets that drive the previous two examples, linked in the overview section above.