SPA Application on Vue.js for Data Management
About the project
Temporal Games is a software development company in the areas of Game Development, AI Research & Deployment. They are the creators of the Riflecore mobile game and the fluxNEAT neural network, which is capable of learning gaming skills in real time with almost zero amount of given information.
Temporal Games turned to us to create a single page web application for fluxCortex Azur, a hybrid self-learning artificial intelligence architecture powered by genetic algorithms.
Setting goals
We needed to create a convenient platform for managing gaming applications, which would include:
- An interface for creating, editing and deleting data for a specific game — it can be either the characters themselves, or their voices or entire dialogues;
- Visualization of statistical data — the transformation of a large amount of information into understandable and minimalistic graphs;
- Export — the ability to conveniently upload a large amount of data;
and much more.
The web application is intended for internal use, so SEO optimization and search robots, in our opinion, are not needed here. For the same reason, we also abandoned server-side rendering (SSR).
As a tool for implementing the frontend part, we used the Vue.js framework (namely, its 3rd version). The back-end part of the service was provided by the customer, so our developers were able to concentrate on front-end development, writing individual modules, components, and connecting the API.
Development process
First of all, we implemented user authorization based on access and refresh tokens. For this, Axios Interceptors, which check the token before executing the request, and Vue Router hooks, which check just before moving to another page, suited best . If the verification fails, the user will be returned back to the login page.
To visualize the data, we implemented a table with pagination, filters and sorting capabilities. Thanks to this, it is easier for the user to find the information they need in alphabetical order, by creation time and ID.
In addition, we implemented the ability to edit each record by going to a separate page or directly through the fields in the table. You can create and edit data both in the context of the selected filter, and at your own discretion.
Everyone loves minimalistically designed statistics, so we used a bar chart. The data dynamically changes when the date changes or any of the filters are switched.
The «Voice API» deserves special attention. It reproduces the written text with the voices of different characters. Thanks to this, for each of the created characters (an entry in the table), you can select a unique voice from the list, listen to it for a given phrase, or write your own text.
The main problem that we encountered when working with the «Voice API» is the delay. Because of this, the text entered from scratch was not transmitted immediately, as Temporal Games wanted. To solve this problem, we wrote middleware that checked the status of the server’s response and waited for the end of the generation of the audio track.
Another interesting task that we faced during development is the implementation of data export. The thing is that the selection is data for each individual day, which are grouped monthly. Therefore, to increase convenience, we decided to add a new feature — placing data for the day in separate JSON files. After a month, they are archived and made available for download as a single zip file.
The result
While working with Temporal Games, we not only improved our own skills, but also enjoyed solving non-standard problems. As a result, we managed to create a classic single-page application (SPA) with extensive functionality and the possibility of further scaling. At the same time, customers received not only an attractive, but also a convenient product, written on the latest version of one of the most relevant Java Script frameworks of our time.
