Mockrena

Gameified mock interview simulation

Comment

Inspiration

I built Mockrena because I remember going into my first job interview a few months back. I was extremely unprepared, and I had no idea what to expect. Despite googling preparation questions, when I was met with questions that I did not prepare for, my mind went completely blank. I wanted to create a service that was able to test your spontaneity and ability to answer questions quickly and smoothly. I knew that mock interview services can be costly and inaccessible to people. That's why I decided to build Mockrena, a web app that creates an accessible solution to mock interviews while executing it in an engaging way. I wanted to add a creative twist to such a boring and tedious task, and I did that by gameifying the process, equating employee status to leveling up.

What it does

Mockrena is a gameified mock interview simulator. Users first load into the 'canidate intake' screen where they can input their name, job listing, and resume. Based on this information, interview questions relevant to the listing will be generated. Questions start off at the easy level, assessing basic skills such as collaboration and leadership. As the levels climb higher, the difficulty of the questions progress as well, forcing the interviewee to think faster while also providing detailed responses. Once you enter the interview arena, the webcam is able to detect emotion and eye contact, things that factor into your performance score. In addition to that, a live transcript of what you are saying will be noted down to produce a pacing score that depends on your words per minute. At the end of the round, xp will be awarded to the user based on their performance, They also have the oppurtunity to earn badges as well. Each question will be scored and awared xp seperately with custom feedback for each of them.

How we built it

I built Mockrena as a browser-based mock interview simulator using Flask, JavaScript, and AI APIs. The system is split into a frontend layer and a backend AI evaluation layer. The entire interactive interview experience was built using JavaScript, HTML, and CSS. Key components include a speech-to-text system using faster-whisper API, a gamified system tracking XP and badges, and a webcam face analysis using face-api.js for emotion and eye-contact heuristics. For the backend, I built a lightweight Flask server that acts as a proxy between the frontend and Google’s Gemini API. Gemini generates custom interview questions based on the job description and resume as well as structured feedback for each answer.

Challenges we ran into

I really struggled with implementing the API key because it was my first time doing so. I was unsure about models, token usage, etc. While I originally planned to use the Anthropic API, I eventually settled for the free Gemini API. I also struggled with getting the live transcription to work. Originally, I had opted for the browser text to speech feature, but then because it was faulty, I opted for the faster-whisper api instead.

Accomplishments that we're proud of

An accomplishment that I am proud of is getting the live transcription to work. Although it may seem simple, this was actually a feature I had never worked with before, and I had to teach it all to myself. It was frustrating trying to work with the browser-based speech to text API and I spent several hours trying to debug it. However, when I decided to abandon it altogether and switch to face-whisper, I felt so much satisfication when the words were finally transcribing. It just goes to show how resilience and perserverance are some of the most important attributes to have when coding and working on projects.

What we learned

Something I learned is chunking. When I first implemented the face-whisper API, I had sent all my speech into it at once. However, I quickly learned that it wasn't optimal as it overwhelmed the system and was unable to produce an accurate transcript. Through this problem, I learned to split the speech into chunks, as an answer to an interview question could easily be more than a minute long. By chunking the speech and passing each chunk seperately, it was much easier for the api to work properly.

What's next for Mockrena

I really want to add on to the whole "game" idea of the interview simulator. I think it's a very unique element that most projects lack — especially on the creativity side. I want to be able to add more customization to the game, such as a currency system. A currency system would allow for users to buy boosts and accessories for a future character in the gift shop. This currency system could procide further incentive for more polished interview answers. I would also be interested in implementing a "practice mode" that uses AI to adapt to your responses. If the user is doing well, it will ask harder follow-ups. If a user is struggling, it will ask more guiding questions to help get the interviewee back on track.

Built With

Share this project:

Updates