PitchPerfect is a modern web application that helps you become a more confident, effective speaker using AI-driven analysis and actionable feedback. Built with Next.js, it features a seamless user experience for recording/uploading presentations, instant AI analysis, and a beautiful dashboard for actionable insights.
- Hero Landing Page: Engaging introduction, clear CTAs, and trust signals
- Navigation & Footer: Consistent, accessible, and brand-aligned across all pages
- Mobile-First: Fully responsive layouts and custom scrollbars for mobile usability
- In-Browser Recording: Uses MediaRecorder API for direct audio capture
- File Upload: Supports MP3, WAV, M4A, and more
- Live Timer & Playback: Users can review before submitting
- Animated, Accessible UI: Modern gradients, transitions, and clear feedback
- Backend Integration: Audio is sent to a Python backend for processing
- Transcription: Uses OpenAI Whisper for accurate speech-to-text
- NLP Analysis: Detects filler words, analyzes pace, and scores vocal confidence
- JSON Output: Returns structured, LLM-ready results for further processing
- ML Pipeline (Ongoing): The machine learning pipeline is currently under development. The files in the
backend/directory (such asacoustic_features.py,llm_feedback.py,text_analysis.py, andtranscription.py) serve as references and prototypes for the evolving ML features.
- Sample Analysis: Visualizes what users receive after analysis
- Metrics Cards: Overall score, pace, filler words, confidence
- Custom Charts: SVG-based pace chart, filler word heatmap
- Personalized Coaching: Before/after cards and transcript highlights
- Login Page: GitHub and Google sign-in options (simulated for demo)
- Loading States: Animated spinners and clear feedback
- Privacy Messaging: Terms and privacy reminders
- Component-Level READMEs: Every major component (navbar, footer, record, login, dashboard, etc.) is documented for easy onboarding and extension
- Professional Codebase: Modular, readable, and ready for production
pitchperfect/
├── app/
│ ├── page.js # Home/Landing page
│ ├── not-found/ # Custom 404 page
│ ├── dashboard/ # Demo dashboard
│ ├── record/ # Record/upload page
│ ├── features/ # Features page
│ └── how-it-works/ # How it works page
├── components/
│ ├── navbar.jsx # Navigation bar
│ ├── footer.jsx # Footer
│ ├── record.jsx # Record/upload UI
│ ├── login.jsx # Login page
│ └── dashboard/ # Dashboard components
│ └── features/ # Features content
│ └── how-it-works/ # How it works content
│ └── ...
├── backend/ # Python backend (ML pipeline in progress; files are reference/prototype)
├── public/ # Static assets
├── styles/ # Global and module CSS
└── README.md # This documentation
- Record or Upload: Users can record audio in-browser or upload an existing file.
- AI Analysis: Audio is sent to the backend, transcribed, and analyzed for filler words, pace, and confidence.
- Instant Feedback: Users receive a dashboard with scores, charts, coaching tips, and a highlighted transcript.
See how-it-works.md for a detailed workflow.
- AI-Powered Transcription: Fast, accurate, and multi-format
- Filler Word Detection: Timeline and density analysis
- Speaking Pace Analysis: WPM metrics and visualizations
- Confidence Scoring: Vocal analysis and improvement tips
- Personalized Coaching: Actionable before/after cards
- Transcript Highlights: Key phrases and fillers marked for review
- Privacy-First: No account required, secure processing
- ML Pipeline (Ongoing): Advanced ML features are being actively developed. See the
backend/directory for reference scripts and prototypes.
See features.md for a full list.
- Sample Metrics: See what real analysis looks like
- Charts & Heatmaps: Custom SVG and CSS for fast, beautiful visuals
- Personalized Tips: Actionable feedback for every user
- Transcript Highlights: Easy review of strengths and areas to improve
See demo.md for details.
- GitHub & Google: Simulated login flows for demo purposes
- Loading States: Animated feedback for user actions
- Privacy Messaging: Clear terms and privacy reminders
See login.md for more info.
navbar.md: Navigation barfooter.md: Footerrecord.md: Record/upload UIpage.md: Home pagelogin.md: Login pagedemo.md: Demo dashboardhow-it-works.md: Workflowfeatures.md: Features
- Install dependencies
npm install # or yarn install - Run the development server
npm run dev # or yarn dev - Open http://localhost:3000 in your browser
- Integrate real authentication (e.g., NextAuth.js)
- Connect dashboard to live backend analysis
- Add user accounts and history
- Expand coaching and export features
- Continue ML Pipeline Development: Expand and integrate the machine learning backend for deeper analysis and smarter feedback.
Update: repository maintenance commit on 2026-04-23.