TTG Club

TTG Club tablet and mobile screens with gradient background

By a stroke of luck, I stumbled upon this amazing app that instantly grabbed my attention. Its contemporary and elegant design, combined with its extensive range of features, made it stand out from other platforms I had used for Dungeons & Dragons (D&D). Intrigued by its potential, I decided to connect with the talented team responsible for its development. To my delight, they were actively seeking frontend developers to help take the app to the next level. Following a series of meetings and successfully completing a test task, I was thrilled to be invited on board and contribute my skills to this awesome project.

  • Vue 3
  • Typescript
  • SCSS
  • Vite

Purpose & Goal

The app is specifically designed for passionate tabletop game enthusiasts, especially those who love playing games like Dungeons & Dragons (D&D). It caters to their unique needs and provides a wide range of features and tools that are specifically tailored to enhance their gaming experience. The app acts as a one-stop resource, serving as an extensive encyclopedia for the 5th edition of D&D. It's packed with a wealth of information and resources, allowing players to immerse themselves in the rich and intricate world of the Forgotten Realms. Alongside this, the app offers convenient tools such as a character characteristics calculator, a dice roller, and various generators for creating exciting elements like wild magic, random encounters, traders, and treasuries.

Mockup demonstrating the list of D&D classes

The Challenge

The team behind the app is made up of dedicated and enthusiastic Dungeons & Dragons players who contribute their time and expertise to its development, design, and content moderation. We understand that everyone has busy lives with numerous commitments and distractions, making it challenging to find ample time to work on the project. However, despite these obstacles, our passion for the game and our collective commitment to the project's success keeps us motivated. We are constantly striving to improve the app, enhance its features, and provide a valuable resource for the vibrant tabletop gaming community.

Mockup demonstrating various list filters

Problems & Solutions

Upon joining the team, I conducted a thorough scan of the project repository and identified certain inconsistencies in the structure. Recognizing the vast potential for future features, I proposed a restructuring of the project using the "feature slice design" architecture. This approach aimed to enhance scalability and improve the separation of concerns within the codebase. By implementing this new structure, we were able to streamline development processes, facilitate easier maintenance, and accommodate the seamless integration of new features. It was a valuable contribution to the project's long-term growth and adaptability.

To ensure optimal performance for the app, one of the initial features I focused on was implementing virtualized lists. Given the substantial amount of information to display, this was crucial to maintain smooth and efficient user experience. However, we faced the additional challenge of incorporating grouping and presenting the list in multiple columns. Overcoming this hurdle, I developed custom components for the grid and grouped lists, which can now be utilized throughout the entire app. It was a valuable learning experience, and I take pride in seeing these components utilized in various sections of the app, contributing to its overall functionality and usability.

Mockup demonstrating weapons list section with a weapon detailed view

Other Work

  • V-Victoria website desktop and mobile screens with gradient background

    A hotel website for a local business, built from the ground up leveraging power of Nuxt.js, SCSS, and Pug. The fully responsive design ensures a seamless experience across all devices, while advanced optimization techniques guarantee fast loading times. This project allowed me to gain even more valuable experience in frontend development, user experience design, and project management, while successfully bringing the client's vision to life.

  • Ligva desktop and mobile screens with gradient background

    I had the opportunity to be part of an ambitious startup that was dedicated to revolutionizing the world of translations. Joining the team during the project's mid-development phase, my responsibilities encompassed various tasks, including the development of a chat module for smooth client communication, migrating the app to TailwindCSS, ensuring responsiveness across different devices, as well as crafting visually appealing landing pages and emails. Despite our collective efforts and the promising potential of the app, the challenges of funding and intense competition led to the closure of the project shortly after its release.

  • Formulae desktop and mobile screens with gradient background

    Formulas creator app. During my trip around Southeast Asia, I encountered the recurring challenge determining the most favorable money exchange options — whether it was cash, card, or cryptocurrency. Inspired by this need, I developed this app as a solution. It allows you to create and save personalized formulas, name variables and expressions, and conveniently reuse them whenever required. Moreover, you can easily share your formulas with others who might find them helpful. To enhance usability, I implemented PWA support, ensuring that you can access the app even offline.