Background

This was a group project built at HackDuke 2021. It won the $500 “Best Use of AssemblyAI API” award. Check out my teammates and our hackathon submission here.

Inspiration

As colleges transition back to in-person classes, there are often times when students can't attend lecture. It’s difficult for professors to provide accomodations for these virtual learners without outfitting classrooms and lecture halls with complicated video and audio technology. We wanted to create a low-barrier, easy-to-access tool to bridge this gap.

With SpeechyNotes, professors can record their audio as they teach, take the audio, and have SpeechyNotes provide a written transcript — making it easier for students who can’t attend in-person to still follow along, at their own pace.

What it does

SpeechyNotes allows you to paste in a link to your audio file, and it will return a text transcription.

What I built

I was responsible for designing and implementing a frontend for the web app. I used React and Node.js to build the frontend, which presents information about the service and allows the user to input an audio URL. With the URL, I used Axios to make API calls to our backend. These API calls returned the text transcription of the audio, which I then displayed on the site.

I also added a custom loading bar to improve user experience, as the transcription process can sometimes be slow. The loading bar gives users an indication of progress so they won’t think something has gone wrong.

Challenges we ran into

Connecting the backend to the frontend was the most difficult part. We built our backend on top of HackDuke sponsor AssemblyAI's speech-to-text API using Python/Flask. However, our frontend was built with React/Node.

Constructing an app that combines two different technology stacks isn’t exactly a common approach. But our team had a mix of different skills, with half having experience with Python/Flask, and the other half having experience with React/Node.

We managed to blend both using a custom RESTful API so that everyone was able to utilize their skillset. This was really important to us, as despite our team’s different experiences and strengths, we wanted everyone to be able to contribute and make an impact on the project.

What I learned

I gained experience with frontend design and development, passing data from backend to frontend, collaborating as a team to build software, and resolving technological and human conflicts.