Overtones

Overtones is an ear training game designed for musician that tests how good your ears are. There are multiple levels, each one getting more difficult as you progress.

You can climb up the leaderboard and compete with musicians all around the world.

The Idea

We've had the idea for Overtones for a while and have done a few different ideation phases thinking of building for example a pure education app like Duolingo. We've built very, very basic prototypes but have never gotten around to actually releasing something.

The Redis hackathon was a perfect opportunity to give ourselves one month to try and knock out a prototype to test with musicians to see how they like the gamified concept of testing out their knowledge.

Project Stack

NextJS
React
NodeJS
Redis
MongoDB
Vercel

Usage of Redis

We are using Redis to populate our leaderboard which indicates how good a user is compared to other users.

Also we are using Redis JSON to store the user's study activity, so that we can report simple statistics to the player.

Additionally the study activity data will allow us to perform data analysis as well as statistical modeling, e.g. to understand the difficulty of exercises and suggest personalized exercises to match the learning pace of the player. The latter would be done with ML models that we would like to deploy using RedisAI. We did look into this part already, but due to the lack of usage data and time we did not implement it.

Redis Commands used

To implement the leaderboard we're using a the library redis-rank which has all the functionality we want (and more), and we would like to extend the functionality of the app with e.g. weekly or regional leaderboards which are implemented in this library.

However, implementing this ourselves is straightforward using a sorted set (ZSET) with the following commands (and indeed these are the commands used under the hood by this library):

ZADD to add or replace the highscore of a player
ZSCORE to retrieve the highscore of a player
ZREVRANK to retrieve the rank of the player
ZCARD to retrieve the total amount of players

To implement the study activity we are using another library called iorejson. We use the following commands:

JSON.SET to create an empty array for each user to store their activity data
JSON.ARRAPPEND to insert study activity data each time a user submits an answer
JSON.GET to retrieve the user's study activity and show some basic usage statistics on the welcome screen of the app

Running the app locally

Copy the .env.example file and create a .env file in the root directory. You will have to configure the variables according to your environment.

Via Docker-Compose

Run yarn install to install all necessary dependencies.

In one terminal, run:

docker-compose up

This will start a Mongodb and Redis.

Then run

yarn dev

in another terminal window to start the NextJS application.

As devcontainer in VSCode

If you're using VSCode just open the project with the Remote Containers extention installed. When prompted to open the project in a dev container do so (make sure you have Docker running first). Then you can just launch the app via the Run/Debug tab.