Project Overview

HOWL Gaming is a dynamic website designed to provide in-depth information about an esports organisation. Built with React and the i18n localisation library, this project showcases detailed pages for teams, players, and matches. It features a user-friendly interface with localisation support to cater to a global audience.

Objective and Vision

The HOWL Gaming project was created to offer a comprehensive platform for fans and stakeholders of the esports organisation. The goal was to centralise information about the team’s players, coaches, matches, and achievements, while ensuring a seamless experience for users across different languages. By leveraging modern web technologies, the project aims to deliver an engaging and interactive experience, making it easy for users to explore and stay updated with the latest developments in the esports world.

Tools and Technologies

The original website was built using pure HTML, CSS, and JavaScript. However, later I added several technologies to simplify the deployment:

• React: The JavaScript library used for simplified routing and UI building.
• i18n: A localisation library to support multiple languages and enhance accessibility.

Key Features

News

The News Page provides an overview of tournaments and detailed descriptions of each match, including scores.

Team

The Teams Page provides an overview of the three teams within the organisation, offering links to individual team pages and player profiles. Each Team Page delivers comprehensive insights into its respective team, including detailed player information, coaching staff, match records, significant achievements, and a historical overview of the team’s journey. Recent and upcoming matches are displayed with additional details about the tournaments and scores. The page also highlights the team’s significant trophies and awards from various tournaments and competitions, and provides a detailed look at milestones and significant events in the team’s history.

Player

The Player Page offers detailed information about each player’s history, setup, and achievements. It includes comprehensive details on the player's devices, crosshair settings, video configurations, and mouse settings. Additionally, users have the option to download the player’s configuration file for their own use.

Localisation

Supports multiple languages including English, Belarusian, and Kazakh, with options to switch between Cyrillic and Latin alphabets for Belarusian and Kazakh.

Challenges Faced and Solutions

HOWL Gaming was my first substantial web development project after learning HTML, CSS, and JavaScript in high school. One of the main challenges was structuring a complex site, as I was only accustomed to building smaller, simpler websites. Managing a large volume of content and ensuring consistency across multiple pages with vanilla HTML and CSS proved difficult. The static nature of these technologies made dynamic content handling and page routing cumbersome.

Keeping track of routing between pages was particularly challenging, as HTML lacked built-in solutions for managing dynamic content and navigation effectively. These obstacles highlighted the complexity of real-world web development and the limitations of working with only basic tools. This project served as a crucial learning experience, illustrating the need for more advanced techniques and tools to manage and scale web projects effectively.

Takeaways and Insights

Working on HOWL Gaming provided valuable insights into the realities of web development beyond my high school training. I learned the importance of structured project planning and effective content management, which was crucial for handling the complexities of a larger site. The project demonstrated the limitations of working with static technologies and underscored the need for more sophisticated tools and frameworks.

This experience made me realise how much I had learned but also how much more there was to explore in web development. It motivated me to pursue further education and deepen my understanding of modern web technologies, setting the stage for my continued growth in the field.