About the project

Inspiration We built Mockly because interview prep often feels awkward, one sided, or just hard to find someone to practice with Most tools just give lists of questions instead of creating real conversation practice. We wanted something that feels closer to having a coach who helps you understand how you answer, listen, and improve in real time.

What it does Mockly creates a realistic interview simulation where the user speaks answers out loud. It listens, gives clear feedback, and helps people build confidence through natural, voice-based practice that feels human instead of scripted.

How we built it We used Next.js 15, Tailwind, and shadcn/ui for the frontend with Framer Motion for smooth transitions. The logic runs through API routes that handle voice playback, transcription, and evaluation. Everything connects in one loop from prompt to feedback.

Challenges we ran into Keeping timing consistent between speech recognition, audio playback, and response evaluation was difficult. We also had to make sure the experience stayed smooth even if something failed, like when audio did not load or speech was unclear.

What we learned We learned that small UX details make a big difference in voice-based tools. Balancing technical reliability with a natural experience is what makes the learning process actually enjoyable.

What’s next We plan to expand Mockly into other practice scenarios such as customer service or presentation training while keeping the same real-time learning flow.

Built With

  • css
  • elevenlabs
  • framer
  • gemini
  • next.js
  • shadcn/ui
  • tailwind
  • webspeech
Share this project:

Updates