A Township Tale

a. The Township Tale Tavern

A Township Tale

As Lead Front-end Engineer for Alta I was responsible for all the user facing applications used by players and staff for their flagship game, A Township Tale.

The Township Tavern, a companion application for A Township Tale, was a new project I wireframed, designed and developed which allows players to view the latest store rotations, purchase virtual currency and cosmetics, discover and manage game servers, manage their friend lists and manage their account.

Wireframes and designs were done in Figma, the application was built using React, Remix, Cypress, Tailwind and I worked closesly with the Platform API developers during development to implement new endpoints required for the features we wanted to support.

The HQ was a complete rebuild of an internal dashboard application. This application was also wireframed, designed and developed in Figma and built using React, Remix and Tailwind.

The Game Launcher was an existing Electron application which I upgraded from version 4 to version 18 while also updating the design and adding new features.

The marketing website was an existing Next.js application which I maintained and updated as required.

I also setup an image proxy which leveraged caching on Vercel to retrieve and serve images from the Township Tale API and Google Cloud Storage.

To support the various front-end applications I created two supporting libraries. The first was a React Component Library which was developed using Storybook, bundled with rollup.js and imported into each application. The second was an API Client library which was developed in Typescript and bundled with rollup.js and used to interact with the Township Tale API in each application.

Project Gallery

Screenshot of Figma wireframes for ATT designs
b. Figma wireframes
Screenshot of HQ server desktop
c. HQ server management
Screenshot of HQ server desktop controls
d. HQ server controls
Screenshot HQ server light theme
e. HQ server (light theme)
Screenshot of ATT Desktop Launcher application
f. ATT launcher application
Screenshot of Server Console on mobile
g. Server console
Screenshot of Server Console on mobile
h. Player profile

How it works

Township Tale Architecture
i. Software Architecture diagram
Scope
  • Product Design
  • Software Development
  • Product Management
Tech
  • React
  • Remix
  • TypeScript
  • Node
  • GitHub Actions
  • Cypress
  • Electron
  • Vercel
  • Strapi
  • Xsolla
  • GCP

👇 Up next