• 

• 

• 

Yapp

Yapp less. Speak Better.

Inspiration

A lot of smart ideas fall apart when it is time to actually say them out loud. People ramble, rely on filler words, pause awkwardly, or hide behind jargon without even realizing it. I wanted to build something that could help with that in a way that felt fun, not preachy.

That became Yapp, an AI speech coach with a playful pop-art personality. Instead of making speech coaching feel like a boring dashboard, I wanted it to feel sharp, energetic, and memorable while still being genuinely useful.

What it does

Yapp is an AI speech coach built to help people speak more clearly and with more confidence. It focuses on the things that usually weaken a talk or pitch, like filler words, awkward pacing, and dense jargon, then gives feedback in a way that feels approachable and a little playful.

Right now, the working core flow is:

• Users can sign in and enter the studio
• Record a speech directly in the browser
• Get analysis for pace, filler words, duration, and score
• Review AI-generated coaching or roast-style feedback
• Revisit previous sessions in history
• Preview a kinetic motion recap generated from their speech data

The core speech coach, roast mode, and analytics are live today, and a few more experimental tools are still being built out. This is very much version one, but the foundation is there.

How I built it

I built Yapp as a full-stack web app, with a lot of attention going into both the technical side and the personality of the product.

• Frontend: Next.js App Router with React and Tailwind CSS
• Backend: Convex DB for auth, persistence, storage, and server-side actions
• Speech flow: browser microphone recording plus live speech recognition for transcript and filler detection
• Feedback engine: Convex actions calling an external AI model for coaching and roast-style feedback
• Motion layer: Remotion for kinetic animation video and recap previews
• Design: the full brand identity and UI were designed from scratch in Figma and then built directly into code

The app currently comes together through a few main surfaces:

• Landing page for the brand story and product pitch
• Studio for the main coaching tools
• Speech Coach as the primary live feature
• Results and history pages for feedback and progress review
• Remotion-powered kinetic motion preview for turning speech into a visual artifact

Challenges I ran into

One of the biggest challenges was scope. This idea can grow in a lot of directions very quickly, but in a hackathon setting I had to keep pulling it back to the strongest core experience instead of trying to build everything at once.

Some of the harder parts were:

• Coordinating browser recording, speech recognition, transcript parsing, and filler detection in real time
• Turning rough speech signals into metrics that feel useful and understandable
• Handling authentication, persistence, and AI feedback generation cleanly across client and server boundaries
• Designing a product that feels playful and bold without losing trust or usability
• Building a motion-driven experience with Remotion so the recap feels like part of the product, not a disconnected extra

Accomplishments that I'm proud of

I am proud that Yapp is not just an idea or a landing page. It already has a real end-to-end product loop and a personality that feels distinct.

• I built a branded experience from scratch instead of relying on generic templates
• I shipped a live speech coach with recording, analytics, history, and AI feedback
• I created a roast mode that gives the product a memorable personality
• I integrated Remotion to turn speech performance into a kinetic animated recap
• I built the full app on a modern stack with Next.js, Tailwind CSS, Convex, and Figma-driven design work

What I like most is that it does not feel stitched together. The coaching, branding, and motion all feel like part of the same product.

What I learned

This project reminded me that a strong product is not about stuffing in more features. It is about making one core workflow feel clear, useful, and memorable.

I also learned:

• Product polish has a huge impact on how technical work is perceived
• Motion can make analytics feel emotional and shareable
• A strong brand identity helps a project stand out quickly in a hackathon setting
• Full-stack tools like Convex make it much easier to move fast without losing structure
• Figma-to-code discipline helps keep the product visually consistent even under tight time pressure

What's next for Yapp

The current version proves the idea. The next step is to take Yapp from a strong hackathon build into a more complete communication product.

What I want to build next:

• Expand the currently experimental tools such as jargon roasting, tone analysis, and visual aid syncing
• Improve the coaching pipeline with better scoring and deeper speech intelligence
• Add real export and sharing for the kinetic recap experience
• Strengthen progress tracking so users can measure improvement over time
• Continue refining the design system and overall product polish

Yapp started as a hackathon project, but I can already see the bigger direction for it. The goal is simple: help people speak with more clarity, confidence, and impact.

Built With

• convexdb
• figma
• framer-motion
• gemini
• next.js
• remotion
• tailwindcss