TalkKing is an AI-powered communication coaching web application that helps users improve their public speaking, clarity, vocal quality, and confidence. Users can record audio, receive instant AI-generated analysis, and unlock personalized suggestions and detailed score breakdowns.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Language | TypeScript |
| Styling | Tailwind CSS + CSS Variables (dark/light themes) |
| UI Components | shadcn/ui |
| Charts | Recharts (Radar Chart) |
| Animations | Framer Motion |
| Auth & Database | Supabase |
| Icons | Lucide React |
- Node.js 18+
- npm or pnpm
cd app
npm installnpm run devOpen http://localhost:3000 in your browser.
npm run buildapp/
├── app/ # Next.js App Router pages
│ ├── (main)/ # Route group — shared sidebar + header layout
│ │ ├── layout.tsx # Shared layout (sidebar, max-w-6xl wrapper)
│ │ ├── dashboard/ # Main dashboard
│ │ ├── session/ # Practice session page
│ │ ├── history/ # Session history
│ │ ├── achievements/ # Achievements page
│ │ ├── profile/ # User profile
│ │ └── feedback/[sessionId]/ # Per-session AI feedback
│ ├── demo/ # Public demo (no sign-up required)
│ ├── login/ # Login page
│ ├── signup/ # Sign-up page
│ ├── auth/callback/ # Supabase OAuth callback
│ ├── early-access/ # Early access waitlist page
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Landing page
│ └── globals.css # Global CSS + theme tokens
├── components/ # Shared UI components
│ ├── theme-provider.tsx # Dark/light theme provider
│ └── theme-toggle.tsx # Theme toggle button
├── lib/
│ └── supabase.ts # Supabase client setup
├── mocks/
│ └── data.ts # Mock data for demo & development
├── services/
│ └── mockApi.ts # Mock API: demo service, live recording service
└── types/
└── index.ts # Shared TypeScript types
- Record audio directly in the browser
- Real-time waveform visualizer during recording
- Live filler word detection (um, like, you know, so…)
- "I'm Freezing" panic button with contextual coaching tips
- AI analysis across 6 dimensions: Clarity, Vocal Quality, Musicality, Boldness, Pace, Pause Quality
- Overall score card with radar chart (visible to all users)
- Dimension score cards — scores locked (
??) for unauthenticated users - Blurred Personalized Suggestions + Overall Feedback sections
- Gradient fade overlay with floating unlock CTA panel
- Sign Up / Log In CTAs with social proof
- Dashboard with session overview
- Practice session recording and analysis
- Session history and progress tracking
- Achievements system
- User profile management
- Per-session AI feedback page
- Full dark and light mode support
- Brand colors: Lime
#C8FF2E(dark), Purple#6B62B8(light) - Consistent page width via shared route group layout
| Flag | Location | Description |
|---|---|---|
SHOW_RECORDING_TYPE_PANEL |
app/demo/page.tsx |
Show/hide audio vs. video toggle panel. Currently false (audio-only mode). |
Create a .env.local file in the app/ directory:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key| Token | Dark Mode | Light Mode |
|---|---|---|
| Accent / CTA | #C8FF2E (Lime) |
#6B62B8 (Purple) |
| Background | #0B0B0D |
#F9F9F9 |
| Foreground | #FFFFFF |
#0B0B0D |