Speech Racer: My first hackathon project

I participated in my first hackathon! It's funny, I've run hackathons before, but I've never been a part of one. This is an internal hackathon for Deepgram, and we were paired with people from different teams. Our team consisted of me (DevRel), Nik, Brian, and Chris from Engineering, Nick from Product, and Alexa from Growth Marketing. I've worked with a couple of my team members in some capacity before, but not this much or under any sort of pressure-filled situation. With little time for small talk, we got to fast talk and kicked off the brain storming session that went through the night, in our dreams, and landed magically in a google doc for morning discussion...ok, well, that wasn't exactly how it happened, but you get the point. We got down to business quickly.

The Ideas

We came up with quite a few ideas, spread out over a variety of categories, including Using Deepgram for Social Good (think education, disaster relief, mental health), Using Deepgram for not Social good (heists, stealing trade secrets, you know, normal things), Internet of Things implementation, games (Flappy Bird, anyone?), and holiday theme projects.

And then there were two

So we narrowed it down to the final two projects.

FastTalker

A game to measure speaking speed and accuracy, similar to typing games like this one https://typings.gg/. We could build some fun challenges like trying to quickly and accurately speak tongue twisters, difficult-to-say words, random words, song lyrics, famous quotes. We could add challenges in different languages.

• A be fun, interactive, shareable, and quick to try/understand. Sometimes these types of games/challenges do trend on Hackernews.
• Requires that the Deepgram ASR API has unmatched speed and accuracy.

HistoryMajor

• Transcribe Oral histories - include topic detection, summarization, and visualization. It would be cool if we could id a good quote that created a visualization with text.
• Use Deepgram oral history origin stories, topic detection to group them and then generate superhero images of the speaker as the card for their origin story.
• Spin: careers-page content that combines oral histories from employees with topic detection. It could be cool for prospective employees to see what Deepgrammers talk about and also to showcase our technology on our website. We could add a visualization with top topics that you can click on to see oral histories.

The Winner

FastTalker won by a thread and evolved into Speech Racer.

To play the game, you hit the Play button. There will be a countdown, and then words will appear. Read the words as quickly and as accurately as possible and then click the Finish button. (Did I mention you can play it on mobile?)

Below is a gif so you can get a taste of the game, but you definitely should go play it RIGHT NOW over at speechracer.com.

Implementation

We had to quickly choose a tech stack. We went with React, Tailwind, and hosted this as a static website out of an S3 bucket.

Aside: I had never used Tailwind before and it was an interesting learning experience. I know that I definitely am not using best practices here, but there's an awful lot of classes here. Shoutout to Brandon Coyer for his blog post Tailwind Gradients - How to Make a Glowing Gradient Background. I'm not much of a designer, but I'm a big fan of gradients--as you can see in the project. I do want to know however overwhelming Tailwind felt, it has maybe the best docs I've ever seen. There was never a time that I wasn't able to find what I needed in the docs. So shoutout the the Tailwind docs folks.

Because this was a fast and dirty job, we had branches flying. For this project, the game would drop a quote, the player would have to say the quote as fast and as accurately as possible and then you would get your results. To do that, we needed microphone access, websocket implementation, to match the quote given with the spoken transcript and then calculate words per minute, accuracy, and duration. We also added three different categories the player could choose from.

A little bit of the Code

If you want to follow along with this project, you can clone the repo at https://github.com/deepgram-devs/speechracer.

To get things running, you'll need your own Deepgram API Key. Don't worry, your api key will get you many hours of fun with the game.

To start the game off, the user chooses the play button, which generates a countdown. To do that, we call the countdown function, which counts down 3-2-1, sets playing to true, which triggers the new layout.

function play() {

setCountdown(3);

setTimeout(() => {

setPlaying(true);

startNewChallenge();

}, 2750);

}

Because a user could choose from three different challenges, which were all implemented the same way, we had functions for each that used the same approach. We grabbed the text from an imported json file, and then chose a random quote:

function getTongueTwister() {

return tongueTwisters[Math.floor(Math.random() * tongueTwisters.length)];

}

Challenges

To make sure that the accuracy was calculated right, we had to make sure that we eliminated white space from the beginning and end of quotes, didn't count capitalization, and removed punctuation. To do that, we created a processText function:

function processText(s) {

return s

.trim()

.toLowerCase()

.replace(/[,'.:;?]/g, "");

}

Future Features

It's a hackathon, so we obviously didn't have time to get all the features implemented that we want to. It's worth noting some of the features we'd like to add-we're an open source project, so you're welcome to create an issue or submit a PR 😉

• Add Easter eggs. For example, if the player hits a certain accuracy, something will pop up. If I were doing Mariah Carey's All I want for Christmas is you, and hit 100%, it would give the biggest reward. There should be incentives to level up, try different categories, etc.
• Different languages
• Leaderboard
• Track your own statistics
• Themes (e.g. dark mode, holiday)
• User submitted transcripts
• Keyword boosting
• Progression (gradually harder prompts)

Hackathon Takeaways

I'll probably write more about this in a different post, but this turned out to be a pretty fun experience. I haven't really worked on a team like this before. You learn a lot about communication, implementation, and task generation when you're working quickly with other people. In some ways that makes things harder, but also challenges you to get out of your comfort zone and you're rewarded for that. But why are you still reading? Go play Speech Racer! Oh, and you can check all the Deepgram projects and comment, upvote, share on our hackathon discussion.