# talko

Hello! talko is a project for nwHacks 2022.

Interviews can be scary, but they don't have to be! We believe that practice and experience is what gives you the
confidence you need to show interviewers what you're made of. talko is made for students and new graduates who want to
learn to fully express their skills in interviews. With everything online, it's even more important now that you can
get your thoughts across clearly virtually.

As students who have been and will be looking for co-ops, we know very well how stressful interview season can be;
we took this as our source of inspiration for talko.

talko is an app that helps you practice for interviews. Record and time your answers to interview questions to get
feedback on how fast you're talking and view previous answers.

## Features

* View answer history for previous answers- playback recordings, words per minute, standard deviation of talking speed and overall answer quality.
* Integrated question bank with a variety of topics.
* Skip answers you aren't ready to answer.
* Adorable robots!!

## Technical Overview

For Talko’s front-end, we used React to create a web app that can be used on both desktop and mobile devices.

We used Figma for the wireframing and Adobe Fresco for some of the aesthetic touches and character designs.

We created the backend using Nodejs and Express. The api handles uploading, saving and retrieving recordings, as well as
fetching random questions from our question bank. We used Google Cloud Firestore to save data about past answers, and Microsoft
Azure to store audio files and use speech-to-text on our clips. In our api, we calculate the average words per minute over
the entire answer, as well as the variance in the rate of speech.

## Challenges & Accomplishments

Creating this project in just 24 hours was quite the challenge! While we have worked with some of these tools before,
it was our first time working with Microsoft Azure. We're really proud of what we managed to put together over this weekend.

Another issue we had is that it can take a while to get speech-to-text results from Azure. We wanted to send
a response back to the frontend quickly, so we decided to calculate the rate of speech variance afterwards and
patch our data in Firestore.

## What's next for talko?

* Tagged questions: get questions most relevant to your industry
* Better answer analysis: use different NLP APIs and assess the text to give better stats and pointers
	+ Are there lots of pauses and filler words in the answer?
	+ Is the answer related to the question?
	+ Given a job description selected or supplied by the user, does the answer cover the keywords?
	+ Is the tone of the answer formal, assertive?
* View answer history in more detail: option to show transcript and play back audio recordings
* Settings to personalize your practice experience: customize number of questions and answer time limit.

## Built using

![image](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)
![image](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![image](https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white)
![image](https://img.shields.io/badge/microsoft%20azure-0089D6?style=for-the-badge&logo=microsoft-azure&logoColor=white)
![image](https://img.shields.io/badge/firebase-ffca28?style=for-the-badge&logo=firebase&logoColor=black)

![drawing](https://github.com/nwhacks-2022/.github/blob/main/assets/rainbow.png?raw=true)

### Thanks for visiting!
## Inspiration

It's easy to zone off in online meetings/lectures, and it's difficult to rewind without losing focus at the moment. It could also be disrespectful to others if you expose the fact that you weren't paying attention. Wouldn't it be nice if we can just quickly skim through a list of keywords to immediately see what happened?

## What it does

Rewind is an intelligent, collaborative and interactive web canvas with built in voice chat that maintains a list of live-updated keywords that summarize the voice chat history. You can see timestamps of the keywords and click on them to reveal the actual transcribed text.

## How we built it

Communications: WebRTC, WebSockets, HTTPS

We used WebRTC, a peer-to-peer protocol to connect the users though a voice channel, and we used websockets to update the web pages dynamically, so the users would get instant feedback for others actions. Additionally, a web server is used to maintain stateful information.

For summarization and live transcript generation, we used Google Cloud APIs, including natural language processing as well as voice recognition.

Audio transcription and summary: Google Cloud Speech (live transcription) and natural language APIs (for summarization)

## Challenges we ran into

There are many challenges that we ran into when we tried to bring this project to reality. For the backend development, one of the most challenging problems was getting WebRTC to work on both the backend and the frontend. We spent more than 18 hours on it to come to a working prototype. In addition, the frontend development was also full of challenges. The design and implementation of the canvas involved many trial and errors and the history rewinding page was also time-consuming. Overall, most components of the project took the combined effort of everyone on the team and we have learned a lot from this experience.

## Accomplishments that we're proud of

Despite all the challenges we ran into, we were able to have a working product with many different features. Although the final product is by no means perfect, we had fun working on it utilizing every bit of intelligence we had. We were proud to have learned many new tools and get through all the bugs!

## What we learned

For the backend, the main thing we learned was how to use WebRTC, which includes client negotiations and management. We also learned how to use Google Cloud Platform in a Python backend and integrate it with the websockets. As for the frontend, we learned to use various javascript elements to help develop interactive client webapp. We also learned event delegation in javascript to help with an essential component of the history page of the frontend.

## What's next for Rewind

We imagined a mini dashboard that also shows other live-updated information, such as the sentiment, summary of the entire meeting, as well as the ability to examine information on a particular user.
## Inspiration

Interviewing can be nerve-wrecking for everyone. Many resources capitalize on the difficulty of technical interviews by teaching fundamental concepts, but having good responses ready for the behavioral interview can be just as important. It can be inconvenient to schedule a mock interview with another person, or it might be uncomfortable narrating your personal experiences to someone else. That's where InterviewMe comes in.

## What it does

Interviews are hard, but being good at them truly comes down to practice and confidence. InterviewMe gives users canonical behavioral interview questions, allowing them to record their response and receive meaningful analytics. Users can replay their response audio and evaluate it from the interviewer's perspective to improve their own speaking. They can also see whether they took too long, spoke too fast, used too many filler words, or did not hit all of their main points. These are all good practices that people tend to forget in the heat of an interview. But not to worry, because InterviewMe allows users to solidify their responses to these questions, making it less off-putting when they are asked the same types of questions in an actual job interview.

## How we built it

The web app was built with the React-Django full stack. In the backend, Django establishes a REST API for calling interview questions and response analytics. The backend also calls to Google Cloud's Speech-To-Text API.

## Challenges we ran into

None of us had experience with speech-to-text conversion, and Kai Chen was able to use Google Cloud's API to integrate functionality into our project.

We wanted to make the experience as beneficial as possible to the user, and it was difficult to uncover good metrics to analyze from a user's speech as text. We ended up evaluating time taken, words per minute, filler word count, and noun phrase extraction as results from which the user could extract value.

## Accomplishments that we're proud of

None of us were full stack specialists, and we're glad that we were able to link everything together with the frontend and backend during the 36 hour window.

We also got good sleep during the hackathon as well, so it was a healthy experience!

## What we learned

* Jonathan Zhang: how to create a REST API using Django
* Amy Lei:
* Raymond Wu:
* Kai Chen:

## What's next for InterviewMe

Coming soon!

### Notes

InterviewMe logo image adapted for free from [ClipArtMax](https://www.clipartmax.com/middle/m2H7Z5b1K9A0G6Z5_mirror-clipart-svg-mirror-clipart-svg/)