DEV Community

tq-bit
tq-bit

Posted on • Edited on

Chattergram meets Redis - Transcribe your voice messages into written text

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

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:

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):

Using Redis also boosted performance quite a bit. You can find some simple benchmark results in the Github Repos' readme

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]

Language Used

  • Node.js + Typescript

Link to Code

GitHub logo tq-bit / chattergram-redis

A fullstack chat application that transforms speech messages to text. Built for the Deepgram Hackathon 2022

Chattergram + Redis

A chat application that transcribes voice messages to text - powered by the Redis Stack

Chattergram runs on two separate applications - a frontend and a backend. You need to create an account to access the chat. All of your data will be stored on a local Redis (& MongoDB) instance.

Once signed up, you can start chatting with other users. If you decide to send them a voice message, Deepgram will try and transcribe the message for you and your sender. You can still listen to the recorded message if you like.

I've created Chattergram-Redis as a POC project for the Redis Hackathon on dev.to. Please do not use it in a productive environment

How it works

Video explanation

You can find a video version of my submission on Youtube:

https://youtu.be/fTBgz28DHGs

How the data is stored:

  • This app uses two primary data types: User and…

Additional Resources / Info

Collaborators

Solo - project


Top comments (2)

Collapse
 
tqbit profile image
tq-bit

I'm happy you liked it :-) thanks for giving it a try.

Collapse
 
bekahhw profile image
BekahHW

This is really cool! Great job.