Inspiration
We wanted to create an app that allows job-seekers a lightweight, realistic way to practice interviews using modern web technologies and AI-assisted feedback. Specifically, this inspiration came from the need for an accessible, self-contained demo app that brings together resume/job description analysis, spoken answers recorded from the browser, automatic transcription (mocked or via cloud providers), and actionable feedback visualizations.
What It Does
PrepPilot works by just following these 3 simple steps!
- Upload Documents: The user uploads their resume and the desired job description to generate tailored interview questions (mocked by default).
- AI-Powered Interview: After uploading, the user can proceed to start the mock interview, where the UI presents questions, records the candidate's spoken answers using the browser MediaRecorder API, and sends the recorded audio to the server. This audio is then transcribed and the answer is analyzed by PrepPilot and stores per-question analysis in-session.
- Detailed Feedback: After the interview has ended, the user will be a presented a feedback page with overall scores, per-question breakdowns, charts, and audio playback placeholders.
How We Built It
- Framework: Next.js (App Router) — pages live under app/.
- UI: Tailwind CSS, shadcn/ui components, Framer Motion for animations.
- Frontend Audio: Browser MediaRecorder API wrapped in lib/audio-recorder.js with AudioVisualizer component.
- Backend (demo): Mock Next.js API routes in app/api/ for upload, interview, and feedback.
- AI Integration: lib/gemini.js generates questions and analyzes answers (mocked by default). Real integrations with Gemini/OpenAI or other LLMs can be wired via environment variables.
- Optional Cloud Extras: Google Cloud Speech-to-Text, Auth0, Snowflake integrations scaffolded in lib/* for optional production features.
- Other Libraries: Recharts (charts), Sonner (toasts), lucide-react (icons), react-dropzone (file uploads), and small utilities in lib/utils.js.
Challenges
- Capturing audio
- Key retrievals for Gemini and DigitalOcean
Accomplishments
- Complete mock demo: live audio capture → server-side analysis → interactive feedback dashboard.
- Modular, componentized UI with shadcn/ui and Tailwind, allowing easy extension.
- Polished UX touches: real-time audio visualizer, animated transitions, step/progress indicators, charts.
What We Learned
Given that this was our first hackathon, we learned/improved on skills related to:
- Time Management
- Collaboration Workflow
- User-centric Design
What's Next
Though at the time of submission, we were not able to complete the project, we do plan to:
- Add real-time AI feedback using live speech-to-text transcription.
- Enable production-ready database storage.
- Expand AI question/answer analysis with multiple LLM providers.
- Refine UI/UX for smoother interview experience and better visual feedback.
- Add authentication and user session tracking.
Built With
- css
- javascript
- next.js
- node.js
Log in or sign up for Devpost to join the conversation.