A website for exploring details about an esports organisation
A comprehensive platform for the esports team. This React-based application features detailed pages for teams, players, and matches, and includes i18n localisation.
Table of Contents
HOWL Gaming is the comprehensive esports organisation website developed after taking a high school Web Design course in Spring 2019.
The original version was created using HTML, CSS, and JavaScript. In a recent update, the website was rewritten using React and the i18n localisation library to reduce the number of pages and have consistent Navbar and Footer styling everywhere on the website.
The website provides detailed information about the team's players, coaches, matches, and achievements. It also includes a news section that covers tournament overviews and detailed match descriptions.
Run the app locally:
$ npm install
$ npm run devThe website can be accessed through the URL http://localhost:5173/.
The Home Page serves as the central hub, directing visitors to the pages of the three teams.
The News Page provides an overview of a tournament and detailed descriptions of each match, including scores.
This Teams Page describes the three teams in the organisation, providing links to the team pages and the profiles of the players.
The Team Page provides comprehensive insights into each team, including player details, coaching staff, overall team information, global statistics, match records, achievements, and team history. To ensure efficient content management and prevent duplication, all team-related data is consolidated within a central file teams.js. This data is dynamically retrieved and presented on the corresponding team pages, ensuring consistency and ease of updates.
The recent and upcoming matches of the team are displayed in convenient container, providing additional information about the tournaments and scores.
The Achievements section displays the significant trophies of the team in various tournaments and competitions.
The History section provides a detailed overview of the team's journey, milestones, and significant events, allowing fans to trace the evolution and growth of the team over time.
The Player Page offers detailed insights into the player's history, setup, and achievements, which are aggregated from all the teams the player is affiliated with. To ensure efficient content management and prevent duplication, all player-related data is consolidated within a central file players.js. This data is dynamically retrieved and presented on the corresponding player pages, ensuring consistency and ease of updates.
The Setup section provides detailed information about the player's devices, crosshair settings, video configurations, and mouse settings. It also allows to download player's config file.
Users can switch between English, Belarusian, and Kazakh languages by selecting the desired option from the language selector drop-down menu in the Navbar. Belarusian and Kazakh have an additional option of switching between Cyrillic and Latin alphabets. Foreign words and proper names are rendered differently based on the selected script, with phonetic transcription in Cyrillic to reflect pronunciation, and original spelling retained in Latin.
Because HOWL Gaming is MIT-licensed, any developer can essentially do whatever they want with it as long as they include the original copyright and licence notice in any copies of the source code.