Project Info
ElevenLabs: Best Use of ElevenLabs (11M Credits + AirPods Max per team member [1st] & 8.11M Credits + Merch [2nd] & 5.11M Credits + Merch [3rd])
CodeCrack
Inspiration
Want to ace that upcoming technical interview for your dream job? LeetCode is a great place to start for developing good problem solving skills, but it lacks the interactive communication demands of a live coding interview where interviewers assess your problem-solving, debugging, and communication skills in addition to your ability to code. It’s fun to recruit your friends to help conduct a mock interview but these resources are not available to everyone. From under-resourced students to experienced builders, interview preparation materials and access to experienced coders can be an obstacle. As engineering students who have undergone Software Engineering recruiting, we wanted to build a tool that bridges this gap - allowing coders to improve their skill set while simulating the pressure of a live interview with real-time feedback. We built CodeCrack to empower anyone to crack their interview with confidence.
How we built it
We built CodeClack on a Vercel web platform with functional modifications made for integrating the AI agents to execute their client tasks, keep track of state, and upstream information to the voice. On top of this, we built on the user interface to reflect the various components of our project. For instance, we’ve integrated an IDE with Monaco, the code editor behind VScode, and Pyodide, a Python interpreter so users can run and execute their code. Leveraging ElevenLabs voice agents, CodeCrack offers both behavioral and technical interviews. To simulate a Software Engineering coding interview as closely as possible, In the technical coding challenge, the AI agent will introduce themselves, give an overview of the interview, give the user a moment to introduce themselves, and then will dive into the coding challenge, populating the user’s screen with the challenge and reading it outloud. The agent is designed to take on the persona of a more senior level Software Engineering interviewer, processing how the user breaks down the problem and explores various paths before diving into an approach, offering an open-ended hint if the user indicates they are stuck or asking a follow-up question if they are on the right track. Within our agentic system, there are two main flows of information sharing: agent to client and client to agent. For the coding challenge question, we retrieved leetcode questions and solutions from a HuggingFace dataset, and in the first agent to client stream, we developed a client tool, sendNewQuestion, that randomly retrieves a question within the user’s difficulty preference, upstreaming it to the voice agent to read aloud. The other mode, client to agent, is activated when the user clicks “Run Code”, so the user’s code submission can be tested for functionality and the agent can generate feedback on code style. The agentic system is keeping track of the state of interactions, making decisions to pivot the conversation to get the user closer to a functional solution without revealing too much information. After the user ends the interview, an API call is sent to ElevenLabs’ criteria evaluation feature to get the agent’s feedback on communication, problem-solving, and debugging based on the overall state of interactions.
Challenges we ran into
With no prior experience building with AI agents, the primary challenge we initially faced was understanding how agentic frameworks are built, and the tradeoffs between multi-agent frameworks and single agent frameworks. The next challenge we faced was learning how to influence single agent frameworks, and specifically, how to send information to it and retrieve information from it for various components of our project’s functionality. For instance, after retrieving a leetcode question we wanted to upstream this information to populate the user’s screen and have the AI agent read the problem out loud, but we faced difficulty understanding and building on the information streams that come with client tools. Expanding on this, all the builders on the team are most comfortable with Python and have no experience building extensive frontends. After realizing our Python client tools were not easily compatible with the AI agent codebase, we converted that entire part of our codebase to lay within Next.js and React, with some help from the ElevenLabs sponsor with only hours left before the deadline.
What we learned
Over the last 36 hours we learned how to build our first tools with AI agents. In particular, we designed an AI agent for our interviewer persona and built various client tools to handle retrieving leetcode questions, evaluating the user’s code on run, and populating the UI with the coding challenge and comprehensive feedback. Specifically in terms of new technologies, we had no prior experience working with Node.js and React, so it was an exciting challenge to focus on user interface design.
What's next
We look forward to building a more comprehensive system including System Design, Python trivia, and resume-based questions!
Introduction
CodeCrack is an interview preparation tool that provides AI speech-to-speech feedback on your mock interviews, helping you crack your real interview.
Tech Stack + Features


Frameworks
- Next.js – React framework for building performant apps with the best developer experience
Platforms
- Vercel – Easily preview & deploy changes with git
- Upstash - Serverless Data Platform (here using serverless Redis for rate limiting)
- ElevenLabs - Conversational AI Integration
UI
- Tailwind CSS – Utility-first CSS framework for rapid UI development
- Framer Motion – Motion library for React to animate components with ease
ImageResponse– Generate dynamic Open Graph images at the edge- HeadlessUI - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS
Code Quality
- TypeScript – Static type checker for end-to-end typesafety
- Prettier – Opinionated code formatter for consistent code style
- ESLint – Pluggable linter for Next.js and TypeScript
Miscellaneous
- FFMPEG.WASM – Transcode video/audio files
- React Webcam - Webcam component for React
- Stripe Gradient Animation - @jordienr released a Mesh Gradient that uses WebGL and animates a beautiful gradient
How it all works
CodeCrack is powered by ElevenLabs' AI and Vercel's web platform.
Analysis
View
Metric
- 32
- 15
- 10
- 1
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- JavaScriptIn code
- Next.jsIn code
- OpenAIIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
- Node.jsClaimed
- PythonClaimed
- VercelClaimed
7 of 10 appear in the indexed code. 3 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
242 KB
Source files
20
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
kkarenvoo/TreeHacks2025
33 files · 1.1 MB · @ c613fb5
Structure
Interface
10 files · 30%Screens, components and styles rendered to the user.
API & routing
3 files · 9%Request entry points: routes, handlers and controllers.
Application logic
2 files · 6%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript81%
- JavaScript17%
- Markdown1%
- CSS0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 30- @11labs/react
- @ffmpeg/core
- @ffmpeg/ffmpeg
- @headlessui/react
- @monaco-editor/react
- @types/node
- @types/react
- @types/react-dom
- @upstash/ratelimit
- @upstash/redis
- clsx
- encoding
- eslint
- eslint-config-next
- eventsource-parser
- formidable
- framer-motion
- lucide-react
- +12 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.