EchoLag

feedback
home page
filler words
barista rush
talking to barista

Inspiration

We wanted a safe space to practice high-pressure conversations whether you’re pitching, interviewing, or calming a rushed customer without the awkwardness of practicing on people.

What it does

EchoLag runs immersive scenarios (like the barista rush) in the browser, listens as you speak, highlights filler words live, and auto-submits your take for AI feedback the moment the countdown hits zero.

How we built it

Next.js + React frontend with Tailwind for styling and Framer Motion-style interactions
Web Speech API for low-latency transcription and filler-word detection
Custom 2D barista simulator canvas to keep users engaged while they talk
Context-driven state management to sync audio playback, transcripts, and status toasts
ElevenLabs voice synthesis for realistic barista responses

Challenges

Keeping speech recognition stable across Chrome/Safari while auto-submitting on a hard timer
Balancing animated UI elements (timer coach, simulator, transcript panel) without jank
Designing feedback that motivates users without feeling punitive

Accomplishments we’re proud of

Real-time filler-word highlighting with instant counts and breakdowns
Interactive stick-figure timer that mirrors the user’s countdown anxiety (and smooths out when they relax)
Auto-submit workflow that frees users from manual buttons so they can stay in flow

What we learned

How to pair the Web Speech API with custom React hooks and refs for truly live feedback
Fine-tuning UX to keep users focused on delivery rather than UI clutter
Rapid iteration on animation timing for bite-sized, expressive coaching moments

What’s next

Add scenario switching (interview mockups, investor pitch) with tailored scoring
Personal analytics dashboard to track streaks, filler trends, and confidence metrics over time
Social “practice rooms” so friends can compare takes and encourage each other