NextStep-AI

AI-powered interview practice with real-time posture, speech, and feedback.

Comment

Inspiration

The inspiration for NextStep AI came from a simple but painful observation: students are failing interviews not because they lack skills, but because they lack practice.

Every day, thousands of talented first-generation, rural, and transfer students walk into interviews unprepared — not because they don't want to prepare, but because they don't have access to affordable coaching. Professional interview coaches charge $100–$300 per hour. University career centers are overwhelmed and often underfunded. And existing AI interview tools? They're either basic chatbots that ask generic questions, or expensive enterprise solutions out of reach for the students who need them most.

We wanted to build something different — something free, accessible, and actually useful. An AI career co-pilot that simulates a real interview experience, including body language analysis, and gives students the confidence they need to succeed.

What it does

NextStep AI is a free, privacy-first interview simulator that runs entirely in your browser.

  • You upload your resume (PDF, TXT, or DOCX), and a white animated robot interviewer asks you personalized questions generated from your actual experience — referencing your real projects, technologies, and companies you've worked with.
  • You can answer out loud. The app transcribes your speech in real time, records audio, and tracks filler words like "um," "uh," and "like."
  • While you talk, your webcam feed is analyzed with MediaPipe to track posture and eye contact, giving you gentle, non-nagging alerts if you're slouching for too long.
  • After each answer, the Grok API analyzes your actual transcript and gives you a score, strengths, weaknesses, and an improved example answer.
  • You can choose company-specific interview styles (Google, Amazon, Microsoft) to practice for a specific target.
  • At the end, you get a confidence score combining posture, eye contact, and filler words, a posture timeline graph, and a professional downloadable PDF report with your full performance breakdown.
  • A streak tracker encourages you to keep practicing daily.
  • Everything happens on your device — no accounts, no servers, no tracking.

How we built it

NextStep AI is a fully client-side web app: HTML5, CSS3, and vanilla JavaScript, with no frameworks and no build step.

Technology Stack:

  • Frontend: HTML5, CSS3, Vanilla JavaScript — complete web app, no frameworks, no build steps
  • LLM/NLP: Grok API — question generation, answer analysis, feedback
  • Computer Vision: MediaPipe Pose + OpenCV.js — posture detection, eye contact tracking
  • Speech: Web Speech API (SpeechRecognition, SpeechSynthesis) — speech-to-text, text-to-speech
  • Audio Recording: MediaRecorder API — recording answers for analysis
  • Voice Analysis: Web Audio API — volume, tone, and confidence analysis
  • PDF Generation: html2pdf.js — downloadable interview reports
  • Styling: CSS3 with animations — white robot, dark theme, responsive design
  • Data Storage: localStorage — all data stays on the user's device

Key technical decisions:

  1. Why MediaPipe over OpenCV? MediaPipe runs directly in the browser via WebAssembly, with no server needed. It provides 33 body landmarks at 10–15 FPS on consumer hardware.

  2. Why the Grok API? Strong reasoning capabilities, excellent structured JSON output, and cost-effective for hackathon scale.

  3. Why no backend? Privacy-first design. All data stays in the browser — no accounts, no tracking, no servers.

  4. Why vanilla JavaScript? No build step required, accessible to anyone, and runs directly in the browser.

Challenges we ran into

Challenge 1: Resume Parsing Problem: PDF parsing in the browser is limited. Solution: We built a multi-format extractText() pipeline — TXT via FileReader, PDF via readAsArrayBuffer with regex extraction of Tj/TJ operators, and DOCX via binary + XML extraction of w:t nodes. A printable-ASCII fallback scan handles malformed PDFs.

Challenge 2: Permission Modal — Ask Once, Never Again Problem: Users were prompted for microphone permission on every page load. Solution: We store the permission choice in localStorage. On interview.html load, we check whether permissions are already granted and auto-start the media stream without re-showing the modal.

Challenge 3: Gentle Posture Alerts — Not Nagging Problem: Early versions alerted users every single time they slouched, which got annoying fast. Solution: We built a timeout-based alert system. Alerts only fire when posture is critically poor (under 30%) for more than 15 consecutive seconds, and are rate-limited to once every 45 seconds.

Challenge 4: Question Personalization Problem: Generic questions don't help students actually improve. Solution: We pass the full resume text to the Grok API with structured prompts that explicitly ask it to reference specific technologies, companies, and projects from the resume. We also added company-specific context (Google, Amazon, Microsoft interview styles).

Challenge 5: Real Answer Analysis Problem: Many tools give generic feedback without analyzing what the user actually said. Solution: We transcribe each answer via the Web Speech API, then send the real transcript plus the question to the Grok API for per-answer analysis — returning a score, strengths, weaknesses, and an improved example answer.

Challenge 6: Professional PDF Output Problem: Generating a PDF with all metrics, graphs, and analyses in one polished report. Solution: We used html2pdf.js with A4 settings, 2x scale, and JPEG quality 0.95. The report includes the overall score, posture timeline, question-by-question breakdown, filler word analysis, resume tips, and career alternatives.

Challenge 7: White Robot Animations Problem: Making a CSS robot feel alive without any JavaScript animation libraries. Solution: Pure CSS animations — float (3s cycle), blink (random 3–6s), mouth movement (speaking), lean forward (listening), and nod (on good answers) — with ::after pseudo-elements for shine highlights, and pupils that track mouse movement for a 3D depth effect.

Accomplishments that we're proud of

  • Built a fully working, end-to-end interview simulator — resume parsing, personalized question generation, speech I/O, computer vision, and AI feedback — entirely client-side with zero backend.
  • Got real-time posture and eye contact detection running smoothly in the browser using MediaPipe, without tanking UI performance.
  • Designed a posture alert system that's actually helpful instead of annoying, balancing useful feedback with user experience.
  • Achieved genuinely personalized interview questions by engineering prompts that pull real, specific details from a user's resume instead of generic filler.
  • Shipped a professional, polished PDF report generator that pulls together scores, graphs, and per-question analysis into something a student could realistically use to track their progress.
  • Built a charming, fully animated CSS robot interviewer with zero JavaScript animation libraries.
  • Stayed true to a privacy-first design — no accounts, no servers, no tracking — proving a genuinely useful AI tool doesn't need to harvest user data.

What we learned

  1. Computer Vision Is Hard — But Transformative Real-time posture and eye contact detection with MediaPipe required careful optimization. Running pose estimation at 10–15 FPS while keeping the UI smooth taught us a lot about performance tradeoffs and offloading work to Web Workers.

  2. Speech Is More Complex Than Text Running Speech-to-Text, Text-to-Speech, and audio recording simultaneously pushed us to learn about audio context management, juggling multiple async streams, and building fallbacks (like text input) for when speech APIs aren't supported.

  3. Prompt Engineering Is an Art Generating interview questions that are genuinely personalized to a resume — not just generic filler — took extensive prompt iteration. We learned to structure prompts to the Grok API with clear constraints, examples, and resume context to keep outputs sharp and relevant.

  4. Privacy-First Design Matters Everything runs in the browser. No data leaves the user's device. This taught us the importance of careful localStorage management, blob handling, and designing for user trust from day one.

  5. Human-in-the-Loop Is Essential AI feedback is powerful, but imperfect. We learned the best approach is to offer AI-driven suggestions while always encouraging users to seek human mentorship for final career decisions.

What's next for NextStep-AI

  • Mobile app version for practicing on the go, with the same privacy-first, on-device approach.
  • Mock group interview and panel interview simulation modes.
  • Expanded company library beyond Google, Amazon, and Microsoft, with crowdsourced interview styles from more companies.
  • Multi-language support so non-native English speakers can practice in their preferred language.
  • Optional peer review mode where students can share recordings with mentors or career counselors for human feedback.
  • Deeper resume feedback loop — using interview performance patterns to suggest resume edits that better set up strong answers.
  • Integration with calendar apps to schedule and remind users about practice sessions, reinforcing the streak system.

Built With

  • 33-point-body-tracking-?-opencv.js-?-skeleton-overlay-and-image-processing-?-web-speech-api-?-speech-to-text-transcription
  • animations
  • answer-analysis
  • api
  • audio
  • css3
  • deepseek
  • feedback-?-mediapipe-pose-?-real-time-posture-detection
  • fonts
  • github
  • google
  • html2pdf.js
  • html5
  • javascript
  • localstorage
  • mediapipe
  • mediarecorder
  • opencv.js
  • pose
  • speech
  • text-to-speech-questions-?-mediarecorder-api-?-recording-user-answers-for-analysis-?-web-audio-api-?-voice-volume-and-tone-analysis-?-html2pdf.js-?-professional-pdf-report-generation-?-html5-?-page-structure-?-css3-?-styling
  • v4
  • vercel
  • web
Share this project:

Updates