The main idea was to create a design with a vision for Alias, a well-known word game. We provided a modern style with abstract forms to make the game recognizable. The Alias app is unique in letting users create their own word sets, play with them, and share them with the whole Alias community.

We were looking for fresh inspiration for the app’s design. The lava lamp became our main inspiration for every screen and animation. We chose a calming lava lamp effect while adding bright tones to every UI element.

The most important screens in the app are themes, the card screen, and settings. Instead of common screens with cards, we used another approach to the game. We designed a switch screen with two buttons (skip and done) to let players take actions faster and save time in the game. The settings screens give players freedom by letting them customize the game the way they want and play by the rules they’ve set.

We built Alias with Angular 6, a popular JavaScript library developed by Google. Angular 6 allowed us to work from the box with the app’s business logic without the need to use third-party libraries.

To write styles, we used the CSS Stylus processor.

Canvas, the HTML5 element, is perfect for creating beautiful animations, so we chose it for our landing page. The interface of the web service where users can create their own sets is multilingual and pulls up the input words from the backend.
 

Our main purpose was to create a reliable application with the best user experience. But behind a good UI, we needed to have a system that could survive under high load. Since Python has rich built-in libraries that cover working with files, numbers, sequences, sockets, and testing tools, we chose it for development.

To keep code clean and have access to high-level classes, we went with Django. What’s more, Django has an extensible architecture and template engine and supports object-relational mapping, URL handling, model entities, and different database backends simultaneously. With all of this functionality, we were ready to start.

The Django REST framework can be used to create a REST API client for working with iOS and Android apps as well as single-page applications. With Django REST, we were able to develop our system independently within the frontend, backend, and mobile teams.

Every web application that manipulates data should have persistent data storage. For our purposes, we chose PostgreSQL. PostgreSQL has great documentation, which is important during integration. With Alias, we need to manage large data collections. We need to save data, retrieve it in different forms, alter it, and search through existing records. PostgreSQL supports full-text search, transactions, and extensible data types (JSON field, Array field, etc.). Thus, the choice of database was rather obvious for us.

For background tasks, we went with Celery and Redis bindings. Celery is an asynchronous task queue based on distributed message passing. We used Redis as a broker. These technologies allowed us to reduce the system loading time and improve user experience.

Support for multiple languages is based on Django’s translation system and the get text Python package, which can work with different web frameworks.

We needed to use a library that would save development time and ensure the Android app worked seamlessly. Picasso 2 was the perfect choice for us. This library allowed us to avoid loading images from the internet every time the app loads. The library keeps images locally, so there’s no need to make additional requests to the server. This saves traffic and lets the app be more autonomous. In other words, even if there’s no internet connection, an image will still load.  

Paper DB, a simple yet fast object storage option for Android, allows us to store the game’s settings, temporary data such as the word set a player is using at the moment, and the current state of the game if the program is suddenly closed.

Since the client and server interact through an API, we chose Retrofit2. Retrofit2 is used for most requests to the server, such as for getting the set versions and the sets themselves, updating sets, and uploading the data archives. Additionally, Retrofit2 has a convenient interface to describe HTTP requests, which allows us to easily describe the type needed (GET, POST, etc.) to receive or update the state of sets.

We needed to track events in the user interface, such button clicks and events generated by the timer. Using RxKotlin, we can subscribe to events generated by Retrofit. Therefore, we can process the app’s behavior and save or display data in response to an error or successful operation.

We also needed to detect the reasons for crashes, so we went with Firebase Crashlytics. Data on every crash that happens while a user is interacting with the app is sent to the Firebase account for further analysis.

To store sets, we used Room, which allows us to filter sets by game type and language and receive them after a request has been sent. This library gives us a convenient wrapper to work with the SQLite database.

The Alias game for iOS is written in Swift and uses the Model–View–Controller (MVC) architecture plus a service-oriented architecture. Since the app needs to store data such as words, we used Core Data as a native persistent framework.

The most exciting part of the app is the animations in a charming and sophisticated lava lamp style. The drawing is completely implemented in code without third-party frameworks, which results in almost 0% CPU usage. Animated bubbles on the Game Type screen and Game Level screen are made with Adobe After Effects. For this, we used the Lottie framework. Since Lottie doesn’t support blending modes, we split the animation and implemented it by applying a compositing filter. A lot of UI elements are custom subclasses of UIControl, which enabled us to create smooth interactive animations.