MocklyCV

MocklyCV is an AI-powered interview coach that simulates realistic job interviews with voice and text, then delivers personalized feedback, insights, and improvement recommendations.

Comment

MocklyCV

Inspiration

Technical interviews are stressful, especially for junior and mid-level developers who rarely get realistic practice opportunities. Most platforms focus only on coding challenges, but real interviews also evaluate communication, clarity, confidence, and problem-solving under pressure.

MocklyCV was inspired by the idea of creating a more human and interactive interview preparation experience using AI-powered conversations, voice interaction, and personalized feedback.

What it does

MocklyCV is an AI-powered mock interview platform that allows users to practice interviews through both text and voice interactions.

Users can:

  • Upload and analyze their CV
  • Generate AI-driven interview sessions tailored to a specific role
  • Practice interviews using voice or text
  • Receive real-time AI-generated questions
  • Get detailed interview evaluations and performance insights
  • Review interview transcripts and actionable feedback
  • Track previous interview sessions through a personalized dashboard

The platform evaluates areas such as:

  • Communication
  • Technical depth
  • Clarity
  • Structure of responses
  • Confidence and conversational quality

MocklyCV also includes speech-to-text transcription, AI-generated feedback summaries, and responsive dashboards for reviewing performance history.

How I built it

MocklyCV was built using a modern full-stack architecture focused on real-time interaction, scalability, and responsive user experience.

Frontend

  • React
  • TypeScript
  • Vite
  • TailwindCSS
  • Radix UI
  • shadcn/ui

Backend & Infrastructure

  • Supabase
  • Edge Functions
  • Supabase Database

AI & Voice Technologies

  • Groq API for interview generation and AI-powered feedback evaluation
  • Deepgram Nova-2 for speech-to-text transcription
  • Browser MediaRecorder API for voice capture
  • Web Audio APIs for microphone and audio processing

Additional Technologies

  • React Router
  • React Hook Form
  • Zod
  • Recharts
  • Motion

The application was designed with a component-based architecture and responsive dashboard system to ensure a clean experience across desktop and mobile devices.

Special attention was given to the voice interview experience, including browser audio handling, MIME type fallbacks, microphone optimization, and transcription reliability.

Challenges I ran into

One of the biggest challenges was building a reliable voice interview experience directly in the browser.

Different browsers support different audio codecs and recording formats, which caused inconsistent transcription quality. In some cases, audio recordings reached Deepgram successfully but returned empty transcripts due to codec incompatibilities or low audio capture quality.

To solve this, I implemented:

  • MIME type fallbacks for browser compatibility
  • Noise suppression and auto gain control
  • Audio validation before API submission
  • Improved microphone constraints
  • Better error handling and retry flows
  • State synchronization between recording and transcription systems

Another challenge was designing AI feedback that felt useful instead of generic. I worked on structuring the evaluation system so users receive actionable recommendations instead of only numerical scores.

Also focused heavily on responsive UI design to ensure the platform works smoothly across desktop and mobile devices without visual clutter.

Accomplishments that I am proud of

Some accomplishments I am especially proud of include:

  • Successfully integrating real-time voice transcription
  • Building a stable browser-based audio pipeline
  • Creating a modern and clean UI without overwhelming users
  • Supporting both voice and text interview modes
  • Designing a scalable interview session architecture
  • Implementing detailed AI-driven interview evaluations

The project evolved from a simple mock interview concept into a much more complete interview preparation platform.

What I learned

During the development of MocklyCV, Ilearned a lot about:

  • Browser audio APIs and MediaRecorder limitations
  • Speech-to-text processing workflows
  • AI prompt engineering
  • State management for real-time applications
  • Designing scalable frontend architectures
  • Building accessible and responsive user interfaces
  • Optimizing API usage and reducing unnecessary requests
  • Improving UX for conversational AI systems

What's next for MocklyCV

I plan to continue expanding MocklyCV with more advanced AI interview capabilities and personalized learning tools.

Future plans include:

  • Adaptive interview difficulty
  • Emotion and speaking confidence analysis
  • Coding interview environments
  • Personalized improvement roadmaps
  • AI-generated study plans
  • Team and recruiter dashboards
  • Better analytics and progress tracking

The long-term vision is to turn MocklyCV into a complete AI-powered career preparation platform for developers and tech professionals.

Built With

  • api
  • audio
  • deepgram
  • form
  • groq
  • hook
  • mediarecorder
  • motion
  • radix
  • react
  • recharts
  • router
  • shadcn/ui
  • supabase
  • tailwindcss
  • typescript
  • ui
  • vite
  • web
  • zod
Share this project:

Updates

Submission history