Inspiration

The idea for CareerWise came from a simple but frustrating experience: preparing for interviews often feels like guesswork. Most platforms give you a list of questions, but there's no real feedback on how you're performing—especially your body language, tone, or confidence level.

We wanted to build something smarter. What if there was a platform that didn’t just ask questions, but actually watched how you answered and gave real, personalized feedback—like a virtual coach? That’s where CareerWise began.


What it does

CareerWise is an AI-powered career guidance platform that helps users prepare for interviews in a more realistic and effective way.

Here’s what it does:

  • Lets users record mock interviews through webcam and microphone.
  • Analyzes body language using MediaPipe and voice tone using Librosa.
  • Provides real-time feedback on posture, eye contact, and vocal confidence.
  • Helps users build self-awareness and improve their interview skills before the real thing.

How we built it

  • Frontend: Built with React, TypeScript, Vite, and Tailwind CSS for a fast, responsive UI.
  • Backend: Developed using FastAPI and Python, with support for real-time WebSocket connections.
  • Machine Learning:

    • MediaPipe for body pose and gesture detection.
    • Librosa for extracting and analyzing speech characteristics.
    • OpenCV for frame preprocessing.
  • Database: Used Supabase (PostgreSQL) for storing user sessions and feedback data.

  • Communication: WebSocket stream sends base64-encoded video frames from frontend to backend for real-time ML analysis.


Challenges we ran into

  • Black Frame Bug: The frontend camera worked fine, but the backend received completely black frames (mean brightness = 0). After a lot of debugging, we traced it to base64 transmission and decoding issues.
  • WebSocket Connection Issues: Sometimes the WebSocket didn’t connect when recording started. We solved this by refining how and when the connection is established in the component.
  • Multiple Camera Streams: At one point, the app was opening multiple camera streams, causing conflict. We had to manage media lifecycle carefully to fix this.
  • Real-Time ML Performance: Balancing frame rate, processing speed, and UI smoothness was tricky, but worth it.

Accomplishments that we're proud of

  • Successfully built a real-time ML pipeline from browser to backend.
  • Designed a clean, modern, and responsive UI from scratch.
  • Solved tough bugs under pressure—especially around black frames and WebSocket issues.
  • Delivered a working system that feels practical and empowering for users preparing for interviews.
  • Learned how to debug across the full stack and handle real-time data effectively.

What we learned

  • Hands-on experience with real-time communication using WebSockets.
  • How to encode, transmit, and decode media data (video/audio) in a reliable way.
  • Learned to use MediaPipe, OpenCV, and Librosa effectively in a production-like environment.
  • The value of detailed logs and incremental debugging—especially when the issue is hidden deep in the pipeline.
  • Most importantly, we learned how to think like system designers, connecting frontend, backend, and machine learning in one cohesive flow.

What's next for CareerWise

CareerWise is just the beginning. Here’s what we plan next:

  • Add speech-to-text with sentiment analysis for more detailed vocal feedback
  • Deploy it online so users anywhere can try it
  • Dashboard with progress tracking and AI-based improvement tips
  • Integrate mock interview question sets by industry for tailored sessions
  • Make the feedback smarter using LLM-based suggestions for posture, tone, and phrasing

Built With

Share this project:

Updates