Introducing Echoes: Step into the world of memories and emotions

We all love playing games, but the real thrill comes when we get a chance to build one ourselves. Thanks to ModusHack, I had the incredible opportunity to turn my idea into reality. This hackathon helped me to bring Echoes, a Speed Typing RPG, to life, a game that not only challenges your typing speed but also takes you on an emotional journey through the memories of a father and daughter.

A game that combines a great storyline, realistic voices, visual images, and typing challenges will draw you into the story of Ava.

Live link

Github Repo

Features

Echoes is a story-based typing game where you’ll follow the journey of our main character, Ava. Echoes offers you two ways to play:

1. StoryMode: This is the main part of Echoes, where you follow a storyline. To move through each chapter, you'll need to complete typing challenges.

   

2. FreeMode: This is the second way to enjoy Echoes. If you want to type freely, you can explore this section. Here, you have two options: you can type using either word mode or sentence mode.

If you play StoryMode, you'll unlock several memories. As you progress through the storyline, all your memories will be saved as images in Ava’s gallery.

If you choose to play FreeMode, you'll save your place on the leaderboard. You can compete with other players, improve your typing skills, and aim to be the best typist 😅. Typing is really fun!

How it works

Getting started with Echoes is really simple. Click on this link to land on offical site of echoes.

You’ll see this landing page. 👇

Before start playing any mode, you have to login or sing up. Click on get started button for logging in.

Once, you’ll logged in, you’ll see this this page. 👇

Here you have 2 options to get started with. You can start with any mode as we discussed earlier.

On right hand side, you’ll see multiple options. Starting from music toggle button to ending with a profile info button from where you can see your leaderboard profile.

On the top header, you’ll see multiple pages to navigate to. From game modes to credits.

1. StoryMode contains the storyline mode.

2. FreeType contains the free-mode game.

3. The gallery holds all the memories you collect as you progress in storyline mode.

4. Leaderboard shows a leaderboard where you can see your and other players' rankings.

5. Then, we have a Credits page with a few credits and special thanks.

6. Finally, there's your Profile, where you can set your username or manage your account.

The Idea

On November 6th, I saw a post about ModusHack and decided to create something for this hackathon.

I was excited to participate for two reasons:

1. This year, I joined several hackathons, but unfortunately, I didn't able to submit a project in any of them. I couldn't even finish the projects.

2. The second reason was Hypermode’s Modus itself. As a frontend engineer, I often struggle with creating APIs, scaling them, and getting them ready for production. However, with Modus, this process becomes much simpler.

That's why I decided that this time I had to complete and submit the project, as building and integrating APIs was no longer a barrier for me.

After a lot of thought, I came up with several ideas. Some were related to creating tools for the open-source community, while others focused on building something useful for everyday tasks.

However, I wanted to create something interesting and creative, something I had never built before that would challenge me to think deeply about solutions. After considering many ideas, I decided to make a game.

Yes! We all love games. So, I thought, why not build something related to games? I looked into various resources and videos to learn how to build games, mainly using JavaScript. I found multiple websites and games built with JS, and on November 10th, I finally decided to create a story narrative game.

It will include realistic voice narrations, images, and some challenges. For the challenges, I chose typing game challenges, that align my game with a free mode where players can enjoy typing games when they don't want to play the story mode and compete with others on the leaderboard.

However, building this type of story narrative game was not easy for me, as it was my first time implementing this kind of logic. So, let's look into the process of how I started, how I built it, and how Hypermode is helping my project to scale.

The Process

The process of building Echoes started on November 10th when I first started exploring the Modus documentation. Initially, it was a bit tough to understand how everything worked. But, after attending the Hypermode X Hashnode sessions, all my doubts were cleared. By going back and forth with the Modus documentation, I finally deployed my first Modus app on November 14th. It was a great feeling!😃

I understood the process of building and deploying APIs, but the real challenge now is figuring out how to set up the logic to make it feel like a game and how to make it more engaging.

Initial Idea

The initial idea was to create a storyline game where you would see a paragraph of text that automatically moves forward as the user progresses through the story. However, this seemed too simple, so I decided to add challenges. For the first prototype, I chose a space game challenge where monsters come from above the screen, and you have to defeat them. But it didn't look very appealing, so I switched to typing challenges. This allowed me to expand the game into a free mode where players can have fun and learn while playing.

Choosing Tech Stack

Now that I had the idea, the next step was to choose the tools and technologies for building the app. I often make the mistake of starting without planning, picking something, and then realizing it doesn't fit the plan, which wastes time. So, this time, I was careful and planned thoroughly when selecting the technologies for this app.

From small libraries to complete frameworks, I spent almost two days deciding on everything.

Building Logic

The tech stack was ready, so I needed to work on the app's logic. Before jumping into coding, I went back and forth refining the coding logic.

I began by building the UI, starting with a sample landing page. The first task was setting up authentication. I chose Clerk, as mentioned earlier. After setting up Clerk, I integrated it with Supabase. The official documentation with Clerk AI was very helpful for this integration. With the authentication part complete, it was time to build the UI for the storyline mode.

Building story mode

For the story mode, I thought a narrative with real voice audio and images, where the game moves forward on its own. But the challenge was figuring out how the game would work automatically. How to get the voices and ensure they matched the story's pace and synced with the images.

With these questions in mind, I took a few days to align everything with my goal. I used howler.js for audio, several AI platforms to convert my storyline into realistic voices, and various text-to-image LLMs to turn scenes into images. I integrated all of these into my code so that when the audio ends, the story moves forward.

Building Free Mode

Building Free Mode required the most speed, and that's where Modus came into play. I created a database for sentences and words, then used Modus to create an API that retrieves all the words and sentences based on the user's filter.

I also had the option to use Hypermode’s AI models, but I decided not to use LLMs this time because they sometimes don't give the results we want. To ensure I got the results I needed, I chose to use the Modus Postgres connection. It helped me connect my database with the Modus app, allowing me to work seamlessly with my APIs and save my data into the database.

Leaderboard and all…

The previous part was very tiring because, for the past 8-9 days, I have been continuously implementing and testing things thoroughly. To be honest, it’s really too hard to manage a Job with Side hustles. But,😤 we’ll do it💪

After figuring out and implementing the logic for those two modes, I had a few sections left: the Leaderboard, Credits, and improving the UI for the landing page. I completed this section on November 29 (it's getting late now...😬). But yes, all the pages are finally done. Hopefully, I'm on track for submission. 😑

Learnings

What should I say for this part? I don't have the words to express it. I knew that we learn a lot by doing things, but I truly felt it after this project. There were many challenges, from integrating authentication to saving stories for each player, continuing the story from the last checkpoint, and adding SQL functions that run on the server side. But, in the end, it's all worth it in terms of learning. Here are a few things I learned:

• For the first time, I learned how to work with an API using a Postgres database. I connected my Modus app with a Supabase database through a Postgres connection. Working with this setup was a new and great learning experience.

• Working with SQL functions was new for me. I had used SQL functions before, but building a project with them was a first. I wrote several SQL functions and learned a lot in this area.

• Modus itself was a new learning experience. I'm sure many of us who participated in this hackathon felt the same. It makes working with APIs a piece of cake. Once you understand the core concepts, it becomes easy and interesting.

• I didn't know about Howler.js before, but while working with this library, I learned how it makes playing audio so smooth on the internet.

There are many lessons, like creating a Modus app for the first time and working with voice LLMs for the first time. I documented the process of building the Modus app. If you're interested, you can read that section next to this one.

Gameplay: How Echoes Work

Echoes have two game modes.

1. Storyline Mode: Where you’ll follow the narrative story of Ava, and go through several typing challenges

2. Free Type Mode: Where you can freely play a typing game, and compete with other players on leaderboard.

What is Modus?

According to official Modus Docs:

Modus is an open source, serverless framework for building functions and APIs, powered by WebAssembly.

You write your app logic in Go or AssemblyScript, and Modus provides additional features to easily integrate models, data, and external services.

So, we just need to write our app logic for APIs and push it into our github repo and Modus will deploy our API functions into production.

How to use Modus?

Let’s see a short of how we can build API functions using modus. In this section, I’ll show you the steps when built my first modus app. It will also help you to understand how you can create APIs, scale them into production and then use it into a frontend code.

To use modus you need Node Version 22You're good to go, VS code(recommended by Modus).

Open your VS Code. Run this command.

npm install -g @hypermode/modus-cli

It will install Modus into your system. You can run modus command to check if all the modus commands.

Modus CLI v0.13.8

Usage: modus <command or tool> [flags] [args]

Commands:
  build             Build a Modus app
  dev               Run a Modus app locally for development
  info              Show Modus info
  new               Create a new Modus app

Tools:
  runtime           Modus Runtime Management
  sdk               Modus SDK Management

Flags:
  -h, --help        Show help message
  -v, --version     Show Modus version

Docs:               https://docs.hypermode.com/modus
GitHub:             https://github.com/hypermodeinc/modus
Discord:            https://discord.hypermode.com (#modus)

Made with ♥︎ by Hypermode

Now, to create a new modus app, run this command

modus new

This command prompts you to choose between Go and AssemblyScript as the language for your app. It then creates a new directory with the necessary files and folders for your app.

As you can see here, it created a folder named infinite-script and inside that, there is a folder named assemby and inside that, there is a file named index.ts In this file, you’ll export all your API functions and Modus will automatically detect that.

Click on the index.ts file and write a simple function to print a string.

export function sayHello(name: string | null = null): string {
  return `Hello, ${name || "World"}!`;
}

Now, you need to run the local server by running the following command.

modus dev

It will start the server http://localhost:8686/graphql which you can call in your postman.

1. Go to your postman

2. Create a new graphql endpoint

3. Paste this http://localhost:8686/graphql like in your query.

4. And, click on the query button

   

5. Here, you can see that, graphql will show all your exported API functions here. Select any of them. As we have sayHello function, click on that.

6. As you’ll select it, you will enter the requested string, and click on query button.

   

7. On clicking on the query button, it will return our request.

   

And, that’s it. We have wrote our first API function. As this one is too simple but with Modus, you can build more complex API functions.

Modus also has another interesting file that makes things even more exciting: modus.json. In this file, you can add connections. These connections can be to any of your databases, to your LLMs, or even to any of your external API endpoints.

As you can here, I have multiple connection.

• connection to my graphql endpoint

• connection to some external API key

• connection to my supabase database

• connection to my LLM(Meta Llama is free to use via Hypermode. But for other LLMs, you need to use your LLM’s API key)

{
  "$schema": "https://schema.hypermode.com/modus.json",
  "endpoints": {
    "default": {
      "type": "graphql",
      "path": "/graphql",
      "auth": "bearer-token"
    }
  },
  "connections": {
    "zenquotes": {
      "type": "http",
      "baseUrl": "https://zenquotes.io/"
    },
    "supabase-db": {
      "type": "postgresql",
      "connString": "postgresqlRING}}@string"
    }
  },
  "models": {
    "text-generator": {
      "sourceModel": "meta-llama/Meta-Llama-3.1-8B-Instruct",
      "provider": "hugging-face",
      "connection": "hypermode"
    }
  }
}

How to Deploy Modus?

After finishing your work locally, you can push your code to your GitHub repository. From there, Modus will deploy it to production. You can see everything, run, and test it from the Hypermode dashboard.

1. First, create an account on the Hypermode app.

2. After logging in, create a new project.

   

3. Then, in your VS Code, run this command to install Hypermode globally. This command will help you in deployment from your locals.
   npm install -g @hypermode/hyp-cli

4. Run the following command to log in with hyp cli
hyp login

5. From the terminal, run the following command to import your Modus app into Hypermode. This command will create your Hypermode project and deploy your app.

    hyp link
   

6. Now, you should have a GitHub workflow file. This file will automatically detect any new changes pushed to production on GitHub. Then, this workflow will run and deploy your Modus functions to production.

   

7. If it’s not created, you can create it, in your locals and push it or you can directly create it from github repo.

name: ci-hypermode-functions

on:
  workflow_dispatch:
  pull_request:
  push:
    branches:
      - main

env:
  MODUS_DIR: ""

permissions:
  contents: read

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Locate directory with modus.json
        id: set-dir
        run: |
          MODUS_JSON=$(find $(pwd) -name 'modus.json' -print0 | xargs -0 -n1 echo)
          if [ -n "$MODUS_JSON" ]; then
            MODUS_DIR=$(dirname "$MODUS_JSON")
            echo "MODUS_DIR=$MODUS_DIR" >> $GITHUB_ENV
          else
            echo "modus.json not found"
            exit 1
          fi

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "22"

      - name: Setup Go
        uses: actions/setup-go@v5

      - name: Setup TinyGo
        uses: acifani/setup-tinygo@v2
        with:
          tinygo-version: "0.34.0"

      - name: Build project
        run: npx -p @hypermode/modus-cli -y modus build
        working-directory: ${{ env.MODUS_DIR }}
        shell: bash

      - name: Publish GitHub artifact
        uses: actions/upload-artifact@v4
        with:
          name: build
          path: ${{ env.MODUS_DIR }}/build/*

According to the YAML file above, your branch name must be main, and it will find your modus.json file no matter where it is located in your repository.

Now you can test all your functions, view all your deployments, and see other details directly from your Hypermode Dashboard.

So, this is how you can build APIs, scale them for production, and use them extensively. For a deeper overview, you can check the docs here.

Conclusion

That's it for this blog. I shared a lot about my journey of creating Echoes. If you haven't tried it yet, you can check it out from the link below. I am planning to add more features to this project after the hackathon, so please give your feedback. I would love to hear from you. If you enjoyed the article or learned something from it, please share it with your friends and community. I'll see you in the next blog, maybe with a new project 😋 or a new learning lesson article. That's it for today. I'll see you in the next one.

BYE 👋

Useful Links

Hypermode Modus: https://docs.hypermode.com/modus/overview

Echoes Github Repo: https://github.com/Shivam-Katare/echoes