Chattergram meets Redis - Transcribe your voice messages into written text
Tags: redishackathon, redis, typescript, vue
Published: 2022-08-27 16:25:30

---
title: Chattergram meets Redis - Transcribe your voice messages into written text
published: true
description: My submission to the Redis Hackathon on DEV!
tags: redishackathon, redis, typescript, vue
---

[Instructions]: # (To submit to the Redis Hackathon on DEV, please fill out all sections. DELETE ALL NOTES, reminders, and guidelines before publishing.)


### Overview of My Submission

Chattergram is a chat application POC that translates your voice messages to other people into written text. I've built it during a previous hackathon & it turned one of my favourite side projects. I didn't score a price, but learned a lot about Typescript, Vue 3 and Speech To Text functionalities.

Now, I'm proud to present its enhanced successor:

**Introducing Chattergram - powered by the Redis Stack**

![](https://raw.githubusercontent.com/tq-bit/chattergram-redis/master/assets/chattergram_transcribe.gif)

Before, the project didn't feel complete. In retrospective, I came to think that some choices for the architecture were suboptimal at best:

- I was using no serverside caching
- Some of the backend components were tightly coupled (e.g. the Chat - handler had a hard dependency on the Websocket Server)
-  PostgreSQL felt like an inappropriate choice for such a trivial data structure. I've spent a lot of time to properly setup the data structure & profit from TS intellisense.

In the following picture, you can see the pre-Redis application structure:

![](https://raw.githubusercontent.com/tq-bit/chattergram-redis/master/.github/images/Chattergram%20Old%20Architecture.excalidraw.png)

I'm happy to say that using Redis allowed me to address all these problems fairly straightforward:

- Redis now acts as my frontend database 
- It syncs Chat and User entries to - and from MongoDB
- Redis' pub/sub functionality allowed me to de-couple my Chat handler & the Websocket server
- While MongoDB does not feel easier to navigate, I found it to be an easier & faster persistent database to get up and running quickly.

Below is the new application structure. Almost a replica of how I've had it planned out (writing base64 encoded files didn't turn out to be a great idea):

![](https://raw.githubusercontent.com/tq-bit/chattergram-redis/master/.github/images/Chattergram%20New%20Architecture.excalidraw.png)

Using Redis also boosted performance quite a bit. You can find some simple benchmark results in the [Github Repos' readme](https://github.com/tq-bit/chattergram-redis#performance-benchmarks)

Chattergram uses a frontend component built with Vue3. It also offers an OpenAPI specification to help developers understand its functionality.

> You can find the OpenAPI specification under `http://localhost:8080/api/docs` once the app is running locally.

### Submission Category: 

MEAN/MERN Mavericks

Actually, MFVN - Mavericks (MongoDB, Fastify, Vue, Node)

### [Optional: Video Explainer of My Project]

{% embed https://youtu.be/fTBgz28DHGs %}

### Language Used
- Node.js + Typescript

### Link to Code

{% embed https://github.com/tq-bit/chattergram-redis %}

### Additional Resources / Info

- [Chattergram original (=legacy) readme file](https://github.com/tq-bit/chattergram-redis/blob/master/readme_origjnal.md)
- [Deepgram console login](https://console.deepgram.com/)
- [Apache Jmeter performance test tooling](https://jmeter.apache.org/)

### Collaborators

Solo - project

- - - 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._